Merge pull request #55415 from software-mansion-labs/migrate/animatab…

…le-reanimated-v0 Migrate SignInPage to react-native-reanimated, remove useNativeDriver
Expensify · Jan 24, 2025 · 856a2db · 856a2db
2 parents 761d299 + 2a04a78
commit 856a2db
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 55 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -87,6 +87,10 @@ const restrictedImportPaths = [
         importNames: ['memoize'],
         message: "Please use '@src/libs/memoize' instead.",
     },
+    {
+        name: 'react-native-animatable',
+        message: "Please use 'react-native-reanimated' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
 import React, {useMemo} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
+// eslint-disable-next-line no-restricted-imports -- will be removed in the future PR
 import * as Animatable from 'react-native-animatable';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {AnimationDirection} from './AnimatedStepContext';
@@ -37,8 +37,6 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN,
             }}
             duration={CONST.ANIMATED_TRANSITION}
             animation={animationStyle}
-            // eslint-disable-next-line react-compiler/react-compiler
-            useNativeDriver={useNativeDriver}
             style={style}
         >
             {children}

diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
@@ -14,9 +14,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
-import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
-import * as Modal from '@userActions/Modal';
+import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal';
 import CONST from '@src/CONST';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
@@ -37,7 +36,7 @@ function BaseModal(
         fullscreen = true,
         animationIn,
         animationOut,
-        useNativeDriver: useNativeDriverProp,
+        useNativeDriver,
         useNativeDriverForBackdrop,
         hideModalContentWhileAnimating = false,
         animationInTiming,
@@ -85,16 +84,16 @@ function BaseModal(
      */
     const hideModal = useCallback(
         (callHideCallback = true) => {
-            if (Modal.areAllModalsHidden()) {
-                Modal.willAlertModalBecomeVisible(false);
+            if (areAllModalsHidden()) {
+                willAlertModalBecomeVisible(false);
                 if (shouldSetModalVisibility) {
-                    Modal.setModalVisibility(false);
+                    setModalVisibility(false);
                 }
             }
             if (callHideCallback) {
                 onModalHide();
             }
-            Modal.onModalDidClose();
+            onModalDidClose();
             ComposerFocusManager.refocusAfterModalFullyClosed(uniqueModalId, restoreFocusType);
         },
         [shouldSetModalVisibility, onModalHide, restoreFocusType, uniqueModalId],
@@ -104,9 +103,9 @@ function BaseModal(
         isVisibleRef.current = isVisible;
         let removeOnCloseListener: () => void;
         if (isVisible) {
-            Modal.willAlertModalBecomeVisible(true, type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED);
+            willAlertModalBecomeVisible(true, type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED);
             // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu
-            removeOnCloseListener = Modal.setCloseModal(onClose);
+            removeOnCloseListener = setCloseModal(onClose);
         }
 
         return () => {
@@ -131,7 +130,7 @@ function BaseModal(
 
     const handleShowModal = () => {
         if (shouldSetModalVisibility) {
-            Modal.setModalVisibility(true);
+            setModalVisibility(true);
         }
         onModalShow();
     };
@@ -231,7 +230,7 @@ function BaseModal(
                     onBackdropPress={handleBackdropPress}
                     // Note: Escape key on web/desktop will trigger onBackButtonPress callback
                     // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                    onBackButtonPress={Modal.closeTop}
+                    onBackButtonPress={closeTop}
                     onModalShow={handleShowModal}
                     propagateSwipe={propagateSwipe}
                     onModalHide={hideModal}
@@ -250,10 +249,8 @@ function BaseModal(
                     deviceWidth={windowWidth}
                     animationIn={animationIn ?? modalStyleAnimationIn}
                     animationOut={animationOut ?? modalStyleAnimationOut}
-                    // eslint-disable-next-line react-compiler/react-compiler
-                    useNativeDriver={useNativeDriverProp && useNativeDriver}
-                    // eslint-disable-next-line react-compiler/react-compiler
-                    useNativeDriverForBackdrop={useNativeDriverForBackdrop && useNativeDriver}
+                    useNativeDriver={useNativeDriver}
+                    useNativeDriverForBackdrop={useNativeDriverForBackdrop}
                     hideModalContentWhileAnimating={hideModalContentWhileAnimating}
                     animationInTiming={animationInTiming}
                     animationOutTiming={animationOutTiming}

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -69,6 +69,8 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             onModalShow={showModal}
             avoidKeyboard={false}
             fullscreen={fullscreen}
+            useNativeDriver={false}
+            useNativeDriverForBackdrop={false}
             type={type}
         >
             {children}

diff --git a/src/libs/useNativeDriver/index.native.ts b/src/libs/useNativeDriver/index.native.ts
diff --git a/src/libs/useNativeDriver/index.ts b/src/libs/useNativeDriver/index.ts
diff --git a/src/libs/useNativeDriver/types.ts b/src/libs/useNativeDriver/types.ts
diff --git a/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx b/src/pages/signin/SignInPageLayout/BackgroundImage/index.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {InteractionManager} from 'react-native';
-import * as Animatable from 'react-native-animatable';
+import Animated, {FadeIn} from 'react-native-reanimated';
 import DesktopBackgroundImage from '@assets/images/home-background--desktop.svg';
 import MobileBackgroundImage from '@assets/images/home-background--mobile.svg';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,15 +9,6 @@ import type BackgroundImageProps from './types';
 
 function BackgroundImage({width, transitionDuration, isSmallScreen = false}: BackgroundImageProps) {
     const styles = useThemeStyles();
-    const fadeIn = {
-        from: {
-            opacity: 0,
-        },
-        to: {
-            opacity: 1,
-        },
-    };
-
     const [isInteractionComplete, setIsInteractionComplete] = useState(false);
     const isAnonymous = isAnonymousUser();
 
@@ -40,24 +31,30 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac
         return;
     }
 
-    return (
-        <Animatable.View
-            style={styles.signInBackground}
-            animation={fadeIn}
-            duration={transitionDuration}
-        >
-            {isSmallScreen ? (
+    if (isSmallScreen) {
+        return (
+            <Animated.View
+                style={styles.signInBackground}
+                entering={FadeIn.duration(transitionDuration)}
+            >
                 <MobileBackgroundImage
                     width={width}
                     style={styles.signInBackground}
                 />
-            ) : (
-                <DesktopBackgroundImage
-                    width={width}
-                    style={styles.signInBackground}
-                />
-            )}
-        </Animatable.View>
+            </Animated.View>
+        );
+    }
+
+    return (
+        <Animated.View
+            style={styles.signInBackground}
+            entering={FadeIn.duration(transitionDuration)}
+        >
+            <DesktopBackgroundImage
+                width={width}
+                style={styles.signInBackground}
+            />
+        </Animated.View>
     );
 }
 

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -5,6 +5,7 @@ import type {LineLayer} from 'react-map-gl';
 // eslint-disable-next-line no-restricted-imports
 import type {Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {Platform, StyleSheet} from 'react-native';
+// eslint-disable-next-line no-restricted-imports -- will be removed in the future PR
 import type {CustomAnimation} from 'react-native-animatable';
 import type {PickerStyle} from 'react-native-picker-select';
 import {interpolate} from 'react-native-reanimated';