Why navigation manages screen flow in React Native - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the navigation container component.

React Native

import { [1] } from '@react-navigation/native';

Drag options to blanks, or click blank then click option'

ARouteHandler

BScreenManager

CNavigationContainer

DNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name that does not exist in the library.

Confusing navigation container with screen components.

The NavigationContainer is the main component that manages navigation state and links your app to the navigation system.

2fill in blank

medium

Complete the code to create a stack navigator for screen flow.

React Native

const Stack = create[1]Navigator();

Drag options to blanks, or click blank then click option'

AFlow

BTab

CDrawer

DStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Tab' or 'Drawer' which are different navigation types.

Misspelling the navigator type.

The createStackNavigator function creates a stack-based navigation flow, where screens are placed on top of each other.

3fill in blank

hard

Fix the error in the code to navigate to the 'Profile' screen on button press.

React Native

navigation.[1]('Profile');

Drag options to blanks, or click blank then click option'

Anavigate

BgoTo

Cmove

Dswitch

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like 'goTo' or 'move'.

Confusing navigation methods with state setters.

The navigate method is used to move to a different screen in the navigation stack.

4fill in blank

hard

Fill both blanks to define a screen inside the stack navigator.

React Native

<Stack.Screen name=[1] component=[2] />

Drag options to blanks, or click blank then click option'

A"Home"

BHomeScreen

C"Profile"

DProfileScreen

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the screen name.

Passing a string instead of a component for the component prop.

The name prop is a string identifying the screen, and component is the React component to render.

5fill in blank

hard

Fill all three blanks to wrap the app with navigation and define a screen.

React Native

export default function App() {
  return (
    <[1]>
      <Stack.Navigator>
        <Stack.Screen name=[2] component=[3] />
      </Stack.Navigator>
    </[1]>
  );
}

Drag options to blanks, or click blank then click option'

ANavigationContainer

B"Home"

CHomeScreen

D"Profile"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to wrap the navigator with NavigationContainer.

Using component names as strings instead of variables.

The NavigationContainer wraps the navigator to manage navigation state. The screen name is a string, and the component is the screen UI.

Practice

1. Why do we use navigation in a React Native app?
Navigation helps us to:

easy

A. Increase the app's font size

B. Move between different screens smoothly

C. Change the app's background color

D. Store user data permanently

Solution

1. Step 1: Understand the purpose of navigation

   Navigation is designed to help users move between different screens or pages in an app.

2. Step 2: Identify the correct function of navigation

   Changing colors or storing data are not related to navigation's main role.

3. Final Answer:

   Move between different screens smoothly -> Option B

4. Quick Check:

   Navigation controls screen flow = C [OK]

Hint: Navigation is about moving between screens [OK]

Common Mistakes:

• Confusing navigation with styling
• Thinking navigation stores data
• Assuming navigation changes fonts

2. Which of the following is the correct way to create a stack navigator in React Navigation?

easy

A. const Stack = new StackNavigator();

B. const Stack = createNavigatorStack();

C. const Stack = StackNavigator.create();

D. const Stack = createStackNavigator();

Solution

1. Step 1: Recall React Navigation syntax

   The official way to create a stack navigator is by calling createStackNavigator() function.

2. Step 2: Check each option's syntax

   Only const Stack = createStackNavigator(); matches the correct function call and syntax.

3. Final Answer:

   const Stack = createStackNavigator(); -> Option D

4. Quick Check:

   Correct function name = B [OK]

Hint: Remember the exact function name createStackNavigator() [OK]

Common Mistakes:

• Using 'new' keyword incorrectly
• Mixing function and object syntax
• Swapping words in function name

3. Given this React Navigation code snippet:

navigation.navigate('Profile');

What happens when this line runs?

medium

A. The app reloads the current screen

B. The app closes immediately

C. The app moves to the Profile screen

D. An error is thrown because navigate is undefined

Solution

1. Step 1: Understand navigation.navigate()

   This function moves the user to the named screen, here 'Profile'.

2. Step 2: Analyze the options

   Only The app moves to the Profile screen correctly describes moving to the Profile screen; others describe unrelated or error states.

3. Final Answer:

   The app moves to the Profile screen -> Option C

4. Quick Check:

   navigation.navigate('ScreenName') moves screens = A [OK]

Hint: navigate('ScreenName') changes screen [OK]

Common Mistakes:

• Thinking navigate reloads or closes app
• Confusing navigate with goBack
• Assuming navigate causes errors without context

4. What is wrong with this React Navigation code?

function HomeScreen() {
  return (
    <Button title="Go" onPress={() => navigation.navigate('Details')} />
  );
}

medium

A. navigation is not defined inside HomeScreen

B. Button component cannot have onPress

C. navigate should be navigateTo

D. Title prop should be lowercase

Solution

1. Step 1: Check variable usage in HomeScreen

   The code uses navigation.navigate but navigation is not passed or imported in the function.

2. Step 2: Verify other options

   Button supports onPress, navigate is correct method, and Title prop is case-sensitive but correct here.

3. Final Answer:

   navigation is not defined inside HomeScreen -> Option A

4. Quick Check:

   navigation must be defined or passed = A [OK]

Hint: Always pass or get navigation prop in screen components [OK]

Common Mistakes:

• Forgetting to get navigation prop
• Misnaming navigate method
• Misunderstanding Button props

5. You want to allow users to go back to the previous screen after navigating forward. Which React Navigation method should you use to manage this screen flow?

hard

A. navigation.goBack()

B. navigation.reset()

C. navigation.push('ScreenName')

D. navigation.replace('ScreenName')

Solution

1. Step 1: Understand navigation.goBack()

   This method moves the user back to the previous screen in the navigation stack.

2. Step 2: Compare with other methods

   reset clears history, push adds a new screen, replace swaps current screen; only goBack moves backward.

3. Final Answer:

   navigation.goBack() -> Option A

4. Quick Check:

   Go back to previous screen = goBack() = D [OK]

Hint: Use goBack() to return to previous screen [OK]

Common Mistakes:

• Using reset to go back (it clears history)
• Confusing push with goBack
• Thinking replace goes back