From 329f27302ab640532eb81781a32462347912b93d Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 27 Nov 2024 14:04:52 +0100
Subject: [PATCH 1/7] migrate AttachmentModal.tsx

---
 src/components/AttachmentModal.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 207f3eed6f8ca..b2f7088cd3ad5 100644
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -1,15 +1,14 @@
 import {Str} from 'expensify-common';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, Keyboard, View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import {useSharedValue} from 'react-native-reanimated';
+import Animated, {FadeIn, useSharedValue} from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
@@ -166,7 +165,6 @@ function AttachmentModal({
     attachmentLink = '',
 }: AttachmentModalProps) {
     const styles = useThemeStyles();
-    const StyleUtils = useStyleUtils();
     const [isModalOpen, setIsModalOpen] = useState(defaultOpen);
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
@@ -177,7 +175,6 @@ function AttachmentModal({
     const [sourceState, setSourceState] = useState<AvatarSource>(() => source);
     const [modalType, setModalType] = useState<ModalType>(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
     const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
-    const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1));
     const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
     const isPDFLoadError = useRef(false);
     const {windowWidth} = useWindowDimensions();
@@ -590,7 +587,10 @@ function AttachmentModal({
                     {!!onConfirm && !isConfirmButtonDisabled && (
                         <SafeAreaConsumer>
                             {({safeAreaPaddingBottomStyle}) => (
-                                <Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
+                                <Animated.View
+                                    style={[safeAreaPaddingBottomStyle]}
+                                    entering={FadeIn}
+                                >
                                     <Button
                                         ref={viewRef(submitRef)}
                                         success

From 1dc5415f2f0ed5ef1653a807b4558cfebb01b38b Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 27 Nov 2024 15:27:54 +0100
Subject: [PATCH 2/7] migrate GrowlNotification

---
 .../GrowlNotificationContainer/index.native.tsx   |  5 +++--
 .../GrowlNotificationContainer/index.tsx          |  9 +++------
 .../GrowlNotificationContainer/types.ts           |  4 ++--
 src/components/GrowlNotification/index.tsx        | 15 +++++++--------
 src/styles/index.ts                               |  8 ++++----
 5 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx
index efd143c9487c6..0ca7756b0e0e7 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.tsx
+++ b/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';
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx
index 78d80bbb36b6a..f1113029bc86b 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,13 +7,10 @@ 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>
     );
 }
 
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts b/src/components/GrowlNotification/GrowlNotificationContainer/types.ts
index 91a48437dbd9b..5f137f6d3c482 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/types.ts
+++ b/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;
diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx
index d0846dcf7a42c..14cad991f096b 100644
--- a/src/components/GrowlNotification/index.tsx
+++ b/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],
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3508cbacdcff4..28301b9de01ba 100644
--- a/src/styles/index.ts
+++ b/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';
@@ -3377,10 +3378,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) =>
             ({

From e1f6577cf0d91398f9b123fa11e8c9426b0ce8cc Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Thu, 28 Nov 2024 13:29:08 +0100
Subject: [PATCH 3/7] migrate TextInput

---
 .../TextInput/BaseTextInput/index.native.tsx  | 20 ++++++------------
 .../TextInput/BaseTextInput/index.tsx         | 21 +++++++------------
 .../TextInput/TextInputLabel/index.native.tsx |  6 ++++--
 .../TextInput/TextInputLabel/index.tsx        |  6 ++++--
 .../TextInput/TextInputLabel/types.ts         |  6 +++---
 src/styles/index.ts                           |  4 ++--
 6 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx
index 9de6b6dd6d089..fb9379ca87bbe 100644
--- a/src/components/TextInput/BaseTextInput/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/index.native.tsx
@@ -2,7 +2,8 @@ import {Str} from 'expensify-common';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInput, TextInputFocusEventData, ViewStyle} from 'react-native';
-import {ActivityIndicator, Animated, StyleSheet, View} from 'react-native';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {useSharedValue, withSpring} from 'react-native-reanimated';
 import Checkbox from '@components/Checkbox';
 import FormHelpMessage from '@components/FormHelpMessage';
 import Icon from '@components/Icon';
@@ -23,7 +24,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
-import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {BaseTextInputProps, BaseTextInputRef} from './types';
@@ -94,8 +94,8 @@ function BaseTextInput(
     const [textInputHeight, setTextInputHeight] = useState(0);
     const [height, setHeight] = useState<number>(variables.componentSizeLarge);
     const [width, setWidth] = useState<number | null>(null);
-    const labelScale = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE)).current;
-    const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current;
+    const labelScale = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE);
+    const labelTranslateY = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y);
     const input = useRef<TextInput | null>(null);
     const isLabelActive = useRef(initialActiveLabel);
 
@@ -117,16 +117,8 @@ function BaseTextInput(
 
     const animateLabel = useCallback(
         (translateY: number, scale: number) => {
-            Animated.parallel([
-                Animated.spring(labelTranslateY, {
-                    toValue: translateY,
-                    useNativeDriver,
-                }),
-                Animated.spring(labelScale, {
-                    toValue: scale,
-                    useNativeDriver,
-                }),
-            ]).start();
+            labelScale.value = withSpring(scale, {overshootClamping: false});
+            labelTranslateY.value = withSpring(translateY, {overshootClamping: false});
         },
         [labelScale, labelTranslateY],
     );
diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
index e36ae60255fc1..582692ce0bc29 100644
--- a/src/components/TextInput/BaseTextInput/index.tsx
+++ b/src/components/TextInput/BaseTextInput/index.tsx
@@ -2,7 +2,8 @@ import {Str} from 'expensify-common';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, ViewStyle} from 'react-native';
-import {ActivityIndicator, Animated, StyleSheet, View} from 'react-native';
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+import {useSharedValue, withSpring} from 'react-native-reanimated';
 import Checkbox from '@components/Checkbox';
 import FormHelpMessage from '@components/FormHelpMessage';
 import Icon from '@components/Icon';
@@ -24,7 +25,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
-import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {BaseTextInputProps, BaseTextInputRef} from './types';
@@ -99,8 +99,9 @@ function BaseTextInput(
     const [height, setHeight] = useState<number>(variables.componentSizeLarge);
     const [width, setWidth] = useState<number | null>(null);
 
-    const labelScale = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE)).current;
-    const labelTranslateY = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y)).current;
+    const labelScale = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE);
+    const labelTranslateY = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y);
+
     const input = useRef<HTMLInputElement | null>(null);
     const isLabelActive = useRef(initialActiveLabel);
 
