Bottom sheet opens on rotation
See original GitHub issueBug
The bottom sheet opens when it should be closed after rotation. Additionally, if the device is rotated with sheet open, the onChange
is not called until the device is rotated back again. What is odd is this appears to only happen when snap points are [0%, 100%]
(or very close to those numbers).
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 2.3.0 |
react-native | 0.63.2 |
react-native-reanimated | 1.13.3 |
react-native-gesture-handler | 1.10.3 |
Steps To Reproduce
- Open sheet
- Rotate device
- Close sheet
- Rotate device
Describe what you expected to happen:
- Sheet expected to remain closed
- Callback
onChange
to have been called when sheet was closed - Callback
onChange
to not be called with incorrect snapPoint after rotation.
Video of issue:
const snapPoints = useMemo(() => ["0%", '100%'], []);
Video where only change is not using maxed snapPoints showing expected behavior.
const snapPoints = useMemo(() => ["20%", '100%'], []);
Reproducible sample code
Snack: https://snack.expo.io/@mookiies/github.com-mookiies-bottom-sheet-snap-point-demo (have to run on your device) Repo: https://github.com/Mookiies/bottom-sheet-snap-point-demo
Issue Analytics
- State:
- Created 2 years ago
- Reactions:5
- Comments:33 (1 by maintainers)
Top Results From Across the Web
android - Bottom Sheet landscape issue - Stack Overflow
The problem occurs in the 24.+ version of the design library. According below image the Bottom Sheet is not showing correctly only in...
Read more >Android Bottom Sheet / Bottom Sheet Behavior - Droid By Me
Android Bottom Sheet is a component that slides up from the bottom of the screen having multiple options. Here are the examples of...
Read more >Implementing Bottom Sheet Dialogs using Android Studio
This article explains how to use Bottom Sheets in Android. ... We want to open the fragment when the button is clicked.
Read more >rotate() - CSS: Cascading Style Sheets - MDN Web Docs
The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.
Read more >Rotate or flip a text box, shape, WordArt, or picture in Word
You may have to double-click the object to open the Format tab. Rotate to any angle. Select the object to rotate. Select the...
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
Bump
I believe this issue is fixed in
v4.4.4
by https://github.com/gorhom/react-native-bottom-sheet/commit/3b75d5d84e0a02933ef2b01d855d9f6036c756b2 and https://github.com/gorhom/react-native-bottom-sheet/commit/29af238d9eed31f0d9cad39ade8a43cf37ca2e72If anyone is still experiencing after upgrading please comment and I will try to re-open issue