react native-tutorial

React Native Tab Navigation

We must first discuss navigation before we can comprehend how these libraries function. You have what’s referred to as a “stack” of screens in mobile apps. The fundamental module for actually pushing and clearing this stack is React Navigation.

You have your navigation strategy, such as drawers, stacks, or tabs, over the basic navigation library. These all interact with React Navigation in various ways to push or remove screens from the stack.

For instance, this is the setup for a straightforward stack navigator that offers a single screen:

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

As you can see, we start by making a navigation object, followed by a wrapper Navigator and a number of screens by utilising Stack. Although it is the most straightforward representation of your navigation, it is also quite easy to use. When working with programmes that are straightforward or have a small number of displays, this is a fantastic solution.

Minimal 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>
  );
}

Customizing the appearance​

This is similar to how you would customize a native stack navigator — there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in options.

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

Let’s dissect this:

  • tabBarIcon is a supported option in bottom tab navigator. So we know we can use it on our screen components in the options prop, but in this case chose to put it in the screenOptions prop of Tab.Navigator in order to centralize the icon configuration for convenience.
  • tabBarIcon is a function that is given the focused state, color, and size params. If you take a peek further down in the configuration you will see tabBarActiveTintColor and tabBarInactiveTintColor. These default to the iOS platform defaults, but you can change them here. The color that is passed through to the tabBarIcon is either the active or inactive one, depending on the focused state (focused is active). The size is the size of the icon expected by the tab bar.

Add badges to icons​

Sometimes we want to add badges to some icons. You can use the tabBarBadge option to do it:

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />

From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using React Context, Redux, MobX or event emitters.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *