How to add a Menu in react-native using Material Design ?
In this article, we will see how to create a menu in react-native. To make a menu, we will use the material design library, i.e., react-native-paper. The menu contains a list of options that appear temporarily. In our project, we will create a button, and the menu will appear on the click of that button.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.
It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.
Now go into your project folder, i.e., react-native-demo
cd app-nameProject Structure:
Step 2: Run Application
Start the server by using the following command.
npx expo startThen, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
- For iOS users, simply scan the QR code using the Camera app.
- If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.
Step 3: Create a new component folder (optional)
You can create a new folder called "components" to organize all component files better, as mentioned in the image below. Alternatively, you can write the component code directly in App.js.
Step 4: Working with Menu.js
In Menu.js, we have imported, Menu item directly from the react-native-paper library. It uses the following props:
Prop | Description |
|---|---|
visible | It is required to show or hide the menu. |
anchor | To open the menu, the anchor is required. It can be a button, text, label, image, etc. |
onDismiss | It is a Callback function called when the Menu is dismissed. The visible prop needs to be updated when this is called. |
- Import libraries: Import required libraries at the top of the file.
// Import necessary hooks and components from React and React Native
import { useState } from 'react'; // useState hook for managing state
import {
View, // View component for layout
StyleSheet, // StyleSheet for styling components
Alert // Alert component for showing alerts
} from 'react-native'; // Core components from React Native
import {
Button, // Button component for user interaction
Menu, // Menu component for displaying a dropdown menu
Provider // Provider component to wrap the menu and manage its state
} from 'react-native-paper'; // Components from react-native-paper library
- StyleSheet: Create a StyleSheet to style components like a container.
// Define styles for the component
const styles = StyleSheet.create({
container: {
padding: 50, // Add padding around the container
flexDirection: 'row', // Arrange children in a row
justifyContent: 'center', // Center children horizontally
height: 200, // Set the height of the container
},
});
- Menu: This component is used to display a dropdown menu.
{/* Menu component */}
<Menu
visible={visible} // Control menu visibility
onDismiss={closeMenu} // Close menu when dismissed
anchor={
// Button to open the menu
<Button onPress={openMenu} mode="outlined">
Show menu
</Button>
}>
{/* Menu item for "Print" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Print'); // Show alert for "Print"
}}
title="Print" // Title of the menu item
/>
{/* Menu item for "Forward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Forward'); // Show alert for "Forward"
}}
title="Forward" // Title of the menu item
/>
{/* Menu item for "Backward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Backward'); // Show alert for "Backward"
}}
title="Backward" // Title of the menu item
/>
{/* Menu item for "Save" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action :', 'Save'); // Show alert for "Save"
}}
title="Save" // Title of the menu item
/>
</Menu>
- closeMenu & openMenu: Functions to Close & Open menu.
// Function to close the menu
const closeMenu = () => setVisible(false);
// Function to open the menu
const openMenu = () => setVisible(true);
- useState: The useState hook initializes the state variable 'visible' to false and provides a function 'setVisible' to update its value.
// State to manage the visibility of the menu
const [visible, setVisible] = useState(false);
Now, wrap the two Menu components with a View component, again wrap with Provider, and return from the MenuExample component. Also, ensure to export the MenuExample.
Menu.js:
// Import necessary hooks and components from React and React Native
import { useState } from 'react'; // useState hook for managing state
import {
View, // View component for layout
StyleSheet, // StyleSheet for styling components
Alert // Alert component for showing alerts
} from 'react-native'; // Core components from React Native
import {
Button, // Button component for user interaction
Menu, // Menu component for displaying a dropdown menu
Provider // Provider component to wrap the menu and manage its state
} from 'react-native-paper'; // Components from react-native-paper library
// Define the MenuExample functional component
const MenuExample = () => {
// State to manage the visibility of the menu
// useState hook initializes the state variable 'visible' to false
// and provides a function 'setVisible' to update its value
const [visible, setVisible] = useState(false);
// Function to close the menu
const closeMenu = () => setVisible(false);
// Function to open the menu
const openMenu = () => setVisible(true);
// Return the UI for the component
return (
// Provider component from react-native-paper to wrap the menu
<Provider>
{/* Container for the menu */}
<View style={styles.container}>
{/* Menu component */}
<Menu
visible={visible} // Control menu visibility
onDismiss={closeMenu} // Close menu when dismissed
anchor={
// Button to open the menu
<Button onPress={openMenu} mode="outlined">
Show menu
</Button>
}>
{/* Menu item for "Print" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Print'); // Show alert for "Print"
}}
title="Print" // Title of the menu item
/>
{/* Menu item for "Forward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Forward'); // Show alert for "Forward"
}}
title="Forward" // Title of the menu item
/>
{/* Menu item for "Backward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Backward'); // Show alert for "Backward"
}}
title="Backward" // Title of the menu item
/>
{/* Menu item for "Save" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action :', 'Save'); // Show alert for "Save"
}}
title="Save" // Title of the menu item
/>
</Menu>
</View>
</Provider>
);
};
// Export the MenuExample component as the default export
export default MenuExample;
// Define styles for the component
const styles = StyleSheet.create({
container: {
padding: 50, // Add padding around the container
flexDirection: 'row', // Arrange children in a row
justifyContent: 'center', // Center children horizontally
height: 200, // Set the height of the container
},
});
Step 5: Working with App.js
Now call this MenuExample Component in the main "App" Component in App.js.
App.js:
// Import the View component from the react-native library
import { View } from 'react-native';
// Import the MenuExample component from the components folder
import MenuExample from './components/Menu';
// Define the main App component
const App = () => {
return (
// Render a View container
<View>
{/* Render the MenuExample component inside the View */}
<MenuExample />
</View>
);
};
// Export the App component as the default export of this file
export default App;
Or
You can write the whole code in one file, i.e, App.js.
Complete Source Code:
App.js:
// Import necessary hooks and components from React and React Native
import { useState } from 'react'; // useState hook for managing state
import {
View, // View component for layout
StyleSheet, // StyleSheet for styling components
Alert // Alert component for showing alerts
} from 'react-native'; // Core components from React Native
import {
Button, // Button component for user interaction
Menu, // Menu component for displaying a dropdown menu
Provider // Provider component to wrap the menu and manage its state
} from 'react-native-paper'; // Components from react-native-paper library
// Define the MenuExample functional component
const MenuExample = () => {
// State to manage the visibility of the menu
// useState hook initializes the state variable 'visible' to false
// and provides a function 'setVisible' to update its value
const [visible, setVisible] = useState(false);
// Function to close the menu
const closeMenu = () => setVisible(false);
// Function to open the menu
const openMenu = () => setVisible(true);
// Return the UI for the component
return (
// Provider component from react-native-paper to wrap the menu
<Provider>
{/* Container for the menu */}
<View style={styles.container}>
{/* Menu component */}
<Menu
visible={visible} // Control menu visibility
onDismiss={closeMenu} // Close menu when dismissed
anchor={
// Button to open the menu
<Button onPress={openMenu} mode="outlined">
Show menu
</Button>
}>
{/* Menu item for "Print" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Print'); // Show alert for "Print"
}}
title="Print" // Title of the menu item
/>
{/* Menu item for "Forward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Forward'); // Show alert for "Forward"
}}
title="Forward" // Title of the menu item
/>
{/* Menu item for "Backward" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action : ', 'Backward'); // Show alert for "Backward"
}}
title="Backward" // Title of the menu item
/>
{/* Menu item for "Save" action */}
<Menu.Item
onPress={() => {
Alert.alert('Action :', 'Save'); // Show alert for "Save"
}}
title="Save" // Title of the menu item
/>
</Menu>
</View>
</Provider>
);
};
// Define the main App component
const App = () => {
return (
// Render a View container
<View>
{/* Render the MenuExample component inside the View */}
<MenuExample />
</View>
);
};
// Export the App component as the default export of this file
export default App;
// Define styles for the component
const styles = StyleSheet.create({
container: {
padding: 50, // Add padding around the container
flexDirection: 'row', // Arrange children in a row
justifyContent: 'center', // Center children horizontally
height: 200, // Set the height of the container
},
});
Output:
