How to use Popup Menu in React Native?

Published On: 08/07/2022 | Category: React Native

Hi Guys,

This article will provide example of how to add popup menu in react native. if you have question about react native popup menu example then I will give simple example with solution. I would like to show you popup menu example in react native. you will learn how to implement popup menu in react native. Here, Creating a basic example of how to create popup menu in react native.

Let's start following example:

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp
Step 2: Install and Setup

First of all you have to install react-native-popup-menu package.

npm install react-native-popup-menu --save
Step 3: App.js

In this step, You will open the App.js file and put the code.

import React from 'react';
import { MenuProvider } from 'react-native-popup-menu';
import PopupMenu from './components/PopupMenu';

const App = () => {
    return (
            <PopupMenu />

export default App;
Step 4: PupupMenu.js In this step, you will create a Components folder and create a file named PupupMenu.js in it and put the code.
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import {
} from 'react-native-popup-menu';

const PopupMenu = () => {
    return (
        <View style={styles.container}>
                    <TouchableOpacity style={styles.menuButton}>
                        <Text style={styles.text}>PupUp Menu</Text>
                    <MenuOption onSelect={() => alert(`Save`)} text='Save' />
                    <MenuOption onSelect={() => alert(`Delete`)} >
                        <Text style={{ color: 'red' }}>Delete</Text>
                    <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    menuButton: {
        backgroundColor: 'red',
        paddingVertical: 10,
        paddingHorizontal: 30,
        borderRadius: 10,
    text: {
        color: '#FFF',

export default PopupMenu;
Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...