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

CodePudding user response：

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

CodePudding user response：

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