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

[atlj]

trafficstars

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%.

https://github.com/user-attachments/assets/a301f59f-b695-4027-8686-2878e0c00cd1

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

https://github.com/user-attachments/assets/19e5c7f2-050a-4a31-9d8b-3d7cd3aaa89a

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.

[AugustGit]

I am also encountering this issue. Did you find a solution?

[wimil]

I have the same problem, any temporary solution?

[brentforder]

I have the same problem, any temporary solution?

Yes, as discussed above, the workaround is:

• Use BottomSheetTextInput instead of any other inputs
• Do not use BottomSheetTextInput outside of a BottomSheet

It's terrible, but in my case with only free-text input on my form, it works. I think we need a decorator to give the BottomSheetTextInput keyboard-dodging magic to any component.

[ChristopherGabba]

@brentforder My problem is with a TextInput that is outside the bottom sheet on the background (refer to my repro on Android: https://snack.expo.dev/@christophergabba/bottom-sheet---issue-reproduction-template). When the bottom sheet is open and then I focus the input, my UI all gets shifted up and compressed. I want the UI to not move at all and the Keyboard to just come up over everything.

[wimil]

I have the same problem, any temporary solution?

Yes, as discussed above, the workaround is:

• Use BottomSheetTextInput instead of any other inputs
• Do not use BottomSheetTextInput outside of a BottomSheet

It's terrible, but in my case with only free-text input on my form, it works. I think we need a decorator to give the BottomSheetTextInput keyboard-dodging magic to any component.

That didn't work, it was the first thing I tried.

[freeboub]

I have similar issue when the keyboard is resizing (go from text keyboard to emoji keyboard). I tracked the issue and is seems that there are no internal update of the keyboard height. @gorhom Can I integrate react-native-keyboard-controller ? I am not sure you allow this external dep in the package

[freeboub]

This is the patch I plan to use on my side: I also need to add the new dependency in package.json (but I already use it on app side). Tested on ios and android, looks good to me

diff --git a/src/hooks/useKeyboard.ts b/src/hooks/useKeyboard.ts
index a1a8d169f1f424ef99bd9fde8d0db89545fce731..9d9e5fa86b935a9d0728d9b24173245b2dc7c226 100644
--- a/src/hooks/useKeyboard.ts
+++ b/src/hooks/useKeyboard.ts
@@ -13,6 +13,7 @@ import {
   useWorkletCallback,
 } from 'react-native-reanimated';
 import { KEYBOARD_STATE } from '../constants';
+import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 
 const KEYBOARD_EVENT_MAPPER = {
   KEYBOARD_SHOW: Platform.select({
@@ -33,7 +34,7 @@ export const useKeyboard = () => {
   const keyboardState = useSharedValue<KEYBOARD_STATE>(
     KEYBOARD_STATE.UNDETERMINED
   );
-  const keyboardHeight = useSharedValue(0);
+  const { height: keyboardHeight } = useReanimatedKeyboardAnimation();
   const keyboardAnimationEasing =
     useSharedValue<KeyboardEventEasing>('keyboard');
   const keyboardAnimationDuration = useSharedValue(500);
@@ -58,8 +59,6 @@ export const useKeyboard = () => {
         temporaryCachedKeyboardEvent.value = [state, height, duration, easing];
         return;
       }
-      keyboardHeight.value =
-        state === KEYBOARD_STATE.SHOWN ? height : keyboardHeight.value;
       keyboardAnimationDuration.value = duration;
       keyboardAnimationEasing.value = easing;
       keyboardState.value = state;

[ubaidkolad]

Any solutions on this? it doesn't work well even with BottomSheetTextInput on Android. iOS just works great for all cases.

[klawijuice]

same issue +1

Any solutions on this? it doesn't work well even with BottomSheetTextInput on Android. iOS just works great for all cases.

[brentforder]

@ChristopherGabba, @ubaidkolad, @klawijuice I recently realized that I had to add the actual Android manifest property "adjustResize" to make real use of the BottomSheet android_keyboardInputMode="adjustResize". https://developer.android.com/guide/topics/manifest/activity-element#wsoft

Now the app screen actually resizes for the virtual keyboard, instead of me having to mess around with positioning things. For some reason there is a little extra padding left over when the keyboard is deactivates and the screen size is restored, but it's much better in my case. I'd recommend this path if you can't get the other BottomSheet options to work for you. I'm still using BottomSheetTextInput and BottomSheetScrollView though too.

[ephung-woolpert]

I'm still having this issue. I was able to get it working (I think); QA will find out, as they have the problematic devices that I don't to reproduce this. Bonkers.

If I find a fix, I will post it. ;D

[dilpreetsinghoi]

@brentforder I already have android:windowSoftInputMode="adjustResize" set in my AndroidManifest, but the behavior still isn’t as expected on Android when using <BottomSheetTextInput />. It works fine on iOS. Has anyone found a workaround for Android? @gorhom

[ezranbayantemur]

This happens on my side too. iOS works great, Android is not working..

[gk704297]

Any update on this?

[ephung-woolpert]

No one will like this, myself included, but I was able to work around this using https://github.com/kirillzyusko/react-native-keyboard-controller

[terka-codes]

@ephung-woolpert Could you please share a snippet of the code, that worked for you? Thanks so much

[ephung-woolpert]

@ephung-woolpert Could you please share a snippet of the code, that worked for you? Thanks so much

It wasn't a snippet of code, per se, (or maybe it was) but more of actually using the library to control the keyboard. The code I'm working on right now is private so I cannot share it. I apologize. Note: in the docs there is specific mention of how to use the keyboard aware scroll view in conjunction with gorhom here

[enyoghasim]

@ephung-woolpert Could you please share a snippet of the code, that worked for you? Thanks so much

It wasn't a snippet of code, per se, (or maybe it was) but more of actually using the library to control the keyboard. The code I'm working on right now is private so I cannot share it. I apologize. Note: in the docs there is specific mention of how to use the keyboard aware scroll view in conjunction with gorhom here

this worked for me

[terka-codes]

@ephung-woolpert Could you please share a snippet of the code, that worked for you? Thanks so much

It wasn't a snippet of code, per se, (or maybe it was) but more of actually using the library to control the keyboard. The code I'm working on right now is private so I cannot share it. I apologize. Note: in the docs there is specific mention of how to use the keyboard aware scroll view in conjunction with gorhom here

For me too, thanks so much

[PrimulaX]

This is still issue on android