[v4] BottomSheetScrollView causes extra padding to appear
See original GitHub issueBug
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
Issue Analytics
- State:
- Created 2 years ago
- Comments:31 (6 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Adding
android_keyboardInputMode='adjustResize'
property worked for meI also added:
@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.