[v4] | [v2] BottomSheetModal failing to present on iOS

[walterholohan]

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

1. User tries to press on Link Activity and you can see the modal briefly flashes
2. User tries to press on Referral Code and again the modal flashes and closes

RPReplay_Final1696360061.mov

Reproducible sample code

can attach an example of code if necessary but I was just following to docs for BottomSheetModal

[SrAnthony]

Same happening to us, affecting at least 15 users so far.
We couldn't get a repro yet either.

Bottom sheet 4.5.1
React native 0.72.5
Reanimated 3.5.4

[LouisKraemer]

Same here, animateOnMount to false does fix the issue but really low number of users affected.

[walterholohan]

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

[karbone4]

Same here, we are also using expo sdk 49. It also happens on android

[enchorb]

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.

[hatem-72]

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/

[walterholohan]

wow great spot @hatem-72 , did you manage to create a patch for this lib?

[hatem-72]

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

[enchorb]

@hatem-72 great find! reached out to 2 users who were having this issue and they both had it enabled.

[walterholohan]

Can we buy @hatem-72 a coffee?

[karbone4]

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 :

const reducedMotion = useReducedMotion();
useImperativeHandle(
    bottomModalRef,
    () => ({
        dismiss: () => {
            if (reducedMotion) {
                ref?.current?.snapToPosition(0);
            } else {
                ref?.current?.dismiss();
            }
        }
    }),
    [reducedMotion]
);

[walterholohan]

@karbone4 I am unable to reproduce your bug. It works for me

[leymytel]

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 override reduced motion to false in reanimated 3.5.4:

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;
 }