Android keyboard avoid issue

[jimji1005]

Environment

System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) 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

[mystaats]

Same issue here!

[shekharskamble]

any updates on this? I am facing the exact issue

[codeguyluke]

I'm happy to take care of that if noone else is looking

[mmazzarolo]

@lnavry that would be great 🙌

[xuho]

I have same issues like that, anyone fixed? Please give me solution, thank a lot

[erhanbicer]

Wrap in Modal

<KeyboardAvoidingView enabled={false} />

[SelfDevTV]

Same Problem here with iOS. It avoids the keyboard but the style gets confused and everything gets cramped up.

[iocuydi]

Any updates on this? Facing the same problem

[ancyrweb]

If anyone can submit a reproducible i'd be happy to check

[emilmammadov]

Try to change windowSoftInputMode on Manifest.xml file

from
android:windowSoftInputMode="adjustResize"
to
android:windowSoftInputMode="adjustPan"

[Akeuuh]

Hi guys!

I have the same issue, I tried wrapping it in a keyboardavoidingview but it does'nt work. I trid emilmammadov solution, but it doesn't work..
Any ideas?

[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: facebook/react-native#7474 (comment)

Issue added in react-native: facebook/react-native#13000

[Akeuuh]

Thank you so much @aniruddhashevle! It works great with the status bar hidden!

[yousefshakoury]

I have same issues like that

[akbar7352]

still facing the same issue

[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

[udkhatri]

I had the same issue and after spending hours trying to figure out the cause, I found out I was setting "coverScreen={false}". Please check if you are doing a similar thing or not.

[erickgtzh]

For me:

<Modal style={{ margin: 0 }}

worked