How to remove top bar (Home) in Bottom Tab Navigator

Question

I tried with many ways i think the problem can be solved in this TabNavigator.js Code of TabNavigator.js:-

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
//Screens
import Home from '../screens/Home';
import Doctor from '../screens/Doctor';
import Restaurant from '../screens/Restaurants';
import Property from '../screens/Property';

//Screen Names
const homeName = 'Home';
const DoctorName = 'Doctor';
const RestaurantName = 'Restaurant';
const PropertyName = 'Property';

const Tab = createBottomTabNavigator();

export default function TabNavigator(){
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={homeName}
            screenOptions={({route})=>({
                tabBarIcon:({focused,color,size})=>{
                     let iconName;
                     let rn = route.name;

                     if(rn === homeName){
                         iconName = focused ? 'home':'home-outline';
                     }else if (rn === PropertyName){
                         iconName = focused ? 'business':'business-outline';
                     }else if (rn ===RestaurantName){
                         iconName = focused ? 'restaurant':'restaurant-outline';
                     } else if (rn ===  DoctorName){
                         iconName = focused ? 'medkit':'medkit-outline';
                     }

                     return <Icon name = {iconName} size = {size} color = {color}/>
                },
            })}>
                <Tab.Screen  name = {homeName} component = {Home}/>
                <Tab.Screen  name = {DoctorName} component = {Doctor}/>
                <Tab.Screen  name = {RestaurantName} component = {Restaurant}/>
                <Tab.Screen  name = {PropertyName} component = {Property}/>
                              
            </Tab.Navigator>
        </NavigationContainer>
    );
}

On the top of HomeScreen text there is an bar of Home "named" that I want to remove

Screen Shot of that (I want to remove that Home)

Answer 1

It depends on what is your react-navigation version.

From version 6.xx

If you want to hide header in all bottom tab screens then you just need to add

<Tab.Navigator screenOptions={{ headerShown: false }}> 

in your case:

<Tab.Navigator
            initialRouteName={homeName}
            screenOptions={{ headerShown: false },
               ({route})=>({
                tabBarIcon:({focused,color,size})=>{
                     let iconName;
                     let rn = route.name;

                     if(rn === homeName){
                         iconName = focused ? 'home':'home-outline';
                     }else if (rn === PropertyName){
                         iconName = focused ? 'business':'business-outline';
                     }else if (rn ===RestaurantName){
                         iconName = focused ? 'restaurant':'restaurant-outline';
                     } else if (rn ===  DoctorName){
                         iconName = focused ? 'medkit':'medkit-outline';
                     }

                     return <Icon name = {iconName} size = {size} color = {color}/>
                },
            })}>
                <Tab.Screen  name = {homeName} component = {Home}/>
                <Tab.Screen  name = {DoctorName} component = {Doctor}/>
                <Tab.Screen  name = {RestaurantName} component = {Restaurant}/>
                <Tab.Screen  name = {PropertyName} component = {Property}/>
                              
            </Tab.Navigator>
        </NavigationContainer>

or you can hide it for specific screen

<Stack.Screen name = {homeName} component = {Home} options={{headerShown: false}} />