How to return back to previous screen from React StackNavigator to specific Tab

Question

I am using React StackNavigator which has structure like this:

-----BottomNavigator
-------TabNavigator (has 3 screens)
---------StackNavigator

so I want to return to previous screen from stackNavigator to TabNavigator (screen 2).

Here is my code for TabNavigator:

const ServiceTabNavigator = createMaterialTopTabNavigator(
  {
    screenone: screenone,
    screentwo: screentwo,
    screenthree: screenthree
  },
  {
    tabBarOptions: {
      activeTintColor: "#1B5357",
      inactiveTintColor: "gray",
      style: {
        backgroundColor: "#fff",
        color: "#1B5357"
      },
      indicatorStyle: {
        backgroundColor: "#1e90ff"
      }
    },
    navigationOptions: {
      tabBarLabel: "ESTH",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="bars" color={tintColor} size={24} />
      )
    }
  }
);

Here is for the StackNavigator which has code like this but it does not go to the screen2 instead screen1 of tabNavigator.

static navigationOptions = ({ navigation }) => ({
    title: "Request Service",
    headerLeft: (
      <TouchableOpacity
        onPress={() => {
          () =>
            navigation.dispatch(
              NavigationActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "MainNavigator" }) //MainNavigator is bottomNavigator
                ]
              })
            );
          navigation.navigate("screentwo");
        }}
      >
         <Icon
            name="times"
            type="font-awesome"
            iconStyle={{ color: "#000" }}
            containerStyle={{ marginLeft: 16 }}
          />
      </TouchableOpacity>
    ),
    headerTitleStyle: {
      color:'#00CA9D',
      fontWeight: 'bold',
    },
    headerStyle: { borderBottomWidth:0 }

  });

Thank you

score 0 · Answer 1 · answered Apr 16 '19 at 10:31

0

I use react-navigator.. there is a property named jumpToIndex for this. I solved it this way for my needs to open a Modal instead jumping to the given Tab. Maybe you can modify to fit your needs:

<TabBarBottom
      {...props}
      jumpToIndex={(index) => {
        if (index === 5) {
          // This is the MORE-Tab-Button. Don't  switch to tab, but open the Modal
          props.navigation.navigate('Menu_Screen');
        } else {
          jumpToIndex(index);
        }
      }}
    />

answered Apr 16 '19 at 10:31

suther

12,600
4
62
99

its a nested Navigations and I am using React NavigationV3 so this will not work. I have shared some pictures of design in below comment. I hope if you know some work around thanks . – Saqy G Apr 17 '19 at 08:55

score 0 · Answer 2 · answered Apr 16 '19 at 10:54

0

From how you described your navigation hierarchy it looks like your root navigator is always Main/BottomNavigator, so why do you call dispatch reset before navigating to screentwo?

Seems like the issue might be that the reset action is not finished before you try to navigate to screentwo, so you end up on initialRoute of MainNavigator.

So calling just navigation.navigate("screentwo") (without reseting root) should do what you want to achieve.

In case you really need to reset the root, try executing the navigation to screentwo using dispatch as well, to make sure the actions are performed in sequence

const navigateAction = NavigationActions.navigate({
   routeName: route,
   params: params
})
navigation.dispatch(navigateAction)

answered Apr 16 '19 at 10:54

Martin Tesar

1
1

thanks for reply Martin. Reason I did used navigation.navigate() before but the problem is it does go on the tab screen but also removes the bottomNavigator from below which is the main navigator in the app – Saqy G Apr 16 '19 at 12:42
Sorry I'm not sure I completely understand what you mean. To clarify, you have a bottom navigator (`createBottomTabNavigator` / `createMaterialBottomTabNavigator`) with multiple tabs, inside one of them there is a top bar navigator (`createMaterialTopTabNavigator`) again with multiple tabs, and inside one of them there is a stack navigator (`createStackNavigator`), is that correct? And when you click on the headerLeft button on a screen inside the stack navigator, you want to navigate inside this stack, or to a screen which is in another tab of either the top or bottom tab navigator? – Martin Tesar Apr 16 '19 at 13:06
I think its more easier if I show you so this is the design https://ibb.co/PTh09rj. You see the bottomNav highlighted in red with nested TabNav and this is the stackNav https://ibb.co/r6cFzns . so problems occurs when you navigate to to screen from one of service button to stackNav after that if you try to back navigate using navigation,navigate() then bottomNav will not show so it just points to TabNav while I need bottomNav always visible. – Saqy G Apr 17 '19 at 08:51
Have you tried `navigation.goBack()` instead of `navigation.navigate()` ? (without the reset action) – Martin Tesar Apr 17 '19 at 09:13

Saqy G · Accepted Answer · 2019-04-17T10:49:03.697

OK after digging up I have found out the way

React NavigationV2 Way:

 navigation.navigate('MainNavigator', {}, NavigationActions.navigate({ routeName: 'Requests' }))

React NavigationV3 Way:

navigation.navigate(NavigationActions.navigate({
       routeName: 'MainNavigator',
       action: NavigationActions.navigate({ routeName: 'Requests' })
      }))

BottomNavigator as MainNavigator
Screentwo as Requests

In a nutshell navigation.navigate() has third parameter which acts likes second navigation.

So It first Navigate to MainNavigator ------then----> Screen2 in TabNavigator

Thanks to David check this post. Hope it will help someone else in future.

How to navigate between different nested stacks in react navigation

How to return back to previous screen from React StackNavigator to specific Tab

3 Answers3