Nested navigators in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

What screen is shown after navigating to 'Profile' inside nested stack?

Consider a React Navigation setup with a bottom tab navigator containing a nested stack navigator for the 'User' tab. The stack has screens: 'UserHome' and 'Profile'. If you navigate to 'Profile' from 'UserHome', which screen will be visible?

React Native

const UserStack = createStackNavigator();

function UserStackScreen() {
  return (
    <UserStack.Navigator>
      <UserStack.Screen name="UserHome" component={UserHomeScreen} />
      <UserStack.Screen name="Profile" component={ProfileScreen} />
    </UserStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="User" component={UserStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

// From UserHomeScreen, calling navigation.navigate('Profile')

A An error occurs because 'Profile' is not a tab screen.

B The HomeScreen from the bottom tab navigator is shown.

C The ProfileScreen inside the UserStack is shown.

D The UserHomeScreen remains visible; navigation does nothing.

💡 Hint

Think about how nested stack navigators handle screen names inside their own navigator.

Navigating to 'Profile' inside the nested UserStack navigator shows the ProfileScreen because 'Profile' is defined in the stack navigator inside the 'User' tab. The bottom tab navigator does not have a screen named 'Profile', so navigation affects the nested stack.

❓ ui_behavior

intermediate

How does header display behave with nested stack inside tab navigator?

In a React Navigation app, a bottom tab navigator contains a nested stack navigator. The stack navigator has header shown by default. What happens to the header when switching tabs?

React Native

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

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="StackTab" component={StackScreen} />
        <Tab.Screen name="OtherTab" component={OtherScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

A Headers from both tab and stack navigators are shown simultaneously.

B The header from the stack navigator is visible only on the StackTab screens.

C No header is shown because the tab navigator disables headers by default.

D The header is always visible on all tabs regardless of nested navigators.

💡 Hint

Remember that stack navigators control their own headers independently inside tabs.

The stack navigator inside the tab controls its own header visibility. When on the StackTab, the stack header shows. On other tabs, the stack header is not visible because those tabs render different components.

❓ lifecycle

advanced

Which lifecycle hook triggers when switching between nested navigators?

In React Navigation, when switching from one tab to another, each with nested stack navigators, which React hook is called on the screen component that becomes visible?

React Native

function ScreenA({ navigation }) {
  React.useEffect(() => {
    console.log('ScreenA mounted or focused');
  }, []);

  React.useFocusEffect(
    React.useCallback(() => {
      console.log('ScreenA focused');
      return () => console.log('ScreenA unfocused');
    }, [])
  );

  return <View><Text>Screen A</Text></View>;
}

A useFocusEffect runs when the screen becomes visible after tab switch.

B No lifecycle hooks run when switching tabs.

C componentDidMount is called again on tab switch.

D useEffect with empty dependency runs every time the tab changes.

💡 Hint

Think about hooks that respond to screen focus in React Navigation.

useFocusEffect runs its effect callback every time the screen gains focus, such as when switching tabs. useEffect with empty dependencies runs only once on mount. componentDidMount is not used in functional components.

📝 Syntax

advanced

Which code correctly nests a stack navigator inside a tab navigator?

Choose the correct React Navigation code snippet that nests a stack navigator inside a bottom tab navigator.

A

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

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Stack" component={StackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

B

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

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Tabs" component={Tab} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

C

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Stack" component={StackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

D

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

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Tabs" component={Tab} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

💡 Hint

The stack navigator must be a component inside the tab navigator's screen.

Option A correctly defines a stack navigator component and uses it as a screen inside the tab navigator. Option A incorrectly nests tabs inside a stack without defining the Tab component properly. Option A uses StackScreen before defining Stack, causing an error. Option A nests tabs inside a stack, which is not nesting stack inside tab.

🔧 Debug

expert

Why does navigation.navigate('Profile') fail inside nested stack?

Given a nested stack navigator inside a tab navigator, calling navigation.navigate('Profile') from a screen inside the tab causes an error: 'The action 'NAVIGATE' with payload {name: 'Profile'} was not handled by any navigator.' What is the likely cause?

React Native

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

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

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="StackTab" component={StackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

// From a screen outside StackTab, calling navigation.navigate('Profile')

A The 'Profile' screen name is misspelled in the stack navigator.

B The 'Profile' screen is not registered in any navigator, causing the error.

C The navigation container is missing, so navigation actions fail.

D Trying to navigate to 'Profile' from outside the nested stack without specifying the nested navigator causes the error.

💡 Hint

Think about how navigation actions target nested navigators by name.

When navigating to a screen inside a nested navigator from outside, you must specify the nested navigator's name and the screen name, e.g., navigation.navigate('StackTab', { screen: 'Profile' }). Calling navigation.navigate('Profile') alone fails because the root navigator does not have a 'Profile' screen.