Merge pull request Expensify#69444 from software-mansion-labs/reduce-motion-reanimated-patch

Author: mountiny

patches/react-native-reanimated/details.md

@@ -22,3 +22,9 @@
 - E/App issue: https://github.com/Expensify/App/pull/63623
 - PR Introducing Patch:  🛑
 
+### [react-native-reanimated+3.19.1+004+reduce-motion-animation-callbacks.patch](react-native-reanimated+3.19.1+004+reduce-motion-animation-callbacks.patch)
+
+- Reason: The layout animation callbacks were not called when Reduce Motion accessibility setting was enabled on mobile devices (on native apps). This caused the app to be unresponsive after opening a modal.
+- Upstream PR/issue: https://github.com/software-mansion/react-native-reanimated/pull/8142
+- E/App issue: https://github.com/Expensify/App/issues/69190
+- PR Introducing Patch: https://github.com/Expensify/App/pull/69444

patches/react-native-reanimated/react-native-reanimated+3.19.1+004+reduce-motion-animation-callbacks.patch

@@ -0,0 +1,33 @@
+diff --git a/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx b/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
+index a2f6cf1..93a37f5 100644
+--- a/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
++++ b/node_modules/react-native-reanimated/src/createAnimatedComponent/createAnimatedComponent.tsx
+@@ -503,13 +503,6 @@ export function createAnimatedComponent(
+         return;
+       }
+ 
+-      if (this._isReducedMotion(currentConfig)) {
+-        if (!previousConfig) {
+-          return;
+-        }
+-        currentConfig = undefined;
+-      }
+-
+       updateLayoutAnimations(
+         isFabric() && type === LayoutAnimationType.ENTERING
+           ? this.reanimatedID
+@@ -608,14 +601,6 @@ export function createAnimatedComponent(
+       },
+     });
+ 
+-    _isReducedMotion(config?: LayoutAnimationOrBuilder): boolean {
+-      return config &&
+-        'getReduceMotion' in config &&
+-        typeof config.getReduceMotion === 'function'
+-        ? getReduceMotionFromConfig(config.getReduceMotion())
+-        : getReduceMotionFromConfig();
+-    }
+-
+     // This is a component lifecycle method from React, therefore we are not calling it directly.
+     // It is called before the component gets rerendered. This way we can access components' position before it changed
+     // and later on, in componentDidUpdate, calculate translation for layout transition.

src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import Animated, {Keyframe} from 'react-native-reanimated';
+import Animated, {Keyframe, ReduceMotion} from 'react-native-reanimated';
 import type {BackdropProps} from '@components/Modal/ReanimatedModal/types';
 import {getModalInAnimation, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils';
 import {PressableWithoutFeedback} from '@components/Pressable';
@@ -26,15 +26,15 @@ function Backdrop({
             return;
         }
         const FadeIn = new Keyframe(getModalInAnimation('fadeIn'));
-        return FadeIn.duration(animationInTiming);
+        return FadeIn.duration(animationInTiming).reduceMotion(ReduceMotion.Never);
     }, [animationInTiming, backdropOpacity]);
 
     const Exiting = useMemo(() => {
         if (!backdropOpacity) {
             return;
         }
         const FadeOut = new Keyframe(getModalOutAnimation('fadeOut'));
-        return FadeOut.duration(animationOutTiming);
+        return FadeOut.duration(animationOutTiming).reduceMotion(ReduceMotion.Never);
     }, [animationOutTiming, backdropOpacity]);
 
     const backdropStyle = useMemo(

src/components/Modal/ReanimatedModal/Container/index.web.tsx

@@ -31,7 +31,19 @@ function Container({
             return;
         }
         isInitiated.set(true);
-        initProgress.set(withTiming(1, {duration: animationInTiming, easing, reduceMotion: ReduceMotion.Never}, onOpenCallBack));
+        initProgress.set(
+            withTiming(
+                1,
+                {
+                    duration: animationInTiming,
+                    easing,
+                    // on web the callbacks are not called when animations are disabled with the reduced motion setting on
+                    // we enable the animations to make sure they are called
+                    reduceMotion: ReduceMotion.Never,
+                },
+                onOpenCallBack,
+            ),
+        );
     }, [animationInTiming, onOpenCallBack, initProgress, isInitiated]);
 
     // instead of an entering transition since keyframe animations break keyboard on mWeb Chrome (#62799)
@@ -43,6 +55,8 @@ function Container({
                 .duration(animationOutTiming)
                 // eslint-disable-next-line react-compiler/react-compiler
                 .withCallback(() => onCloseCallbackRef.current())
+                // on web the callbacks are not called when animations are disabled with the reduced motion setting on
+                // we enable the animations to make sure they are called
                 .reduceMotion(ReduceMotion.Never),
         [animationOutTiming, animationOut],
     );