New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[v4] | [v2] BottomSheetModal failing to present on iOS #1560
Comments
Same happening to us, affecting at least 15 users so far. Bottom sheet 4.5.1 |
Same here, animateOnMount to false does fix the issue but really low number of users affected. |
Thanks @SrAnthony and @LouisKraemer good to hear that you are also experiencing the same issue for your users. I haven't been able to deepdive into the animation implementation but hopefully @gorhom can give some insight or potential avenue's we can explore for a fix |
Same here, we are also using expo sdk 49. It also happens on android |
Same issue here, more and more users are starting to complain about this - also unable to reproduce for us on simulator or our testing devices. This is happening for our users on both v4 and v5. |
Some of our users are affected as well. Reanimated recently added support for this setting -> https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/ |
wow great spot @hatem-72 , did you manage to create a patch for this lib? |
For the moment, I've only disabled the opening animation for users with reduced motion : import { useReducedMotion } from 'react-native-reanimated';
import { BottomSheetModal } from '@gorhom/bottom-sheet';
// ...
function MyComponent() {
const reducedMotion = useReducedMotion();
return <BottomSheetModal
// ...
animateOnMount={!reducedMotion}
>
// ...
</BottomSheetModal>
} |
@hatem-72 great find! reached out to 2 users who were having this issue and they both had it enabled. |
Can we buy @hatem-72 a coffee? |
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 :
|
@karbone4 I am unable to reproduce your bug. It works for me |
Hello everyone! Setting diff --git a/node_modules/react-native-reanimated/src/reanimated2/PlatformChecker.ts b/node_modules/react-native-reanimated/src/reanimated2/PlatformChecker.ts
index 9b3fcb1..0111380 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/PlatformChecker.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/PlatformChecker.ts
@@ -49,5 +49,5 @@ export function isReducedMotion() {
? // @ts-ignore Fallback if `window` is undefined.
!window.matchMedia('(prefers-reduced-motion: no-preference)').matches
: false
- : (global as localGlobal)._REANIMATED_IS_REDUCED_MOTION ?? false;
+ : false;
} |
Also observed on a device running Android 10 with reduce motion option enabled |
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: const reduceMotionEnabled = useReducedMotion();
const overrideConfig = useBottomSheetSpringConfigs({
damping: 500,
stiffness: 1000,
mass: 3,
overshootClamping: true,
restDisplacementThreshold: 10,
restSpeedThreshold: 10,
reduceMotion: ReduceMotion.Never,
});
return (
<BottomSheetModal
/*
There's a bug in BottomSheet which means that sheets will fail to open when reduce motion is enabled. Manually
providing an animation config with `reduceMotion: ReduceMotion.Never` fixes this, but it does introduce a bit
of jank when dismissing the sheet. This is a tradeoff we're willing to make for the sake of sheets at least
working when reduce motion is enabled.
@see https://github.com/gorhom/react-native-bottom-sheet/issues/1560
*/
animationConfigs={reduceMotionEnabled ? overrideConfig : undefined}
// other config here...
/>
); The animation config was lifted from react-native-bottom-sheet/src/constants.ts Lines 68 to 75 in 65b5dc0
|
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. So I posted my opinion and the cause I identified on Reanimated.(software-mansion/react-native-reanimated#5314 (comment)) |
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. |
Thank you very much. This is the root cause of my case |
Although I tested setting reducedMotion to false, it's not a viable solution because the problem still appears from time to time. I think it's a fundamental problem with how Reanimated and BottomSheet works as @Gyogle states. |
Inspired by the above answer, main difference being the import of import { useBottomSheetSpringConfigs } from "@gorhom/bottom-sheet"
import { ANIMATION_CONFIGS } from "@gorhom/bottom-sheet/src/constants"
import { Platform } from "react-native"
import { ReduceMotion, WithTimingConfig, useReducedMotion } from "react-native-reanimated"
/**
* https://github.com/gorhom/react-native-bottom-sheet/issues/1560
*
* Usage:
* ```
* const animationConfigs = useBottomSheetAnimationConfigsReducedMotionWorkaround()
* <BottomSheetModal animationConfigs={animationConfigs} ...>
* ```
*
* @returns
*/
export function useBottomSheetAnimationConfigsReducedMotionWorkaround():
| WithTimingConfig
| undefined {
const reducedMotion = useReducedMotion()
const iOSAnimationConfigWithoutReducedMotion = useBottomSheetSpringConfigs({
...ANIMATION_CONFIGS,
reduceMotion: ReduceMotion.Never,
})
if (Platform.OS !== "ios" || !reducedMotion) return undefined
return iOSAnimationConfigWithoutReducedMotion
} |
@gorhom would the above be worth a v4 patch release? |
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. |
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!! |
@leymytel this patch includes animation for users who have enabled motion reduction, I think not everyone will be happy with this behavior |
This issue will cause a lot of users to be completely unable to use the Apps that uses this library. If you have time, can you please have a look? @gorhom 💗 |
I am experiencing the same issue with version |
@karbone4 Same issue where I can't close modal the second time... I tried using your fix but it doesn't seem to be working. Any advice? Thanks! `const reducedMotion = useReducedMotion(); useImperativeHandle( return ( |
@karbone4 I got it! Just use ref.current.close() instead of ref.current.dismiss() |
Is this working in the latest version? Same issue. |
1 similar comment
Is this working in the latest version? Same issue. |
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. |
I'm having the same issue with my app. Reported by a user. Totally caught me by surprise. |
Some of our users are having this problem. We could replicate activating "Reduce Motion" in a old device (14.7) and users reported the problem were using 16.6.1. In a device with 17.2 Reduce motion option not affect this bug. |
@gorhom this is a P0 bug, is this being worked on? |
I've submitted a PR which should fix this in v5 of the library: #1743 |
FYI a simple workaround was posted in another issue about the same problem: |
gorhom#1674) fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)
gorhom#1674) fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)
Thank you for this, I was facing the same issue and this resolved it. |
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days. |
not stale |
The change from @hatem-72 should be included in the main code base of the bottom sheet. |
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
Steps To Reproduce
Link Activity
and you can see the modal briefly flashesReferral Code
and again the modal flashes and closesRPReplay_Final1696360061.mov
Reproducible sample code
The text was updated successfully, but these errors were encountered: