I'm developing a React Native app using React Navigation for navigation. I have a bottom tab navigator set up to navigate between different screens in my app. However, I encountered an issue where I don't want the bottom tab bar to be displayed on the "Product Detail" screen.
Here's a simplified version of my navigation setup:
// Imports
import React, { useEffect, useState } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {
AntDesign,
Entypo,
EvilIcons,
Feather,
FontAwesome5,
MaterialCommunityIcons,
Octicons,
} from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";
// Context
import { useLocation } from "../context/LocationContext";
// Components
import Header from "../components/Header";
// Screens
import Home from "../screens/Home";
import AllowLocation from "../screens/AllowLocation";
import SelectSignUpMethod from "../screens/OnBoarding/SelectSignUpMethod";
import Profile from "../screens/Tabs/Profile";
import Search from "../screens/Tabs/Search";
import Cart from "../screens/Tabs/Cart";
import CustomeDrawer from "../components/Drawer/CustomeDrawer";
import SignUpScreen from "../screens/OnBoarding/SignUpScreen";
import LogInScreen from "../screens/OnBoarding/LogInScreen";
import VerifyEmailScreen from "../screens/OnBoarding/VerifyEmailScreen";
import AddPhoneNumberScreen from "../screens/OnBoarding/AddPhoneNumberScreen";
import VerifyPhoneScreen from "../screens/OnBoarding/VerifyPhoneScreen";
import PinLocationScreen from "../screens/PinLocationScreen";
import SplashScreen from "../screens/SplashScreen";
import ChatScreens from "../screens/chat/ChatScreens";
import Help from "../screens/HelpCenter/Help";
import HelpDetails from "../screens/HelpCenter/HelpDetails";
import RestaurantScreen from "../screens/RestaurantScreen/RestaurantScreen";
import ProductDetail from "../screens/ProductDetails/ProductDetail";
// Context
import { useUser } from "../context/UserInfoContext";
import ChatHeader from "../screens/chat/chatHeader";
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
const HomeStack = () => (
<Stack.Navigator>
<Stack.Screen
name="Main Home"
component={Home}
options={{ header: () => <Header /> }}
/>
<Stack.Screen
name="RestaurantScreen"
component={RestaurantScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ProductDetail"
component={ProductDetail}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
const ProfileStack = () => (
<Stack.Navigator>
<Stack.Screen
name="Main Profile"
component={Profile}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
const CartStack = () => {
return (
<Stack.Navigator initialRouteName="Cart">
<Stack.Screen
name="Cart"
component={Cart}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
};
const SearchStack = () => {
<Stack.Navigator>
<Stack.Screen
name="Search"
component={Search}
options={{ headerShown: true }}
/>
</Stack.Navigator>;
};
const TabNavigator = () => (
<Tab.Navigator
screenOptions={{
tabBarStyle: {
height: 57,
backgroundColor: "#46B5A2",
paddingTop: 10,
},
tabBarActiveTintColor: "#FFFFFF",
tabBarInactiveTintColor: "#2A7D6E",
tabBarLabel: "",
header: () => <Header />,
}}
>
<Tab.Screen
name={"Home"}
component={HomeStack}
options={{
tabBarIcon: ({ color, size }) => (
<Octicons name="home" size={size} color={color} />
),
headerShown: false,
}}
/>
<Tab.Screen
name={"Cart"}
component={CartStack}
options={{
tabBarIcon: ({ color, size }) => (
<Feather name="shopping-bag" size={size} color={color} />
),
}}
/>
<Tab.Screen
name={"Search"}
component={SearchStack}
options={{
tabBarIcon: ({ color, size }) => (
<Feather name="search" size={size} color={color} />
),
}}
/>
<Tab.Screen
name={"Profile"}
component={ProfileStack}
options={{
tabBarIcon: ({ color, size }) => (
<AntDesign name="user" size={size} color={color} />
),
}}
/>
</Tab.Navigator>
);
const HelpStack = () => (
<Stack.Navigator
initialRouteName="Help"
screenOptions={{
headerShown: true,
header: () => <ChatHeader />,
}}
>
<Stack.Screen name="Help" component={Help} />
<Stack.Screen name="HelpDetails" component={HelpDetails} />
</Stack.Navigator>
);
// App Drawer Navigator
const AppDrawer = () => (
<Drawer.Navigator
drawerContent={(props) => <CustomeDrawer {...props} />}
screenOptions={{
headerShown: false,
drawerStyle: {
width: 330,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
},
drawerLabelStyle: {
marginLeft: -20,
fontFamily: "Gotham-Medium",
fontSize: 13,
},
drawerItemStyle: {
paddingVertical: 5,
borderBottomWidth: 0.5,
borderBottomColor: "#EFEFEF",
paddingLeft: 5,
borderRadius: 5,
},
drawerActiveBackgroundColor: "#46B5A2",
drawerActiveTintColor: "#fff",
// overlayColor: 'transparent',
}}
>
<Drawer.Screen
name="View Profile"
component={TabNavigator}
options={{
drawerIcon: ({ size, color }) => (
<FontAwesome5 name="user-circle" size={28} color={color} />
),
}}
/>
<Drawer.Screen
name="Inbox"
component={TabNavigator}
options={{
drawerIcon: ({ size, color }) => (
<Feather name="inbox" size={28} color={color} />
),
}}
/>
<Drawer.Screen
name="Addresses"
component={TabNavigator}
options={{
drawerIcon: ({ size, color }) => (
<Entypo name="address" size={28} color={color} />
),
}}
/>
<Drawer.Screen
name="OrderReOrdering"
component={TabNavigator}
options={{
title: "Orders & Re-Ordering",
drawerIcon: ({ size, color }) => (
<MaterialCommunityIcons
name="text-box-check-outline"
size={28}
color={color}
/>
),
}}
/>
<Drawer.Screen
name="Help Center"
component={HelpStack}
options={{
drawerIcon: ({ size, color }) => (
<Feather name="life-buoy" size={28} color={color} />
),
headerShown: false,
// header: () => <ChatHeader />,
}}
/>
<Drawer.Screen
name="Setting"
component={TabNavigator}
options={{
drawerIcon: ({ size, color }) => (
<AntDesign name="setting" size={28} color={color} />
),
}}
/>
<Drawer.Screen
name="ChatScreens"
component={ChatScreens}
options={{
drawerIcon: ({ size, color }) => (
<AntDesign name="setting" size={28} color={color} />
),
headerShown: true,
header: () => <ChatHeader />,
}}
/>
</Drawer.Navigator>
);
const OnBoardingStack = () => {
const { user, setUserInfo, updateUserInfo, clearUserInfo } = useUser();
let innitialRouteName = "SelectSignUpMethod";
return (
<Stack.Navigator
initialRouteName={innitialRouteName} //Should change to "SelectSignUpMethod"
screenOptions={{ headerShown: false, animation: "slide_from_bottom" }}
>
<Stack.Screen name={"SignUp"} component={SignUpScreen} />
<Stack.Screen
name={"SelectSignUpMethod"}
component={SelectSignUpMethod}
/>
<Stack.Screen name={"LogIn"} component={LogInScreen} />
<Stack.Screen name={"VerifyEmail"} component={VerifyEmailScreen} />
<Stack.Screen
name={"PhoneNumberScreen"}
component={AddPhoneNumberScreen}
/>
<Stack.Screen name={"VerifyPhone"} component={VerifyPhoneScreen} />
</Stack.Navigator>
);
};
const LocationStack = () => (
<Stack.Navigator initialRouteName={"AllowLocation"}>
<Stack.Screen
name={"AllowLocation"}
component={AllowLocation}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name={"PinLocationScreen"}
component={PinLocationScreen}
options={{
headerShown: false,
}}
/>
</Stack.Navigator>
);
const AppNavigation = () => {
const { location, setLocation } = useLocation();
const [isLogin, setIsLogin] = useState(true);
const locationPermission = location.latitude !== null;
return (
<>
{locationPermission === true ? (
<>
{isLogin ? (
<>
<AppDrawer />
</>
) : (
<>
<OnBoardingStack />
</>
)}
</>
) : (
<>
<LocationStack />
</>
)}
</>
);
};
export default AppNavigation;
How can I hide the bottom tab bar on the "Product Detail" screen while keeping it visible on other screens in my app? Any guidance or suggestions would be greatly appreciated. Thank you!
For Hiding the bottom bar on Specific tab, you can do this
<Tab.Screen
name="Product_Detail"
component={Product Detail}
options={{ tabBarStyle: { display: 'none' } }}
/>