CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Singh
Singh

Reputation: 1988

Navigate to root tab screen inside a tabnavigator - React Navigation

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?

Upvotes: 0

Views: 2602

Answers (4)

Victor Orlyk
Victor Orlyk

Reputation: 1843

You may want to add unmountOnBlur: true to the tab which you want to clear

Upvotes: 0

AbdulRahim Kattirithodi
AbdulRahim Kattirithodi

Reputation: 1

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

Upvotes: 0

rodiwa
rodiwa

Reputation: 1770

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.

Upvotes: 1

Kraylog
Kraylog

Reputation: 7553

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.

Upvotes: 0

Related Questions