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:

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.

CodePudding user response：

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

Toggle tab bar