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.

Practice

1. What is the main purpose of a Stack Navigator in React Native?

easy

A. To fetch data from an API

B. To style components with CSS

C. To manage screen navigation like a stack of pages

D. To handle user input events

Solution

1. Step 1: Understand navigation concepts

   Stack Navigator organizes screens so you can move forward and back like a stack of pages.

2. Step 2: Identify the correct purpose

   It is not for styling, fetching data, or handling input but for navigation.

3. Final Answer:

   To manage screen navigation like a stack of pages -> Option C

4. Quick Check:

   Stack Navigator = navigation management [OK]

Hint: Stack Navigator stacks screens for forward/back navigation [OK]

Common Mistakes:

• Confusing navigation with styling
• Thinking it handles data fetching
• Assuming it manages user input

2. Which of the following is the correct way to wrap your app with a stack navigator?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize correct nesting

   The NavigationContainer must wrap the entire navigator, which contains Stack.Navigator and its screens.

2. Step 2: Check each option's structure

   Only <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator></NavigationContainer> correctly wraps Stack.Navigator inside NavigationContainer and includes Stack.Screen.

3. Final Answer:

   <NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator></NavigationContainer> -> Option A

4. Quick Check:

   NavigationContainer wraps Stack.Navigator [OK]

Hint: NavigationContainer wraps Stack.Navigator, which holds screens [OK]

Common Mistakes:

• Placing Stack.Screen outside Stack.Navigator
• Wrapping Stack.Screen directly in NavigationContainer
• Incorrect nesting order of components

3. Given this code snippet, what screen will be shown first when the app runs?

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

medium

A. Profile screen

B. Error: No initial screen defined

C. Home screen

D. Settings screen

Solution

1. Step 1: Identify default initial screen

   By default, the first Stack.Screen listed is the initial screen shown.

2. Step 2: Check the order of screens

   The first screen is named "Profile", so the app shows ProfileScreen first.

3. Final Answer:

   Profile screen -> Option A

4. Quick Check:

   First Stack.Screen = initial screen [OK]

Hint: First Stack.Screen listed is the initial screen [OK]

Common Mistakes:

• Assuming Settings is first because of alphabetical order
• Thinking Home screen appears without definition
• Believing an error occurs without initial screen prop

4. What is wrong with this code snippet?

const Stack = createStackNavigator();

function App() {
  return (
    
      
    
  );
}

medium

A. Stack.Screen name must be lowercase

B. Missing NavigationContainer wrapping the navigator

C. HomeScreen component must be imported from react-native

D. Stack.Navigator cannot have only one screen

Solution

1. Step 1: Check for NavigationContainer

   React Navigation requires NavigationContainer to wrap the navigator for proper navigation context.

2. Step 2: Verify other parts

   Screen names can be uppercase, components can be custom, and one screen is allowed.

3. Final Answer:

   Missing NavigationContainer wrapping the navigator -> Option B

4. Quick Check:

   NavigationContainer is required [OK]

Hint: Always wrap Stack.Navigator inside NavigationContainer [OK]

Common Mistakes:

• Omitting NavigationContainer causes navigation failure
• Thinking screen names must be lowercase
• Assuming only built-in components can be screens

5. You want to navigate from the Home screen to the Details screen using a Stack Navigator. Which code snippet correctly performs this navigation inside a button press handler?

function HomeScreen({ navigation }) {
  return (
     ???}
    />
  );
}

hard

A. navigation.push(Details)

B. navigation.popToTop('Details')

C. navigation.goBack('Details')

D. navigation.navigate('Details')

Solution

1. Step 1: Understand navigation methods

   navigation.navigate('ScreenName') moves to a screen, pushing it on the stack if needed.

2. Step 2: Compare options

   push(Details) has a syntax error (missing quotes around screen name); goBack and popToTop are for going back, not forward.

3. Final Answer:

   navigation.navigate('Details') -> Option D

4. Quick Check:

   Use navigate() to go forward to a screen [OK]

Hint: Use navigation.navigate('ScreenName') to move forward [OK]

Common Mistakes:

• Using goBack to go forward
• Using popToTop incorrectly
• Confusing push and navigate methods