How do i keep initial route with nested navigation with React Navigation v5?

Question

First let me state that I know how to navigate from one nested page to another using react navigation. However, whenever i navigate to a nested screen that is not the initial route, that screen now become the first screen whenever i navigate back to that nested stack.

Example.

• Parent Navigator
  • Nested Stack Navigator 1
    • screen A (Initial Route)
    • screen B
  • Nested Stack Navigator 2
    • screen C (Initial Route)
    • screen D
  • Nested Stack Navigator 2
    • screen E (Initial Route)
    • screen F

Normally when navigating from one stack to Nested Stack Navigator 2 the I use the following.

navigation.navigate('Nested Navigator 2');

Which takes me to screen C, this is the expected behaviour. However, whenever i'm navigating from another stack to screen D, I notice that whenever i navigate back to Nested Stack Navigator 2 with the above code it no longer opens up screen C it opens up screen D instead.

This is how I navigate to screen D from another stack.

navigation.navigate('Nested Navigator 2', { screen: 'screen D', initial: false });

Whenever this is used screen D acts as the initial route, event though I specified initial: false in the navigation call. Is there a way to prevent this?

Answer 1

once you navigate to a another component other than intial route component, of a Nested Stack Navigation, navigation.navigate('Nested Navigator 2'); will not work

Initial your navigation stack will look this on intial routes

[
 { name: ScreenA },
 { name: ScreenC },
 { name: ScreenE }
]

but whenever you navigate from sreen C to Screen D, Screen D will route will not inserted at the end of the stack , since it is Nested Navigation two

[
 { name: ScreenA },
 { 
   name: NestedNavigator,
   [
    { name: screenC }, 
    { name: screenD }
   ]
 },
 { name: ScreenE }
]

so you will need to use, navigation.navigate('Nested Navigator 2', { screen: 'screen D' }); that is because stack changes when you navigate to a screen other than initial route,

you will need to reset routes on on Nested Component , i.e. whenever you navigate to screen D, reset route stack using commonActions, set screen, this will update the stack , and remove screen D from the stack.

import { CommonActions } from '@react-navigation/native';

componentDidMount() {
   this.props.navigation.addListener('blur', () => {
            this.props.navigation.dispatch(
                CommonActions.reset({
                  index: 1,
                  routes: [
                    { name: 'ScreenC' },
                    
                  ],
                })
              );
        });
    }

if you want to remove a certain route only instead of resetting whole navigation

 this.props.navigation.dispatch(state => {
            // Remove the route from the stack
            const routes = state.routes.filter((r => r.name !== 'ScreenC' ));
        
            return CommonActions.reset({
              ...state,
              routes,
              index: routes.length - 1,
            });
          });