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.
|
1
|
npm install react–native–material–menu —save
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
|
import * as React from ‘react’;
import { Alert, Image, View, Text, TouchableOpacity, SafeAreaView } from ‘react-native’;
import {NavigationContainer} from ‘@react-navigation/native’;
import {createStackNavigator} from ‘@react-navigation/stack’;
import ‘react-native-gesture-handler’;
import Menu, {MenuItem, MenuDivider} from ‘react-native-material-menu’;
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
const CustomMenu = (props) => {
let _menu = null;
return (
<View style={props.menustyle}>
<Menu
ref={(ref) => (_menu = ref)}
button={
props.isIcon ? (
<TouchableOpacity onPress={() => _menu.show()}>
<Image
source={{
uri:
‘/wp-content/uploads/2020/12/menu_icon.png’,
}}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
) : (
<Text
onPress={() => _menu.show()}
style={props.textStyle}>
{props.menutext}
</Text>
)
}>
<MenuItem onPress={() => {Alert.alert(‘PopUp Menu Button Clicked…’)}}>
Menu Item 1
</MenuItem>
<MenuItem disabled>Disabled Menu Item 2</MenuItem>
<MenuDivider />
<MenuItem onPress={() => {Alert.alert(‘PopUp Menu Button Clicked…’)}}>
Menu Item 3
</MenuItem>
</Menu>
</View>
);
};
|
Screenshot of Overflow menu:
5. Creating a functional component named as HomeScreen. This is our first screen for app.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const HomeScreen = ({navigation, route}) => {
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 16, justifyContent: ‘center’, alignItems: ‘center’}}>
<Text style={{ fontSize: 24}}> Home Page </Text>
</View>
</SafeAreaView>
);
};
|
6. Creating createStackNavigator() object named as Stack. We would use Stack to create and define screens and their customizing options in application.
|
1
|
const Stack = createStackNavigator();
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName=“HomeScreen”
screenOptions={({route, navigation}) => ({
headerRight: () => (
<CustomMenu
menutext=“Menu”
menustyle={{marginRight: 14}}
textStyle={{color: ‘white’}}
navigation={navigation}
route={route}
isIcon={true}
/>
),
})}>
<Stack.Screen
name=“HomeScreen”
component={HomeScreen}
options={{
title: ‘Home Page’,
headerStyle: {
backgroundColor: ‘#00C853’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
|
8. Now finally we would call our export default method to call the App on application start.
|
1
|
export default App;
|
9. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import * as React from ‘react’;
import { Alert, Image, View, Text, TouchableOpacity, SafeAreaView } from ‘react-native’;
import {NavigationContainer} from ‘@react-navigation/native’;
import {createStackNavigator} from ‘@react-navigation/stack’;
import ‘react-native-gesture-handler’;
import Menu, {MenuItem, MenuDivider} from ‘react-native-material-menu’;
const CustomMenu = (props) => {
let _menu = null;
return (
<View style={props.menustyle}>
<Menu
ref={(ref) => (_menu = ref)}
button={
props.isIcon ? (
<TouchableOpacity onPress={() => _menu.show()}>
<Image
source={{
uri:
‘/wp-content/uploads/2020/12/menu_icon.png’,
}}
style={{width: 30, height: 30}}
/>
</TouchableOpacity>
) : (
<Text
onPress={() => _menu.show()}
style={props.textStyle}>
{props.menutext}
</Text>
)
}>
<MenuItem onPress={() => {Alert.alert(‘PopUp Menu Button Clicked…’)}}>
Menu Item 1
</MenuItem>
<MenuItem disabled>Disabled Menu Item 2</MenuItem>
<MenuDivider />
<MenuItem onPress={() => {Alert.alert(‘PopUp Menu Button Clicked…’)}}>
Menu Item 3
</MenuItem>
</Menu>
</View>
);
};
const HomeScreen = ({navigation, route}) => {
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 16, justifyContent: ‘center’, alignItems: ‘center’}}>
<Text style={{ fontSize: 24}}> Home Page </Text>
</View>
</SafeAreaView>
);
};
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName=“HomeScreen”
screenOptions={({route, navigation}) => ({
headerRight: () => (
<CustomMenu
menutext=“Menu”
menustyle={{marginRight: 14}}
textStyle={{color: ‘white’}}
navigation={navigation}
route={route}
isIcon={true}
/>
),
})}>
<Stack.Screen
name=“HomeScreen”
component={HomeScreen}
options={{
title: ‘Home Page’,
headerStyle: {
backgroundColor: ‘#00C853’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
|
Screenshots:
