'How to fix Empty Space on top of Curved Android Phone

My react-native app look totally fine on most Android devices (and iOS) I tested on emulator, but some devices with noticeable curved screen on top (Google Pixel 4, API 29), it shows a big empty region on top of the phone.

This does not look normal. Do you know how to fix it ?

I am using SafeAreaView but without any Android specific padding/margin.

<SafeAreaView style={{flex:1}}>
    ... My App Code come here.
</SafeAreaView>

I also tried to remove the the SafeAreaView and used regular View instead but it still wont go away.

Just for testing I removed everything and added a hello world test screen. It still gives same wide empty space.

My App.js:

export default class Main extends React.Component {
    constructor(props) {
      super (props);
    }

  render () {
    return (
        <View style={{flex:1, backgroundColor: 'white'}}>
            <Text> Hello World, How to fix this ? </Text>
        </View>
    );
  }
}

AppRegistry.registerComponent(appName, () => Main);

android react-native

Solution 1:^[1]

You can achieve this simply by hiding your StatusBar just like this:

import React from "react";
import { StatusBar, View, Text } from "react-native";

export default class Main extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        StatusBar.setHidden(true);
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: 'white' }}>
                <Text> Hello World, How to fix this ? </Text>
            </View>
        );
    }
}

Update: set StatusBar's transluent attribute to true along with make its' background as transparent like this:

import React, { Component } from "react";
import { StatusBar, View, Text } from "react-native";

export default class Main extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    StatusBar.setTranslucent(true);
    StatusBar.setBackgroundColor("transparent");
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }}>
        <Text> Hello World, How to fix this ? </Text>
      </View>
    );
  }
}

Solution 2:^[2]

Have you tried using this way

<StatusBar translucent={true} hidden={true} /> {/* <--- Here */}

Solution 3:^[3]

Check statusbar component where you can draw an app under the status bar by using the property named translucent. Reference link

Solution 4:^[4]

I managed to fix this by going to AVD Manager -> Click on Wipe Data

Img

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Nooruddin Lakhani
Solution 3	Maneesh
Solution 4	keilokimnida

'How to fix Empty Space on top of Curved Android Phone

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]