From 9144c6e79ba31def8e58e90d418b499f5142e539 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Sep 2024 21:27:27 +0800
Subject: [PATCH 1/2] fix input label is not aligned to the left when activated

---
 .../TextInput/BaseTextInput/index.native.tsx  |  1 -
 .../TextInput/TextInputLabel/index.native.tsx | 28 ++-----------------
 .../TextInput/TextInputLabel/index.tsx        |  2 +-
 .../TextInput/TextInputLabel/types.ts         |  3 --
 src/styles/index.ts                           |  9 ++----
 5 files changed, 7 insertions(+), 36 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput/index.native.tsx b/src/components/TextInput/BaseTextInput/index.native.tsx
index a03e9dbb9aa2..40c2d67854f5 100644
--- 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
index 569d590dbb8d..8143875c2e89 100644
--- 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
index 3136a43e8669..edf9ac029ac0 100644
--- 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
index e8ec50ffb0c5..6cf7b9243955 100644
--- 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
index 09efdece292d..e9188b7cabda 100644
--- 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: {

From 7fb059cd16c9a8efdebc1f016430897fe437a02f Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Sep 2024 21:46:33 +0800
Subject: [PATCH 2/2] remove unused prop

---
 src/components/TextInput/BaseTextInput/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TextInput/BaseTextInput/index.tsx b/src/components/TextInput/BaseTextInput/index.tsx
index c5471fa11bce..cc9cd08b0009 100644
--- a/src/components/TextInput/BaseTextInput/index.tsx
+++ b/src/components/TextInput/BaseTextInput/index.tsx
@@ -317,7 +317,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}