React-native: Viewport Height not 100%.

[kevupton]

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 12.50 GB / 31.92 GB
Binaries:
Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\binyarn.CMD
npm: 5.6.0 - C:\Program Files\nodejsnpm.CMD
IDEs:
Android Studio: Version 3.1.0.0 AI-173.4819257

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know.

As you can see in this image, there seems to be double the bottom spacing. Or the app is not at 100% height.

This is only appearing on my phone: Xiaomi 8 on Android Orio 8.1

The spacing appears to be the same height as the menu down the bottom so it seems like it thinks the app is the full screen height.

This spacing is there when the app first loads (so on the splash screen as well.)

I think its to do with the hideable menu, as I have seen apps hide this menu, however I am not aware of how to do this.

Reproducible Demo

This seems to be more of a device specific issue which I have not been able to reproduce on any emulators.

Xiaomi 8 Device

[LasseSLambertsen]

Update gradle and target sdk 😊
Had same issue on my own Mi8, it will look the same on all 18/9 screens

[kevupton]

Thanks @LasseSLambertsen
Does this fix the issue after uprading ?
Any chance your could let me know what versions of gradle and sdk you are using ? ❤️

[markhomoki]

Thanks @LasseSLambertsen. Upgrading the targetSdkVersion to 26 fixed the issue.

[LasseSLambertsen]

@markhomoki Good to hear, was not sure which one did the magic 😅

@kevupton Sorry, for never answering, completely forgot about the issue 😔