React native drawer navigation with stack navigator - react-native

Question

I'm trying to develop an app to understand the react native basics. I'm usin react navigation and I would like to see menu in every page of my app. I've developed someting like;
-StackNavigtor
-Login Screen
-DrawerNagivation
-Screen1
-Screen2
However, inner drawer's components can not benefit from the stacking feature. What's the best way of obtaining drawer navigation with stack navigator in order to obtain menu in every page of my app.
Thanks.

Answer 1

Yes you can follow the following step.
App.js
import React, {Component} from 'react';'
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './src/authScreen/login/Login';
import DrawerNavigator from './src/navigation/drawerNavigation/DrawerNavigator';
export default class App extends Component{
render() {
return (
<AppStackNavigator />
);
}
}
const AppStackNavigator = createStackNavigator({
Login:{
screen:Login
},
DrewerNav:{
screen:DrawerNavigator
}
},
navigationOptions={
headerMode:'none'
})
then create src folder and create DrawerNavigator.js . and Enter the following code.
import React from 'react' import { StyleSheet, Text, View, SafeAreaView, ScrollView, Dimensions, Image} from 'react-native';
import { createDrawerNavigator, DrawerItems } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome5';import DrawerScreen1
from '../../screens/drawerScreen/DrawerScreen1' import DrawerScreen2
from '../../screens/drawerScreen/DrawerScreen2' import DrawerScreen3
from '../../screens/drawerScreen/DrawerScreen3' // import { Right }
from 'native-base';
const CustomDrawerComponent = (props)=>( <SafeAreaView>
<View style={{height:150, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
<Image source={require('../../Images/user.jpg')} style={{height:120, width:120, borderRadius:60}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView> </SafeAreaView> )
export default createDrawerNavigator(>
DrawerScreen1: {
screen: DrawerScreen1,
navigationOptions: {
drawerLabel: 'DrawerScreen1',
drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
} },
DrawerScreen2: {
screen: DrawerScreen2,
navigationOptions: {
drawerLabel: 'DrawerScreen2',
drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
} },
DrawerScreen3: {
screen: DrawerScreen3,
navigationOptions: {
drawerLabel: 'DrawerScreen3',
drawerIcon: ({ tintColor }) => <Icon name="user-circle" size={17} />,
} }, }, { drawerPosition :"right", contentComponent:CustomDrawerComponent
});
Here CustomDrawerComponent add a Drawer Icon.
and add the login.js
import React, { Component } from 'react';
import {View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
import { Container, Header, Content, Button, Text } from 'native-base';
class Login extends Component{
constructor(props){
super(props);
}
loginHandler=()=>{
this.props.navigation.navigate('DrewerNav')
}
render(){
return(
<View style={styles.container}>
<Text> Login </Text>
<View style={{alignItems:'center'}}>
<Button onPress={this.loginHandler}>
<Text>Click Me!</Text>
</Button>
</View>
</View>
)
}
}
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Further more: you can refer https://github.com/ChanakaUOMIT/React-Native-Root-boiler-plate/tree/master this project.. here also add Stack navigation, Tab Navigation and Drawer navigation in one project.

Answer 2

import 'react-native-gesture-handler';
import * as React from 'react';
import {View, TouchableOpacity, Image} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import LoginPage from './src/pages/LoginPage';
import SecondPage from './src/pages/SecondPage';
import ThirdPage from './src/pages/ThirdPage';
// Import Custom Sidebar
import CustomSidebarMenu from './src/pages/CustomSidebarMenu';
import SignUpPage from './src/pages/SignUp';
import Home from './src/pages/Home';
import VendingMachineList from './src/pages/VendingMachineList';
import ProductList from './src/pages/ProductList';
import ProductDetails from './src/pages/ProductDetails';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props) => {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={toggleDrawer}>
<Image
source={require('./src/assets/image/Vector.png')}
style={{width: 30, height: 20, marginLeft: 5}}
/>
</TouchableOpacity>
<TouchableOpacity onPress={toggleDrawer}>
<Image
source={require('./src/assets/image/track-fresh.png')}
style={{width: 30, height: 20, marginLeft: 5}}
/>
</TouchableOpacity>
</View>
);
};
function firstScreenStack({navigation}) {
return (
<Stack.Navigator initialRouteName="LoginPage">
<Stack.Screen
name="LoginPage"
component={LoginPage}
options={{
title: 'First Page', //Set Header Title
headerLeft: () => (
<NavigationDrawerStructure
navigationProps={navigation}
/>
),
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerShown:false,
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
<Stack.Screen
name="SignUpPage"
component={SignUpPage}
options={{
title: 'First Page', //Set Header Title
headerLeft: () => (
<NavigationDrawerStructure
navigationProps={navigation}
/>
),
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerShown:false,
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
function HomeStack({navigation}) {
return (
<Stack.Navigator
initialRouteName="VendingMachineList"
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#fff', //Set Header color
},
headerTintColor: '#000', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="HomePage"
component={Home}
options={{
title: '', headerShown:false, //Set Header Title
}}
/>
<Stack.Screen
name="ProductList"
component={ProductList}
options={{
title: '', headerShown:false, //Set Header Title
}}
/>
<Stack.Screen
name="ProductDetails"
component={ProductDetails}
options={{
title: '', headerShown:false, //Set Header Title
}}
/>
<Stack.Screen
name="VendingMachineList"
component={VendingMachineList}
options={{
title: '', headerShown:false, //Set Header Title
}}
/>
<Stack.Screen
name="ThirdPage"
component={ThirdPage}
options={{
title: 'Third Page', //Set Header Title
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({navigation}) {
return (
<Stack.Navigator
initialRouteName="SecondPage"
screenOptions={{
headerLeft: () => (
<NavigationDrawerStructure navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="SecondPage"
component={SecondPage}
options={{
title: 'Second Page', //Set Header Title
}}
/>
<Stack.Screen
name="ThirdPage"
component={ThirdPage}
options={{
title: 'Third Page', //Set Header Title
}}
/>
</Stack.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: {marginVertical: 5},
}}
drawerContent={(props) => <CustomSidebarMenu {...props} />}>
<Drawer.Screen
name="LoginPage"
options={{drawerLabel: 'First page Option',swipeEnabled:false}}
component={firstScreenStack}
/>
<Drawer.Screen
name="Home"
options={{drawerLabel: 'Second page Option'}}
component={HomeStack}
/>
<Drawer.Screen
name="SecondPage"
options={{drawerLabel: 'Second page Option'}}
component={secondScreenStack}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;