Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Material Bottom Tab Navigator
3.
Installation​
3.1.
Module Installation
3.2.
Application Development
4.
Example Application
4.1.
App.js
4.2.
Output:
5.
Frequently Asked Questions
5.1.
What is a bottom Navigator in React Native?
5.2.
How do you use SVG in react native?
5.3.
How do you style the tab navigator in react native?
6.
Conclusion
Last Updated: Mar 27, 2024

Creating Material Bottom Tab Navigator in React Native

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into Material Bottom Tab Navigation using React Native. You can traverse various paths with animation using a bottom-of-the-screen tab bar with a material design style. Courses are introduced gradually, with screen components not being installed until they are fully focused.

The bottom navigation component from react-native-paper is wrapped in this component. Will not include the react-native-paper library in your bundle if you configure the Babel plugin.


Click on the following link to read further: Hooks in React JS

Material Bottom Tab Navigator

The createMaterialBottomTabNavigator function in the react-navigation package is used to make a Bottom Tab Navigator using Material. The material theme tab bar is located at the bottom of the screen. It has a pleasant user interface and allows you to move between several routes with animation. The 

Material Bottom Tab Navigator's most notable feature is that courses are "lazyly initialised," meaning that the screen components corresponding to the routes are not mounted until they are focused.

The material style gives the tab bar at the bottom of the screen an extra design effect. The material design encourages you to switch between screens. After the screens have been focused, the tab screen components are mounted.

Installation

Before installing @react-navigation/material-bottom-tabs, make sure you have @react-navigation/native and its dependencies installed:

npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

This API also requires react-native-vector-icons to be installed! If you use the Expo-controlled workflow, it will function without any additional steps. Otherwise, follow these instructions for setup.

Also, Import @react-navigation/material-bottom-tabs to use this tab navigator.

Module Installation

To use the material design navigator, install react-navigation-material-bottom-tabs library as given below.

npm install react-navigation-material-bottom-tabs react-native-paper  

This library makes use of the react-native-paper bottom navigation component. Installing react-native-vector-icons is also required.

createMaterialBottomTabNavigator(RouteConfigs, MaterialBottomTabNavigatorConfig);  

Application Development

Step 1: Open your terminal and then run the following command to install expo-cli.

npm install -g expo-cli

Step 2: Run the following command for creating a project.

expo init demo-app

Step 3: Go to the demo-app folder in your project folder.

cd demo-app

Step 4: Run the following command then, to install the required packages as follows.

npm install –save react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons

Now, let's move on to creating our application.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example Application

The material bottom tab navigation is used in this example to emphasise the active tab's icons and title. The remaining tabs show only the icon without the identification. Import the createMaterialBottomTabNavigator function from the react-navigation-material-bottom-tabs library to use material designs.

App.js


import React from 'react';  
import {StyleSheet, Text, View,Button} from 'react-native';  
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';  
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';  
import Icon from 'react-native-vector-icons/Ionicons';  
class HomeScreen extends React.Component {  
  render() {  
    return (  
        <View style={styles.container}>  
          <Text>Ninja Home</Text>  
        </View>  
    );  
  }  
}  
class ProfileScreen extends React.Component {  
  render() {  
    return (  
        <View style={styles.container}>  
          <Text>Ninja Profile</Text>  
        </View>  
    );  
  }  
}  
class ImageScreen extends React.Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <Text>Ninja Image</Text>  
            </View>  
        );  
    }  
}  
class CartScreen extends React.Component {  
    render() {  
        return (  
            <View style={styles.container}>  
                <Text>Ninja Cart</Text>  
            </View>  
        );  
    }  
}  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center',  
        alignItems: 'center'  
    },  
});  
const TabNavigator = createMaterialBottomTabNavigator(  
    {  
        Home: { screen: HomeScreen,  
            navigationOptions:{  
                tabBarLabel:'Home',  
                tabBarIcon: ({ tintColor }) => (  
                    <View>  
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-home'}/>  
                    </View>),  
            }  
        },  
        Profile: { screen: ProfileScreen,  
            navigationOptions:{  
                tabBarLabel:'Profile',  
                tabBarIcon: ({ tintColor }) => (  
                    <View>  
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-person'}/>  
                    </View>),  
                activeColor: '#f65a22',  
                inactiveColor: '#46f6d7',  
                barStyle: { backgroundColor: '#67baf6' },  
            }  
        },  
        Image: { screen: ImageScreen,  
            navigationOptions:{  
                tabBarLabel:'History',  
                tabBarIcon: ({ tintColor }) => (  
                    <View>  
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-images'}/>  
                    </View>),  
                activeColor: '#615af6',  
                inactiveColor: '#f60c0d',  
                barStyle: { backgroundColor: '#f69b31' },  
            }  
        },  
        Cart: {  
            screen: CartScreen,  
            navigationOptions:{  
                tabBarLabel:'Cart',  
                tabBarIcon: ({ tintColor }) => (  
                    <View>  
                        <Icon style={[{color: tintColor}]} size={25} name={'ios-cart'}/>  
                    </View>),  
            }  
        },  
    },  
    {  
      initialRouteName: "Home",  
      activeColor: '#3BAD87',  
      inactiveColor: '#226557',  
      barStyle: { backgroundColor: '#f0edf6' },  
    },  
);  
 
export default createAppContainer(TabNavigator);  

Output:


Note: There is a tiny animation when you tap on a single tab. The Material Bottom Tab Navigator automatically provides this.

Frequently Asked Questions

What is a bottom Navigator in React Native?

A simple tab bar on the bottom of the screen lets you switch between different routes. Routes are lazily initialised -- their screen components are not mounted until they are first focused.

 

How do you use SVG in react native?

Open up the project in your favourite editor and start by importing the Svg and Circle components from react-native-svg, as shown below. import Svg, { Circle } from 'react-native-svg'; The <Svg> component is a parent component that is needed to render any SVG shape.

 

How do you style the tab navigator in react native?

Use tabBarStyle or tabBarItemStyle instead of style in screen options to change the style of the Bottom Navigation. This post should be active. Utilise the tab bar properties if you want to use a custom tab bar.

Conclusion

In this article, we have extensively discussed the Creation of Material Bottom Tab Navigator using the help of React-Native. We hope that this blog has helped you enhance your knowledge regarding React-Native, and to learn more, check out our other article on React-Native (ClickUp link). And to learn in-depth about development, check out our Development course on the Coding Ninjas website. And also, check out the awesome content on the Coding Ninjas Website, Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview Experiences, and Coding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog in order to help other ninjas grow.
Happy Coding!

Previous article
React-native-safe-area-context
Next article
React Native Create Material Top Tab Navigator
Live masterclass