Closing Bottom Sheet when Keyboard is Shown
See original GitHub issueBug
Hello, I got this weird behavior whenever I tried to close the bottom sheet on Android while my keyboard is shown. I did try using the latest version (v 4.0.8 alpha), and it’s still there. However it works fine in ios.
This project is on Expo (v 41.0.0)
- Closing the bottom sheet doesn’t seems to close it completely, you can see it still being displayed behind the keyboard. This existing bottom sheet however doesn’t seem to close even thought I called close method by pressing
Close
button. - I close the keyboard manually on
onChange
callback, when the index is smaller or equal to 0. However when clicking on the backdrop, the keyboard isn’t dismissed. - Also tried to expand the bottom sheet to fullScreen when keyboard is displayed, but the bottom sheet size keeps changing.
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 3.6.5 |
react-native | 0.3.6 |
react-native-reanimated | 2.1.0 |
react-native-gesture-handler | 1.10.2 |
Steps To Reproduce
- Run the snack in Android
- Press ‘Open’
- Focus on the text input ‘email’, located under the close text on the bottom sheet
- Here you can see the bottom sheet doesn’t expand to fullscreen.
- Press ‘Close’, located inside the bottom sheet
- You can see the bottom sheet still exists shortly after the keyboard is dismissed.
- Repeat step 2 and 3
- Press the backdrop (anywhere outside the bottom sheet)
- The keyboard is not dismissed
- Press back to close the keyboard
- Try pressing the backdrop or ‘Close’ to close the bottom sheet
Describe what you expected to happen:
- Focusing on the text input will expand the bottom sheet to fullscreen.
- Calling
bottomsheet.close()
or pressing on the backdrop will close the bottom sheet completely.
Reproducible sample code
See it here https://snack.expo.io/@carissa_cks/bottom-sheet
Related issue: #453
And thank you for this awesome package!!
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:10 (3 by maintainers)
Top Results From Across the Web
How to Move bottomsheet along with keyboard which has ...
BottomSheet - has the maxHeight: constraints as the Fields are Increasing height won't increase. You can use ListView in BottomSheet to make fields...
Read more >showModalBottomSheet function - material library - Dart API
This example demonstrates how to use showModalBottomSheet to display a bottom sheet that obscures the content behind it when a user taps a...
Read more >Keyboard Handling | React Native Bottom Sheet - GitHub Pages
Keyboard handling is one of the main feature of BottomSheet v4 , thanks to the effort of the community to spot issues, test...
Read more >Sheets: bottom - Material Design
STATE_COLLAPSED: The bottom sheet is visible but only showing its peek height. This state is usually the 'resting position' of a bottom sheet,...
Read more >How to Move BottomSheet Along with Keyboard ... - Morioh
But the keyboard does not appear with the bottomSheet so in this article, we will show how to fix this issue. You can...
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
hi @carissacks , @usama-asfar could you test on
v4
#427 ?Having this problem on iOS when
keyboardBehavior
isrestore
, anybody know how to fix this problem with this situation?