fix: unfocused TextInput label disappears on new architecture (#3776)

[osman-turan]

Summary

The TextInput label disappears when the input is unfocused on React Native's New Architecture (on both Android and iOS). After some digging, I noticed the root cause is switching between an Animated.Value and some numbers depending on some booleans:

const placeholderOpacity = hasActiveOutline
  ? parentState.labeled // <-- `Animated.Value`
  : parentState.labelLayout.measured
  ? 1
  : 0;

If we switch between Animated.Value instances, the problem disappears:

const { current: placeholderOpacityAnims } = React.useRef([
  new Animated.Value(0),
  new Animated.Value(1),
]);

const placeholderOpacity = hasActiveOutline
  ? parentState.labeled
  : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];

#3776 has more details about the issue and contains an example repo to reproduce it.

Test plan

https://github.com/ChrisGadek1/react-native-paper-textinput-bug-reproduction repo from #3776 (comment) can be used for testing this fix.

[callstack-bot]

Hey @osman-turan, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[archieWu]

This bug was fixed one month but has not been released in production

[lukewalczak]

Thanks for help! 🙌🏽

[osman-turan]

@lukewalczak Thanks! 🙌

@archieWu Thanks for pointing out. But I tried some of the later releases after my PR, and none of them worked for me.