[PoC] feat: support for animating text inside Animated.Text

[tomekzaw]

Summary

Work in progress.

Fixes the issue with cropped TextInput and visible ellipsis.

TODO: update docs https://docs.swmansion.com/react-native-reanimated/docs/guides/performance/#-animate-textinput-instead-of-re-rendering-text-component

Test plan

[RodolfoSilva]

What will be the right way to sync the animation shared value with React state?

Should we use a useDerivedValue based on the React state, or do we need a useEffect to handle the changes?
(In other words, should we use useEffect or useLayoutEffect to sync React state with a shared value?)

I mean, this is the most common scenario when using this pattern for example, when receiving a number from an API to animate the text.

[tomekzaw]

@RodolfoSilva I think the best way to go is to do it like this:

const myValueFromAPI = useValueFromAPI();

const sv = useSharedValue<number>(myValueFromAPI);

useEffect(() => {
  sv.value = withTiming(myValueFromAPI);
}, [myValueFromAPI]);

const textSv = useDerivedValue(() => {
  return sv.value.toFixed(2);
});

return <Animated.Text text={textSv} />;