Nested navigators in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React Native

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

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

ADrawer

BStack

CTab

DSwitch

Attempts:

3 left

💡 Hint

Common Mistakes

Using createTabNavigator instead of createStackNavigator.

Using createDrawerNavigator which is for drawer menus.

The createStackNavigator function is used to create a stack navigator in React Navigation.

2fill in blank

medium

Complete the code to define a nested navigator inside a parent navigator.

React Native

function ParentNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="[1]" component={ChildNavigator} />
    </Stack.Navigator>
  );
}

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

ADetails

BProfile

CChildStack

DSettings

Attempts:

3 left

💡 Hint

Common Mistakes

Using a screen name that does not match the nested navigator component.

Using a screen name unrelated to the nested navigator.

The nested navigator is usually given a name like ChildStack to represent the nested stack.

3fill in blank

hard

Fix the error in the nested navigator component declaration.

React Native

const ChildNavigator = () => {
  return (
    <[1].Navigator>
      <[1].Screen name="ChildHome" component={ChildHomeScreen} />
    </[1].Navigator>
  );
};

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

ASwitch

BTab

CDrawer

DStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tab or Drawer instead of Stack when the navigator is a stack.

Using undefined navigator object.

The nested navigator uses the Stack object created by createStackNavigator().

4fill in blank

hard

Fill both blanks to correctly nest a Tab navigator inside a Stack navigator.

React Native

const Tab = create[1]Navigator();

function ChildNavigator() {
  return (
    <Tab.[2]>
      <Tab.Screen name="TabHome" component={TabHomeScreen} />
    </Tab.[2]>
  );
}

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

ABottomTab

BNavigator

CScreen

DStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Stack' instead of 'BottomTab' for the tab navigator.

Using 'Screen' instead of 'Navigator' for the wrapper.

The createBottomTabNavigator creates a tab navigator, and Tab.Navigator is the component that wraps the screens.

5fill in blank

hard

Fill all three blanks to correctly set up a nested drawer navigator inside a stack navigator.

React Native

const Drawer = create[1]Navigator();

function ChildNavigator() {
  return (
    <Drawer.[2]>
      <Drawer.[3] name="DrawerHome" component={DrawerHomeScreen} />
    </Drawer.[2]>
  );
}

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

ADrawer

BNavigator

CScreen

DStack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Stack' or 'Tab' instead of 'Drawer' for drawer navigator.

Mixing up 'Screen' and 'Navigator' components.

The drawer navigator is created with createDrawerNavigator, wrapped by Drawer.Navigator, and screens are added with Drawer.Screen.