Drawer Navigator in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React Native

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

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

ASwitch

BStack

CTab

DDrawer

Attempts:

3 left

💡 Hint

Common Mistakes

Using createStackNavigator instead of createDrawerNavigator

Using createTabNavigator which is for bottom tabs

The drawer navigator is created using createDrawerNavigator from @react-navigation/drawer.

2fill in blank

medium

Complete the code to create a drawer navigator instance.

React Native

const Drawer = create[1]Navigator();

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

AStack

BDrawer

CTab

DSwitch

Attempts:

3 left

💡 Hint

Common Mistakes

Calling createStackNavigator() instead of createDrawerNavigator()

Forgetting the parentheses () after the function

You create a drawer navigator instance by calling createDrawerNavigator().

3fill in blank

hard

Fix the error in the drawer navigator screen declaration.

React Native

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

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

AScreen

BHome

CHomeScreen

DDrawer

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string like 'Home' instead of a component

Passing the navigator itself as component

The component prop expects a React component, like HomeScreen, not a string or other value.

4fill in blank

hard

Fill both blanks to add a drawer screen with a custom title.

React Native

<Drawer.Screen name="Profile" component=[1] options={{ title: [2] }} />

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

AProfileScreen

B"User Profile"

C"Profile"

DHomeScreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name that does not exist

Not wrapping the title string in quotes

The component should be the screen component, and the title option is a string shown in the drawer.

5fill in blank

hard

Fill all three blanks to create a drawer navigator with two screens.

React Native

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name=[1] component=[2] />
      <Drawer.Screen name=[3] component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

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

A"Home"

BHomeScreen

C"Settings"

DProfileScreen

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes for screen names

Using strings instead of components for component prop

The first screen's name is "Home" and its component is HomeScreen. The second screen's name is "Settings" with component SettingsScreen.