react-native-bottom-sheet: [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 aBottomSheetScrollView
and a small number ofBottomSheetTextInputs
- 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
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 43 (6 by maintainers)
Commits related to this issue
- partially resolve android keyboard bug https://github.com/gorhom/react-native-bottom-sheet/issues/618#issuecomment-1831200388 — committed to discord/react-native-bottom-sheet by yayvery 4 months ago
- partially resolve android keyboard bug https://github.com/gorhom/react-native-bottom-sheet/issues/618#issuecomment-1831200388 — committed to discord/react-native-bottom-sheet by yayvery 4 months ago
Adding
android_keyboardInputMode='adjustResize'
property worked for meI also added:
i have tricky solution for this,
my problem was i had absolute view as my footer inside BottomSheetModal, and i had problem with adjustResize and adjustPan. if i set adjustResize the bottomsheet will going up like there is big margin with the keyboard. if i set adjustPan there will be a problem for smartphone with large screen only, the bottomsheet will sink to the back of the keyboard
my bottomsheet component FilterBottomSheet.js like this
i tried using BottomSheetView in my absolute View but the problem still occured. i tried BottomSheetScrollView as my ScrollView but the problem still occured, and other issue occured that it cannot be scrolled. (for this issue im using ScrollView from react-native-gesture-handler) i cannot used BottomSheetFooter because it’s in diffferent component from the parent BottomSheetModal
i tried everything from event focus input, keyboard listener in the component, all make the keyboard dismissed because it would rerender the component.
finally i solved this with created a keyboard listener in the parent that contain BottomSheetModal like this:
please look setKeyboardBottomInset(0.1) and bottomInset={keyboardBottomInset} setKeyboardBottomInset(0.1) in the keyboardDidShow event listener would tricked the keyboard event to change the value bottomInset={keyboardBottomInset}
hope it helps!
A more accurate code will be this:
Since adjustResize will automatically adjust the screen size in android, there is no need to add the _keyboardHeight in the calculation.
android_keyboardInputMode=“adjustResize”
add the above, and padding issure resolved
I find a solution in this post.
https://stackoverflow.com/questions/75873878/react-native-gorhom-bottom-sheet-collapses-opens-when-keyboard-dismiss-or-input
@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.I actually got it working by setting
keyboardBehavior="extend"
This worked like a charm. Thank you. For anyone wondering, this is using
patch-package
and creating a patch of the source code.I used the StackOverflow link and worked like a charm
We’re also having this issue. Our team opened https://github.com/gorhom/react-native-bottom-sheet/issues/1195 to try and document before we saw this. We were able to fix on our end by doing two things:
BottomSheetScrollView
android_keyboardInputMode='adjustResize'
I am using the same version 4, and facing same issue in Android. Have you somehow managed to make it work?
@gorhom many people including me seem to still encounter this problem of extra padding (around 32 pixels), any idea what could be causing it? It happens on both platforms and I already set keyboard window resize to
adjustPan
.it worked for me when i changed KeyboardBehavior prop to “extend”
I was having the same problem. Fixed by removing this logic:
Not sure if this will impact other parts of the package, still testing.
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.
https://user-images.githubusercontent.com/1332314/133065110-8b5c8c0a-b04a-4488-9546-f21a2bdefdfa.mp4
I’ve also updated the Expo Snack I linked previously, which also still showcases the issue on Android
@RBrNx have you tried to change
android_keyboardInputMode
to your appandroid:windowSoftInputMode
? https://gorhom.github.io/react-native-bottom-sheet/props#android_keyboardinputmode