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.

Bottom sheet opens on rotation

See original GitHub issue

Bug

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

  1. Open sheet
  2. Rotate device
  3. Close sheet
  4. Rotate device

Describe what you expected to happen:

  1. Sheet expected to remain closed
  2. Callback onChange to have been called when sheet was closed
  3. Callback onChange to not be called with incorrect snapPoint after rotation.

Video of issue: const snapPoints = useMemo(() => ["0%", '100%'], []);

https://user-images.githubusercontent.com/22333355/124296997-9599ee00-db28-11eb-898a-3a85736a42cb.mov

Video where only change is not using maxed snapPoints showing expected behavior. const snapPoints = useMemo(() => ["20%", '100%'], []);

https://user-images.githubusercontent.com/22333355/124297138-bf531500-db28-11eb-80cd-0145172a8b49.mov

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:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:33 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
satorscommented, Apr 14, 2022

Bump

0reactions
Mookiiescommented, Oct 17, 2022

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/29af238d9eed31f0d9cad39ade8a43cf37ca2e72

If anyone is still experiencing after upgrading please comment and I will try to re-open issue

Read more comments on GitHub >

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

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