react-navigation v5 (next): Navigating to nested Child screen from the Child screen of different Parent

Question

Using react-navigation v5 (next):

High Level Question: Navigating to nested Child screen from the Child screen of different Parent.

Here is my root navigator

export const AppNavigator = (props): React.ReactElement => (
   <Stack.Navigator {...props} headerMode='none' mode={'modal'}>
      <Stack.Screen name={AppRoute.AUTH} component={AuthNavigator} />
      <Stack.Screen name={AppRoute.HOME} component={HomeNavigator} />
   </Stack.Navigator>
);

Here is my AuthNavigator:

export const AuthNavigator = (): React.ReactElement => (
   <Stack.Navigator headerMode='none'>
      <Stack.Screen name={AppRoute.SIGN_IN} component={SignInScreen} />
      <Stack.Screen name={AppRoute.LOG_OUT} component={LogOutScreen} />
      <Stack.Screen name={AppRoute.SIGN_UP} component={SignUpScreen} />
      <Stack.Screen
         name={AppRoute.RESET_PASSWORD}
         component={ResetPasswordScreen}
      />
   </Stack.Navigator>
);

From within a page in HomeNavigator I want to navigate directly to the LogOutScreen/AppRoute.LOG_OUT.

I can call navigate(AppRoute.AUTH) but if I call navigate(AppRoute.LOG_OUT) it has no effect.

satya164 · Accepted Answer · 2019-12-11 23:53:53Z

1

Something like this should work:

// Navigate to 'AppRoute.LOG_OUT' inside 'AppRoute.AUTH'
navigation.navigate(AppRoute.AUTH, { screen: AppRoute.LOG_OUT });

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

answered Dec 11, 2019 at 23:53

satya164

10.2k2 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-navigation v5 (next): Navigating to nested Child screen from the Child screen of different Parent

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related