React-Navigation adding drawer navigation with tab

Question

I\'m using react-navigation (\"^3.0.9\") with expo.

This is my logic flow:

TabView(BottomTabNavigator) with StackNavigatior:

HomeStack
 --HomeScreen
 ..         


        

Answer 1

You need to add the tabNavigator inside the DrawerNavigator.

const ProfileNavigator = createDrawerNavigator({
  Drawer: DashboardTabNav
}, {
  initialRouteName: 'Drawer',
  contentComponent: ExampleScreen,
  drawerWidth: 300

});

// Manifest of possible screens
const PrimaryNav = createStackNavigator({
  DashboardScreen: { screen: ProfileNavigator },
  LoginScreen: { screen: LoginScreen },
  LaunchScreen: { screen: LaunchScreen },
  UpdateUserScreen: { screen: UpdateUserScreen }
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'LoginScreen',
  navigationOptions: {
    headerStyle: styles.header
  }
});
export default createAppContainer(PrimaryNav);

Take a look at how to open drawer without navigating to the screen from one of the tabs of tabnavigator? or https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2 Also for full example take a look at https://gitlab.com/readybytes/ReactNavigationExampleVersion2