React Navigation - trying to hide tab-bar on on certain screens - react-native

Question

I am trying to hide the tab bar on the first screen, but nothing I do seems to work.
If I re-render the screen then it disappears, but everytime I load the app again it will be there.
After looking online I found some workarounds and it work hiding the tab bar on the screen that I want it to hide, all except for the StartScreen.
Please can someone give me an idea of what I need to do to hide it on the StartScreen?
Thank you.
import React from "react";
import {
NavigationContainer,
getFocusedRouteNameFromRoute,
} from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import { Ionicons } from "#expo/vector-icons";
import StartScreen from "../screens/StartScreen";
import LoginScreen from "../screens/LoginScreen";
import SignupScreen from "../screens/SignupScreen";
import FindPropertyScreen from "../screens/FindPropertyScreen";
import FindAddressManuallyScreen from "../screens/FindAddressManuallyScreen";
import PropertyDetailsScreen from "../screens/PropertyDetailsScreen";
import DashboardScreen from "../screens/DashboardScreen";
import HomeReviewScreen from "../screens/HomeReviewScreen";
import ContractorScreen from "../screens/ContractorScreen";
import TestScreen from "../screens/TestScreen";
import FinanceScreen from "../screens/FinanceScreen";
export default function Navigator() {
const HomeStack = createStackNavigator();
const HomeStackScreen = ({ navigation, route }) => {
// Screens where Bottom Tabs need to be hidden
const tabHiddenRoutes = [
"StartScreen",
"LoginScreen",
"SignupScreen",
"FindPropertyScreen",
"FindAddressManuallyScreen",
"PropertyDetailsScreen",
];
React.useLayoutEffect(() => {
const routeName = getFocusedRouteNameFromRoute(route);
if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
navigation.setOptions({ tabBarStyle: { display: "none" } });
} else {
navigation.setOptions({ tabBarStyle: { display: "flex" } });
}
}, [navigation, route]);
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="StartScreen"
component={StartScreen}
options={{
title: "",
headerStyle: {
backgroundColor: "#0061FC",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
<HomeStack.Screen
name="LoginScreen"
component={LoginScreen}
options={{
title: "Login",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="SignupScreen"
component={SignupScreen}
options={{
title: "Welcome",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="FindPropertyScreen"
component={FindPropertyScreen}
options={{
title: "",
headerStyle: {
backgroundColor: "#0061FC",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
<HomeStack.Screen
name="FindAddressManuallyScreen"
component={FindAddressManuallyScreen}
options={{
title: "Enter address",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="PropertyDetailsScreen"
component={PropertyDetailsScreen}
options={{
title: "Property Details",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="DashboardScreen"
component={DashboardScreen}
options={{
title: "Your Dashboard",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<HomeStack.Screen
name="TestScreen"
component={TestScreen}
options={{
title: "Test Screen",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
</HomeStack.Navigator>
);
};
const DashboardStack = createStackNavigator();
function DashboardStackScreen() {
return (
<DashboardStack.Navigator>
<DashboardStack.Screen
name="HomeReviewScreen"
component={HomeReviewScreen}
options={{
title: "",
cardStyle: {
backgroundColor: "#fff",
},
headerTintColor: "#fff",
headerShadowVisible: false,
}}
/>
</DashboardStack.Navigator>
);
}
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarIcon: ({ focused, color, size }) => {
if (route.name === "Home") {
return (
<Ionicons
name={focused ? "home" : "home-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Dashboard") {
return (
<Ionicons
name={focused ? "settings" : "settings-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Finance") {
return (
<Ionicons
name={focused ? "card" : "card-outline"}
size={size}
color={color}
/>
);
} else if (route.name === "Contractor") {
return (
<Ionicons
name={focused ? "build" : "build-outline"}
size={size}
color={color}
/>
);
}
},
tabBarInactiveTintColor: "gray",
tabBarActiveTintColor: "#0061FC",
tabBarShowLabel: false,
})}
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
// options={({ route }) => ({
// tabBarVisible: ((route) => {
// const routeName = getFocusedRouteNameFromRoute(route) ?? "";
// if (routeName === "StartScreen") {
// return false;
// }
// return true;
// })(route),
// })}
/>
<Tab.Screen
name="Contractor"
component={ContractorScreen}
options={{
title: "",
cardStyle: {
backgroundColor: "#fff",
},
}}
/>
<Tab.Screen name="Finance" component={FinanceScreen} />
<Tab.Screen name="Dashboard" component={DashboardStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Answer 1

Have you try this rom react navigation doc :
The easiest way to achieve this is to nest the tab navigator inside
the first screen of the stack instead of nesting stack inside tab
navigator

Answer 2

I think the recommended way to do it is to set an id for your navigator
<Tab.Navigator ... id="NavID" />
and then use the navigator id
const tabNavigator = navigation.getParent('NavID')
tabNavigator.setOptions({ tabBarStyle: { display: "flex" } });