Stack Navigator in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Stack Navigator in React Native?

A Stack Navigator manages a stack of screens where you can push new screens on top or pop back to previous ones, like a stack of cards.

beginner

How do you navigate to a new screen using Stack Navigator?

You use the navigation prop's navigate('ScreenName') method to push a new screen onto the stack.

beginner

What happens when you call navigation.goBack() in a Stack Navigator?

It removes the current screen from the stack and shows the previous screen, like going back in history.

intermediate

How do you set the initial screen in a Stack Navigator?

You set the initialRouteName property in the Stack Navigator configuration to the screen you want to show first.

beginner

Why is Stack Navigator useful in mobile apps?

It mimics natural screen transitions and back behavior, making navigation simple and intuitive for users.

Which method pushes a new screen onto the stack in React Native Stack Navigator?

A navigation.goBack()

B navigation.reset()

C navigation.popToTop()

D navigation.navigate('ScreenName')

The navigate method pushes a new screen onto the stack.

What does navigation.goBack() do in Stack Navigator?

A Returns to the previous screen

B Closes the app

C Pushes a new screen

D Reloads the current screen

It removes the current screen and shows the previous one.

How do you specify which screen shows first in a Stack Navigator?

A initialScreen

B initialRouteName

C startRoute

D firstScreen

The initialRouteName property sets the first screen.

Which of these is NOT a feature of Stack Navigator?

A Back button support

B Screen stacking

C Tab bar navigation

D Screen transition animations

Tab bar navigation is handled by a different navigator, not Stack Navigator.

What kind of user experience does Stack Navigator provide?

A Hierarchical screen navigation with back support

B No navigation at all

C Random screen jumps

D Flat list of screens

Stack Navigator provides hierarchical navigation with back support.

Explain how Stack Navigator manages screens in a React Native app.

Think about how a stack of cards works.

Describe how to set up and use Stack Navigator to navigate between two screens.

Start from creating the navigator and then moving between screens.

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