Stack Navigator in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you call navigation.navigate('Profile')?

Given a React Native app using React Navigation's Stack Navigator with two screens: Home and Profile, what is the result of calling navigation.navigate('Profile') from the Home screen?

React Native

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return null; // Imagine a button calls navigation.navigate('Profile')
}

function ProfileScreen() {
  return null;
}

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

A The app navigates to the Profile screen and adds it on top of the stack.

B The app replaces the Home screen with the Profile screen without adding to the stack.

C The app goes back to the previous screen in the stack.

D The app reloads the Home screen.

💡 Hint

Think about how stack navigation works when you navigate to a new screen.

Calling navigation.navigate('Profile') pushes the Profile screen on top of the current stack. The Home screen remains below it, so the user can go back.

❓ lifecycle

intermediate

What happens to the Home screen component when navigating to Profile?

In a Stack Navigator, when you navigate from Home to Profile, what happens to the Home screen component's state and lifecycle?

A Home screen component remains mounted and keeps its state.

B Home screen component is unmounted and destroyed.

C Home screen component is paused and loses its state.

D Home screen component reloads and resets its state.

💡 Hint

Think about how stack navigation keeps screens in memory.

Stack Navigator keeps previous screens mounted in the stack to preserve their state and lifecycle until popped.

📝 Syntax

advanced

Which code correctly defines a Stack Navigator with two screens?

Choose the correct React Native code snippet that defines a Stack Navigator with Home and Profile screens.

A

const Stack = createNativeStackNavigator();

<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />

B

const Stack = createStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

C

const Stack = createNativeStackNavigator();

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

D

const Stack = createNativeStackNavigator();

<Stack.Navigator>
  <Screen name="Home" component={HomeScreen} />
  <Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

💡 Hint

Remember the correct import and component names for native stack navigator.

Option C correctly uses createNativeStackNavigator and wraps screens inside with components.

❓ navigation

advanced

What is the effect of navigation.pop() in a Stack Navigator?

In a Stack Navigator, what happens when you call navigation.pop() from the Profile screen?

A It resets the entire stack to the initial screen.

B It removes the Profile screen from the stack and shows the previous screen.

C It pushes a new instance of the Profile screen on top of the stack.

D It does nothing if there is only one screen in the stack.

💡 Hint

Think about how pop works in a stack data structure.

navigation.pop() removes the current top screen from the stack, revealing the previous screen underneath.

🔧 Debug

expert

Why does navigation.navigate('Profile') not work as expected?

You have a Stack Navigator with screens Home and Profile. From Home, calling navigation.navigate('Profile') does not navigate to Profile. What is the most likely cause?

React Native

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* Profile screen is missing here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

A The NavigationContainer is missing, so navigation does not work.

B navigation.navigate requires a second parameter with screen props to work.

C You must use navigation.push instead of navigate to go to Profile.

D Profile screen is not registered in the Stack Navigator, so navigation.navigate('Profile') fails.

💡 Hint

Check if the screen name exists in the navigator.

If the Profile screen is not registered in the Stack Navigator, navigation.navigate('Profile') cannot find it and does nothing.