[v4][v5] [Android] | TextInput at the bottom of a scroll view falls behind keyboard

[atlj]

Bug

I was able to reproduce this both with 4.6.4 and 5-alpha.11. When I have a scroll view and there is a text input at the bottom, the text input falls behind the keyboard on Android. I'm using the android_keyboardInputMode="adjustResize" and my snap point here is 100%.

Screen.Recording.2024-09-12.at.14.57.31.mov

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.4
react-native	0.74.1
react-native-reanimated	3.10.1
react-native-gesture-handler	2.16.1

Steps To Reproduce

1. Create a bottom sheet with a long scrollable content
2. Place a text input at the bottom
3. Set android_keyboardInputMode="adjustResize" (also change this option in your app.json/AndroidManifest.xml to adjustResize
4. Set your snap point as 100%
5. Scroll to the bottom
6. Click on the text input on Android

Describe what you expected to happen:

1. The text input should still be visible when the keyboard is enabled

What's happening instead:

1. The text input falls behind the keyboard ~70% of the time

Reproducible sample code

https://snack.expo.dev/@atlj0/bottom-sheet-v4-android-keyboard-hides-textinput

[brentforder]

@atlj Try it with this library's BottomSheetTextInput instead of TextInput. I was also experiencing a similar issue with the virtual keyboard until I switched to BottomSheetTextInput.

[atlj]

Hey @brentforder oh you're right. I actually had this issue with the library's text input too but looks like I used a regular text input on the sample code. I will update it, thanks!

[atlj]

Okay, I just updated the Snack code, the issue still exists on Android.

[ChristopherGabba]

+1 on this issue. I have a TextInput that is on a view behind the bottom sheet. When the bottom sheet comes up, it covers the text input. I am just using a regular TextInput because you can't use a BottomSheetTextInput outside of a BottomSheet. I have changed every property of android_keyboardInputMode and keyboardBehavior and nothing changes.

[syntaxSizer]

+1... i spent hours debugging why my form UI started misbehaving and this is exactly the behavior, i am using bottom-sheet as well, the screen is within bottom sheet provider

[gorhom]

thanks @atlj for reporting this issue, the issue is a bit complex especially with how android deal with resizing the whole container but i managed to get it working

Screen.Recording.2024-10-03.at.00.54.50.mp4

im going to test out other use cases before i push the fix

[ChristopherGabba]

@gorhom is there a way to just make android not move the bottom sheet up at all?

I think that's my issue. The keyboard moves up the entire bottom sheet over my text field. I just want my bottom sheet to stay exactly where it's at when the keyboard come up.

Let's say my bottom sheet is at a 50% snap point and in the background screen I have a text input in the upper half. When I tap that text input, the keyboard pushes the entire bottom sheet over my text input on Android only.

[gorhom]

@ChristopherGabba The logic needs to anchor to a certain position after the keyboard appearance and in my fix, it will anchor to the text input.

Wouldn't this address your use case ?

[ChristopherGabba]

Maybe so, once you push your fix, I'll try it and if it's still an issue, I'll make a repro and submit another issue! Thanks for the work on this, really appreciate it...

[ChristopherGabba]

@gorhom Good afternoon, I tried v5.0.1 and it still appears to be happening. Here is a demo in expo-snack (latest I could go was 5.0.0-alpha but it is still happening in 5.0.1 in my app):

https://snack.expo.dev/@christophergabba/bottom-sheet---issue-reproduction-template

I used a Google Pixel 5. This is a super simplified example, but this is happening in my production app on Android only.

Steps to reproduce:

1. Tap either dummy button labeled Open Bottom Sheet
2. After the bottom sheet opens, focus the TextInput by tapping on it

You'll see the bottom sheet shifts up some when the keyboard comes out, resulting in it slightly covering the TextInput. On iOS this is not an issue at all, but on Android it covers the text input. My goal is the bottom sheet should stay completely static right where it is behind the keyboard and shouldn't shift up at all.