react-native-bottom-sheet: [v4] | [v2] BottomSheetModal failing to present on iOS
Bug
We just recently updated RN to 0.72.5 and react-native-reanimated to 3.5.4 and released it to production over the weekend. And then we started to get reports from our users that the modals were failing to appear. I will attach some videos below but we were unable to reproduce it on a simulator or a real device however we have ~150,000 MAU so after 24 hours we had over 10 users who were affected.
We had users on iOS 16.x and iOS 17.x who were affected
To unblock our users I had to set animateOnMount to false which makes me believe the issue is with the opening animation of the modal and reanimated
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | 4.4.7 |
react-native | 0.72.5 |
react-native-reanimated | 3.5.4 |
react-native-gesture-handler | 2.13.1 |
Steps To Reproduce
- User tries to press on
Link Activity
and you can see the modal briefly flashes - User tries to press on
Referral Code
and again the modal flashes and closes
Reproducible sample code
can attach an example of code if necessary but I was just following to docs for BottomSheetModal
About this issue
- Original URL
- State: open
- Created 9 months ago
- Reactions: 16
- Comments: 40 (1 by maintainers)
Commits related to this issue
- fix: fixed the mount animation with reduce motion enabled (#1560, #1674) — committed to gorhom/react-native-bottom-sheet by gorhom 4 months ago
- fix: fixed the mount animation with reduce motion enabled (#1560, #1674) fix: bottom sheet not appearing for users that have reduced motion turned on (#1743)(by @fobos531) — committed to discord/react-native-bottom-sheet by gorhom 4 months ago
- fix: fixed the mount animation with reduce motion enabled (#1560, #1674) fix: bottom sheet not appearing for users that have reduced motion turned on (#1743)(by @fobos531) — committed to discord/react-native-bottom-sheet by gorhom 4 months ago
For the moment, I’ve only disabled the opening animation for users with reduced motion :
Can we buy @hatem-72 a coffee?
Hello everyone!
Setting
animateOnMount
to false causes many weird issues (can’t dismiss the modal, sometimes you need to click twice to get it open) . Another temporary fix is to add this patch (thanks to @efstathiosntonas) to overridereduced motion
tofalse
in reanimated 3.5.4:As I see, reduced motion is also enabled if low power mode is active and device battery is <= 10%. Almost all screenshots from our user reports shows that their device battery are <= 10%. Apple mentions this here, under Low Power Mode title. So it may be a wider issue than we think, not related with accessibility settings only.
Some of our users are affected as well. I think I managed to reproduce it, at least on IOS: Activate the
Reduce Motion
accessibility setting in your Iphone, restart your app then bottomsheets are not opening anymore.Reanimated recently added support for this setting -> https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/
@gorhom would the above be worth a v4 patch release?
Also hitting this issue, rather than disabling the reduce motion detection for Reanimated globally we went with conditionally supplying our own animation config only when required. There are still some minor quirks when dismissing the sheet, but it does at least open and work correctly:
The animation config was lifted from https://github.com/gorhom/react-native-bottom-sheet/blob/65b5dc03e673c25b3b41af954e1f13fe7668a339/src/constants.ts#L68-L75 to keep thre behaviour the same as before, I noticed that there’s a platform fork and on Android the animation using a timing config, so you could probably use that based on platform, but we were happy enough with the spring config for both platforms.
In my case, one of our users had the “Reduce Motion” option enabled and that caused the modals to not open. It was solved as follows
@hatem-72 Thanks!!
I’m having the same issue with my app. Reported by a user. Totally caught me by surprise. This library is really a good one, I hope this issue will be addressed as it affects virtually every app using BottomSheetModal.
For me the solution was to disable reduced motion support with this patch, which to me seems like a fine solution for now. Before bumping reanimated to >=3.5.0 we didn’t support reduced motion (at least not for our reanimated animations) and with this patch we still don’t. Users are not going to notice any degradation in UX. When this has been properly fixed in bottomsheet and/or reanimated we can remove this patch and increase UX for accessibility users.
Thanks @hatem-72 for the fix.
I have another bug, I can’t dismiss the bottom modal 2 times. If I dismiss, open it again, I can’t dismiss it. I found a workaround by overriding ref :
I’ve submitted a PR which should fix this in v5 of the library: https://github.com/gorhom/react-native-bottom-sheet/pull/1743
Tried the fix by @levibuzolic / @mattijsf. That works most of the time but got some weird issues when having multiple BottomSheets. Also tried disabling motion, that was very weird. Currently using the reanimated patch by @leymytel, that seems to be working fine.
@gorhom It would be really great if you can look into this.
Inspired by the above answer, main difference being the import of
ANIMATION_CONFIGS
:In fact, I think this problem is fundamentally a problem with the changes in Reanimated that were made when the BottomSheet version was upgraded, although BottomSheet itself handles reduceOption in a way.
Simple problem solving can be done in the other comment1 and comment2 posted above. But I think the fundamental solution is to allow Reanimated itself to control the relevant settings.
So I posted my opinion and the cause I identified on Reanimated.(https://github.com/software-mansion/react-native-reanimated/discussions/5314#issuecomment-5314) We ask for your interest. Let’s solve this problem related to accessibility together!
The change from @hatem-72 should be included in the main code base of the bottom sheet.
wow great spot @hatem-72 , did you manage to create a patch for this lib?