How to fix Empty Space on top of Curved Android Phone

user_4523580 0
Viewed 3400

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 ?

enter image description here

enter image description here

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);

enter image description here

react-native android
5 Answers

You can't remove it, it's a display bug on the Pixel 4 emulator. A physical Pixel 4 doesn't have that gap.

See my other answer for a detailed explanation.

Real one vs emulator

user_14370160

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>
    );
  }
}
user_61742710

Have you tried using this way

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

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

user_90928290

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

Img

user_154013180
Related