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

[alexzel]

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]

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.

[andrejordi]

I found that this is the function that causes the re-rendering:

const handleLayoutAnimatedText = React.useCallback(
  (e: LayoutChangeEvent) => {
    const width = roundLayoutSize(e.nativeEvent.layout.width);
    const height = roundLayoutSize(e.nativeEvent.layout.height);
    console.log('handleLayoutAnimatedText', width, height);
    if (width !== labelLayout.width || height !== labelLayout.height) {
      setLabelLayout({
        width,
        height,
        measured: true,
      });
    }
  },
  [labelLayout.height, labelLayout.width]
);