How To Handle Two Navigator In React Navigation?

Hello Guys, I have some issue with React navigation V3, In my app, I have an Authentication step to Entering to Home Screen and it doesn't have a Drawer Navigation as a default, it

Solution 1:

Not sure if I understand your question so well, But what I suggest is to make each navigator in a different file like for example your StackNavigation in a file called "firstActivity_StackNavigator.js" and then you need to export the navigator as follow:

...
const FirstActivity_StackNavigator = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
        shadowOpacity: 0,
        elevation: 0,
      },
      headerTintColor: '#fff',
    }),
  },
});
export default FirstActivity_StackNavigator;

Then in your main navigator you just import whatever navigators you want

import FirstActivity_StackNavigator from "./firstActivity_StackNavigator.js"
import Screen2_StackNavigator from "./screen2_StackNavigator.js"

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="ios-home" size={30} color='#009' />
      ),
    },

  },
  Screen2: {
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Order',
      drawerIcon: () => (
        <Icon name="ios-list-box" size={30} color='#009' />
      ),
    },
  },

});
...

Hopefully this answer your question