Tab navigation in React Native

Tab navigation in react native - Perhaps the most widely recognized style of route in portable applications is tab-based route. This can be tabs on the lower part of the screen or on the top underneath the header (or even rather than a header).

This guide covers createBottomTabNavigator. You may likewise utilize createMaterialBottomTabNavigator and createMaterialTopTabNavigator to add tabs to your application.

Prior to proceeding, first introduce @react-route/base tabs:

Tab navigation in React Native

npm install @react-navigation/bottom-tabs

Example of tab-based navigation

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

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

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

const Tab = createBottomTabNavigator();

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

Tweaking the appearance

This is like the way in which you would tweak a stack guide — there are a few properties that are set when you introduce the tab pilot and others that can be modified per-screen in choices.

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';

// (...)

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

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            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>
    </NavigationContainer>
  );
}

tabBarIcon is an upheld choice in base tab guide. So we realize we can involve it on our screen parts in the choices prop, however for this situation decided to place it in the screenOptions prop of Tab.Navigator to unify the symbol arrangement for accommodation.

tabBarIcon is a capability that is given the engaged state, variety, and size params. In the event that you bring a look further down in the design you will see tabBarActiveTintColor and tabBarInactiveTintColor. These default to the iOS stage defaults, yet you can transform them here. The variety that is gone through to the tabBarIcon is either the dynamic or dormant one, contingent upon the engaged state (centered is dynamic). The size is the size of the symbol expected by the tab bar.

Peruse the full Programming interface reference for additional data on createBottomTabNavigator design choices.