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

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

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" } });

Answer 2

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