How to Implement Bottom Tab Navigation in a React Native App?

Bottom tab navigation is a very common UI for mobile applications in today’s world. Bottom tab navigation allows for screen switching actions by tapping with touch making it an ideal way to navigate through your application.

This tutorial will talk about how to implement bottom tab navigation in a React Native app.

Why Use Bottom Tab Navigation?

There are several benefits of using bottom tab navigation:

• Improves user reachability to core features of the app.
• Keeps navigation visible and consistent.
• Enhances UI/UX by making movement between sections quick and clear.
• It is ideal for apps with generally 3-5 main sections.

Implementing Bottom Tab Navigation in a React Native App:

Step 1: Installation

Install the necessary packages:

Using npm:

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

Using yarn:

yarn add @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context

If you are using iOS, inside your iOS directory, run:

pod install

Step 2: Creating the Tab Navigator

First import createBottomTabNavigator and initialize your tab navigator.

import { createBottomTabNavigator } from 
'@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator>
      {/* Tab screens */}
    </Tab.Navigator>
  );
}

Step 3: Defining Tab Screens

Each tab in your bottom navigation is represented by a Tab.Screen component. You need to assign a name for the tab and associate it to a component (the screen that will be displayed when the tab is active).

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Step 4: Customizing Tab Bar Icons and Labels

You have control over the styling of the tab bar, including icons and import Ionicons from ‘react-native-vector-icons/Ionicons’; // Example for icons

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'settings' : 'settings-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Step 5: Integrating into App.js

Finally, render your MyTabs component inside the NavigationContainer in your App.js.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './src/navigation/MyTabs'; 
function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
export default App;

Conclusion:

Bottom tab navigation is a must-have for many mobile apps, and React Navigation makes it simple to implement in React Native. You can enhance it with animations, badges, and custom icons to fit your app’s branding.

With this setup, you can easily expand your navigation to include more features, deep linking, and nested navigators for more complex flows.

Happy Coding!

FAQ

1. What is bottom tab navigation in React Native?

Bottom tab navigation is a navigation pattern where a bar at the bottom of the screen contains multiple tabs. Each tab represents a different screen or feature, allowing users to switch between them easily.

2. Which library is best for implementing bottom tab navigation in React Native?

The most popular and recommended library is React Navigation with the @react-navigation/bottom-tabs package. It is well-maintained, customizable, and supports gestures and animations.

3. How many tabs should I use in bottom navigation?

For best usability, 3–5 tabs are recommended. Too many tabs can make navigation cluttered and confusing for users.