How to navigate back a StackNavigator when Tabs clicked twice?

2
votes

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

2
react-nativereact-navigation
does jumpToIndex fire on second press? - bennygenel
Yes, and I see the index in the console on the second press correctly but the NavigationActions doesn't have any effect.. Dishes is just the name of the Tab.. Where do I need to "communicate" or "delegate" to the StackNavigator? There is no reference or anything else to it... - rakete
Dishes is the Tab1 or Screen1 of StackNavigator? - bennygenel
Dishes is the Tab.. - rakete
How do you tell StackNavigator to go Screen1 to Screen2? When you press second time on the tab you are already on 'Dishes' screen, your first action is to navigate to Dishes so I think navigator is not doing anything. What you need to do I believe when index the same as state.index you should check the current route and if its Screen2 of StackNavigator you should do navigation.goBack() - bennygenel

2 Answers

1
votes

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

0
votes

This worked for me

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