Navigate to root tab screen inside a tabnavigator - React Navigation

Question

I have been using react-navigation for a while now. When I tried referring to this Snack on Expo, I realised that if I navigate inside a tab, then I could not navigate back to Home Tab screen by pressing the Home button on the tabbar. I have to click on Back button that is present on the screen in order to navigate back to home.

Here is a piece of code:

const HomeStack = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

const SettingsStack = StackNavigator({
    Settings: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
});

export default TabNavigator({
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
});

Referring to above code, if I click on Settings from the tabbar and then navigate to Details present inside that stack then I cant navigate back to Settings when I click on Settings again. I have to click on Back button that is present in the top section of the screen.

What is wrong here?

Answer 1

It would be a good idea to use unique names for every new route. React Navigation uses these names as unique keys to differentiate between routes. I see a Settings in your default TabNavigator, and also another Settings for your SettingsStack StackNavigator. Same for Details too. (Simply renaming might solve your issue too, not sure).

So taking your example (and renaming Settings to SettingsScreen),

const HomeStack = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

const SettingsStack = StackNavigator({
    SettingsScreen: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
});

export default TabNavigator({
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
});

Now, to go back to SettingsScreen from Settings > Details, you might wanna try

dispatch(NavigationActions.navigate({
  routeName: 'Settings',
  action: NavigationActions.navigate({ routeName: 'SettingsScreen' })
}))

The idea is that in case of nested navigators, if you want to go back to another screen via the parent, you should call Navigations.navigate twice, in a nested manner.

It's in their docs somewhere. I'll try adding the link here for reference as soon as I find it.

Answer 2

The tab navigator buttons only switch between the shown views. Since you navigated within your stack navigator, that's what you're seeing.

If you want to add the functionality that the stack is reset every time the tab button is pressed, you can do that by providing your own tab component and then calling reset on the stack navigator.

Answer 3

createTopTabs = () => {
        return(
            <MaterialTopTabs.Navigator initialRouteName="Tab_Daily"
                tabBarOptions={{ 
                    showIcon: true, 
                    style: { backgroundColor: '#C4e672' },
                    labelStyle: { fontSize: 12, fontWeight: 'bold' },
                    /* tabStyle: { width: 100 }, */
                    tabStyle: { height: 50 },
                }}>
                <MaterialTopTabs.Screen 
                    name="Tab_ToDoNote"
                    component={TabToDoNote}
                    options={
                        {
                            title: '',
                            /* tabBarLabel: "Daily", */
                            tabBarIcon: () =>
                                (
                                    <Icons_SimpleLine
                                        style={
                                            [
                                                {
                                                    color: 'red',
                                                }
                                            ]
                                        }
                                        size={25}
                                        name={'note'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Daily"
                    component={TabDaily}
                    options={
                        {
                            title: '',
                            tabBarLabel: "Daily",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-today'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Monthly"
                    component={TabMonthly}
                    options={
                        {
                            tabBarLabel: "Monthly",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-month-outline'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Yearly"
                    component={TabYearly}
                    options={
                        {
                            tabBarLabel: "Yearly",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-multiple'}
                                    />
                                )
                        }
                    }
                />
            </MaterialTopTabs.Navigator>
        );
    }