How to Create a Tab Navigation in React Native

React Navigation is a popular library for handling routing and navigation in React Native apps. One of the most common types of navigation is the tab navigation, which allows users to switch between different screens using a tab bar at the bottom of the screen.

In this guide, we will walk through setting up a simple tab navigation in a React Native application using react-navigation.

First, we need to install react-navigation and the required dependencies for tab navigation:

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

Then, install the react-native-gesture-handler and react-native-reanimated libraries for gesture support:

npm install react-native-gesture-handler react-native-reanimated

Ensure that these libraries are properly linked in your project and run your app once to initialize them correctly.

Next, import the necessary components in your main app file (usually App.js or index.js):

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

Create a Tab Navigator using the createBottomTabNavigator function:

const Tab = createBottomTabNavigator();

You need some screen components to display in the tabs. For simplicity, let's create two example screens:

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

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

Now, add these screen components to your tab navigator using the Tab.Navigator and Tab.Screen components:

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

You can customize the tab bar by passing options to Tab.Navigator and Tab.Screen. For example, you can add icons to your tabs using tabBarIcon:

<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';
      }

      // You can return any component that you like here!
      return <Ionicons name={iconName} size={size} color={color} />;
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

For this to work, make sure you have an icon library installed, like @expo/vector-icons:

npm install @expo/vector-icons

You now have a functional tab navigation in your React Native app! You can add more screens to the tab navigator and customize it as per your needs. React Navigation makes it easy to manage complex routing and navigation flows in your mobile applications.