javascript - Hidden StatusBar in Expo React Native App Leaves Whitespace - Stack Overflow

admin管理员组

文章数量:1345392

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

Share Improve this question Follow edited Aug 16, 2019 at 16:47 Nyxynyx asked Aug 16, 2019 at 16:03 NyxynyxNyxynyx 63.8k163163 gold badges507507 silver badges856856 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptHidden StatusBar in Expo React Native App Leaves WhitespaceStack Overflow