[v2] Refactor ReanimatedModal/index.tsx to follow Rules of React and compile with React Compiler

config/eslint/eslint.seatbelt.tsv

@@ -116,8 +116,6 @@
 "../../src/components/Modal/BaseModal.tsx"	"react-hooks/set-state-in-effect"	1
 "../../src/components/Modal/Global/ConfirmModalWrapper.tsx"	"@typescript-eslint/no-deprecated/ConfirmModal"	1
 "../../src/components/Modal/ReanimatedModal/Container/index.web.tsx"	"react-hooks/refs"	1
-"../../src/components/Modal/ReanimatedModal/index.tsx"	"@typescript-eslint/no-deprecated/InteractionManager.clearInteractionHandle"	1
-"../../src/components/Modal/ReanimatedModal/index.tsx"	"@typescript-eslint/no-deprecated/InteractionManager.createInteractionHandle"	1
 "../../src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx"	"@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions"	1
 "../../src/components/MoneyReportHeaderModals.tsx"	"@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions"	1
 "../../src/components/MoneyRequestAmountInput.tsx"	"react-hooks/immutability"	2

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

@@ -1,8 +1,9 @@
 import React from 'react';
-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';
+import useAnimationTransition from '@hooks/useAnimationTransition';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
@@ -18,19 +19,14 @@ function Backdrop({
 }: BackdropProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {onAnimationComplete} = useAnimationTransition();
 
-    const Entering = new Keyframe(getModalInAnimation('fadeIn')).duration(animationInTiming);
-    const Exiting = new Keyframe(getModalOutAnimation('fadeOut')).duration(animationOutTiming);
-
-    const BackdropOverlay = (
-        <Animated.View
-            entering={Entering}
-            exiting={Exiting}
-            style={[styles.modalBackdrop, {opacity: backdropOpacity}, style]}
-        >
-            {!!customBackdrop && customBackdrop}
-        </Animated.View>
-    );
+    const Entering = new Keyframe(getModalInAnimation('fadeIn'))
+        .duration(animationInTiming)
+        // ReduceMotion.Never ensures the callback fires even when system motion is reduced
+        .reduceMotion(ReduceMotion.Never)
+        .withCallback(onAnimationComplete);
+    const Exiting = new Keyframe(getModalOutAnimation('fadeOut')).duration(animationOutTiming).reduceMotion(ReduceMotion.Never).withCallback(onAnimationComplete);
 
     if (!customBackdrop) {
         return (
@@ -40,12 +36,24 @@ function Backdrop({
                 onPressIn={onBackdropPress}
                 sentryLabel={CONST.SENTRY_LABEL.REANIMATED_MODAL.BACKDROP}
             >
-                {BackdropOverlay}
+                <Animated.View
+                    entering={Entering}
+                    exiting={Exiting}
+                    style={[styles.modalBackdrop, {opacity: backdropOpacity}, style]}
+                />
             </PressableWithoutFeedback>
         );
     }
 
-    return BackdropOverlay;
+    return (
+        <Animated.View
+            entering={Entering}
+            exiting={Exiting}
+            style={[styles.modalBackdrop, {opacity: backdropOpacity}, style]}
+        >
+            {customBackdrop}
+        </Animated.View>
+    );
 }
 
 export default Backdrop;

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

@@ -1,5 +1,5 @@
 import type {PropsWithChildren} from 'react';
-import React, {useMemo} from 'react';
+import React from 'react';
 import type {GestureStateChangeEvent, GestureType, PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import {useSharedValue} from 'react-native-reanimated';
@@ -52,18 +52,14 @@ function hasSwipeEnded(
 function GestureHandler({swipeDirection, onSwipeComplete, swipeThreshold = 100, children}: PropsWithChildren<GestureHandlerProps>) {
     const initialTranslationX = useSharedValue(0);
     const initialTranslationY = useSharedValue(0);
-    const panGesture: GestureType = useMemo(
-        () =>
-            Gesture.Pan()
-                .onStart((e) => {
-                    initialTranslationX.set(e.translationX);
-                    initialTranslationY.set(e.translationY);
-                })
-                .onEnd((e) => {
-                    hasSwipeEnded(e, {x: initialTranslationX.get(), y: initialTranslationY.get()}, swipeThreshold, swipeDirection, onSwipeComplete);
-                }),
-        [initialTranslationX, initialTranslationY, onSwipeComplete, swipeDirection, swipeThreshold],
-    );
+    const panGesture: GestureType = Gesture.Pan()
+        .onStart((e) => {
+            initialTranslationX.set(e.translationX);
+            initialTranslationY.set(e.translationY);
+        })
+        .onEnd((e) => {
+            hasSwipeEnded(e, {x: initialTranslationX.get(), y: initialTranslationY.get()}, swipeThreshold, swipeDirection, onSwipeComplete);
+        });
 
     if (!swipeDirection || !swipeDirection?.length || !onSwipeComplete) {
         return children;

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

@@ -1,10 +1,10 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import Animated, {Keyframe} from 'react-native-reanimated';
 import {scheduleOnRN} from 'react-native-worklets';
-import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
 import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
 import {getModalInAnimation, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils';
+import useAnimationTransition from '@hooks/useAnimationTransition';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import GestureHandler from './GestureHandler';
@@ -22,28 +22,23 @@ function Container({
     swipeDirection,
     swipeThreshold = 100,
     ...props
-}: Partial<ReanimatedModalProps> & ContainerProps) {
+}: ContainerProps) {
     const styles = useThemeStyles();
+    const {onAnimationComplete} = useAnimationTransition();
 
-    const Entering = useMemo(() => {
-        const AnimationIn = new Keyframe(getModalInAnimation(animationIn));
+    const Entering = new Keyframe(getModalInAnimation(animationIn)).duration(animationInTiming).withCallback(() => {
+        'worklet';
 
-        return AnimationIn.duration(animationInTiming).withCallback(() => {
-            'worklet';
+        scheduleOnRN(onOpenCallBack);
+        scheduleOnRN(onAnimationComplete);
+    });
 
-            scheduleOnRN(onOpenCallBack);
-        });
-    }, [animationIn, animationInTiming, onOpenCallBack]);
+    const Exiting = new Keyframe(getModalOutAnimation(animationOut)).duration(animationOutTiming).withCallback(() => {
+        'worklet';
 
-    const Exiting = useMemo(() => {
-        const AnimationOut = new Keyframe(getModalOutAnimation(animationOut));
-
-        return AnimationOut.duration(animationOutTiming).withCallback(() => {
-            'worklet';
-
-            scheduleOnRN(onCloseCallBack);
-        });
-    }, [animationOutTiming, onCloseCallBack, animationOut]);
+        scheduleOnRN(onCloseCallBack);
+        scheduleOnRN(onAnimationComplete);
+    });
 
     return (
         <View

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

@@ -1,8 +1,9 @@
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useEffect} from 'react';
 import Animated, {Keyframe, ReduceMotion, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import type ReanimatedModalProps from '@components/Modal/ReanimatedModal/types';
 import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
 import {easing, getModalInAnimationStyle, getModalOutAnimation} from '@components/Modal/ReanimatedModal/utils';
+import useAnimationTransition from '@hooks/useAnimationTransition';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
@@ -18,14 +19,10 @@ function Container({
     ...props
 }: ReanimatedModalProps & ContainerProps) {
     const styles = useThemeStyles();
-    const onCloseCallbackRef = useRef(onCloseCallBack);
+    const {onAnimationComplete} = useAnimationTransition();
     const initProgress = useSharedValue(0);
     const isInitiated = useSharedValue(false);
 
-    useEffect(() => {
-        onCloseCallbackRef.current = onCloseCallBack;
-    }, [onCloseCallBack]);
-
     useEffect(() => {
         if (isInitiated.get()) {
             return;
@@ -41,24 +38,26 @@ function Container({
                     // we enable the animations to make sure they are called
                     reduceMotion: ReduceMotion.Never,
                 },
-                onOpenCallBack,
+                () => {
+                    onOpenCallBack();
+                    onAnimationComplete();
+                },
             ),
         );
-    }, [animationInTiming, onOpenCallBack, initProgress, isInitiated]);
+    }, [animationInTiming, onOpenCallBack, onAnimationComplete, initProgress, isInitiated]);
 
     // instead of an entering transition since keyframe animations break keyboard on mWeb Chrome (#62799)
-    const animatedStyles = useAnimatedStyle(() => getModalInAnimationStyle(animationIn)(initProgress.get()), [initProgress]);
+    const animatedStyles = useAnimatedStyle(() => getModalInAnimationStyle(animationIn)(initProgress.get()), [animationIn, initProgress]);
 
-    const Exiting = useMemo(
-        () =>
-            new Keyframe(getModalOutAnimation(animationOut))
-                .duration(animationOutTiming)
-                .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],
-    );
+    const Exiting = new Keyframe(getModalOutAnimation(animationOut))
+        .duration(animationOutTiming)
+        .withCallback(() => {
+            onCloseCallBack();
+            onAnimationComplete();
+        })
+        // 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);
 
     return (
         <Animated.View