React Native - Stack Navigator inside Drawer Navigator inside Tab Navigator

Question

I have some troubles while mixing different navigators. Here is my navigator file :

const DrawerNav = DrawerNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
})

const TabNav = TabNavigator({
    Drawers: { screen: DrawerNav },
    Params: { screen: Params },
    Search: { screen: Search },
},
{
    tabBarPosition: 'bottom',
});

export default StackNavigator({
    Home: { screen: TabNav },
}, stackNavigatorConfig);

The problems are when I open the Drawer Navigator :

The first tab lose the tabBarIcon and the tabBarLabel configuration from the "Drawers" container (which is set in Screen1). The icon disappear, and the label becomes "Drawers" (the Name in the TabNavigator declaration) instead of the original tabBarLabel value set in the
The Header of the Stack Navigator is still visible above the Drawer, and lose the style I have set in the Screen1 navigationOptions. (for this one, I can eventually remove the Stack Navigator and create my own header, its was just faster to use the Stack Navigator)

Here is two images with the different states (drawer closed / opened) :

Ross Ross · Accepted Answer · 2017-09-21T03:37:41

I don't quite understand why you are using a drawer inside a tab.

In order to be able to navigate through all the app the drawer must be included in the stack:

const TabNav = TabNavigator({
        Params: { screen: Params },
        Search: { screen: Search },
    },
    {
        tabBarPosition: 'bottom',
    }
);

const DrawerNav = DrawerNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
    TabNav: { screen: TabNav },
})

export default StackNavigator({
    Home: { screen: TabNav },
    DrawerNav: { screen: DrawerNav }
}, stackNavigatorConfig);

In the other hand, if what you are looking for is to fire the drawer through a click on that tab, you need to hack the tab from the source, or fire a function when that empty screen render that make a call to:

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
this.props.navigation.navigate('DrawerToggle'); // fires 'DrawerOpen'/'DrawerClose' accordingly

I hope that help..

React Native - Stack Navigator inside Drawer Navigator inside Tab Navigator

1 Answers