Nested navigators in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a nested navigator in React Native navigation?

A nested navigator is a navigation setup where one navigator (like a stack or tab navigator) is placed inside another navigator. This helps organize screens into groups and manage complex navigation flows.

beginner

Why use nested navigators in a mobile app?

Nested navigators let you separate different parts of your app, like tabs or stacks, making navigation easier to manage and the user experience smoother.

intermediate

How do you define a nested stack navigator inside a tab navigator?

You create a stack navigator component and then include it as a screen inside the tab navigator. This way, each tab can have its own stack of screens.

intermediate

What happens to the back button behavior with nested navigators?

The back button navigates within the current nested navigator first (like popping a screen from a stack). If no more screens to pop, it goes back to the parent navigator.

advanced

How can nested navigators improve app performance?

By splitting navigation into smaller parts, nested navigators reduce unnecessary re-renders and keep navigation logic clear, which can improve app responsiveness.

What is the main benefit of using nested navigators?

A Make the app load faster by skipping screens

B Organize screens into groups for better navigation flow

C Remove the need for navigation libraries

D Automatically generate UI components

Nested navigators help organize screens into groups, making navigation easier to manage.

Which navigator can be nested inside another navigator?

A Only stack navigators

B Only tab navigators

C None, nesting is not allowed

D Any type of navigator like stack, tab, or drawer

Any navigator type can be nested inside another to create complex navigation flows.

In nested navigators, what does the back button do first?

A Closes the app immediately

B Switches to the first screen of the app

C Navigates within the current nested navigator

D Reloads the current screen

The back button first navigates within the current nested navigator, like popping a screen from a stack.

How do you include a stack navigator inside a tab navigator?

A By importing the stack navigator as a screen inside the tab navigator

B By merging their configurations

C By using a special nested tab component

D By disabling the tab navigator

You include the stack navigator as a screen inside the tab navigator component.

What is a common use case for nested navigators?

A To create separate navigation flows for different app sections

B To avoid using navigation libraries

C To reduce app size by removing screens

D To automatically translate app content

Nested navigators let you create separate navigation flows for different parts of your app.

Explain how nested navigators work in React Native and why they are useful.

Think about how you might organize different parts of an app with separate navigation flows.

Describe the behavior of the back button when using nested navigators.

Consider what happens when you press back inside a nested stack inside a tab.

Practice

1. What is the main purpose of using nested navigators in a React Native app?

easy

A. To speed up the app's loading time

B. To reduce the app's file size

C. To organize screens into groups for easier navigation management

D. To disable navigation gestures

Solution

1. Step 1: Understand navigator roles

   Nested navigators group related screens inside one navigator to keep navigation organized.

2. Step 2: Identify main benefit

   This grouping makes managing navigation easier and improves user experience.

3. Final Answer:

   To organize screens into groups for easier navigation management -> Option C

4. Quick Check:

   Nested navigators = organize screens [OK]

Hint: Think of nested navigators as folders for screens [OK]

Common Mistakes:

• Confusing nested navigators with performance optimization
• Thinking nested navigators reduce app size
• Assuming nested navigators disable gestures

2. Which of the following is the correct way to include a nested navigator inside a parent navigator in React Native?

easy

A. Wrap the nested navigator inside a View component without adding to parent

B. Use the nested navigator as a screen component inside the parent navigator

C. Call the nested navigator inside a useEffect hook

D. Import the nested navigator but do not add it to the parent navigator

Solution

1. Step 1: Understand navigator nesting

   To nest navigators, you add the nested navigator as a screen inside the parent navigator.

2. Step 2: Check other options

   The other options do not properly register the nested navigator for navigation.

3. Final Answer:

   Use the nested navigator as a screen component inside the parent navigator -> Option B

4. Quick Check:

   Nested navigator = screen in parent [OK]

Hint: Add nested navigator as a screen, not just import it [OK]

Common Mistakes:

• Importing nested navigator but forgetting to add as screen
• Trying to call navigator inside hooks
• Wrapping navigator in View without registering

3. Given this nested navigator setup, what screen will be shown when navigating to 'Profile' from the root navigator?

const RootStack = createStackNavigator();
const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="Profile" component={ProfileScreen} />
    </HomeStack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeStackScreen} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

medium

A. The ProfileScreen inside the HomeStack navigator

B. The SettingsScreen from the RootStack navigator

C. An error because Profile is not a direct screen of RootStack

D. The FeedScreen inside the HomeStack navigator

Solution

1. Step 1: Identify where 'Profile' screen is defined

   'Profile' is a screen inside the HomeStack nested navigator, not directly in RootStack.

2. Step 2: Understand navigation to nested screens

   To navigate to 'Profile', you navigate through 'Home' stack, which contains 'Profile'. So 'ProfileScreen' will show.

3. Final Answer:

   The ProfileScreen inside the HomeStack navigator -> Option A

4. Quick Check:

   Nested screen 'Profile' = HomeStack.ProfileScreen [OK]

Hint: Nested screens show inside their own navigator [OK]

Common Mistakes:

• Assuming nested screens are direct children of root navigator
• Confusing SettingsScreen with ProfileScreen
• Expecting error when navigating nested screens

4. What is wrong with this nested navigator code snippet?

const RootStack = createStackNavigator();
const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Tabs" component={TabNavigator} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

// Navigation call:
navigation.navigate('Profile');

medium

A. NavigationContainer is missing

B. TabNavigator should be inside SettingsScreen

C. RootStack.Navigator cannot have TabNavigator as a screen

D. Cannot navigate directly to 'Profile' because it's inside the nested TabNavigator

Solution

1. Step 1: Analyze navigation call

   Calling navigation.navigate('Profile') tries to navigate directly in RootStack, but 'Profile' is inside TabNavigator nested navigator.

2. Step 2: Understand nested navigation rules

   You must navigate to 'Tabs' first, then inside TabNavigator navigate to 'Profile'. Direct navigation to nested screens by name won't work.

3. Final Answer:

   Cannot navigate directly to 'Profile' because it's inside the nested TabNavigator -> Option D

4. Quick Check:

   Nested screen navigation requires parent route [OK]

Hint: Navigate nested screens via parent navigator first [OK]

Common Mistakes:

• Trying to navigate nested screen directly by name
• Placing TabNavigator inside unrelated screen
• Forgetting NavigationContainer

5. You want to create a nested navigator structure where the root navigator is a drawer, and inside one drawer screen you want a stack navigator with multiple screens. Which of the following code snippets correctly nests the stack navigator inside the drawer navigator?

hard

A. Add the stack navigator as a screen component inside the drawer navigator's screens

B. Wrap the drawer navigator inside the stack navigator component

C. Use two separate NavigationContainers for drawer and stack navigators

D. Place the stack navigator outside the NavigationContainer

Solution

1. Step 1: Understand nesting structure

   The drawer navigator is the root, so the stack navigator must be a screen inside the drawer to nest properly.

2. Step 2: Evaluate options

   Add the stack navigator as a screen component inside the drawer navigator's screens correctly nests stack inside drawer by adding it as a screen. The other options break navigation rules or cause errors.

3. Final Answer:

   Add the stack navigator as a screen component inside the drawer navigator's screens -> Option A

4. Quick Check:

   Nested navigator = screen inside parent navigator [OK]

Hint: Put nested navigator as a screen inside parent navigator [OK]

Common Mistakes:

• Wrapping drawer inside stack instead of nesting stack inside drawer
• Using multiple NavigationContainers
• Placing navigators outside NavigationContainer