[v4] BottomSheetScrollView causes extra padding to appear

Bug

Using a combination of BottomSheetModal, BottomSheetScrollView and BottomSheetTextInput with keyboardBehavior set to interactive will result in extra padding/margin appearing when the keyboard is visible - this only applies to Android, on iOS it seems to work as expected.

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.2
react-native	0.63
react-native-reanimated	2.1.0
react-native-gesture-handler	1.10.3

Steps To Reproduce

Create a BottomSheetModal component that renders a BottomSheetScrollView and a small number of BottomSheetTextInputs
Focus one of the lower TextInputs
Extra padding/margin appears

Describe what you expected to happen:

No extra padding/margin should render above the keyboard

Reproducible sample code

Below is a Snack containing a reproducible sample https://snack.expo.dev/@conorw/v4-bottomsheetscrollview-keyboard-padding-issue

and here are two videos showcasing the issue, one using the above Snack, and the other in my own Production app

https://user-images.githubusercontent.com/1332314/131832648-a60148cc-2c99-4207-9248-83139fd48b70.mp4

https://user-images.githubusercontent.com/1332314/131833763-bc0114ca-eed5-42bf-b01b-840731347f78.mp4

Issue Analytics

State:
Created 2 years ago
Comments:31 (6 by maintainers)

Top GitHub Comments

3reactions

anurbeciroviccommented, Nov 2, 2022

Adding android_keyboardInputMode='adjustResize' property worked for me

I also added:

keyboardBehavior='interactive'
keyboardBlurBehavior='restore'

1reaction

pedpesscommented, Jul 15, 2022

For the people who happen to stumble upon this thread: what worked for me was setting android:windowSoftInputMode to adjustPan in the AndroidManifest.xml

@InfiniteRain according to Android docs adjustResize is preferable, so this is not the final solution. I think it works as a workaround but could potentially have side effects in UX depending on your use case of keyboard, adjustPan might overlap the view with the keyboard.