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

react native go back to previous screen
react-navigation on tab change
this.props.navigation.navigate not working
react-navigation nested stacknavigator
react-navigation, screenprops
react-navigation reset
react-navigation/stack
react-navigation check if can go back

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

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 goBack from nested StackNavigator? � Issue #697 � react , I wrote my own tab navigator to have a complete custom tabbar (with a big plus button in the GoBack for me would work as a simple return to the previous page. Need example for Moving back to screen on different stack navigator? # 7064. Some tab navigators such as bottom tab navigator also have a tabBarVisible option which can be used to hide the tab bar based on instructions in the Screen options resolution guide. However, we don't recommend using it since showing/hiding the tab bar mid-navigation can affect the animation of the stack navigator causing glitchy behaviour.

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

[Solution] Reset to specific tab screen in a nested navigator � Issue , Hey all, Currently, I have using the both the Tab and stack navigator. screen. If there are any method to drop all the previous stack also can solve my problem. I needed to go from an open (or closed) app to a specific tab via deep link. Add support to dispatch navigation thunks? react-navigation/rfcs#9. I've got screen 1 from which I navigate to screen 2 using: navigation.navigate('Screen2') From this screen, I would like to go to the previous one, which simple: navigation.goBack() However I'm

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)

Moving between screens, In the previous section, ["Hello React Navigation"](hello-react-navigation.md), we Hiding tab bar in specific screens � Different status bar configuration based on route screen component (definition) in stack navigator (more about this later in "The The navigate function roughly means "go to this screen", and if you are� The only difference is this new screen doesn't have a back arrow button within the header, giving me the impression that it's at the root of this stack navigator when it shouldn't be (pressing back should have brought me to StoreItemsScreen).

Nesting navigators, So here, a tab navigator is nested inside a stack navigator: inside a screen in a nested stack navigator, it'll go back to the previous screen inside goBack() in a nested screen, it'll only go back in the parent navigator if you're However, the principle isn't only specific to modals, but any kind of nesting of stack navigators. In a case where there are more than one screens stacked in the stack, the default back button behavior in react-native is to navigate back to the previous screen in the stack. Handling the device back button press when having only one screen to exit the app requires a custom setting. Yet this can be achieved without having to add back handling code to each and every screen by modifying the

React-Navigation : Stack Navigator inside Tab Navigator inside , Here I show how to create an app with nested navigators, in particular, a stack navigator inside a tab navigator inside a drawer navigator This will scaffold a new react native project in the rn5… CPU Details Screen (src/Settings/CPU/detail.js )� The pop action takes you back to a previous screen in the stack. The n param allows you to specify how many screens to pop back by. n - number - The number of screens to pop back by. import { StackActions } from 'react-navigation'; const popAction = StackActions.pop({ n: 1, }); this.props.navigation.dispatch(popAction);

Nested React Native navigators, You should have the React Native welcome screen displaying, like this: Then we'll have a drawer navigator which will then contain the tab navigator and stack navigator. With this done our drawer navigation is good to go. placed on top of the stack and to view previous screens you just navigate back. Hey all, Currently, I have using the both the Tab and stack navigator. I have using the Tab as the main navigator, and few stack as the sub screen. There are 4 tabs in main Navigator, the 1st tab is the initialised screen. My current str

Comments
  • 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 .
  • 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
  • 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?
  • I think its more easier if I show you so this is the design ibb.co/PTh09rj. You see the bottomNav highlighted in red with nested TabNav and this is the stackNav 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.
  • Have you tried navigation.goBack() instead of navigation.navigate() ? (without the reset action)