fix: Modal animation callbacks not called with reduced motion on native apps

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

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
 import Animated, {Keyframe, runOnJS} from 'react-native-reanimated';
 import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
@@ -27,12 +27,8 @@ function Container({
     const Entering = useMemo(() => {
         const AnimationIn = new Keyframe(getModalInAnimation(animationIn));
 
-        return AnimationIn.duration(animationInTiming).withCallback(() => {
-            'worklet';
-
-            runOnJS(onOpenCallBack)();
-        });
-    }, [animationIn, animationInTiming, onOpenCallBack]);
+        return AnimationIn.duration(animationInTiming);
+    }, [animationIn, animationInTiming]);
 
     const Exiting = useMemo(() => {
         const AnimationOut = new Keyframe(getModalOutAnimation(animationOut));
@@ -44,6 +40,19 @@ function Container({
         });
     }, [animationOutTiming, onCloseCallBack, animationOut]);
 
+    // Temporary solution to run animation callbacks even with reduced motion setting turned on
+    // since .reduceMotion method doesn't work in the current version of Reanimated (https://github.com/software-mansion/react-native-reanimated/issues/8046)
+    // We will remove this once fixed upstream https://github.com/Expensify/App/issues/69190
+    useEffect(() => {
+        setTimeout(onOpenCallBack, animationInTiming);
+
+        return () => {
+            setTimeout(onCloseCallBack, animationOutTiming);
+        };
+        // calling callbacks only when the layout animations are run - on mount and unmount
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, []);
+
     return (
         <View
             style={style}

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

@@ -31,7 +31,18 @@ function Container({
             return;
         }
         isInitiated.set(true);
-        initProgress.set(withTiming(1, {duration: animationInTiming, easing, reduceMotion: ReduceMotion.Never}, onOpenCallBack));
+        initProgress.set(
+            withTiming(
+                1,
+                {
+                    duration: animationInTiming,
+                    easing,
+                    // ensuring the callback is called even with reduced motion setting turned on
+                    reduceMotion: ReduceMotion.Never,
+                },
+                onOpenCallBack,
+            ),
+        );
     }, [animationInTiming, onOpenCallBack, initProgress, isInitiated]);
 
     // instead of an entering transition since keyframe animations break keyboard on mWeb Chrome (#62799)
@@ -43,6 +54,7 @@ function Container({
                 .duration(animationOutTiming)
                 // eslint-disable-next-line react-compiler/react-compiler
                 .withCallback(() => onCloseCallbackRef.current())
+                // ensuring the callback is called even with reduced motion setting turned on
                 .reduceMotion(ReduceMotion.Never),
         [animationOutTiming, animationOut],
     );

src/components/Modal/ReanimatedModal/index.tsx

@@ -121,9 +121,10 @@ function ReanimatedModal({
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [isVisible, isContainerOpen, isTransitioning]);
 
-    const backdropStyle: ViewStyle = useMemo(() => {
-        return {width: windowWidth, height: windowHeight, backgroundColor: backdropColor};
-    }, [windowWidth, windowHeight, backdropColor]);
+    const backdropStyle: ViewStyle = useMemo(
+        () => ({width: windowWidth, height: windowHeight, backgroundColor: backdropColor, opacity: backdropOpacity}),
+        [windowWidth, windowHeight, backdropColor, backdropOpacity],
+    );
 
     const onOpenCallBack = useCallback(() => {
         setIsTransitioning(false);