How to navigate between different nested stacks in react navigation

Question

The Goal

Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.

More Detail

If I have the following

Answer 1

I've found also such solution here:

onPress={() =>
    Promise.all([
    navigation.dispatch(
        NavigationActions.reset({
            index: 0,
            // TabNav is a TabNavigator nested in a StackNavigator
            actions: [NavigationActions.navigate({ routeName: 'TabNav' })]
        })
    )
    ]).then(() => navigation.navigate('specificScreen'))
}

Answer 2

In React Navigation V5, you can do like this:

but remember to you placing this on the parent side

this.props.navigation.navigate(
          'Nested Navigator 1',
          {name: 'jane'},
          this.props.navigation.navigate('Screen A', {id: 2219}),
        );

Answer 3

On React Navigation v5 you have here all the explanation:

https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator

Route definition

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Root" component={Root} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Instruction

navigation.navigate('Root', { screen: 'Settings' });

Answer 4

Complete freedom: singleton w/ navigationOptions

If you have a situation where you have multiple navigation stacks and sub stacks, this can be frustrating to know how to get a reference to the desired stack given how React Navigation is setup. If you were simply able to reference any particular stack at any given time, this would be much easier. Here's how.

1. Create a singleton that is specific to the stack you want to reference anywhere.

   // drawerNavigator.js . (or stackWhatever.js)
   const nav = {}
   export default {
     setRef: ref => nav.ref = ref,
     getRef: () => nav.ref
   }
   

2. Set the reference on desired navigator using navigatorOptions

   import { createBottomTabNavigator } from 'react-navigation'
   import drawerNavigation from '../drawerNavigator'
   
   const TabNavigation = createBottomTabNavigator(
     {
       // screens listed here
     },
     {
       navigationOptions: ({ navigation }) => {
         // !!! secret sauce set a reference to parent
         drawerNavigation.setRef(navigation)
         return {
           // put navigation options
         }
       }
     }
   )
   

3. Now you can reference drawerNavigator anywhere inside or outside

   // screen.js
   import drawerNavigator from '../drawerNavigator'
   
   export default class Screen extends React.Component {
     render() {
       return (
         <View>
           <TouchableHighlight onPress={() => drawerNavigator.getRef().openDrawer()}>
             <Text>Open Drawer</Text>
           </TouchableHighlight>
         </View>
       )
     }
   }
   

Explanation

Within Step 2, a Tab Navigator is one of the screens within a Drawer Navigator. Tab Navigator needs to close the drawer but also anywhere within your app, you can call drawerNavigator.getRef().closeDrawer() after this step is performed. You are not limited to having direct access to props.navigation after that step.

Answer 5

React Navigation v3:

Navigation.navigate now takes one object as the parameter. You set the stack name then navigate to the route within that stack as follows...

navigation.navigate(NavigationActions.navigate({
    routeName: 'YOUR_STACK',
    action: NavigationActions.navigate({ routeName: 'YOUR_STACK-subRoute' })
}))

Where 'YOUR_STACK' is whatever your stack is called when you create it...

  YOUR_STACK: createStackNavigator({ subRoute: ... })

Answer 6

 const subAction = NavigationActions.navigate({ routeName: 'SignInScreen' });
      AsyncStorage.clear().then(() =>
        this.props.navigation.navigate('LoggedOut', {}, subAction));

LoggedOut is the stack name where signIn screen is placed.