Loading


React Native

  • Home
  • React Native
  • How to create Material Bottom Tab Navigator in React Native ?. The Complete React Native Developer Course 2024.
React Native

How to create Material Bottom Tab Navigator in React Native ?. The Complete React Native Developer Course 2023 [Videos].

By admin / 19-jan-2022 / in Blog, React Native / 162 Comments / 1 Likes / Share This Post

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 2: Now create a project by the following command.

    expo init 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

Project Structure: The project directory should look like the following:

Project Structure

Example: Now, lets 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.

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.

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;

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;

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/

Read more
See All

Comments (162 Comments)

Submit Your Comment

See All Posts

Related Posts

React Native / Youtube

Setting up the development environment of React Native.

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native
8-Sep-2021 /1 /162

React Native / Blog

How React Native is different from ReactJS ?

ReactJS: It is a JavaScript library that supports both front-end and server-side. It is a popularly used library, which focuses on developing user interfaces (UI) for mobile as well as web-based applications. Developed by Facebook, it is based on the JavaScript language and hence, it is synonymously also called ReactJS.
19-jan-2022 /1 /162

React Native / Blog

How to Use Routing with React Navigation in React Native ?

Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.
19-jan-2022 /1 /162