Creating Material Bottom Tab Navigator in React Native

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 Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, and Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog in order to help other ninjas grow.
Happy Coding!