React Native: Create Material Bottom Tab Navigator

Syntax

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

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

Example

import React from 'react';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
      barStyle={{ backgroundColor: '#6200ee' }}
    >
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color }) => (
            <Icon name="settings" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default MyTabs;

Output

The above code will create a Material Bottom Tab Navigator with two tabs: Home and Settings. Clicking on either tab will display the corresponding screen.

Explanation

The Material Bottom Tab Navigator is a React Native component that provides a tab bar for navigation. It is based on the Material Design Guidelines and provides a consistent look and feel across Android devices.

The createMaterialBottomTabNavigator function creates a new Material Bottom Tab Navigator. The Tab.Navigator component is where we add Tab.Screen components to define the tabs and screens respectively.

Each Tab.Screen component defines a single screen in the navigation stack. The name prop defines the name of the screen and the component prop defines the component that should be rendered when the screen is active. We can also customize each tab by passing an options prop with tabBarLabel and tabBarIcon props.

Use

The Material Bottom Tab Navigator is typically used to organize content into different categories, such as sections of an app or different types of content.

The Material Bottom Tab Navigator can be used in any React Native project that uses React Navigation 5.

Important Points

• The Material Bottom Tab Navigator is based on the Material Design Guidelines and provides a consistent look and feel across Android devices.
• The Tab.Screen component defines a single screen in the navigation stack.
• The options prop on each Tab.Screen component can be used to customize each tab.

Summary

The Material Bottom Tab Navigator is a powerful tool for organizing content into different categories and providing a consistent user experience across Android devices. With its easy-to-use syntax and customizable options, developers can quickly create a clean and intuitive navigation experience for their users.