diff --git a/src/components/TextInput/Label/InputLabel.tsx b/src/components/TextInput/Label/InputLabel.tsx
index f38be6c86a..faf1cae04d 100644
--- a/src/components/TextInput/Label/InputLabel.tsx
+++ b/src/components/TextInput/Label/InputLabel.tsx
@@ -1,10 +1,12 @@
import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import AnimatedText from '../../Typography/AnimatedText';
+import { useTheme } from '../../../core/theming';
import type { InputLabelProps } from '../types';
const InputLabel = (props: InputLabelProps) => {
+ const { isV3 } = useTheme();
const { parentState, labelBackground, mode } = props;
const {
label,
@@ -95,6 +97,7 @@ const InputLabel = (props: InputLabelProps) => {
labelProps: props.labelProps,
})}
{
outputRange: [hasActiveOutline ? 1 : 0, 0],
}),
},
+ isV3 && styles.md3TextLine,
]}
numberOfLines={1}
>
{label}
{
: placeholderColor,
opacity: placeholderOpacity,
},
+ isV3 && styles.md3TextLine,
]}
numberOfLines={1}
>
@@ -145,6 +151,9 @@ const styles = StyleSheet.create({
labelContainer: {
zIndex: 3,
},
+ md3TextLine: {
+ lineHeight: undefined,
+ },
});
export default InputLabel;
diff --git a/src/components/TextInput/Label/LabelBackground.tsx b/src/components/TextInput/Label/LabelBackground.tsx
index 9197c36429..d8df1e4f26 100644
--- a/src/components/TextInput/Label/LabelBackground.tsx
+++ b/src/components/TextInput/Label/LabelBackground.tsx
@@ -25,7 +25,7 @@ const LabelBackground = ({
outputRange: [hasFocus ? 1 : 0, 0],
});
- const theme = useTheme();
+ const { isV3, colors } = useTheme();
const labelTranslationX = {
transform: [
@@ -61,12 +61,12 @@ const LabelBackground = ({
placeholderStyle,
labelStyle,
styles.outlinedLabel,
- theme.isV3 && styles.md3OutlinedLabel,
+ isV3 && styles.md3OutlinedLabel,
{
- top: topPosition,
- backgroundColor: theme.colors.surface,
+ top: topPosition + (isV3 ? 0 : 1),
+ backgroundColor: colors.surface,
opacity,
- transform: theme.isV3
+ transform: isV3
? [...labelStyle.transform]
: [
...labelStyle.transform,
@@ -78,7 +78,7 @@ const LabelBackground = ({
},
],
},
- theme.isV3
+ isV3
? {
width:
parentState.labelLayout.width -
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index e0b39dbc02..f91c887e79 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -466,7 +466,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
"paddingHorizontal": 0,
"position": "absolute",
"textAlign": "left",
- "top": 58,
+ "top": 59,
"transform": Array [
Object {
"translateX": 0,