Android keyboard avoid issue

Environment

System: OS: macOS 10.14.6 CPU: (12) x64 Intel® Core™ i9-8950HK CPU @ 2.90GHz Memory: 1.61 GB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node Yarn: 1.16.0 - ~/.nvm/versions/node/v10.15.3/bin/yarn npm: 6.9.2 - ~/.nvm/versions/node/v10.15.3/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3 Android SDK: API Levels: 26, 28 Build Tools: 28.0.3 System Images: android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.4 AI-183.5429.30.34.5452501 Xcode: 10.3/10G8 - /usr/bin/xcodebuild npmPackages: react: 16.8.6 => 16.8.6 react-native: 0.60.5 => 0.60.5 npmGlobalPackages: react-native-cli: 2.0.1

Platforms

Android

Versions

“react-native-modal”: “^11.3.1”

Description

On Android, keyboardAvoid pushes the entire Modal out of view under the following conditions

Modal coverScreen Component fullscreen

Reproducible Demo

See gif

or see repo

https://github.com/jimji1005/rn60-rn-modal-android-keyboard-test

[tomskopek]

I came across this issue while dealing with a similar issue for the vanilla react native Modal component (not this library). Setting statusBarTranslucent to true on the Modal seems to work:

https://reactnative.dev/docs/modal#statusbartranslucent-android

Maybe it will help someone

[aniruddhashevle]

Finally, I figured out the reason for this. I observed that, when the StatusBar is not hidden, then this issue occurs on Android. On iOS, there isn’t any problem anyways.

If I make StatusBar hidden, this issue resolves. <StatusBar hidden />

So whenever I open up a modal, I hide the StatusBar.

Another solution would be: https://github.com/facebook/react-native/issues/7474#issuecomment-288814366

Issue added in react-native: https://github.com/facebook/react-native/issues/13000