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.