Open In App

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

Last Updated : 07 Mar, 2024
Like Article

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.


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.


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 (
      <View style={styles.container}>
            <Button onPress={openMenu} mode="outlined">
              Show menu
            onPress={() => {
              Alert.alert('Action : ', 'Print');
            onPress={() => {
              Alert.alert('Action : ', 'Forward');
            onPress={() => {
              Alert.alert('Action : ', 'Backward');
            onPress={() => {
              Alert.alert('Action :', 'Save');
export default MenuExample;
const styles = StyleSheet.create({
  container: {
    padding: 50,
    flexDirection: 'row',
    justifyContent: 'center',
    height: 200,


import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import MenuExample from './components/Menu';
const App: () => Node = () => {
  return (
      <MenuExample />
export default App;

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

npx react-native run-android


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads