I have in my app Bottom Tab Navigator version 6x. Im looking for solution how to hide a tab bar to one of screen which I use in my app - reviewDetail.js

Here is my navigation file:

AppNavigator.js

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      ponent={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      ponent={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" ponent={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

here is my app.js

App.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </>
  );
}

Here is what I have:

And what I want to display:

What should I change in my code to hide "reviewDetails" tab bar? I still want to navigate to reviewDetails because I use it in my app, I only need to hide this tab bar.

I have in my app Bottom Tab Navigator version 6x. Im looking for solution how to hide a tab bar to one of screen which I use in my app - reviewDetail.js

Here is my navigation file:

AppNavigator.js

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";

import about from "../screens/about";
import home from "../screens/home";
import reviewDetails from "../screens/reviewDetails";

const Tab = createBottomTabNavigator();

const AppNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen
      name="about"
      ponent={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      ponent={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" ponent={reviewDetails}></Tab.Screen>
  </Tab.Navigator>
);

export default AppNavigator;

here is my app.js

App.js

import React from "react";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import AppNavigator from "./navigation/AppNavigator";

export default function App() {
  return (
    <>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </>
  );
}

Here is what I have:

And what I want to display:

What should I change in my code to hide "reviewDetails" tab bar? I still want to navigate to reviewDetails because I use it in my app, I only need to hide this tab bar.

• javascript
• reactjs
• react-native
• react-navigation
• stack-navigator

3 Answers 3

If you want to hide the bottom tab for all the screens of a stack. then place the code given below to the first screen of that stack.

//For hiding tab from a certain page
useLayoutEffect(() => {
    const hideUnsubscribe = navigation.addListener('focus', e => {
      let parentNav = props.navigation.getParent();
      parentNav.setOptions({
        tabBarStyle: {display: 'none'},
      });
    });
  }, []);

If you want to show it again then place the code given below to the screen from where the tab will be available.

//It will make the bottom tab visible
useLayoutEffect(() => {
    const hideUnsubscribe = navigation.addListener('focus', e => {
      let parentNav = props.navigation.getParent();
      parentNav.setOptions({
        tabBarStyle: {...tabBarStyle, display: 'flex'},
      });
    });

Note: here tabBarStyle is the main style applied to the tab bar. You need to export that style to import it here.

In react native navigati6.x on you have to use tabBarStyle: { display: 'none' }

Toggle tab bar

I don’t understand why the correct answer was marked as hiding the entire tabBar:

tabBarStyle: { display: 'none' }

If the problem was in hiding one item from the tabBar.

function AppNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name='about' ponent={about} />
      <Tab.Screen
        name='home'
        ponent={home}
        options={{ tabBarStyle: { display: 'none' } }} // Hide tabBar from the screan
      />
      <Tab.Screen
        name='reviewDetails'
        ponent={reviewDetails}
        options={{ tabBarItemStyle: { display: 'none' } }} // Hide item from tabBar
      />
    </Tab.Navigator>
  );
}