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.