fix input label is not aligned to the left when activated

Expensify · Sep 26, 2024 · 9144c6e · 9144c6e
1 parent da37289
commit 9144c6e
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 36 deletions.
diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx
@@ -292,7 +292,6 @@ function BaseTextInput(
                 to prevent text overlapping with label when scrolling */}
                                 {isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone]} />}
                                 <TextInputLabel
-                                    isLabelActive={isLabelActive.current}
                                     label={label}
                                     labelTranslateY={labelTranslateY}
                                     labelScale={labelScale}

diff --git a/src/components/TextInput/TextInputLabel/index.native.tsx b/src/components/TextInput/TextInputLabel/index.native.tsx
@@ -1,37 +1,15 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {Animated} from 'react-native';
-import * as styleConst from '@components/TextInput/styleConst';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type TextInputLabelProps from './types';
 
-function TextInputLabel({isLabelActive, label, labelScale, labelTranslateY}: TextInputLabelProps) {
+function TextInputLabel({label, labelScale, labelTranslateY}: TextInputLabelProps) {
     const styles = useThemeStyles();
-    const [width, setWidth] = useState(0);
 
     return (
         <Animated.Text
             allowFontScaling={false}
-            onLayout={({nativeEvent}) => {
-                setWidth(nativeEvent.layout.width);
-            }}
-            style={[
-                styles.textInputLabel,
-                styles.textInputLabelTransformation(
-                    labelTranslateY,
-                    labelScale.interpolate({
-                        inputRange: [styleConst.ACTIVE_LABEL_SCALE, styleConst.INACTIVE_LABEL_SCALE],
-                        outputRange: [-(width - width * styleConst.ACTIVE_LABEL_SCALE) / 2, 0],
-                    }),
-                    labelScale,
-                ),
-                // If the label is active but the width is not ready yet, the above translateX value will be 0,
-                // making the label sits at the top center instead of the top left of the input. To solve it
-                // move the label by a percentage value with left style as translateX doesn't support percentage value.
-                width === 0 &&
-                    isLabelActive && {
-                        left: `${-((1 - styleConst.ACTIVE_LABEL_SCALE) * 100) / 2}%`,
-                    },
-            ]}
+            style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale)]}
         >
             {label}
         </Animated.Text>

diff --git a/src/components/TextInput/TextInputLabel/index.tsx b/src/components/TextInput/TextInputLabel/index.tsx
@@ -23,7 +23,7 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}:
         <Animated.Text
             ref={textRef(labelRef)}
             role={CONST.ROLE.PRESENTATION}
-            style={[styles.textInputLabel, styles.textInputLabelDesktop, styles.textInputLabelTransformation(labelTranslateY, 0, labelScale), styles.pointerEventsNone]}
+            style={[styles.textInputLabel, styles.textInputLabelTransformation(labelTranslateY, labelScale), styles.pointerEventsNone]}
         >
             {label}
         </Animated.Text>

diff --git a/src/components/TextInput/TextInputLabel/types.ts b/src/components/TextInput/TextInputLabel/types.ts
@@ -10,9 +10,6 @@ type TextInputLabelProps = {
     /** Label scale */
     labelScale: Animated.Value;
 
-    /** Whether the label is currently active or not */
-    isLabelActive: boolean;
-
     /** For attribute for label */
     for?: string;
 };

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1191,6 +1191,7 @@ const styles = (theme: ThemeColors) =>
             ...FontUtils.fontFamily.platform.EXP_NEUE,
             width: '100%',
             zIndex: 1,
+            transformOrigin: 'left center',
         },
 
         textInputLabelBackground: {
@@ -1201,13 +1202,9 @@ const styles = (theme: ThemeColors) =>
             backgroundColor: theme.componentBG,
         },
 
-        textInputLabelDesktop: {
-            transformOrigin: 'left center',
-        },
-
-        textInputLabelTransformation: (translateY: AnimatableNumericValue, translateX: AnimatableNumericValue, scale: AnimatableNumericValue) =>
+        textInputLabelTransformation: (translateY: AnimatableNumericValue, scale: AnimatableNumericValue) =>
             ({
-                transform: [{translateY}, {translateX}, {scale}],
+                transform: [{translateY}, {scale}],
             } satisfies TextStyle),
 
         baseTextInput: {