Create navigation drawer with nested navigation React Native.
Steps to follow for creating the navigation drawer .
- create a drawer content .
- npm i @react-navigation/drawer
import React from ‘react’;
import { SafeAreaView, View, StyleSheet, Text } from ‘react-native’;
import { DrawerContentScrollView, DrawerItem } from ‘@react-navigation/drawer’;
const CustomSidebarMenu = (props) => {
const { state, descriptors, navigation } = props;
let lastGroupName = ‘’;
let newGroup = true;
return (
<SafeAreaView style={{ flex: 1 }}>
<DrawerContentScrollView {…props}>
{state.routes.map((route) => {
const { drawerLabel, activeTintColor, groupName } = descriptors[
route.key
].options;
if (lastGroupName !== groupName) {
newGroup = true;
lastGroupName = groupName;
} else newGroup = false;
return (
<>
{newGroup ? (
<View style={styles.sectionContainer}>
<Text key={groupName} style={{ marginLeft: 16 }}>
{groupName}
</Text>
{/* <View style={styles.sectionLine} /> */}
</View>
) : null}
<DrawerItem
key={route.key}
label={({ color }) => (
<Text style={{ color }}>{drawerLabel}</Text>
)}
focused={
state.index ===
state.routes.findIndex((e) => e.name === route.name)
}
activeTintColor={activeTintColor}
onPress={() => navigation.navigate(route.name)}
/>
</>
);
})}
</DrawerContentScrollView>
<Text style={{ fontSize: 16, textAlign: ‘center’, color: ‘grey’ }}>
</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
sectionContainer: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
marginTop: 10,
},
sectionLine: {
backgroundColor: ‘gray’,
flex: 1,
height: 1,
marginLeft: 10,
marginRight: 20,
},
});
export default CustomSidebarMenu;
3.create a class component Home
import assets from ‘../../assets/assets.js’
import CustomerInfo from ‘../customer_info/customerinfo’
import Offer from ‘../Offer/offer’
import ChangePin from ‘../changepin/changepin’
import React, { Component } from ‘react’;
import { View, Image, TouchableOpacity } from ‘react-native’;
import MenuContact from ‘../MenuContact/menucontact’
import Branchlocator from ‘../BranchLocator/branchlocator’
import { createDrawerNavigator } from ‘@react-navigation/drawer’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import CustomSidebarMenu from ‘./DrawerContent’;
import Login from ‘../login/login’
const NavigationDrawerStructure = (props) => {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: ‘row’ }}>
<TouchableOpacity onPress={toggleDrawer}>
<Image
source={assets.banners.menu}
style={{ width: 25, height: 25, marginLeft: 15, tintColor: “#fff” }}
/>
</TouchableOpacity>
</View>
);
};
const Stack = createStackNavigator();
export default class Home extends React.Component {
firstScreenStack = ({ navigation }) => {
return (
<Stack.Navigator initialRouteName=”CustomerInfo”>
<Stack.Screen
name=”Apply loan”
component={CustomerInfo}
options={{
title: ‘Apply loan’,
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#01579b’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}
/>
</Stack.Navigator>
);
}
secondScreenStack = ({ navigation }) => {
return (
<Stack.Navigator
initialRouteName=”ChangePin”
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#01579b’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}>
<Stack.Screen
name=”Change pin”
component={ChangePin}
options={{
title: ‘Change pin’,
}}
/>
<Stack.Screen
name=”Login”
component={Login}
options={{
title: ‘’,
}}
/>
</Stack.Navigator>
);
}
thirdScreenStack = ({ navigation }) => {
return (
<Stack.Navigator
initialRouteName=”MenuContact”
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: ‘#01579b’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}>
<Stack.Screen
name=”Contact us”
component={MenuContact}
options={{
title: ‘Contact us’,
}}
/>
</Stack.Navigator>
);
}
render() {
const Drawer = createDrawerNavigator();
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => <CustomSidebarMenu {…props} />}>
<Drawer.Screen
name=”Apply loan”
options={{
drawerLabel: ‘Apply loan’,
activeTintColor: ‘#e91e63’,
}}
component={this.firstScreenStack}
/>
<Drawer.Screen
name=”Change pin”
options={{
drawerLabel: ‘Change pin’,
activeTintColor: ‘#e91e63’,
}}
component={this.secondScreenStack}
/>
<Drawer.Screen
name=”Contact us”
options={{
drawerLabel: ‘Contact us’,
activeTintColor: ‘#e91e63’,
}}
component={this.thirdScreenStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
}
