How to navigate back a StackNavigator when Tabs clicked twice?

user_251485 0
Viewed 900

I have a TabNavigator with three tabs. In each of these three tabs are StackNavigators.

How can I navigate the StackNavigator back if the user clicks the same tab-button twice?

enter image description here

My current approach is just doing.... nothing..

tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
    <TabBarBottom {...props} jumpToIndex={index => {
      const { state } = navigation,
            { routes } = state;

      console.log(routes);

      if (state.index === index) {
        console.log(index);

        const resetTabAction = NavigationActions.navigate({
          routeName: 'Dishes',
          action: NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Dishes' })],
          })
        });
        // props.navigation.dispatch(resetTabAction);
        navigation.dispatch(resetTabAction);

      } else {
        jumpToIndex(index);
      }
    }}/>
  ),

Edit: I now added DishesScreen.router = DishesStack.router; to the component which is wrapping the inner StackNavigator. Now I can see the sub navigator in the routes and states. But Screen1 (Dish) is missing. There is just one route: DishList...

Maybe for a better understanding my components:

App Component render() -> AppNavigator (TabNavigator - Deals, Dishes, Favorites)

Dishes Component render() -> DishesStack (StackNavigator - DishList, Dish)

enter image description here

enter image description here

react-navigation react-native
2 Answers

I missed to pass the navigation prop all down the components..

<AppNavigator navigation={this.props.navigation} ..... />

<DishesStack navigation={this.props.navigation} .... />

and it's also neccessary to pass the router if the navigator is wrapped by a component:

DishesScreen.router = DishesStack.router;

See this section: Nesting Navigators

user_2514850

This worked for me

if (state.index === index) {
    dispatch(NavigationActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'Dishes })],
    }));
}else{
    jumpToIndex(index);
}
user_89162230
Related