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

Question

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>
    );
};

2. Store Stack

const StoreNavigator = createStackNavigator();

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

3. 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

• @react-navigation/bottom-tabs": "^5.8.0
• @react-navigation/native": "^5.7.3
• @react-navigation/stack": "^5.9.0

Answer 1

The below should work in this case:

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