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.

Closing Bottom Sheet when Keyboard is Shown

See original GitHub issue

Bug

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)

android

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:

ios

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 GitHub Comments

2reactions

gorhomcommented, Jun 5, 2021

hi @carissacks , @usama-asfar could you test on v4 #427 ?

yarn add @gorhom/bottom-sheet@4.0.0-alpha.9

1reaction

pfcodescommented, Sep 22, 2022

Having this problem on iOS when keyboardBehavior is restore, anybody know how to fix this problem with this situation?

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

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

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

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

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