Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
45cbe1c
fix: Update visual style of our text inputs for better consistency.
Krishna2323 Apr 9, 2025
976ba0b
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 11, 2025
68a75d4
udpate: add full border to inputs.
Krishna2323 Apr 11, 2025
4d7e604
fix ESLint.
Krishna2323 Apr 11, 2025
59dca52
fix: amount input.
Krishna2323 Apr 12, 2025
22db97c
fix height of regular inputs.
Krishna2323 Apr 15, 2025
f907ad0
fix merge conflicts.
Krishna2323 Apr 15, 2025
fe27b1c
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 15, 2025
115a6cd
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 17, 2025
4453419
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 22, 2025
fb56d1b
fix: input height, label position, and spacing.
Krishna2323 Apr 22, 2025
2bf49b1
fix: amount input padding.
Krishna2323 Apr 22, 2025
05b256a
fix ESLint.
Krishna2323 Apr 22, 2025
7eeb88e
minor style adjustments.
Krishna2323 Apr 22, 2025
0a3430f
fix magic code input alignment.
Krishna2323 Apr 22, 2025
892f8eb
fix search page header input bg.
Krishna2323 Apr 22, 2025
9f5e7fe
fix label animation easing.
Krishna2323 Apr 22, 2025
9614c3f
fix: report page input border color.
Krishna2323 Apr 22, 2025
e3858c2
fix ESLint.
Krishna2323 Apr 22, 2025
286ee40
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 Apr 24, 2025
3f6dae1
fix: clear button alignment and split amount input padding.
Krishna2323 Apr 24, 2025
888db4c
fix: padding bottom of multiline inputs.
Krishna2323 Apr 24, 2025
b4cfbe0
fix: split input alignment.
Krishna2323 Apr 24, 2025
5efad0d
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 24, 2025
d88f979
remove extra top padding from search page input.
Krishna2323 Apr 25, 2025
f301f71
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 28, 2025
cd50229
align text input icon to center.
Krishna2323 Apr 28, 2025
c6c9806
fix magic code input height and padding top.
Krishna2323 Apr 28, 2025
3271bf3
fix input height.
Krishna2323 Apr 28, 2025
acadc85
minor fix.
Krishna2323 Apr 28, 2025
f2b0262
fix prefix/suffix alignment and right icon hit area.
Krishna2323 Apr 29, 2025
dda2a54
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 Apr 30, 2025
7683c27
fix disabled input styles.
Krishna2323 Apr 30, 2025
b980c1e
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 May 3, 2025
2b2516f
update styles.
Krishna2323 May 6, 2025
39e4c8f
remove padding top when input doesn't have label.
Krishna2323 May 7, 2025
e2fb5da
fix: input label animation on native and line height.
Krishna2323 May 8, 2025
d61d411
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 8, 2025
65af8da
fix: split amount input.
Krishna2323 May 8, 2025
75b0a73
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 11, 2025
7d658a6
remove duplicate styles.
Krishna2323 May 11, 2025
29e4977
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 May 13, 2025
f6aedc3
fix split input padding.
Krishna2323 May 13, 2025
385fc15
minor update.
Krishna2323 May 13, 2025
857ca59
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 15, 2025
ddf7f93
fix multipline input padding bottom.
Krishna2323 May 15, 2025
21281f7
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 May 19, 2025
7c4363b
minor updates.
Krishna2323 May 19, 2025
3c29a8f
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 21, 2025
d1f10d1
fix input label position in for native devices.
Krishna2323 May 21, 2025
16370e4
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 May 22, 2025
578cc52
fix merge conflicts.
Krishna2323 May 22, 2025
8b3f3e0
fix split input alignment.
Krishna2323 May 23, 2025
36ef7d3
minor fix.
Krishna2323 May 23, 2025
ef38871
remove isNativePlatform check.
Krishna2323 May 23, 2025
79e8286
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 23, 2025
01c7ff2
Merge branch 'Expensify:main' into krishna2323/issue/59518
Krishna2323 May 26, 2025
13e899b
fix multiline input padding.
Krishna2323 May 26, 2025
cf5f616
Merge branch 'main' into krishna2323/issue/59518
Krishna2323 May 26, 2025
4e04574
fix: TextInputClearButton margin top.
Krishna2323 May 26, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/AmountTextInput.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import type {ForwardedRef} from 'react';
import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import type {TextSelection} from './Composer/types';
import TextInput from './TextInput';
Expand Down Expand Up @@ -58,14 +59,15 @@ function AmountTextInput(
}: AmountTextInputProps,
ref: ForwardedRef<BaseTextInputRef>,
) {
const styles = useThemeStyles();
return (
<TextInput
autoGrow
hideFocusedState={hideFocusedState}
shouldInterceptSwipe
disableKeyboard={disableKeyboard}
inputStyle={style}
textInputContainerStyles={containerStyle}
textInputContainerStyles={[styles.p0, containerStyle]}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Krishna2323 Can you briefly explain what this is for?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The amount of text input does not require any padding, so we need to override it.

image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is causing this issue #62947

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @Krishna2323 let's try to work quickly through some fixes, otherwise we'll need to revert.

onChangeText={onChangeAmount}
ref={ref}
value={formattedAmount}
Expand All @@ -85,6 +87,7 @@ function AmountTextInput(
autoCorrect={false}
spellCheck={false}
disableKeyboardShortcuts
shouldUseFullInputHeight
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}
/>
Expand Down
1 change: 1 addition & 0 deletions src/components/MagicCodeInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -437,6 +437,7 @@ function MagicCodeInput(
StyleUtils.getHeightOfMagicCodeInput(),
hasError || errorText ? styles.borderColorDanger : {},
focusedIndex === index ? styles.borderColorFocus : {},
styles.pt0,
]}
>
<Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(value, maxLength).at(index) ?? ''}</Text>
Expand Down
9 changes: 6 additions & 3 deletions src/components/MoneyRequestConfirmationList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -649,9 +649,9 @@ function MoneyRequestConfirmationList({
hideFocusedState={false}
hideCurrencySymbol
formatAmountOnBlur
prefixContainerStyle={[styles.pv0]}
inputStyle={[styles.optionRowAmountInput]}
containerStyle={[styles.textInputContainer]}
prefixContainerStyle={[styles.pv0, styles.h100]}
inputStyle={[styles.optionRowAmountInput, styles.lineHeightUndefined]}
containerStyle={[styles.textInputContainer, styles.pl2, styles.pr1]}
touchableInputWrapperStyle={[styles.ml3]}
onFormatAmount={convertToDisplayStringWithoutCurrency}
onAmountChange={(value: string) => onSplitShareChange(participantOption.accountID ?? CONST.DEFAULT_NUMBER_ID, Number(value))}
Expand All @@ -670,8 +670,11 @@ function MoneyRequestConfirmationList({
selectedParticipants,
styles.flexWrap,
styles.pl2,
styles.pr1,
styles.h100,
styles.textLabel,
styles.pv0,
styles.lineHeightUndefined,
styles.optionRowAmountInput,
styles.textInputContainer,
styles.ml3,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Search/SearchAutocompleteInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ function SearchAutocompleteInput(
onSubmitEditing={onSubmit}
shouldUseDisabledStyles={false}
textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]}
inputStyle={[inputWidth, {lineHeight: undefined}]}
inputStyle={[inputWidth]}
placeholderTextColor={theme.textSupporting}
onFocus={() => {
onFocus?.();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
autoFocus={false}
onFocus={showAutocompleteList}
onBlur={hideAutocompleteList}
wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.border}}
wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
rightComponent={inputRightComponent}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ 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, StyleSheet, View} from 'react-native';
import {useSharedValue, withSpring} from 'react-native-reanimated';
import {Easing, useSharedValue, withTiming} from 'react-native-reanimated';
import Checkbox from '@components/Checkbox';
import FormHelpMessage from '@components/FormHelpMessage';
import Icon from '@components/Icon';
Expand Down Expand Up @@ -46,6 +46,7 @@ function BaseTextInput(
touchableInputWrapperStyle,
containerStyles,
inputStyle,
shouldUseFullInputHeight = false,
forceActiveLabel = false,
disableKeyboard = false,
autoGrow = false,
Expand Down Expand Up @@ -115,8 +116,18 @@ function BaseTextInput(

const animateLabel = useCallback(
(translateY: number, scale: number) => {
labelScale.set(withSpring(scale, {overshootClamping: false}));
labelTranslateY.set(withSpring(translateY, {overshootClamping: false}));
labelScale.set(
withTiming(scale, {
duration: 200,
easing: Easing.inOut(Easing.ease),
}),
);
labelTranslateY.set(
withTiming(translateY, {
duration: 200,
easing: Easing.inOut(Easing.ease),
}),
);
},
[labelScale, labelTranslateY],
);
Expand Down Expand Up @@ -177,9 +188,11 @@ function BaseTextInput(
const heightToFitEmojis = 1;

setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth));
setHeight((prevHeight: number) => (!multiline ? layout.height + heightToFitEmojis : prevHeight));
setHeight((prevHeight: number) =>
!multiline ? layout.height + heightToFitEmojis - (styles.textInputContainer.padding + styles.textInputContainer.borderWidth * 2) : prevHeight,
);
},
[autoGrowHeight, multiline],
[autoGrowHeight, multiline, styles.textInputContainer],
);

// The ref is needed when the component is uncontrolled and we don't have a value prop
Expand Down Expand Up @@ -239,6 +252,7 @@ function BaseTextInput(
setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden);
}, []);

