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.