Tab Navigator (Bottom Tabs) in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Tab Navigator in React Native?

A Tab Navigator is a way to switch between different screens using tabs usually placed at the bottom of the app. It helps users move easily between main sections.

beginner

Which library is commonly used to create bottom tab navigation in React Native?

React Navigation library, specifically the @react-navigation/bottom-tabs package, is commonly used to create bottom tab navigators.

intermediate

How do you define a simple bottom tab navigator with two tabs named Home and Settings?

You import createBottomTabNavigator from @react-navigation/bottom-tabs, create a Tab navigator, then add <Tab.Screen> components for Home and Settings screens inside <Tab.Navigator>.

intermediate

What is the purpose of the 'screenOptions' prop in a Tab Navigator?

The 'screenOptions' prop lets you customize the look and behavior of all tabs, like icons, colors, and labels, so the tabs look consistent and user-friendly.

intermediate

How can you make a tab icon change color when selected in a bottom tab navigator?

You use the 'tabBarIcon' option inside 'screenOptions' or individual screen options. It receives a focused boolean to change icon color depending on selection.

Which component creates a bottom tab navigator in React Native?

A createStackNavigator

B createSwitchNavigator

C createDrawerNavigator

D createBottomTabNavigator

The createBottomTabNavigator function from @react-navigation/bottom-tabs creates a bottom tab navigator.

Where are bottom tabs usually placed in a mobile app?

A At the top of the screen

B At the bottom of the screen

C In the middle of the screen

D In a side drawer

Bottom tabs are placed at the bottom of the screen for easy thumb access and clear navigation.

Which prop lets you customize tab icons and labels in a bottom tab navigator?

A screenOptions

B tabBarOptions

C tabBarStyle

D headerOptions

The screenOptions prop allows customization of icons, labels, and styles for tabs.

How do you show a different icon when a tab is selected?

A Change the tabBarLabel

B Change the screen name

C Use tabBarIcon with a focused parameter

D Use a different navigator

The tabBarIcon function receives a focused boolean to change the icon based on selection.

Which package must be installed to use bottom tab navigation in React Native?

A @react-navigation/bottom-tabs

B react-native-tab-view

C @react-navigation/stack

D react-native-navigation

The @react-navigation/bottom-tabs package provides bottom tab navigation.

Explain how to set up a basic bottom tab navigator with two screens in React Native.

Think about the main steps to create tabs and show screens.

Describe how you can customize the appearance of tabs, including changing icons when selected.

Focus on the options that control tab look and behavior.

Practice

1. What is the main purpose of a Bottom Tab Navigator in a React Native app?

easy

A. To handle user authentication and login

B. To display a list of items in a vertical scroll

C. To allow users to switch between main screens using tabs at the bottom

D. To create pop-up alerts and notifications

Solution

1. Step 1: Understand the role of Bottom Tab Navigator

   The Bottom Tab Navigator provides a set of tabs at the bottom of the screen for easy navigation between main app screens.

2. Step 2: Compare with other options

   Options A, B, and D describe different app features unrelated to tab navigation.

3. Final Answer:

   To allow users to switch between main screens using tabs at the bottom -> Option C

4. Quick Check:

   Bottom Tab Navigator = Easy screen switching [OK]

Hint: Tabs at bottom mean screen switching, not lists or alerts [OK]

Common Mistakes:

• Confusing tab navigator with list views
• Thinking it handles login or alerts
• Mixing up navigation types

2. Which of the following is the correct way to wrap a Bottom Tab Navigator in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct wrapping order

   The Bottom Tab Navigator must be inside the NavigationContainer to manage navigation state properly.

2. Step 2: Check each option

   <NavigationContainer><Tab.Navigator></Tab.Navigator></NavigationContainer> correctly wraps Tab.Navigator inside NavigationContainer. <Tab.Navigator><NavigationContainer></NavigationContainer></Tab.Navigator> reverses the order, which is incorrect. <NavigationContainer><Stack.Navigator></Stack.Navigator></NavigationContainer> uses Stack.Navigator, not Tab.Navigator. <Tab.Screen><NavigationContainer></NavigationContainer></Tab.Screen> incorrectly wraps NavigationContainer inside Tab.Screen.