const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge;
const hasLabel = !!label?.length;
const isReadOnly = inputProps.readOnly ?? inputProps.disabled;
// Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string
Expand All @@ -248,19 +262,22 @@ function BaseTextInput(
const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
styles.textInputContainer,
textInputContainerStyles,
!!contentWidth && StyleUtils.getWidthStyle(textInputWidth),
!!contentWidth && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2),
autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide),
!hideFocusedState && isFocused && styles.borderColorFocus,
(!!hasError || !!errorText) && styles.borderColorDanger,
autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},
isAutoGrowHeightMarkdown && styles.pb2,
inputProps.disabled && styles.textInputDisabledContainer,
!hasLabel && styles.pt0,
shouldAddPaddingBottom && styles.pb1,
]);

const inputPaddingLeft = !!prefixCharacter && StyleUtils.getPaddingLeft(prefixCharacterPadding + 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;
const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled;

return (
<>
Expand All @@ -276,7 +293,11 @@ function BaseTextInput(
style={[
autoGrowHeight &&
!isAutoGrowHeightMarkdown &&
styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),
styles.autoGrowHeightInputContainer(
textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0),
variables.componentSizeLarge,
typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
),
isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge},
!isMultiline && styles.componentHeightLarge,
touchableInputWrapperStyle,
Expand All @@ -294,7 +315,7 @@ function BaseTextInput(
<>
{/* Adding this background to the label only for multiline text input,
to prevent text overlapping with label when scrolling */}
{isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone]} />}
{isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone, inputProps.disabled && styles.textInputDisabledContainer]} />}
<TextInputLabel
label={label}
labelTranslateY={labelTranslateY}
Expand Down Expand Up @@ -410,7 +431,7 @@ function BaseTextInput(
<ActivityIndicator
size="small"
color={theme.iconSuccessFill}
style={[styles.mt4, styles.ml1, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
style={[styles.mt2, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
/>
)}
{!!inputProps.secureTextEntry && (
Expand Down
40 changes: 33 additions & 7 deletions src/components/TextInput/BaseTextInput/implementation/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type {ForwardedRef, MutableRefObject} 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';
import {Easing, useSharedValue, withTiming} from 'react-native-reanimated';
import Checkbox from '@components/Checkbox';
import FormHelpMessage from '@components/FormHelpMessage';
import Icon from '@components/Icon';
Expand Down Expand Up @@ -130,8 +130,18 @@ function BaseTextInput(

const animateLabel = useCallback(
(translateY: number, scale: number) => {
labelScale.set(withSpring(scale, {overshootClamping: false}));
labelTranslateY.set(withSpring(translateY, {overshootClamping: false}));
labelScale.set(
withTiming(scale, {
duration: 200,
easing: Easing.inOut(Easing.ease),
}),
);
labelTranslateY.set(
withTiming(translateY, {
duration: 200,
easing: Easing.inOut(Easing.ease),
}),
);
},
[labelScale, labelTranslateY],
);
Expand Down Expand Up @@ -247,6 +257,7 @@ function BaseTextInput(
setPasswordHidden((prevPasswordHidden: boolean | undefined) => !prevPasswordHidden);
}, []);

const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge;
const hasLabel = !!label?.length;
const isReadOnly = inputProps.readOnly ?? inputProps.disabled;
// Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string
Expand All @@ -256,11 +267,14 @@ function BaseTextInput(
const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
styles.textInputContainer,
textInputContainerStyles,
(autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth),
(autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2),
!hideFocusedState && isFocused && styles.borderColorFocus,
(!!hasError || !!errorText) && styles.borderColorDanger,
autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},
isAutoGrowHeightMarkdown && styles.pb2,
inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer,
!hasLabel && styles.pt0,

This comment was marked as resolved.

@Krishna2323 Krishna2323 May 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, there are few places where we use both. e.g., room name input

shouldAddPaddingBottom && styles.pb1,
]);
const isMultiline = multiline || autoGrowHeight;

Expand Down Expand Up @@ -288,7 +302,11 @@ function BaseTextInput(
style={[
autoGrowHeight &&
!isAutoGrowHeightMarkdown &&
styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),
styles.autoGrowHeightInputContainer(
textInputHeight + (shouldAddPaddingBottom ? styles.textInputContainer.padding : 0),
variables.componentSizeLarge,
typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
),
isAutoGrowHeightMarkdown && {minHeight: variables.componentSizeLarge},
!isMultiline && styles.componentHeightLarge,
touchableInputWrapperStyle,
Expand All @@ -306,7 +324,15 @@ function BaseTextInput(
<>
{/* Adding this background to the label only for multiline text input,
to prevent text overlapping with label when scrolling */}
{isMultiline && <View style={[styles.textInputLabelBackground, styles.pointerEventsNone]} />}
{isMultiline && (
<View
style={[
styles.textInputLabelBackground,
styles.pointerEventsNone,
inputProps.disabled && shouldUseDisabledStyles && styles.textInputDisabledContainer,
]}
/>
)}
<TextInputLabel
label={label}
labelTranslateY={labelTranslateY}
Expand Down Expand Up @@ -434,7 +460,7 @@ function BaseTextInput(
<ActivityIndicator
size="small"
color={theme.iconSuccessFill}
style={[styles.mt4, styles.ml1, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
style={[styles.mt2, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
/>
)}
{!!inputProps.secureTextEntry && (
Expand Down
3 changes: 3 additions & 0 deletions src/components/TextInput/BaseTextInput/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,9 @@ type CustomBaseTextInputProps = {

/** Callback when the input is cleared using the clear button */
onClearInput?: () => void;

/** Whether the input should be enforced to take full height of conatiner. Default is `false` */
shouldUseFullInputHeight?: boolean;
};

type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/TextInputClearButton/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function TextInputClearButton({onPressButton}: TextInputClearButtonProps) {
return (
<Tooltip text={translate('common.clear')}>
<PressableWithoutFeedback
style={[styles.mt4, styles.ml1]}
style={[styles.mt2, styles.ml1]}
accessibilityRole={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.clear')}
onMouseDown={(e) => {
Expand Down
15 changes: 9 additions & 6 deletions src/components/TextInput/TextInputLabel/index.native.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@ function TextInputLabel({label, labelScale, labelTranslateY}: TextInputLabelProp
const styles = useThemeStyles();

const animatedStyle = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale));
const animatedStyleForText = useAnimatedStyle(() => styles.textInputLabelTransformation(labelTranslateY, labelScale, true));

return (
<Animated.Text
allowFontScaling={false}
style={[styles.textInputLabel, animatedStyle]}
>
{label}
</Animated.Text>
<Animated.View style={[styles.textInputLabelContainer, animatedStyle]}>
<Animated.Text
allowFontScaling={false}
style={[styles.textInputLabel, animatedStyleForText]}
>
{label}
</Animated.Text>
</Animated.View>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/TextInputLabel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function TextInputLabel({for: inputId = '', label, labelTranslateY, labelScale}:
// eslint-disable-next-line react-compiler/react-compiler
ref={textRef(labelRef)}
role={CONST.ROLE.PRESENTATION}
style={[styles.textInputLabel, animatedStyle, styles.pointerEventsNone]}
style={[styles.textInputLabelContainer, styles.textInputLabel, animatedStyle, styles.pointerEventsNone]}
>
{label}
</Animated.Text>
Expand Down
1 change: 1 addition & 0 deletions src/components/TextInput/index.native.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function TextInput(props: BaseTextInputProps, ref: ForwardedRef<BaseTextInputRef
ref={ref}
autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
inputStyle={[styles.baseTextInput, props.inputStyle]}
textInputContainerStyles={[props.textInputContainerStyles]}
/>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/styleConst.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import variables from '@styles/variables';

const ACTIVE_LABEL_TRANSLATE_Y = 4;
const ACTIVE_LABEL_TRANSLATE_Y = 7;
const ACTIVE_LABEL_SCALE = 0.8668;

const INACTIVE_LABEL_TRANSLATE_Y = variables.INACTIVE_LABEL_TRANSLATE_Y;
Expand Down
Loading