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
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>
//...
Use headerMode="none" in Navigator
<Stack.Navigator headerMode="none" >
...
</Stack.Navigator>
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