I'm trying to create a scalable navigation with React Navigation v6. After I tried Tab and Drawer features, I decided to ditch them and building my own screen header, tab and drawer since each navigation control requires nesting. I only use Native Stacks for displaying each screen by routes settings I defined and Redux. Also I'm using navigationKey prop to rearrange available stacks according to user state. So far it all works just fine.

Here is a short sample code (stripped from unnecessary sections for simplicity) :

    export const Stack = createNativeStackNavigator<any>()
    export const navigationRef = createNavigationContainerRef()
    
    const routes = [
      {
        name: 'Auth_Register',
        title: 'Registration',
        component: 'Register',
      },
      {
        name: 'Profile_Home',
        title: 'Home',
        component: 'Home',
        animation: 'none',
        nav: {
          tab: 'tabProfile',
          leftDrawer: true
        }
      },
      {
        name: 'Profile_Settings',
        title: 'Profile Settings',
        component: 'Settings',
        animation: 'none',
        nav: {
          tab: 'tabProfile',
          leftDrawer: true
        }
      }
    ]
    
    
    export default function StackNavigation() {
      const isLoggedIn = useAppSelector(loggedInState)
      const dispatch = useAppDispatch()
     
      return (
        <Stack.Navigator
          screenListeners={() => ({
            state: () => {
              const currentRoute = getCurrentRouteName()
              const route = routes.find((r) => r.name === currentRoute)
              const navs = route?.nav
                ? route.nav
                : { tab: false, leftDrawer: false, rightDrawer: false }
              dispatch(commonActs.setNavigation(navs))
            }
          })}>
          <Stack.Group navigationKey={isLoggedIn ? 'user' : 'guest'}>
            {routes.map((stack) => {
              if (!screenPermission(isLoggedIn, stack.isLoggedIn)) return false
              return (
                <Stack.Screen
                  key={stack.name}
                  name={stack.name}
                  options={{
                    headerShown: false,
                    animation: stack.animation ? stack.animation : 'default'
                  }}
                  component={stack.component}
                />
              )
            })}
          </Stack.Group>
        </Stack.Navigator>
      )
    }

export default function AppNavigation() {
  return (
    <>
      <NavigationContainer ref={navigationRef}>
        <StackNavigation />
      </NavigationContainer>
    </>
  )
}

routes is one-level array will include all screens. That being said, this will be a single level navigation even there would be 50 screens.

My question is that would using single level routing cause any performance issues? Maybe I've been missing something that I haven't noticed about importance of RN6's route nesting. For example removing child routes automatically when switching to parent.

I've been reading documentation and other questions about React Navigation and it seems like everything should be alright as long as screen events, listeners and animations unmounted on screen change. Also React Navigation documentation suggests to avoid deeply nested navigations. However, I didn't see any suggestions using single level navigation is better or worse.

I'd like to hear the advantages or drawbacks of this approach. Otherwise, I might try Stack nesting if there are any advantages.

CodePudding user response：

Some situations where nested routes are required:

• You have a tab bar or drawer but want to hide it on certain screens (navigate to an outside stack)
• You want to be sure that unauthorized attacks are impossible to navigate to (conditional mounting)
• You want to unmount a whole stack at once (popToTop)

The other benefits are mostly organizational.

• Share options/presentation across a stack (you can also do this with the Group component)
• Smaller/more readable stack files

There are drawbacks as well

• sometimes have to pass navigators in explicitly (i.e. for controlling a drawer from a sub-stack)
• can lead to stack spaghetti