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

Question

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

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

Answer 1

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>
//...

Answer 2

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

Answer 3

Use headerMode="none" in Navigator

<Stack.Navigator headerMode="none" >

...

</Stack.Navigator>