Tuesday 3 November 2020

How to fix Empty Space on top of Curved Android Phone

My react-naive app look totally fine on most android device (and iOS) i tested on emulator, but some devices with noticeable curved screen on top (Google Pixel 4, API 29), it show 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=>
    ... 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 . Now this is my entire App:

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

  render () {
    return (
        <View style=>
            <Text> Hello World, How to fix this ? </Text>
        </View>
    );
  }
}

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

enter image description here



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

No comments:

Post a Comment