CODEWITHSUNDEEP
javascriptreactjsreact-navigation
Joe Lloyd
Joe Lloyd

Reputation: 22453

Going to a particular route with react-navigation tabbar tabBarOnPress

Expected Functonality

I have some embedded routes with react-navigation.

StackNavigator-1 -> TabNavigator-1 -> StackNavigator-2 -> TabNavigator-2

The only way to access StackNavigator-2 is by clicking a tab in TabNavigator-1

If I enter some tab in TabNavigator-2 then leave and come back it keeps me in the last screen I was in when on TabNavigator-2

Since the only way back to StackNavigator-2 is via the click in the TabNavigator-1 I would like to hijack that and always reset StackNavigator-2

What I have attempted

I took a look at the navigationOptions object and found the function tabBarOnPress but this seems to have only limited functionality at the tabbar level. 

tabBarOnPress: ({scene, jumpToIndex}) => {  
    jumpToIndex(scene.index);
}

This always returns me to the same place I previously was in the tabs

tabBarOnPress: ({scene, jumpToIndex}) => {  
    jumpToIndex(1);
}

This sends be to another tab in the tab group

I can see what I need from the scene object when I print it.

there is a route object inside and that has an index that I need to reset to 0.

scene.route

{
  focused:false
  index:1
  route: {
    index:0
    key:"feedback"
    routeName:"feedback"
    routes:[{…}]
  }
}

Question

How can I find a simple way to redirect to the main route of a stack event when there is another tab that was activated already within that stack from inside a react-navigation Navigator?

Upvotes: 1

Views: 1528

Answers (1)

Richard Torenvliet
Richard Torenvliet

Reputation: 21

For one, I hope that you've solved the problem already, but for the record I want to state my solution, as I didn't see this one yet on the webs yet.

The idea is that you use the navigation object and use the navigation.popToTop() functionality. Here is an example of that:

... some existing code here ...

const RootNavigator = createBottomTabNavigator(
    {
        // So here you have a couple of routes defined
        Recipes: MainNavigator,
        Add: AddNavigator,
        Settings: SettingsNavigator,
     },
    {
        initialRouteName: 'Recipes',

        navigationOptions: ({ navigation }) => ({
            // You hook into the tabBarOnPress callback and use the provided parameters as stated in the docs (linked above)
            tabBarOnPress: ({navigation, defaultHandler}) => {
                // When you click on the bottom bar, we always pop to the top, it's a bit more
                // intuitive.
                navigation.popToTop();
                // Call this function to continue transitioning to the screen that was intended.
                defaultHandler();
            },
        }
     }
)

Note that you can also use the other functionality that the navigation object gives you, e.g., replace(), pop() ...

My dependencies:

"dependencies": {
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-elements": "^0.19.1",
    "react-navigation": "^2.7.0",
    "react-navigation-redux-helpers": "^2.0.4",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6"
}

Upvotes: 2

Related Questions