Hidden StatusBar in Expo React Native App Leaves Whitespace

Question

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

In the Welcome screen, dropping in react-native's StatusBar component 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({
    Welcome: WelcomeScreen,
    Login: LoginScreen,
}, {
    headerMode: 'none',
})

...

Welcome.js

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

export class WelcomeScreen 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

Answer 1

This should fix the issue:

Replace

<StatusBar hidden={true} />

With

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