Routing within sub components with react-navigation 5.x

Question

There are a few screens in my React Native (0.62) app. Here is the screen structure:

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 6 components listed below
       --Home.js
         --Upload.js
         --MyFavoritePost.js
             --List.js 
               --Item.js
                 --Itemdetail.js

The List.js, Item.js and Itemdetail.js are all under MyFavoritePost.js

Here is the Stack as declared in App.js:

<NavigationContainer>
  <Stack.Navigator InitialRouteName="Splash">
    <Stack.Screen name="Splash" component={SplashScreen} options={{headerShown:false}}/>
    <Stack.Screen name="App" component={AppScreen} options={{headerShown:false}} />
  </Stack.Navigator>
</NavigationContainer>

Here is the AStack as declared AppScreen.js:

          <AStack.Navigator initialRouteName="Home">
            <AStack.Screen name="Home" component={Home} />
            <AStack.Screen name="Upload" component={Upload} />
            <AStack.Screen name="List" component={Artlist} />
            <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
            <AStack.Screen name="Item" component={Imageitem} />
            <AStack.Screen name="ItemDetail" component={Itemdetail} />
          </AStack.Navigator>

The declaration of AStack seems too excessive as the List.js Item.js and Itemdetail.js are really for presentation of MyFavoritePost.js. Does it make sense by declaring AStack as 3 components as below:

      <AStack.Navigator initialRouteName="Home">
        <AStack.Screen name="Home" component={Home} />
        <AStack.Screen name="Upload" component={Upload} />
        <AStack.Screen name="MyFavoritePost" component={Newpostfollowed} />
      </AStack.Navigator>

Within each omponent Upload and MyFacoritePost, use navigation.navigate("component") to route around. The new routing structure becomes:

--App.js    //NavigationContainer/Stack declared for 2 components : Splashscreen & AppScreen
  --Splashscreen.js
  --AppScreen.js  //AStack declared with 3 components listed below
       --Home.js
         --Upload.js   //routing with navigation.navigate() within Upload
         --MyFavoritePost.js //routing with navigation.navigate() within MyFavoritePost
             {--List.js 
               --Item.js
                 --Itemdetail.js}  //those 3 components are removed and not to be declared in navigation stack & will route with navigation.navigate()

Does the new routing structure make sense? Any problem?

Answer 1

no, the second structure will not work if you remove the three-screen which are under MyFavoritePost component then u cannot use navigation.navigate() to go to that screen. you can do one thing you can create a stack navigator separate for these three screens and use in MyFavoritePost component. else first structure is perfect.