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

React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI’s for both platforms.

Prerequisites:

• Basic knowledge of reactjs.
• Html, css and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on emulator (install).

Approach: In this article, we will see that how to create a menu in react-native. To create a menu we will use material design library i.e. react-native-paper. Menu contains a list of options that appear temporarily. In our project, we will create a button and on click of that button, menu will appear. we will the implementation step by step.

Below is the step by step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Install react-native paper using the following command:

npm install react-native-paper

Step 3: Create a components folder inside your project. Inside components folder create a file Menu.js

Project Structure: It will look like this.

Implementation: Write down the code in respective files.

In Menu.js, we have imported, Menu item directly from react-native-paper library. It uses following props :

• visible: It props is required to show or hide the menu.
• anchor: To open the menu, anchor is required. In can be a button, text, label, image etc.
• onDismiss: It is a Callback function called when Menu is dismissed. The visible prop needs to be updated when this is called.

Menu.js

import React, { useState } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Button, Menu, Provider } from 'react-native-paper';

const MenuExample = () => {
  const [visible, setVisible] = useState(false);

  const closeMenu = () => setVisible(false);
  const openMenu = (v) => setVisible(true);
  return (
    <Provider>
      <View style={styles.container}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={
            <Button onPress={openMenu} mode="outlined">
              Show menu
            </Button>
          }>
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Print');
            }}
            title="Print"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Forward');
            }}
            title="Forward"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action : ', 'Backward');
            }}
            title="Backward"
          />
          <Menu.Item
            onPress={() => {
              Alert.alert('Action :', 'Save');
            }}
            title="Save"
          />
        </Menu>
      </View>
    </Provider>
  );
};

export default MenuExample;

const styles = StyleSheet.create({
  container: {
    padding: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    height: 200,
  },
});

App.js

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';

import MenuExample from './components/Menu';

const App: () => Node = () => {
  return (
    <View>
      <MenuExample />
    </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output: