search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.49k stars 2.05k forks source link

React Native 0.73 supports `transformOrigin` which can potentially fix TextInput issues #4341

Open alexzel opened 3 months ago

alexzel commented 3 months ago

See related source code: https://github.com/callstack/react-native-paper/blob/813cdd47a90ee3bb693c6ec143af73092cd3edae/src/components/TextInput/Label/InputLabel.tsx#L62

See React Native 0.73 docs mentioning transformOrigin https://reactnative.dev/docs/0.73/transforms#transform-origin

It means we do not need to move TextInput label with translateX to adjust label position after scaling. Most likely translateX was needed b/c transform origin was always related to center before v0.73. Now we can set it left and remove translateX position adjustments.

Related issues: https://github.com/callstack/react-native-paper/issues/4245 https://github.com/callstack/react-native-paper/issues/4299 https://github.com/callstack/react-native-paper/issues/4340 and possibly more related issues reporting TextInput label flickering..

alexzel commented 3 months ago

The actual reason of flickering b/c translateX has some default value based on label width === 0 before the first rendering of the label element. Then it gets the correct width from onLayout event, and renders the correct position with new translateX value. Unfortunately there is no way to detect label width before rendering it, so transformOrigin should help, so no need to apply translateX.