CODEWITHSUNDEEP
react-nativereact-navigation
Matthew Goodwin
Matthew Goodwin

Reputation: 1192

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

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.

Upvotes: 1

Views: 2563

Answers (1)

satya164
satya164

Reputation: 10145

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

Upvotes: 1

Related Questions