In our Expo React Native app, the status bar currently shown on all the app's screens. However, one screen Wele needs to have the status bar hidden.

In the Wele screen, dropping in react-native's StatusBar ponent with hidden props set to true hides the status bar (on a physical iPhone) but leaves behind a white region.

Problem: This white region where the status bar used to be, should be transparent or removed to show the background image that is covering the rest of the screen.

How can we achieve this?

Before hiding

After hiding

Note: Its hard to see the white region on the white background of Stack Overflow

Routes/index.js

import { createStackNavigator, createSwitchNavigation } from 'react-navigation';

...

const AuthStack = createStackNavigator({
    Wele: WeleScreen,
    Login: LoginScreen,
}, {
    headerMode: 'none',
})

...

Wele.js

import React, { Component } from 'react';
import { View, ImageBackground, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-navigation';

export class WeleScreen extends Component {

    render() {
        return (
            <View>
                <StatusBar hidden={true} />
                <SafeAreaView style={{height: '100%'}}>
                    <Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                        <ImageBackground source={myBackgroundImage} style={{width: '100%', height: '100%'}}>

...

Using

• [email protected]
• [email protected] (Expo SDK 34 fork)
• [email protected]
• expo SDK 34

In our Expo React Native app, the status bar currently shown on all the app's screens. However, one screen Wele needs to have the status bar hidden.

In the Wele screen, dropping in react-native's StatusBar ponent with hidden props set to true hides the status bar (on a physical iPhone) but leaves behind a white region.

Problem: This white region where the status bar used to be, should be transparent or removed to show the background image that is covering the rest of the screen.

How can we achieve this?

Before hiding

After hiding

Note: Its hard to see the white region on the white background of Stack Overflow

Routes/index.js

import { createStackNavigator, createSwitchNavigation } from 'react-navigation';

...

const AuthStack = createStackNavigator({
    Wele: WeleScreen,
    Login: LoginScreen,
}, {
    headerMode: 'none',
})

...

Wele.js

import React, { Component } from 'react';
import { View, ImageBackground, StatusBar } from 'react-native';
import { SafeAreaView } from 'react-navigation';

export class WeleScreen extends Component {

    render() {
        return (
            <View>
                <StatusBar hidden={true} />
                <SafeAreaView style={{height: '100%'}}>
                    <Layout style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                        <ImageBackground source={myBackgroundImage} style={{width: '100%', height: '100%'}}>

...

Using

• [email protected]
• [email protected] (Expo SDK 34 fork)
• [email protected]
• expo SDK 34

• javascript
• reactjs
• react-native
• expo
• react-native-ios

• Did you ever find any solution to this? – Jón Trausti Arason Commented Mar 8, 2020 at 13:49
• 1 this issue still haunts me, no problem with iPhone but on Android it will leave a white bar on top of the screen – Devanada Commented Oct 16, 2020 at 8:08
• `<StatusBar hidden={true} />' is working for me – Ayudh Commented Dec 15, 2021 at 7:23

2 Answers 2

This should fix the issue:

Replace

<StatusBar hidden={true} />

With

<StatusBar backgroundColor={'transparent'} translucent/>

This may be and old question, but for the ones that still Googling it!

Change <SafeAreaView> for <View> or any other Surface. SafeAreaView still calculates the height of the StatusBar (even if it is hidden) and it applies a TopMargin to a normal view.