CODEWITHSUNDEEP
reactjsreact-nativemobilenavigation
Emory Hawk
Emory Hawk

Reputation: 11

React Native Tab Navigation nested in Stack Navigation How To?

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.

Upvotes: 1

Views: 912

Answers (1)

Ali SabziNezhad
Ali SabziNezhad

Reputation: 3118

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.

Upvotes: 1

Related Questions