Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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)

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

It depends on what is your react-navigation version.

From version 6.x.x

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}} />
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!