CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationstack-navigator
MartynBrzoz
MartynBrzoz

Reputation: 101

How to hide a tab bar in bottom tabs navigator, React Native 6x

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"
      component={about}
      options={{
        title: "About",
      }}
    ></Tab.Screen>
    <Tab.Screen
      name="home"
      component={home}
      options={{
        title: "Home",
      }}
    ></Tab.Screen>
    <Tab.Screen name="reviewDetails" component={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:

enter image description here

And what I want to display:

enter image description here

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.

Upvotes: 3

Views: 9108

Answers (3)

Makarenko Eugene
Makarenko Eugene

Reputation: 11

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' component={about} />
      <Tab.Screen
        name='home'
        component={home}
        options={{ tabBarStyle: { display: 'none' } }} // Hide tabBar from the screan
      />
      <Tab.Screen
        name='reviewDetails'
        component={reviewDetails}
        options={{ tabBarItemStyle: { display: 'none' } }} // Hide item from tabBar
      />
    </Tab.Navigator>
  );
}

Upvotes: 1

Towhidul Islam
Towhidul Islam

Reputation: 51

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.

Upvotes: 3

Michael Bahl
Michael Bahl

Reputation: 3649

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

Toggle tab bar

Upvotes: 1

Related Questions