React Native Tab Navigation nested in Stack Navigation How To?

Question

I am new to react native, and have come across this issue with navigation. I have a 'main menu' (TabNav) that I want to render on every page.

I have some pages that are not accessible from the main menu (TabNav), but should still have the menu options. I'm not sure how to impliment this. Here is the code I have so far:

 const TabNav = createMaterialBottomTabNavigator({ Map: { screen: HomeScreen }, Details: { screen: Details }, }); const extraNav = createStackNavigator( { SinglePage: SinglePage, Tabs: TabNav } ); const RootStackNav = createStackNavigator( { Tabs: { screen: TabNav }, SinglePage: { screen: extraNav, } }, ); 

I navigate to the single separate page via:

 render() { const { navigation } = this.props; return ( <View> <Icon name='place' onPress={() => navigation.navigate('SinglePage')} /> </View> ); } 

What I want to happen is when I navigate to the single separate page my "main menu" is still present. Right now I can navigate to all the pages, but on the single separate page the tabs are not available, and I have to hit 'back' to access it again.

Answer 1

You can use this code to nest a stack navigator to a tab navigator

const RootTabNav = createMaterialBottomTabNavigator({
    Map: { screen: HomeScreen },
    DetailStack: { screen: stackNav},
});

const stackNav= createStackNavigator(
    {
        SinglePage: { screen: SinglePage}
        Details: { screen: Details },
    }
);

Its just an example of nesting stack to tabNavigator. I hope this may help you.