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