Nesting Navigator

Nesting Navigator
Nesting Navigator berarti merender navigator di dalam layar navigator lain, sebagai contoh:

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Pada contoh di atas, komponen Home berisi navigator tab. Komponen Home juga digunakan sebagai layar Home di dalam Stack Navigator di dalam komponen App. Jadi di sini, navigator tab bersarang di dalam Stack Navigator:

Stack.Navigator
- Home (Tab.Navigator)
  - Feed (Screen)
  - Messages (Screen)
- Profile (Screen)
- Settings (Screen)

Nesting Navigator berfungsi mirip dengan penanaman komponen biasa. Untuk mencapai perilaku yang diinginkan, seringkali perlu melakukan nesting beberapa navigator.