@@ -122,16 +123,8 @@ function BaseTextInput(
 
     const animateLabel = useCallback(
         (translateY: number, scale: number) => {
-            Animated.parallel([
-                Animated.spring(labelTranslateY, {
-                    toValue: translateY,
-                    useNativeDriver,
-                }),
-                Animated.spring(labelScale, {
-                    toValue: scale,
-                    useNativeDriver,
-                }),
-            ]).start();
+            labelScale.value = withSpring(scale, {overshootClamping: false});
+            labelTranslateY.value = withSpring(translateY, {overshootClamping: false});
         },
         [labelScale, labelTranslateY],
     );
diff --git a/src/components/TextInput/TextInputLabel/index.native.tsx b/src/components/TextInput/TextInputLabel/index.native.tsx
index 8143875c2e891..f332ba6ffa4d1 100644
--- a/src/components/TextInput/TextInputLabel/index.native.tsx
+++ b/src/components/TextInput/TextInputLabel/index.native.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
-import {Animated} from 'react-native';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type TextInputLabelProps from './types';
 
 function TextInputLabel({label, labelScale, labelTranslateY}: TextInputLabelProps) {
     const styles = useThemeStyles();
 
+    const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale));
+
     return (
         <Animated.Text
             allowFontScaling={false}
-            style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale)]}
+            style={[styles.textInputLabel, animatedStyle]}
         >
             {label}
         </Animated.Text>
diff --git a/src/components/TextInput/TextInputLabel/index.tsx b/src/components/TextInput/TextInputLabel/index.tsx
index 6dc6201da7826..110193bbc653e 100644
--- a/src/components/TextInput/TextInputLabel/index.tsx
+++ b/src/components/TextInput/TextInputLabel/index.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {Text} from 'react-native';
-import {Animated} from 'react-native';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import textRef from '@src/types/utils/textRef';
@@ -19,12 +19,14 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}:
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
+    const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale));
+
     return (
         <Animated.Text
             // eslint-disable-next-line react-compiler/react-compiler
             ref={textRef(labelRef)}
             role={CONST.ROLE.PRESENTATION}
-            style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale), styles.pointerEventsNone]}
+            style={[styles.textInputLabel, animatedStyle, styles.pointerEventsNone]}
         >
             {label}
         </Animated.Text>
