Open In App

How to add a Menu in react-native using Material Design ?

Last Updated : 18 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, 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.

folder_structure

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.

JavaScript 
// 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.

JavaScript 
// 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.

JavaScript 
{/* 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.

JavaScript 
// 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.

JavaScript 
// 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:

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:

JavaScript 
// 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:

JavaScript 
// 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:



Next Article
What are props in React Native ?
author
samiksharanjan
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox