Adding a Menu in react-native using Material Design

Last Updated : 19 Feb, 2026

In React Native, a menu is used to display a list of options temporarily when the user interacts with a button or element. To create a menu with a modern and consistent design, we use the react-native-paper library, which follows Material Design guidelines.

  • The react-native-paper Menu component allows us to display multiple options in a popup format.
  • The menu appears when the user clicks a button and disappears after selecting an option.
  • It helps improve user experience by organizing actions in a clean and accessible way.

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.

1. 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.

2. For iOS users, simply scan the QR code using the Camera app.

3. 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:

  • 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:

Comment

Explore