diff --git a/src/components/TextInput/TextInputLabel/types.ts b/src/components/TextInput/TextInputLabel/types.ts
index 6cf7b9243955c..2ff2afff998ca 100644
--- a/src/components/TextInput/TextInputLabel/types.ts
+++ b/src/components/TextInput/TextInputLabel/types.ts
@@ -1,14 +1,14 @@
-import type {Animated} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
 
 type TextInputLabelProps = {
     /** Label */
     label: string;
 
     /** Label vertical translate */
-    labelTranslateY: Animated.Value;
+    labelTranslateY: SharedValue<number>;
 
     /** Label scale */
-    labelScale: Animated.Value;
+    labelScale: SharedValue<number>;
 
     /** For attribute for label */
     for?: string;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 28301b9de01ba..fa87d70e5a56a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1214,9 +1214,9 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.componentBG,
         },
 
-        textInputLabelTransformation: (translateY: AnimatableNumericValue, scale: AnimatableNumericValue) =>
+        textInputLabelTransformation: (translateY: SharedValue<number>, scale: SharedValue<number>) =>
             ({
-                transform: [{translateY}, {scale}],
+                transform: [{translateY: translateY.value}, {scale: scale.value}],
             } satisfies TextStyle),
 
         baseTextInput: {

From d092d64abd58b51bb947307e8aa6898bf60b1b74 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Fri, 29 Nov 2024 07:40:51 +0100
Subject: [PATCH 4/7] add worklet signatures to functions

---
 src/components/GrowlNotification/index.tsx |  2 ++
 src/styles/index.ts                        | 21 ++++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx
index 14cad991f096b..eaa9c39d1fbd9 100644
--- a/src/components/GrowlNotification/index.tsx
+++ b/src/components/GrowlNotification/index.tsx
@@ -76,6 +76,8 @@ function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
      */
     const fling = useCallback(
         (val = INACTIVE_POSITION_Y) => {
+            'worklet';
+
             translateY.value = withSpring(val, {
                 overshootClamping: false,
             });
diff --git a/src/styles/index.ts b/src/styles/index.ts
index fa87d70e5a56a..dff70a821a2d2 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2,7 +2,7 @@
 import type {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
 import type {LineLayer} from 'react-map-gl';
-import type {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import type {Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {Platform, StyleSheet} from 'react-native';
 import type {CustomAnimation} from 'react-native-animatable';
 import type {PickerStyle} from 'react-native-picker-select';
@@ -1214,10 +1214,13 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.componentBG,
         },
 
-        textInputLabelTransformation: (translateY: SharedValue<number>, scale: SharedValue<number>) =>
-            ({
+        textInputLabelTransformation: (translateY: SharedValue<number>, scale: SharedValue<number>) => {
+            'worklet';
+
+            return {
                 transform: [{translateY: translateY.value}, {scale: scale.value}],
-            } satisfies TextStyle),
+            } satisfies TextStyle;
+        },
 
         baseTextInput: {
             ...FontUtils.fontFamily.platform.EXP_NEUE,
@@ -3378,9 +3381,13 @@ const styles = (theme: ThemeColors) =>
             ...positioning.pFixed,
         },
 
-        growlNotificationTranslateY: (translateY: SharedValue<number>) => ({
-            transform: [{translateY: translateY.value}],
-        }),
+        growlNotificationTranslateY: (translateY: SharedValue<number>) => {
+            'worklet';
+
+            return {
+                transform: [{translateY: translateY.value}],
+            };
+        },
 
         makeSlideInTranslation: (translationType: Translation, fromValue: number) =>
             ({

From 7e532abc91e5fa53d2d69a809525aa6f21543256 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Fri, 29 Nov 2024 14:09:42 +0100
Subject: [PATCH 5/7] migrate to new reanimated api from .value to .set()
 .get()

---
 src/components/GrowlNotification/index.tsx              | 8 +++++---
 src/components/TextInput/BaseTextInput/index.native.tsx | 4 ++--
 src/components/TextInput/BaseTextInput/index.tsx        | 4 ++--
 src/styles/index.ts                                     | 6 +++---
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/GrowlNotification/index.tsx b/src/components/GrowlNotification/index.tsx
index eaa9c39d1fbd9..a4a4a2b06b98e 100644
--- a/src/components/GrowlNotification/index.tsx
+++ b/src/components/GrowlNotification/index.tsx
@@ -78,9 +78,11 @@ function GrowlNotification(_: unknown, ref: ForwardedRef<GrowlRef>) {
         (val = INACTIVE_POSITION_Y) => {
             'worklet';
 
-            translateY.value = withSpring(val, {
-                overshootClamping: false,
-            });
+            translateY.set(
+                withSpring(val, {
+                    overshootClamping: false,
+                }),
+            );
         },
         [translateY],
     );
diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx
index fb9379ca87bbe..cdfcb22f1f2c0 100644
--- a/src/components/TextInput/BaseTextInput/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/index.native.tsx
@@ -117,8 +117,8 @@ function BaseTextInput(
 
     const animateLabel = useCallback(
         (translateY: number, scale: number) => {
-            labelScale.value = withSpring(scale, {overshootClamping: false});
-            labelTranslateY.value = withSpring(translateY, {overshootClamping: false});
+            labelScale.set(withSpring(scale, {overshootClamping: false}));
+            labelTranslateY.set(withSpring(translateY, {overshootClamping: false}));
         },
         [labelScale, labelTranslateY],
     );
diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
index 582692ce0bc29..678cc0f1c8058 100644
--- a/src/components/TextInput/BaseTextInput/index.tsx
+++ b/src/components/TextInput/BaseTextInput/index.tsx
@@ -123,8 +123,8 @@ function BaseTextInput(
 
     const animateLabel = useCallback(
         (translateY: number, scale: number) => {
-            labelScale.value = withSpring(scale, {overshootClamping: false});
-            labelTranslateY.value = withSpring(translateY, {overshootClamping: false});
+            labelScale.set(withSpring(scale, {overshootClamping: false}));
+            labelTranslateY.set(withSpring(translateY, {overshootClamping: false}));
         },
         [labelScale, labelTranslateY],
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index dff70a821a2d2..1ef991d716a15 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2,7 +2,7 @@
 import type {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
 import type {LineLayer} from 'react-map-gl';
-import type {Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import type {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {Platform, StyleSheet} from 'react-native';
 import type {CustomAnimation} from 'react-native-animatable';
 import type {PickerStyle} from 'react-native-picker-select';
@@ -1218,7 +1218,7 @@ const styles = (theme: ThemeColors) =>
             'worklet';
 
             return {
-                transform: [{translateY: translateY.value}, {scale: scale.value}],
+                transform: [{translateY: translateY.get()}, {scale: scale.get()}],
             } satisfies TextStyle;
         },
 
@@ -3385,7 +3385,7 @@ const styles = (theme: ThemeColors) =>
             'worklet';
 
             return {
-                transform: [{translateY: translateY.value}],
+                transform: [{translateY: translateY.get()}],
             };
         },
 

From 8a228847698f9e73bda34cb4c57ace0b3389fbe4 Mon Sep 17 00:00:00 2001
From: Jakub Nowakowski <61011609+sumo-slonik@users.noreply.github.com>
Date: Mon, 2 Dec 2024 11:18:40 +0100
Subject: [PATCH 6/7] Update src/components/AttachmentModal.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

review from Błazej

Co-authored-by: Błażej Kustra <46095609+blazejkustra@users.noreply.github.com>
---
 src/components/AttachmentModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index b2f7088cd3ad5..20d2e2a7c59aa 100644
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -588,7 +588,7 @@ function AttachmentModal({
                         <SafeAreaConsumer>
                             {({safeAreaPaddingBottomStyle}) => (
                                 <Animated.View
-                                    style={[safeAreaPaddingBottomStyle]}
+                                    style={safeAreaPaddingBottomStyle}
                                     entering={FadeIn}
                                 >
                                     <Button

From 59e3e757a296228a3936aaab3acbdbff5e41aa0d Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Mon, 2 Dec 2024 11:31:55 +0100
Subject: [PATCH 7/7] remove unnecessary import after merge

---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index a79e84007c0fb..8b1e69c6b5555 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2,7 +2,7 @@
 import type {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
 import type {LineLayer} from 'react-map-gl';
-import type {AnimatableNumericValue, Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
+import type {Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {Platform, StyleSheet} from 'react-native';
 import type {CustomAnimation} from 'react-native-animatable';
 import type {PickerStyle} from 'react-native-picker-select';