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.