React native drawer navigation with stack navigator

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.

1. 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;