Android: KeyboardAvoidingView behavior height not working properly on different TextInput keyboardTypes

[devstarman]

Description:

With 2 different TextInputs (default and keyboardType="number-pad") wrapped in KeyboardAvoidingView with behavior set to "height" and a single button on the bottom of the screen, keyboard avoiding is not behaving correctly.
Opening first TextInput (default) results in proper showing button placed on the bottom, but as soon as we switch to second TextInput (set to "number-pad") screen is not scaled properly and button hides behind a keyboard.

React Native version:

System:
OS: Windows 10 10.0.17134
CPU: (8) x64 Intel(R) Core(TM) i7-4710MQ CPU @ 2.50GHz
Memory: 4.43 GB / 15.87 GB
Binaries:
Node: 10.15.3 - C:\dev\nodejs\node.EXE
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\dev\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 24, 25, 26, 27, 28, 29
Build Tools: 25.0.2, 26.0.2, 27.0.3, 28.0.0, 28.0.3, 29.0.2
System Images: android-24 | Android TV Intel x86 Atom, android-24 | Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312
npmPackages:
react: 16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4

Steps To Reproduce

1. Initialize a new RN project
2. Copy/paste code from snack: https://snack.expo.io/@devstarman/keyboardavoidingview-textinput-bug
3. Run the app using react-native run-android
4. Click at first TextInput (with placeholder "enter text")
5. Click at second TextInput (with placeholder "enter number")
6. Observe how the "next" button disappears.

Expected Results

It's expected to scale properly no matter what type of keyboard is used in TextInput.
Changing behavior to "padding" solves issue BUT then there is another issue already reported in Dec 2019: #27526

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@devstarman/keyboardavoidingview-textinput-bug

[devstarman]

Anyone?

[devstarman]

Hello everyone, I'd only like to mention that the problem still exists and as far as I see other problems mentioned like #27526 exists too. Is anyone concerned about maintanance of this component? Or is anyone aware of any other implementation besides this official one that actually works?

[devstarman]

My fix was to use my own local KeyboardAvoidingView component as suggested by @MitchellSlavik in #27526.
The question remains why nobody from the react-native team checked this issue reported in multiple posts if the fix is available and only needs to be included in the next official release as a fix.

[xlcrr]

I was able to fix this by setting a height prop and assigning it to my absolutely-positioned keyboardAvoidingView.

When componentDidMount or _keyboardDidHide execute, I updated height to SCREEN_HEIGHT * 0.1 when platform == android.

Height 0 for iOS works fine

Works now 🤷‍♂️

Suggested improvement - stop buying androids!

[Traviskn]

I've encountered this same issue on iOS. When I use two text inputs, focusing the second one causes the keyboard avoiding view to stop avoiding the keyboard. Changing behavior to padding did fix the issue, but it's strange that it doesn't work with behavior set to 'height'

[Kaycell]

Issue is still present. I've observed similar behavior on iOS

[keith-kurak]

@devstarman was there anything else you did to get this scenario working with the local KAV in #27526? Specifically, are you using any specific params with the KAV? I'm using that local KAV in my code, and it fixed the original bug with the extra space in #27526, but the view is still sliding under the keyboard when I switch from a number pad to a regular keyboard.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.