How to fix Empty Space on top of Curved Android Phone

Question

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

Answer 1

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.

Answer 2

Have you tried using this way

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