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

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