Modal's height is unpredictable in android full screen gestures mode(with notch)

🐛 Bug Report

I am using react native modal in my app and it is cutting from bottom sometimes in new android devices having notch and full screen gesture mode. This only happen when navigation bar from bottom is hidden. May be react native is not getting exact height often to show up the modal. screenshot gif.

To Reproduce

1. Using React Native’s modal and running the app. This issue is not in every modal but in specific scenes(may be router flux or some library is breaking).
2. This definitely happens the first time modal opening, and rarely in next attempts.

Expected Behavior

Modal should take full height every time like the app is taking.

Code Example

<View style = {{flex: 1}}> <View style = {{height: '91%'}}> <Modal animationType = {"slide"} transparent = {false} onRequestClose = {!this.state.showModal2 ? this.closeModal: this.closeModal2} supportedOrientations={['portrait', 'landscape']} style = {[]} > <SafeAreaView style={{backgroundColor: '#34485E'}}> <View style = {[ { position : 'relative', top : 0, right : 0, bottom : 0, left : 0, height : height*.95, backgroundColor: '#fff' } ]} > <MyComponent /> </View> </SafeAreaView> </Modal> </View> </View>

Environment

info React Native Environment Info: System: OS: Windows 7 CPU: (4) x64 Intel® Core™ i3-4005U CPU @ 1.70GHz Memory: 6.57 GB / 7.91 GB Binaries: npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

Below are my project details. “dependencies”: { “art”: “^0.10.3”, “babel-plugin-transform-remove-console”: “^6.9.4”, “buffer”: “^5.2.1”, “crypto-js”: “^3.1.9-1”, “events”: “^3.0.0”, “firebase”: “^5.10.0”, “moment”: “^2.24.0”, “react”: “16.8.3”, “react-native”: “0.59.3”, “react-native-autoheight-webview”: “^1.1.2”, “react-native-color-picker”: “^0.4.0”, “react-native-device-info”: “^1.4.2”, “react-native-fs”: “^2.13.3”, “react-native-google-signin”: “^1.2.2”, “react-native-orientation-locker”: “^1.1.5”, “react-native-pdf”: “^5.0.12”, “react-native-restart”: “0.0.10”, “react-native-router-flux”: “^4.0.6”, “react-native-svg”: “^9.4.0”, “react-native-tts”: “^2.0.0”, “react-native-vector-icons”: “^6.4.2”, “react-native-webview”: “^5.7.1”, “react-native-zip-archive”: “^4.0.0”, “realm”: “^2.26.1”, “rn-fetch-blob”: “^0.10.13”, “stream”: “0.0.2”, “timers”: “^0.1.1”, “xml2js”: “^0.4.19” } and TabViewAnimated also.

device details:-

Model number: Redmi 6 Pro Android version: 8.1.0 RAM: 3GB

[RudskikhIvan]

Have the same bug when bottom navigation bar is turned off Device: MI 8 Android version: 9

[chenKunyang]

same issue