I want to hide the header. It's hidden when using Expo Go, but when I release and build it as an APK and install it, the header becomes visible

Question

I'm encountering an issue with React Native navigation. When using Expo Go, the header is not visible, which is what I want. However, when I build the app as an APK using EAS Build and install it on a real device, the header is displayed.

App.js

const Stack = createStackNavigator();
const App = () => {
  const [isReady, setIsReady] = React.useState(false);

  return (

    <Provider store={store}>
      <NavigationContainer ref={navigationRef}>
        <Stack.Navigator
          screenOptions={{
            headerStyle: {
              display: 'none',
            },
            headerShown: false,
            header: null,
          }}
          initialRouteName={'SignIn'}
        >
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="SignIn"
            component={SignIn}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="ForgotPassword"
            component={ForgotPassword}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
          <Stack.Screen
            name="MainLayout"
            component={MainLayout}
            options={{
              headerShown: false,
              header: () => null, // Hide the header for MainLayout
            }}
          />
         
        </Stack.Navigator>
      </NavigationContainer>
      <FlashMessage
        style={{
          position: 'absolute',
          top: 0,
          zIndex: 9999
        }}
        position="top" />
    </Provider>

  );
}


export default App

i use version

"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"expo": "^49.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-i18next": "^12.0.0",
"react-native": "0.72.5",

[![This on expo go header is hide][1]][1]

[![build in .apk it show header, i testing on real device][2]][2]

This on expo go header is hide [1]: https://i.stack.imgur.com/1PPam.jpg [2]: https://i.stack.imgur.com/ezXOr.jpg

Answer 1

Try giving status bar color as transparent. I guess this issue you are facing is only with android and not ios.

Answer 2

i fix with add safearea and make status bar as transparant

example in app.js

import { SafeAreaProvider} from 'react-native-safe-area-context';

<SafeAreaProvider>
  <Provider store={store}>
    <NavigationContainer ref={navigationRef}>
      <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            display: 'none',
          },
          headerShown: false,
          headerMode: 'none'
        }}
        headerMode={'none'}
        initialRouteName={'SignIn'}
      >
        <Stack.Screen
          name="Register"
          component={Register}
          options={{ headerShown: false }}
        />

      </Stack.Navigator>
    </NavigationContainer>
    <FlashMessage
      position="top" />
  </Provider>

</SafeAreaProvider>

on another screen

import { ImageBackground, StyleSheet, SafeAreaView, StatusBar } from 'react-native';

   <SafeAreaView style={styles.container}>
        <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
        <ImageBackground source={source || images.background} style={styles.background}>
            {children}
        </ImageBackground>
    </SafeAreaView>