Simplify single line TextInput styling to allow for different heights

Author: Kicu

src/components/TextInput/BaseTextInput/index.native.tsx

@@ -266,6 +266,9 @@ function BaseTextInput(
 
     const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft);
     const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
+
+    // Height fix is needed only for Text single line inputs
+    const shouldApplyHeight = !isMultiline && !isMarkdownEnabled;
     return (
         <>
             <View style={[containerStyles]}>
@@ -349,14 +352,17 @@ function BaseTextInput(
                                 underlineColorAndroid="transparent"
                                 style={[
                                     styles.flex1,
+                                    styles.flexRow,
                                     styles.w100,
                                     inputStyle,
                                     (!hasLabel || isMultiline) && styles.pv0,
                                     inputPaddingLeft,
                                     inputPaddingRight,
                                     inputProps.secureTextEntry && styles.secureInput,
 
-                                    !isMultiline && {height, lineHeight: undefined},
+                                    // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
+                                    // once it exceeds the input space on iOS (See https://github.com/Expensify/App/issues/13802)
+                                    shouldApplyHeight && {height, lineHeight: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
                                     ...(autoGrowHeight && !isAutoGrowHeightMarkdown

src/components/TextInput/BaseTextInput/index.tsx

@@ -1,6 +1,6 @@
 import {Str} from 'expensify-common';
 import type {ForwardedRef, MutableRefObject} from 'react';
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} 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, StyleSheet, View} from 'react-native';
 import {useSharedValue, withSpring} from 'react-native-reanimated';
@@ -98,7 +98,6 @@ function BaseTextInput(
     const [passwordHidden, setPasswordHidden] = useState(inputProps.secureTextEntry);
     const [textInputWidth, setTextInputWidth] = useState(0);
     const [textInputHeight, setTextInputHeight] = useState(0);
-    const [height, setHeight] = useState<number>(variables.componentSizeLarge);
     const [width, setWidth] = useState<number | null>(null);
 
     const labelScale = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE);
@@ -187,7 +186,6 @@ function BaseTextInput(
             const layout = event.nativeEvent.layout;
 
             setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth));
-            setHeight((prevHeight: number) => (!multiline ? layout.height : prevHeight));
         },
         [autoGrowHeight, multiline],
     );
@@ -263,25 +261,6 @@ function BaseTextInput(
     ]);
     const isMultiline = multiline || autoGrowHeight;
 
-    /**
-     * To prevent text jumping caused by virtual DOM calculations on Safari and mobile Chrome,
-     * make sure to include the `lineHeight`.
-     * Reference: https://github.com/Expensify/App/issues/26735
-     * For other platforms, explicitly remove `lineHeight` from single-line inputs
-     * to prevent long text from disappearing once it exceeds the input space.
-     * See https://github.com/Expensify/App/issues/13802
-     */
-    const lineHeight = useMemo(() => {
-        if (Browser.isSafari() || Browser.isMobileChrome()) {
-            const lineHeightValue = StyleSheet.flatten(inputStyle).lineHeight;
-            if (lineHeightValue !== undefined) {
-                return lineHeightValue;
-            }
-        }
-
-        return undefined;
-    }, [inputStyle]);
-
     const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(StyleUtils.getCharacterPadding(prefixCharacter) + styles.pl1.paddingLeft);
     const inputPaddingRight = !!suffixCharacter && StyleUtils.getPaddingRight(StyleUtils.getCharacterPadding(suffixCharacter) + styles.pr1.paddingRight);
 
@@ -330,7 +309,6 @@ function BaseTextInput(
                                 />
                             </>
                         ) : null}
-
                         <View style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}>
                             {!!iconLeft && (
                                 <View style={[styles.textInputLeftIconContainer, !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone]}>
@@ -380,10 +358,6 @@ function BaseTextInput(
                                     inputPaddingRight,
                                     inputProps.secureTextEntry && styles.secureInput,
 
-                                    // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
-                                    // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
-                                    !isMultiline && {height, lineHeight},
-
                                     // Explicitly change boxSizing attribute for mobile chrome in order to apply line-height
                                     // for the issue mentioned here https://github.com/Expensify/App/issues/26735
                                     // Set overflow property to enable the parent flexbox to shrink its size

src/styles/index.ts

@@ -1247,8 +1247,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         textInputAndIconContainer: {
-            flex: 1,
-            height: '100%',
             zIndex: -1,
             flexDirection: 'row',
         },