# create MaterialBottomTabNavigator implementation in React Native

A material-design themed tab bar on the bottom of the screen that lets you switch between different routes with animation. Routes are lazily initialized - their screen components are not mounted until they are first focused.

npm Installations

 yarn add @react-navigation/material-bottom-tabs react-native-paper

npm install @react-navigation/native

yarn add react-native-reanimated

yarn add react-native-gesture-handler

yarn add react-native-screens

yarn add react-native-safe-area-context

yarn add @react-native-community/masked-view

pod install

Usage

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

Packages version

"react": "16.13.1"

"react-native": "0.63.4"

"@react-navigation/drawer": "^5.11.5"

Run command

"android": "react-native run-android"

"ios": "react-native run-ios"

Ref :

https://reactnavigation.org/docs/material-bottom-tab-navigator

License

Info.RahulDa