3. Final Answer:

   <NavigationContainer><Tab.Navigator></Tab.Navigator></NavigationContainer> -> Option B

4. Quick Check:

   NavigationContainer wraps Tab.Navigator [OK]

Hint: NavigationContainer always wraps the navigator component [OK]

Common Mistakes:

• Placing NavigationContainer inside Tab.Navigator
• Using Stack.Navigator instead of Tab.Navigator
• Wrapping NavigationContainer inside Tab.Screen

3. Given this code snippet, what label will appear on the second tab?

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    
      
      
    
  );
}

medium

A. Config

B. Settings

C. SettingsScreen

D. Home

Solution

1. Step 1: Check the tabBarLabel option for the second tab

   The second Tab.Screen has options={{ tabBarLabel: 'Config' }}, which overrides the default label.

2. Step 2: Understand default vs custom labels

   Without tabBarLabel, the label would be the name prop 'Settings'. But here, it is replaced by 'Config'.

3. Final Answer:

   Config -> Option A

4. Quick Check:

   tabBarLabel overrides name label [OK]

Hint: Look for tabBarLabel option to find displayed tab label [OK]

Common Mistakes:

• Using the name prop as label ignoring tabBarLabel
• Confusing component name with label
• Assuming default label always shows

4. Identify the error in this Bottom Tab Navigator code:

const Tab = createBottomTabNavigator();

function App() {
  return (
    
      
      
    
  );
}

medium

A. Tab.Screen name props must be numbers

B. Tab.Screen components must be outside Tab.Navigator

C. Tab.Navigator should not have children

D. Missing NavigationContainer wrapping the Tab.Navigator

Solution

1. Step 1: Check for NavigationContainer

   The code does not wrap Tab.Navigator inside NavigationContainer, which is required to manage navigation state.

2. Step 2: Verify Tab.Screen usage

   Tab.Screen components are correctly inside Tab.Navigator, and name props are strings, which is correct.

3. Final Answer:

   Missing NavigationContainer wrapping the Tab.Navigator -> Option D

4. Quick Check:

   NavigationContainer must wrap Tab.Navigator [OK]

Hint: Always wrap navigators inside NavigationContainer [OK]

Common Mistakes:

• Forgetting NavigationContainer
• Placing Tab.Screen outside Tab.Navigator
• Using invalid name prop types

5. You want to add icons to your Bottom Tab Navigator tabs using the tabBarIcon option. Which approach correctly adds a simple icon component to the tabs?

hard

A. Use }} /> inside Tab.Navigator

B. Add directly inside Tab.Navigator without options

C. Wrap Tab.Navigator inside <Icon> component

D. Set tabBarIcon as a string like 'home' in Tab.Screen options

Solution

1. Step 1: Understand tabBarIcon usage

   The tabBarIcon option expects a function returning a React element, typically an icon component.

2. Step 2: Evaluate each option

   Use <Tab.Screen options={{ tabBarIcon: () => <Icon name='home' /> }} /> inside Tab.Navigator correctly uses a function returning <Icon name='home' /> inside options. Add <Icon name='home' /> directly inside Tab.Navigator without options incorrectly places Icon directly inside Tab.Navigator. Wrap Tab.Navigator inside <Icon> component wraps Tab.Navigator inside Icon, which is invalid. Set tabBarIcon as a string like 'home' in Tab.Screen options sets tabBarIcon as a string, which is not supported.

3. Final Answer:

   Use <Tab.Screen options={{ tabBarIcon: () => <Icon name='home' /> }} /> inside Tab.Navigator -> Option A

4. Quick Check:

   tabBarIcon needs a function returning icon component [OK]

Hint: tabBarIcon must be a function returning an icon component [OK]

Common Mistakes:

• Placing icon components outside options
• Using strings instead of functions for tabBarIcon
• Wrapping navigator inside icon components