Tab Navigator (Bottom Tabs) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the bottom tab navigator from React Navigation.

React Native

import { create[1]BottomTabNavigator } from '@react-navigation/bottom-tabs';

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

AStack

Bcreate

CMaterial

DDrawer

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Stack' or 'Drawer' instead of 'create' in the import.

Forgetting to import from '@react-navigation/bottom-tabs'.

The function to create a bottom tab navigator is createBottomTabNavigator. You import it directly from '@react-navigation/bottom-tabs'.

2fill in blank

medium

Complete the code to create a bottom tab navigator instance.

React Native

const Tab = [1]BottomTabNavigator();

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

Ause

Bnew

CTab

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' keyword which is not needed.

Trying to call 'TabBottomTabNavigator()' instead of 'createBottomTabNavigator()'.

You create a bottom tab navigator by calling the function createBottomTabNavigator() and assigning it to a variable.

3fill in blank

hard

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

React Native

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

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

AHomeScreen

BHome

CScreen

DNavigator

Attempts:

3 left

💡 Hint

Common Mistakes

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

Passing the navigator or screen name instead of the component.

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

4fill in blank

hard

Fill both blanks to set the initial route and screen options in the bottom tab navigator.

React Native

<Tab.Navigator initialRouteName=[1] screenOptions=[2]>
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

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

A"Profile"

B{ headerShown: false }

C"Home"

D{ tabBarActiveTintColor: 'blue' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component name instead of a string for initialRouteName.

Passing screenOptions as a string instead of an object.

The initialRouteName should be the name of the screen as a string, here "Profile". The screenOptions is an object to customize the tab bar, such as setting the active tint color.

5fill in blank

hard

Fill all three blanks to add two screens and export the tab navigator as the main app component.

React Native

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name=[1] component={HomeScreen} />
        <Tab.Screen name=[2] component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default [3];

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

A"Home"

B"Settings"

CApp

DMain

Attempts:

3 left

💡 Hint

Common Mistakes

Using component names instead of strings for screen names.

Exporting a wrong or undefined component.

The screen names must be strings matching the screen purpose, here "Home" and "Settings". The exported component is the App function.