Tab Navigator (Bottom Tabs) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the initial screen shown by this Bottom Tab Navigator?

Consider this React Native code using React Navigation's Bottom Tabs. Which screen will appear first when the app loads?

React Native

import React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return <View><Text>Home Screen</Text></View>;
}

function SettingsScreen() {
  return <View><Text>Settings Screen</Text></View>;
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Settings">
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

A Home Screen

B Settings Screen

C Blank screen with no text

D App crashes with error

💡 Hint

Look at the initialRouteName prop in the Tab.Navigator component.

The initialRouteName prop sets which tab screen shows first. Here, it is set to "Settings", so the Settings Screen appears initially.

📝 Syntax

intermediate

Which option correctly adds a badge with number 3 on the Notifications tab?

You want to show a badge with the number 3 on the Notifications tab in a Bottom Tab Navigator. Which code snippet correctly does this?

React Native

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

<Tab.Navigator>
  <Tab.Screen
    name="Notifications"
    component={NotificationsScreen}
    options={/* Which option here? */}
  />
</Tab.Navigator>

A options={{ tabBarOptions: { badge: 3 } }}

B options={{ badge: 3 }}

C options={{ tabBarBadge: 3 }}

D options={{ tabBarBadgeText: '3' }}

💡 Hint

The property to show a badge on a tab is tabBarBadge.

The correct property to add a badge number on a tab is tabBarBadge inside options. Other options are invalid or do not exist.

❓ lifecycle

advanced

When does the component inside a Bottom Tab Screen unmount?

In a Bottom Tab Navigator, when does the component of a tab screen unmount by default?

A Every time the tab is focused

B When the user navigates away to another tab

C Immediately after the screen is rendered

D Only when the navigator unmounts or the screen is removed

💡 Hint

Think about whether switching tabs destroys the screen component by default.

By default, Bottom Tab Navigator keeps all tab screens mounted to preserve state and improve performance. Components unmount only if the navigator unmounts or the screen is removed.

❓ navigation

advanced

What happens if you call navigation.navigate('Profile') but 'Profile' is not a tab screen?

In a Bottom Tab Navigator with tabs Home and Settings only, what happens if you call navigation.navigate('Profile')?

A The app throws an error: 'There is no route named Profile'

B The app navigates to the last visited tab

C The app stays on the current tab without any change

D The app navigates to a blank screen with no content

💡 Hint

Navigation only works to registered routes in the navigator.

Calling navigate with a route name not registered in the navigator causes an error because React Navigation cannot find that screen.

🧠 Conceptual

expert

How to preserve state in a tab screen when switching tabs?

You want to keep the state of a tab screen (like scroll position or form input) when switching between tabs in a Bottom Tab Navigator. What is the best approach?

A Do nothing, state is preserved by default

B Use lazy: true in Tab.Navigator props

C Use unmountOnBlur: true in screen options

D Wrap the screen component in React.memo

💡 Hint

Think about whether tab screens unmount by default when switching tabs.

By default, Bottom Tab Navigator keeps all tab screens mounted, so their state is preserved automatically when switching tabs.

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