migrate TextInput

Expensify · Nov 28, 2024 · 3744f48 · 3744f48
1 parent 4385dcf
commit 3744f48
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 22 deletions.
diff --git 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';
@@ -99,8 +100,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 +124,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
@@ -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
@@ -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
@@ -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
@@ -1219,9 +1219,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: {