reactjsreact-nativereact-navigationreact-navigation-v6

React Navigation - What are the benefits of nested routes?


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.


Solution

  • Some situations where nested routes are required:

    The other benefits are mostly organizational.

    There are drawbacks as well