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.

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

Store Stack

const StoreNavigator = createStackNavigator();

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

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

Sourav Dey · Accepted Answer · 2022-02-14 10:21:20Z

56

The below should work in this case:

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

edited Feb 14, 2022 at 10:21

answered Aug 24, 2020 at 18:21

Sourav Dey

1,1881 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yehya Over a year ago

Do you know how to do it with navigation.reset? I was doing it like this, but it didn't work. this.props.navigation.reset({ index: 0, routes: [{name: 'CommunityTab', screen: 'CommunityReply'}], })

Sourav Dey Over a year ago

try this - stackoverflow.com/a/63528641/7022711

Mher Over a year ago

And if you need send params to screen use navigation.navigate('CommunityTab', { screen: 'CommunityReply', params: {key: 'value'}});

Huy Nguyễn · Accepted Answer · 2024-01-02 07:37:12Z

0

can use this:

const jumpToAction = TabActions.jumpTo('CommunityReply'); 
navigation.dispatch(jumpToAction);
navigation.navigate('CommunityTab');

edited Jan 2, 2024 at 7:37

answered Jan 2, 2024 at 6:49

Huy Nguyễn

273 bronze badges

2 Comments

mermaid Jan 30 at 17:00

Cannot find name TabActions ? where do i import it from

Huy Nguyễn Feb 6 at 2:43

import { TabActions } from '@react-navigation/native'; try this

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related