How to create Material Bottom Tab Navigator in React Native ? - GeeksforGeeks

25 Jul, 2021
To create a Bottom Tab Navigator using Material, we need to use the createMaterialBottomTabNavigator function available in the react-navigation library. It is designed with the material theme tab bar on the bottom of the screen. It provides you with pleasing UI features and allows you to switch between different routes with animation. The most important highlight of the Material Bottom Tab Navigator is that routes are “lazily initialized”, i.e., the screen components corresponding to the routes are not mounted until they are focused upon.
Creating Application And Installing Modules:
Step 1: Open your terminal and install expo-cli by the following command.npm install -g expo-cli
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.expo init demo-app 
Step 2: Now create a project by the following command.
expo init demo-app
 
Step 3: Now go into your project folder i.e.demo-appcd demo-app
Step 3: Now go into your project folder i.e.demo-app
cd demo-app
Step 4: Install the required packages using the following command:npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons
Step 4: Install the required packages using the following command:
npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons
Project Structure: The project directory should look like the following:
Project Structure
Example: Now, let’s set up our Material Bottom Tab Navigator, along with some basic CSS styling. There will be 3 screens in our demo application: Home Screen, User Screen, and Settings Screen. Thus, we will have 3 tabs to navigate between these 3 screens. First, we will add our App.js file which will hold the Material Bottom Tab Navigator logic. Along with the basic information regarding the screen and label, we will also add icons and basic styles while setting it up.
App. js
import React from "react";import { Ionicons } from "@expo/vector-icons";import { createAppContainer } from "react-navigation";import { createMaterialBottomTabNavigator } from    "react-navigation-material-bottom-tabs";  import HomeScreen from "./screens/HomeScreen";import UserScreen from "./screens/UserScreen";import SettingScreen from "./screens/SettingScreen";  const TabNavigator = createMaterialBottomTabNavigator(  {    Home: {      screen: HomeScreen,      navigationOptions: {        tabBarLabel: "Home",        tabBarIcon: (tabInfo) => (          <Ionicons            name="md-home"            size={tabInfo.focused ? 26 : 20}            color={tabInfo.tintColor}          />        ),      },    },    User: {      screen: UserScreen,      navigationOptions: {        tabBarLabel: "User",        tabBarIcon: (tabInfo) => (          <Ionicons            name="md-person-circle-outline"            size={tabInfo.focused ? 26 : 20}            color={tabInfo.tintColor}          />        ),      },    },    Setting: {      screen: SettingScreen,      navigationOptions: {        tabBarLabel: "Setting",        tabBarIcon: (tabInfo) => (          <Ionicons            name="md-settings-outline"            size={tabInfo.focused ? 26 : 20}            color={tabInfo.tintColor}          />        ),      },    },  },  {    initialRouteName: "Home",    barStyle: { backgroundColor: "#006600" },  });  const Navigator = createAppContainer(TabNavigator);  export default function App() {  return (    <Navigator>      <HomeScreen />    </Navigator>  );}
Now, we need the three screens we will navigate to.
HomeScreen.js
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const Home = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>      <Ionicons name="md-home" size={80} color="#006600" />    </View>  );};  export default Home;
UserScreen.js
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const User = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>User Screen!</Text>      <Ionicons name="md-person-circle-outline" size={80} color="#006600" />    </View>  );};  export default User;
SettingScreen.js
import React from "react";import { Text, View } from "react-native";import { Ionicons } from "@expo/vector-icons";  const Settings = () => {  return (    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>      <Ionicons name="md-settings-outline" size={80} color="#006600" />    </View>  );};  export default Settings;
Run the file: Start the server by using the following command.
expo start
Output: Notice when you tap on a single tab, there is a slight animation. This is automatically provided by the Material Bottom Tab Navigator.
Output
Reference: https://reactnavigation.org/docs/material-bottom-tab-navigator/
Picked
React-Native
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to apply style to parent if it has child with CSS?
How to execute PHP code using command line ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Difference Between PUT and PATCH Request