question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v4] BottomSheetScrollView causes extra padding to appear

See original GitHub issue

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

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:open
  • Created 2 years ago
  • Comments:31 (6 by maintainers)

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Building my app with Expo causes extra padding on the top of ...
My problem is whenever I build my app there comes this extra white space / padding on top of my app. I have...
Read more >
BottomSheetScrollView | React Native Bottom Sheet
BottomSheetScrollView. A pre-integrated React Native ScrollView with BottomSheet gestures. Props​. Inherits ScrollViewProps from react-native . focusHook ​.
Read more >
A Performant Interactive Bottom Sheet with Fully Configurable ...
SafeAreaView is the preferred way to consume insets. This is a regular View with insets applied as extra padding or margin. It offers...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found