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:
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.
In react native navigati6.x on you have to use tabBarStyle: { display: 'none' }