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

245
Vistas
how to remove the white bar on top in my react native app

This is how the app looks, with a top white header

enter image description here

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';
import RegisterScreen from './screens/RegisterScreen';
import AddProduct from './screens/AddProduct';
import PorductView from './screens/PorductView';
import ResetPassword from './screens/ResetPassword';
import Options from './screens/Options';
import { LogBox } from 'react-native';
import MyProducts from './screens/MyProducts';



const Stack = createNativeStackNavigator();

export default function App() {
  LogBox.ignoreLogs(['Setting a timer']);
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Home" component={HomeScreen} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="AddProduct" component={AddProduct} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="ViewProduct" component={PorductView} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="ResetPassword" component={ResetPassword} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="MyProducts" component={MyProducts} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Option" component={Options} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Login" component={LoginScreen} />
          <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Register" component={RegisterScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      <StatusBar style="auto"/>
      
    </>
  );
}

as you can see I have headerShown: false and it's only removing the default back button on the android emulator and ios but not removing the white space that is on the top

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

If you want to hide status bar from your app, in the root of your app (e.g in App.js or App.tsx) put status bar like as below:

/*
 * Your imports and another codes
 */
import {StatusBar} from 'react-native';

const App = () => {
  return (
    <>
      <StatusBar hidden />
      {
        //Your components
      }
    </>
  );
}

And if you want hide default stack navigator (version 6) header in all screens:

//...
<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}>
  {
    //Your screens without extra hiding options
  }
</Stack.Navigator>
//...
about 4 years ago · Juan Pablo Isaza Denunciar

0

Use headerMode="none" in Navigator

<Stack.Navigator headerMode="none" >

...

</Stack.Navigator>
about 4 years ago · Juan Pablo Isaza Denunciar

0

Apparently the headerShown is set into the Stack.Navigator not inside each Stack.Screen

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

see more details here https://stackoverflow.com/a/44701363/1461862

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