Skip to content

Commit eb27d4a

Browse files
authored
fix: use transformOrigin to fix label position flickering in RN 0.73 (#4521)
1 parent d701029 commit eb27d4a

File tree

2 files changed

+9
-3
lines changed

2 files changed

+9
-3
lines changed

src/components/TextInput/Label/InputLabel.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ const InputLabel = (props: InputLabelProps) => {
111111
: labeled,
112112
},
113113
],
114+
...(Platform.constants.reactNativeVersion.minor >= 73 && {
115+
transformOrigin: 'left',
116+
}),
114117
};
115118

116119
const labelWidth =
@@ -146,7 +149,8 @@ const InputLabel = (props: InputLabelProps) => {
146149
StyleSheet.absoluteFill,
147150
Platform.OS !== 'web' && { width },
148151
{ opacity },
149-
labelTranslationX,
152+
Platform.constants.reactNativeVersion.minor <= 72 &&
153+
labelTranslationX,
150154
]}
151155
>
152156
<View

src/components/TextInput/Label/LabelBackground.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { Animated, StyleSheet } from 'react-native';
2+
import { Animated, StyleSheet, Platform } from 'react-native';
33

44
import AnimatedText from '../../Typography/AnimatedText';
55
import type { LabelBackgroundProps } from '../types';
@@ -50,9 +50,11 @@ const LabelBackground = ({
5050
backgroundColor,
5151
maxHeight: Math.max(roundness / 3, 2),
5252
bottom: Math.max(roundness, 2),
53-
transform: [labelTranslationX],
5453
opacity,
5554
},
55+
Platform.constants.reactNativeVersion.minor <= 72 && {
56+
transform: [labelTranslationX],
57+
},
5658
]}
5759
/>
5860
) : null;

0 commit comments

Comments
 (0)