migrate GrowlNotification

src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Animated} from 'react-native';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,8 +9,9 @@ function GrowlNotificationContainer({children, translateY}: GrowlNotificationCon
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const insets = useSafeAreaInsets();
+    const animatedStyles = useAnimatedStyle(() => styles.growlNotificationTranslateY(translateY));
 
-    return <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(translateY)]}>{children}</Animated.View>;
+    return <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, animatedStyles]}>{children}</Animated.View>;
 }
 
 GrowlNotificationContainer.displayName = 'GrowlNotificationContainer';

src/components/GrowlNotification/GrowlNotificationContainer/index.tsx

@@ -1,19 +1,16 @@
 import React from 'react';
-import {Animated} from 'react-native';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type GrowlNotificationContainerProps from './types';
 
 function GrowlNotificationContainer({children, translateY}: GrowlNotificationContainerProps) {
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const animatedStyles = useAnimatedStyle(() => styles.growlNotificationTranslateY(translateY));
 
     return (
-        <Animated.View
-            style={[styles.growlNotificationContainer, styles.growlNotificationDesktopContainer, styles.growlNotificationTranslateY(translateY), shouldUseNarrowLayout && styles.mwn]}
-        >
-            {children}
-        </Animated.View>
+        <Animated.View style={[styles.growlNotificationContainer, styles.growlNotificationDesktopContainer, animatedStyles, shouldUseNarrowLayout && styles.mwn]}>{children}</Animated.View>
     );
 }
 

src/components/GrowlNotification/GrowlNotificationContainer/types.ts

@@ -1,8 +1,8 @@
-import type {Animated} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
 type GrowlNotificationContainerProps = ChildrenProps & {
-    translateY: Animated.Value;
+    translateY: SharedValue<number>;
 };
 
 export default GrowlNotificationContainerProps;

src/components/GrowlNotification/index.tsx

@@ -1,7 +1,8 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
-import {Animated, View} from 'react-native';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
+import {View} from 'react-native';
 import {Directions, Gesture, GestureDetector} from 'react-native-gesture-handler';
+import {useSharedValue, withSpring} from 'react-native-reanimated';
 import type {SvgProps} from 'react-native-svg';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -11,7 +12,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Growl from '@libs/Growl';
 import type {GrowlRef} from '@libs/Growl';
-import useNativeDriver from '@libs/useNativeDriver';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
@@ -20,7 +20,7 @@ const INACTIVE_POSITION_Y = -255;
 const PressableWithoutFeedback = Pressables.PressableWithoutFeedback;
 
 function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
-    const translateY = useRef(new Animated.Value(INACTIVE_POSITION_Y)).current;
+    const translateY = useSharedValue(INACTIVE_POSITION_Y);
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
     const [duration, setDuration] = useState<number>();
@@ -76,10 +76,9 @@ function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
      */
     const fling = useCallback(
         (val = INACTIVE_POSITION_Y) => {
-            Animated.spring(translateY, {
-                toValue: val,
-                useNativeDriver,
-            }).start();
+            translateY.value = withSpring(val, {
+                overshootClamping: false,
+            });
         },
         [translateY],
     );

src/styles/index.ts

@@ -6,6 +6,7 @@ import type {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle}
 import {Platform, StyleSheet} from 'react-native';
 import type {CustomAnimation} from 'react-native-animatable';
 import type {PickerStyle} from 'react-native-picker-select';
+import type {SharedValue} from 'react-native-reanimated';
 import type {MixedStyleDeclaration, MixedStyleRecord} from 'react-native-render-html';
 import type {ValueOf} from 'type-fest';
 import type DotLottieAnimation from '@components/LottieAnimations/types';
@@ -3343,10 +3344,9 @@ const styles = (theme: ThemeColors) =>
             ...positioning.pFixed,
         },
 
-        growlNotificationTranslateY: (translateY: AnimatableNumericValue) =>
-            ({
-                transform: [{translateY}],
-            } satisfies ViewStyle),
+        growlNotificationTranslateY: (translateY: SharedValue<number>) => ({
+            transform: [{translateY: translateY.value}],
+        }),
 
         makeSlideInTranslation: (translationType: Translation, fromValue: number) =>
             ({