Stack Navigator in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the stack navigator from React Navigation.

React Native

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

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

Astack

BStack

CcreateStackNavigator

DStackNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Stack' or 'stack' which are not valid imports.

Using 'StackNavigator' which is not the correct function name.

The function to create a stack navigator is createStackNavigator from '@react-navigation/stack'.

2fill in blank

medium

Complete the code to create a stack navigator instance.

React Native

const Stack = [1]();

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

AcreateStack

BStack

CStackNavigator

DcreateStackNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call 'StackNavigator' which is not a function.

Using 'Stack' which is the variable name, not a function.

You call createStackNavigator() to create the stack navigator instance.

3fill in blank

hard

Fix the error in the code to define a screen inside the stack navigator.

React Native

<Stack.Navigator>
  <Stack.Screen name="Home" component=[1] />
</Stack.Navigator>

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

ANavigator

BHomeScreen

CScreen

DHome

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string like 'Home' instead of a component.

Using 'Screen' or 'Navigator' which are not components.

The component prop must be a React component, such as HomeScreen.

4fill in blank

hard

Fill both blanks to navigate to the Profile screen using the navigation prop.

React Native

navigation.[1]('[2]');

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

Anavigate

BgoBack

CProfile

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'goBack' which goes back to the previous screen.

Using 'push' which also works but is less common here.

Use navigation.navigate('Profile') to go to the Profile screen.

5fill in blank

hard

Fill all three blanks to define a stack navigator with two screens: HomeScreen and ProfileScreen.

React Native

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

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

A"Home"

BHomeScreen

C"Profile"

DProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around screen names.

Using component names as strings instead of variables.

The first screen's name is "Home" and component is HomeScreen. The second screen's name is "Profile".