React Navigation 5: Hiding bottom tab on a specific screen

Last updated on July 14, 2021 A Goodman Loading... 2 comments

React Navigation is a great library for React Native to navigate. If you’re using createBottomTabNavigator and want to hide the bottom tab bar on a specific screen, just use the tabBarVisible option:

options={{
  tabBarVisible: false,
}}

For more clarity, check the complete example below.

The Example

App Preview

This sample app contains 3 screens: Home, Product, and Contact. The bottom tab bar is only visible on the Home screen. It doesn’t show up on the Product and Contact screens.

The Code

1. Adding the required libraries to our project:

npm i @react-navigation/native @react-navigation/bottom-tabs

2. To make the bottom tab bar more attractive and meaningful, we use some icons provided by the React Native Vector Icons package:

npm i react-native-vector-icons

3. Remove all of the unwanted code in your App.js and add the following:

import "react-native-gesture-handler";

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

const Tab = createBottomTabNavigator();

// Home Screen
const HomeScreen = (props) => {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenName}>Kindacode.com</Text>
    </View>
  );
};

// Product Screen
const ProductScreen = (props) => {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenName}>Product Screen</Text>
    </View>
  );
};

// Contact Screen
const ContactScreen = (props) => {
  return (
    <View style={styles.screen}>
      <Text style={styles.screenName}>Contact Screen</Text>
    </View>
  );
};

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarIcon: () => (
              <MaterialCommunityIcons name="home" size={30} color="blue" />
            ),
          }}
        />
        <Tab.Screen
          name="Product"
          component={ProductScreen}
          options={{
            tabBarIcon: () => <MaterialCommunityIcons name="cart" size={30} />,
            tabBarVisible: false,
          }}
        />
        <Tab.Screen
          name="Contact"
          component={ContactScreen}
          // hide the bottom tab bar on Contact Screen
          options={{
            tabBarIcon: () => <MaterialCommunityIcons name="email" size={30} />,
            tabBarVisible: false,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

// Just some styles
// https://www.kindacode.com/cat/mobile/react-native/
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  screenName: {
    fontSize: 40,
  },
});

4. Run the app and check the result:

npm start

Conclusion

You’ve gone through a complete example of hiding the bottom tab bar on specific screens in a React Native app that uses React Navigation. If you’d like to explore more new and interesting about React Native, take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
brijesh
brijesh
3 months ago

This is not Working. tabBarVisible: false,

Related Articles