Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

407
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda