How can I hide the bottom tab bar on a specific screen (react navigation 5.x)

Question

I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator, my code is below. I just want to hide bottom tabs for the Player screen, or open Player screen with modal can anyone help me?

This is my code for my main tab navigator

import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//views
import HomeStack from './src/views/Home';
import SearchStack from './src/views/Search';
import MoviesStack from './src/views/Movies';
import SeriesStack from './src/views/Series';
import Other from './src/views/Other';

//icons
import {
    HomeIcon,
    SearchIcon,
    MovieIcon,
    SeriesIcon,
    OtherIcon,
} from './src/components/icons';

const Tab = createBottomTabNavigator();

export default function App() {
    return (
        <>
            <StatusBar barStyle="dark-content" />
            <NavigationContainer theme={DarkTheme}>
                <Tab.Navigator
                    initialRouteName="Home"
                    tabBarOptions={{
                        activeTintColor: 'white',
                        keyboardHidesTabBar: false,
                    }}
                >
                    <Tab.Screen
                        name="Home"
                        component={HomeStack}
                        options={{
                            tabBarLabel: 'Home',
                            tabBarIcon: ({ focused }) => (
                                <HomeIcon
                                    fill={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Search"
                        component={SearchStack}
                        options={{
                            tabBarLabel: 'Search',
                            tabBarIcon: ({ focused }) => (
                                <SearchIcon
                                    stroke={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Movie"
                        component={MoviesStack}
                        options={{
                            tabBarLabel: 'Movie',
                            tabBarIcon: ({ focused }) => (
                                <MovieIcon
                                    color={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Series"
                        component={SeriesStack}
                        options={{
                            tabBarLabel: 'Series',
                            tabBarIcon: ({ focused }) => (
                                <SeriesIcon
                                    color={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                    <Tab.Screen
                        name="Other"
                        component={Other}
                        options={{
                            tabBarLabel: 'Other',
                            tabBarIcon: ({ focused }) => (
                                <OtherIcon
                                    fill={focused ? 'white' : 'gray'}
                                    width={24}
                                    height={24}
                                />
                            ),
                        }}
                    />
                </Tab.Navigator>
            </NavigationContainer>
        </>
    );
}

This is my code for my main stack navigator

import React from 'react';
import { View, Image } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

//components
import Screen from '../components/Screen';
import HomeList from '../components/HomeList';

//views
import MovieDetail from './MovieDetail';
import SeriesDetail from './SeriesDetail';
import Player from './Player';

function Home({ navigation }) {
    return (
        <Screen>
            <View>
                <Image source={require('../../assets/logo.png')} />
                ...
            </View>
        </Screen>
    );
}

const Stack = createStackNavigator();

export default function HomeStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                headerShown: false,
            }}
        >
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="MovieDetail" component={MovieDetail} />
            <Stack.Screen name="SeriesDetail" component={SeriesDetail} />
            <Stack.Screen name="Player" component={Player} />
        </Stack.Navigator>
    );
}

and this is my code for stack navigator of the page I use to send data to the page i want to hide

import React from 'react';
import {
    View,
    Text,
    TouchableOpacity,
} from 'react-native';

//components
import Screen from '../components/Screen';
import Loading from '../components/Loading';


export default function MovieDetail({ route, navigation }) {
    const { id, title } = route.params;
    return (
        <Screen>
            <TouchableOpacity
                activeOpacity={0.7}
                onPress={() =>
                    navigation.navigate('Player', {
                        uri: 'https://blabla.com',
                    })
                }
            >
                <PlayIcon color="black" />
                <Text>
                    Play
                </Text>
            </TouchableOpacity>
        </Screen>
    );
}

and here I want to hide tab bar this screen

import React from 'react';
import WebView from 'react-native-webview';

export default function Player({ route }) {
    const { uri } = route.params;
    return (
        <WebView source={{ uri }} />
    );
}

Answer 1

Ciao, you can hide bottom tabbar in Player screen like that:

1. Modify your Tab.Screen Home like this:

<Tab.Screen
    name="Home"
    component={HomeStack}
    options={({ route }) => ({
        tabBarLabel: 'Keşfet',
        tabBarIcon: ({ focused }) => (
            <HomeIcon
                fill={focused ? 'white' : 'gray'}
                width={24}
                height={24}
            />
        ),
        tabBarVisible: getTabBarVisibility(route),
    })}
/>

2. Then create getTabBarVisibility function to check that the name of the root is Player:

const getTabBarVisibility = (route) => {
    const routeName = route.state
        ? route.state.routes[route.state.index].name
        : '';

    if (routeName === 'Player') {
        return false;
    }

    return true;
};

That's it. Now if you navigate into Player page, tabBar disappears.