React Native Bottom Tab

Summary: in this tutorial, you will learn how to create a bottom tab in your React Native app using the React Navigation library.

Introduction to React Native Bottom Tab component

To create a tab bar at the bottom of the screen in your app, you use the Bottom Tab in the React Navigation library.

The Bottom Tab allows you to navigate between different screens. Each tab represents a route. You can navigate between these routes by tapping on the tabs.

The Bottom Tab consists of:

A Tab Bar: Display at the bottom of the screen with navigation tabs.
Icons and Labels: Each tab can have an icon and label, which represents a route.

You can customize the Bottom Tab such as:

Modifying styles.
Adding animations.
Changing behaviors.

Additionally, you can use the Bottom Tab with other navigators such as Stack Navigators to create flexible navigation options.

Creating a React Native app with React Navigation

In this section, you’ll explore how to set up and use the bottom tab navigator in your app.

Requirements

Before getting started, make sure that you have the following:

react-native >= 0.63.0
expo >= 41 (if you use Expo Go)

Setting up a new project

First, open your terminal and execute the following command to create a new React Native app:

npx create-expo-app tab --template blankCode language: JavaScript (javascript)

This command creates the tab directory and initializes the React Native app structure.

Second, navigate to the project directory tab:

cd tabCode language: JavaScript (javascript)

Third, install the React Navigation library and its dependencies by executing the following command:

npm install @react-navigation/native @react-navigation/bottom-tabs react-native-screens react-native-safe-area-contextCode language: JavaScript (javascript)

Creating a Bottom Tab Navigation

Step 1. Create a new directory screens in the project directory to store the screens.

Step 2. Create a Home screen in the screens directory:

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Home = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Home Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Home;Code language: JavaScript (javascript)

Step 3. Create a Profile screen in the screens directory:

import { SafeAreaView, StyleSheet, Text, View } from 'react-native';

const Profile = () => {
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.screen}>
                <Text>Profile Screen</Text>
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

export default Profile;Code language: JavaScript (javascript)

Step 4. Create an index.js in the screens directory, import the Home and Profile screens, and export them right away:

import Home from './Home.jsx';
import Profile from './Profile.jsx';

export { Home, Profile }Code language: JavaScript (javascript)

By doing this, you can import all screens to the App.js from the screens directory using a single import:

import { Home, Profile} from './screens/index';Code language: JavaScript (javascript)

Step 5. Import the Home and Profile screens into the App.js file and place the Home screen as the main component:

import { Home, Profile } from './screens/index';

export default function App() {
  return (
    <Home />
  );
}Code language: JavaScript (javascript)

Step 6. Open the terminal and run the app:

npm startCode language: JavaScript (javascript)

Step 7. Create a new directory called components to store reusable React components. Inside the components directory, create a new TabIcon component.

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

const TabIcon = ({ focused, name, size, color }) => {
  return <MaterialCommunityIcons name={focused ? name : `${name}-outline`} size={size} color={color} />
};


export const TabIcons = {
  home: 'home',
  account: 'account',
  // more MaterialCommunityIcons with the outline versions here
  // ...
}


export default TabIcon;Code language: JavaScript (javascript)

The TabIcon displays an icon when the tab is focused and its outline version when the tab is not focused. Additionally, export the TabIcons object with the values are the icon names from the MaterialCommunityIcons library.

Step 8. Modify the App.js to create a Bottom Tab navigator:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';

const BottomTab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <BottomTab.Navigator>
        <BottomTab.Screen
          name="Home"
          component={Home}
          options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />

        <BottomTab.Screen
          name="Settings"
          component={Profile}
          options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
        />
      </BottomTab.Navigator>
    </NavigationContainer>
  );
}

export default App;Code language: JavaScript (javascript)

How it works.

First, import NavigationContainer component and createBottomTabNavigator function from the React Navigation library:

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';Code language: JavaScript (javascript)

Second, import the Home and Profile screens as well as the TabIcon components:

import { Home, Profile } from './screens/index';
import TabIcon, { TabIcons } from './components/TabIcon';Code language: JavaScript (javascript)

Third, create a new Bottom Tab Navigator object by calling the createBottomTabNavigator function:

const BottomTab = createBottomTabNavigator();Code language: JavaScript (javascript)

The Bottom Tab Navigator has two properties which are the React Native components:

Navigator
Screen

Finally, use the NavigationContainer component as the root component of the app:

<NavigationContainer>
  <BottomTab.Navigator>

    <BottomTab.Screen
      name="Home"
      component={Home}
      options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.home} size={size} color={color} /> }} />

    <BottomTab.Screen
      name="Settings"
      component={Profile}
      options={{ tabBarIcon: ({ focused, color, size }) => <TabIcon focused={focused} name={TabIcons.account} size={size} color={color} /> }}
    />
  </BottomTab.Navigator>
</NavigationContainer>Code language: JavaScript (javascript)

The Screen component includes the name, component, and options props:

The name prop specifies the route name used for navigation.
The component prop defines the component to render.
The options prop determines the options of the tab. It sets the tabBarIcon to the custom TabIcon component.

The Bottom Tab Navigator has two routes Home and Profile. When you press a tab, the corresponding screen will display:

Summary

Use the Bottom Tab Navigator from the React Navigation library to create a bottom tab on your app.

Was this tutorial helpful ?