react-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab

How do navigate to a tab from another tab using react navigation v5


I have 3 tabs and each tab contains a set of stack navigators.

  1. Home Stack
const HomeNavigator = createStackNavigator();

const HomeStackNavigator = ({ navigation, route }) => {
    return (
        <HomeNavigator.Navigator>
            <HomeNavigator.Screen
                name="Home"
                component={Home}
            />
            <HomeNavigator.Screen
                name="Profile"
                component={Profile}
            />
            <HomeNavigator.Screen
                name="Settings"
                component={Settings}
            />
        </HomeNavigator.Navigator>
    );
};

  1. Store Stack
const StoreNavigator = createStackNavigator();

const StoreStackNavigator = ({ navigation, route }) => {
    return (
        <StoreNavigator.Navigator>
            <StoreNavigator.Screen
                name="OurStore"
                component={Store}
            />
        </StoreNavigator.Navigator>
    );
};

  1. Community Stack
const CommunityNavigator = createStackNavigator();

const CommunityStackNavigator = ({ navigation, route }) => {
    return (
        <CommunityNavigator.Navigator>
            <CommunityNavigator.Screen
                name="Community"
                component={Community}
            />
            <CommunityNavigator.Screen
                name="CommunityReply"
                component={CommunityReply}
                options={communityReplyOptions}
            />
            <CommunityNavigator.Screen
                name="AskCommunity"
                component={AskCommunity}
            />
        </CommunityNavigator.Navigator>
    );
};

Tab Navigator

const MainNavigator = createBottomTabNavigator();

const MainTabNavigator = () => {
    return (
        <MainNavigator.Navigator
            screenOptions={tabScreenOptions}
            tabBarOptions={tabBarOptions}
        >
            <MainNavigator.Screen
                name="HomeTab"
                component={HomeStackNavigator}
                options={{ tabBarLabel: "Home" }}
            />
            <MainNavigator.Screen
                name="StoreTab"
                component={StoreStackNavigator}
                options={{ tabBarLabel: "Store" }}
            />
            <MainNavigator.Screen
                name="CommunityTab"
                component={CommunityStackNavigator}
                options={{ tabBarLabel: "Community" }}
            />
        </MainNavigator.Navigator>
    );
};

Now Home tab when a button clicked I need to navigate to CommunityReply Screen inside Community Tab Navigator. Can some please help me with this

Package versions


Solution

  • The below should work in this case:

    navigation.navigate('CommunityTab', { screen: 'CommunityReply' });