Tab Navigator (Bottom Tabs) in React Native - Mini App: Build & Ship

Build: Bottom Tab Navigator

Create a bottom tab navigation with three tabs: Home, Settings, and Profile. Each tab shows a simple screen with a title.

Target UI

┌─────────────────────────────┐
│          Home Screen         │
│                             │
│       [Content here]         │
│                             │
├─────────────────────────────┤
│ Home | Settings | Profile   │
└─────────────────────────────┘

Use React Navigation Bottom Tabs

Three tabs named Home, Settings, and Profile

Each tab screen displays a centered title text matching the tab name

Tabs should have icons from react-native-vector-icons (use any icons)

Tab bar should be visible on all screens

Starter Code

React Native

import React from 'react';
import { Text, View } from 'react-native';
// TODO: Import necessary navigation libraries and icons

export default function App() {
  return (
    // TODO: Setup bottom tab navigator here
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Placeholder Screen</Text>
    </View>
  );
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

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';
import Icon from 'react-native-vector-icons/Ionicons';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Home</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Settings</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Profile</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName = '';
            if (route.name === 'Home') {
              iconName = 'home-outline';
            } else if (route.name === 'Settings') {
              iconName = 'settings-outline';
            } else if (route.name === 'Profile') {
              iconName = 'person-outline';
            }
            return <Icon name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: '#2f95dc',
          tabBarInactiveTintColor: 'gray',
          headerShown: false
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

This app uses React Navigation's Bottom Tab Navigator to create three tabs: Home, Settings, and Profile.

Each tab has its own simple screen component that centers a title text.

Icons from react-native-vector-icons/Ionicons are used for each tab, changing color when active or inactive.

The NavigationContainer wraps the navigator to manage navigation state.

The tab bar is always visible, and the header is hidden for a clean look.

Final Result

Completed Screen

┌─────────────────────────────┐
│            Home             │
│                             │
│           [Home]            │
│                             │
├─────────────────────────────┤
│🏠 Home | ⚙️ Settings | 👤 Profile│
└─────────────────────────────┘

Tap 'Settings' tab to switch to Settings screen with title 'Settings' and gear icon highlighted

Tap 'Profile' tab to switch to Profile screen with title 'Profile' and person icon highlighted

Tap 'Home' tab to return to Home screen

Stretch Goal

Add badge count on the Profile tab icon showing number 3

💡 Hint

Use tabBarBadge property in Tab.Screen options to show a badge number

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