@react-navigation/bottom-tabs

What is @react-navigation/bottom-tabs?

@react-navigation/bottom-tabs is a library for React Native that provides a customizable bottom tab navigator. It allows developers to create a tab-based navigation system in their mobile applications, making it easy to switch between different screens.

What are @react-navigation/bottom-tabs's main functionalities?

Basic Bottom Tab Navigator

This code sets up a basic bottom tab navigator with two tabs: Home and Settings. Each tab is linked to a different screen component.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Custom Tab Bar Icons

This code demonstrates how to add custom icons to the bottom tabs using the Ionicons library. The icons change based on whether the tab is focused or not.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'ios-home' : 'ios-home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-settings' : 'ios-settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Custom Tab Bar Component

This code shows how to create a custom tab bar component. The custom tab bar is a simple row of buttons that change color when focused.

import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={index}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

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

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Other packages similar to @react-navigation/bottom-tabs

react-native-tab-view

react-native-tab-view is a cross-platform tab view component for React Native. It provides a swipeable tab navigation experience similar to that of @react-navigation/bottom-tabs but focuses more on a swipeable interface rather than a bottom tab bar.

react-native-navigation

react-native-navigation is a complete navigation solution for React Native, developed by Wix. It offers a more native experience and includes various navigation patterns, including bottom tabs. It is more complex and provides more control over the navigation stack compared to @react-navigation/bottom-tabs.

react-native-material-bottom-navigation

react-native-material-bottom-navigation is a library that provides a material design bottom navigation bar for React Native. It is specifically designed to follow material design guidelines and offers a more visually appealing bottom navigation bar compared to @react-navigation/bottom-tabs.

README

@react-navigation/bottom-tabs

Bottom tab navigator for React Navigation following iOS design guidelines.

Documentation can be found on the React Navigation website.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/native @react-navigation/bottom-tabs

Now we need to install react-native-safe-area-context.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-safe-area-context

If you are not using Expo, run the following:

yarn add react-native-safe-area-context

If you are using Expo, you are done. Otherwise, continue to the next steps.

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

Usage

import { MaterialCommunityIcons } from 'react-native-vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const getTabBarIcon = name => ({ color, size }) => (
  <MaterialCommunityIcons name={name} color={color} size={size} />
);

const BottomTabs = createBottomTabNavigator();

export default function App() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen
        name="article"
        component={Article}
        options={{
          tabBarLabel: 'Article',
          tabBarIcon: getTabBarIcon('file-document-box'),
        }}
      />
      <BottomTabs.Screen
        name="chat"
        component={Chat}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: getTabBarIcon('message-reply'),
        }}
      />
      <BottomTabs.Screen
        name="contacts"
        component={Contacts}
        options={{
          tabBarLabel: 'Contacts',
          tabBarIcon: getTabBarIcon('contacts'),
        }}
      />
    </BottomTabs.Navigator>
  );
}