Popup Menu Overflow Menu in React Navigation React Native

Popup menu also known as Overflow menu is used in many android and iOS applications to show extra navigation options. The Popup menu is present on Top Right side of screen in Action Bar. The Icon of Popup menu is Vertically three white dotted icon. When use press on this icon a Popup men will appear on screen overflowing action title bar. In react native we would use react-native-material-menu NPM package library along with React Navigation to create beautiful material style popup menu. So in this tutorial we would create Popup Menu Overflow Menu in React Navigation React Native Android iOS app tutorial.

Contents in this project Create Popup Menu Overflow Menu in React Navigation React Native Android iOS App:

1. As we all know we are using React Navigation library to create multiple activity screen structure in current project. I’ve already make a tutorial on React Navigation Installation process. Here is the link of my installation guide of React Native. Open the link and follow Step 1, 2 & 3.

2. After following above steps, Next step is to install react-native-material-menu library in our react native project. So open your current react native project Root directory in Command Prompt or Terminal and execute below command.

Screenshot:

Screenshot after done installation:

3. Here you go friends, Now the installation part has finished. Next step is to start coding for application. So open your project’s main App.js file and import Alert, Image, View, Text, TouchableOpacity, SafeAreaView, NavigationContainer, createStackNavigator, react-native-gesture-handler and Menu, {MenuItem, MenuDivider} component.

4. Create a new functional component named as CustomMenu with Props argument. This is our Popup menu View. In this functional component first we would display the overflow menu icon which is called from HTTP URL. Then we would use the MenuItem to create Items inside overflow menu.

Screenshot of Overflow menu:

5. Creating a functional component named as HomeScreen. This is our first screen for app.

6. Creating createStackNavigator() object named as Stack. We would use Stack to create and define screens and their customizing options in application.

7. Creating function App. This is the function where we would define all the Screens and Navigational components. In the return section first we would define NavigationContainer -> Stack.Navigator -> Call the CustomMenu component to show the Overflow menu.

8. Now finally we would call our export default method to call the App on application start.

9. Complete Source Code for App.js file class:

Screenshots:

Popup Menu Overflow Menu in React Navigation React Native

2 Comments

  1. Could you please make tutorial on Auth flow, header customisation and theming on React navigation 5.

Leave a Reply

Your email address will not be published. Required fields are marked *