Android screen off - React Native

When I run my React Native app on Android (real device or simulator), the screens will be somehow large and clipped at the bottom (looks almost as if the missing part is as high as the status bar, but I don't know if it's connected if it is with this, check the last screenshot)

The parent view is a simple view with flex: 1

, and the rest is relative to that.

Am I missing something on Android? This is my first Android app, I've only done iOS before.

I have the following code to test it:

return (
  <View
    style={{
      backgroundColor: 'red',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height - 24, // 24 = status bar???
    }}
  >
    <Text>{Dimensions.get('window').height}</Text>
  </View>
);

      

I figured it is exactly 24 to the maximum - is it because of the status bar? If so, is it safe to use 24 or is it different?

Screenshot

+3


source to share





All Articles