[v4] BottomSheetScrollView causes extra padding to appear

[RBrNx]

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

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

Describe what you expected to happen:

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

Screen_Recording_20210902-114844_Expo.Go.mp4

output.mp4

[gorhom]

@RBrNx have you tried to change android_keyboardInputMode to your app android:windowSoftInputMode ? https://gorhom.github.io/react-native-bottom-sheet/props#android_keyboardinputmode

[RBrNx]

@RBrNx have you tried to change android_keyboardInputMode to your app android:windowSoftInputMode ? https://gorhom.github.io/react-native-bottom-sheet/props#android_keyboardinputmode

@gorhom I currently have the softwareKeyboardLayoutMode set to pan in my Expo app.json which matches the adjustPan setting of android_keyboardInputMode in the Snack

[gorhom]

okay, i notice that you have the BottomSheetModalProvider in the BottomSheetModal, which will pick the wrong container height measurement.

I advice you to move BottomSheetModalProvider to the root component , to wrap your app

[gorhom]

i would consider this issue resolve 👍

[RBrNx]

Hey @gorhom, apologies for taking so long to get back to you!

Your suggestion absolutely makes sense, but unfortunately I am still able to replicate the issue. It seems as if the first input works ok, but the further you need to scroll down, the more the issue appears.

output2.mp4

I've also updated the Expo Snack I linked previously, which also still showcases the issue on Android

[gorhom]

I will check it out later, thanks for the update

[ramkgunturu]

Even I am facing same issue when I used BottomSheetModal on ScrollView then I am getting extra paddingBottom appending to the Data so that I is moving above of the mobile screen.I am facing this issue from last 2 months but I thought it is my mistake and today I checked all the scenarios in my programming but I didn't find out any resolves in my code.
So could you please suggest any solution for the problem I am facing?

[gorhom]

@RBrNx i couldn't reproduce the issue on provided snack , could you please verify it, thanks

[mikealche]

Hihi @gorhom ! Thanks for this amazing library.

I'm also experiencing the same issue.
In my case I want to replicate tiktok's comments in which the textinput is always floating at the bottom.
That's why I thought I could use the footerComponent prop to render a TextInput... but I'm getting the exact same behavior as the above comments describe .

EDIT: upon further debugging, it has nothing to do with where the TextInput is located. Also it doesn't matter if it's in the fotterComponent prop or not. It seems that the issue is the keyboard opening

[KingDoxik]

Same issue here. Works great on ios, only happens on Android. ScrollView gets smaller when keyboard is open. The white space is equal to the keyboard size.