Restrict usage of 'react-native-animatable' in favor of 'react-native…

…-reanimated'

.eslintrc.js

@@ -75,6 +75,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 = [

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}

src/styles/index.ts

@@ -4,6 +4,7 @@ import lodashClamp from 'lodash/clamp';
 import type {LineLayer} from 'react-map-gl';
 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 type {SharedValue} from 'react-native-reanimated';