diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx index eebda816b9..45d524ea6a 100644 --- a/src/components/TextInput/Label/InputLabel.tsx +++ b/src/components/TextInput/Label/InputLabel.tsx @@ -20,6 +20,7 @@ const InputLabel = (props: InputLabelProps) => { focused, opacity, labelLayoutWidth, + labelLayoutHeight, labelBackground, label, labelError, @@ -157,6 +158,7 @@ const InputLabel = (props: InputLabelProps) => { {labelBackground?.({ labeled, labelLayoutWidth, + labelLayoutHeight, labelStyle, placeholderStyle, baseLabelTranslateX, diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx index 16b2fe242a..409606d208 100644 --- a/src/components/TextInput/Label/LabelBackground.tsx +++ b/src/components/TextInput/Label/LabelBackground.tsx @@ -7,10 +7,10 @@ import type { LabelBackgroundProps } from '../types'; const LabelBackground = ({ labeled, labelLayoutWidth, + labelLayoutHeight, placeholderStyle, baseLabelTranslateX, topPosition, - label, backgroundColor, roundness, labelStyle, @@ -69,6 +69,7 @@ const LabelBackground = ({ { top: topPosition + 1, width: labelLayoutWidth - placeholderStyle.paddingHorizontal, + height: labelLayoutHeight, backgroundColor, opacity, transform: labelTextTransform, @@ -76,9 +77,7 @@ const LabelBackground = ({ ]} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier} - > - {typeof label === 'string' ? label : label?.props.children} - , + />, ]; }; diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx index affe5bb5dc..f2bc202470 100644 --- a/src/components/TextInput/TextInputFlat.tsx +++ b/src/components/TextInput/TextInputFlat.tsx @@ -380,6 +380,7 @@ const TextInputFlat = ({ wiggle={Boolean(parentState.value && labelProps.labelError)} labelLayoutMeasured={parentState.labelLayout.measured} labelLayoutWidth={parentState.labelLayout.width} + labelLayoutHeight={parentState.labelLayout.height} {...labelProps} /> ) : null} diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx index a250c439cf..a65cc1cbfc 100644 --- a/src/components/TextInput/TextInputOutlined.tsx +++ b/src/components/TextInput/TextInputOutlined.tsx @@ -368,6 +368,7 @@ const TextInputOutlined = ({ wiggle={Boolean(parentState.value && labelProps.labelError)} labelLayoutMeasured={parentState.labelLayout.measured} labelLayoutWidth={parentState.labelLayout.width} + labelLayoutHeight={parentState.labelLayout.height} {...labelProps} labelBackground={LabelBackground} maxFontSizeMultiplier={rest.maxFontSizeMultiplier} diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx index 7564a384c8..7b7311ba1e 100644 --- a/src/components/TextInput/types.tsx +++ b/src/components/TextInput/types.tsx @@ -137,6 +137,7 @@ export type InputLabelProps = { opacity: number; labelLayoutMeasured: boolean; labelLayoutWidth: number; + labelLayoutHeight: number; inputContainerLayout: { width: number }; labelBackground?: any; maxFontSizeMultiplier?: number | undefined | null; @@ -148,6 +149,7 @@ export type LabelBackgroundProps = { labelStyle: any; labeled: Animated.Value; labelLayoutWidth: number; + labelLayoutHeight: number; maxFontSizeMultiplier?: number | undefined | null; theme?: ThemeProp; } & LabelProps; diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index f9135eda70..594224cdd0 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1084,6 +1084,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` "fontFamily": "System", "fontSize": 16, "fontWeight": undefined, + "height": 0, "left": 8, "letterSpacing": 0.15, "lineHeight": undefined, @@ -1111,9 +1112,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = ` } } testID="text-input-outlined-label-background" - > - Outline Input - + />