[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} />;

[novatech]

how much % to completion this is? i'm been testing this feature for my implementation by patching the library.
so far it works well, except i need to be careful not to pass undefined/null sharedValue to <Animated.Text> otherwise it will crash at following line when there is an update

5 XXXMobile-UAT.debug.dylib 0x1078f1c60 reanimated::AnimatedPropsRegistry::update(facebook::jsi::Runtime&, facebook::jsi::Value const&, double) + 724 (AnimatedPropsRegistry.cpp:34)
following the comment above, this is how i use it,

// useSingleValueFromRedux is just a hook to useSelector
const value = useSingleValueFromRedux({
  key: key,
  field: sseField,
});
const textSv = useSharedValue(value ?? '--');

useEffect(() => {
  textSv.value = value ?? '--';
}, [textSv, value]);

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

[tomekzaw]

@novatech Thanks for the feedback! There's one thing that needs to be fixed prior to merging – the incorrect behavior of <Animated.Text text={sv} /> during a re-render (after which the component is blank). We'd like to ship this PR in 4.3.0 most likely some time in January 2026.

[WadhahEssam]

Would love from this to be merged this month, that would make our lives easier as react native 82 in android dropped the support of extending internal classes and now our package 'react-native-animateable-text' is very hard to implement in android

axelra-ag/react-native-animateable-text#76

so if this is merged soon, we will direct our users to use this solution instead.

[mateuszmazurek]

@tomekzaw 🙏

[tomekzaw]

Bug 1: <Animated.Text text={textSv} /> doesn't work at all.

Screen.Recording.2026-02-08.at.19.37.55.mov

Note: I was able to fix it (only for between the first and second render) by passing true as isAnimatedProps in InlinePropManager.ts:

        const updaterFunction = () => {
         'worklet';
         const update = getInlinePropsUpdate(newInlineProps);
-        updateProps(shareableViewDescriptors, update);
+        updateProps(shareableViewDescriptors, update, true);
       };

[tomekzaw]

Bug 2: <Animated.Text animatedProps={stringAnimatedProps} /> is stuck with empty text content after commenting out and restoring animatedProps argument using fast refresh (hot reload).

Screen.Recording.2026-02-08.at.19.41.23.mov

Actually, all animated texts are broken in such scenario:

Edit: It looks like this is a general regression of useAnimatedProps, unrelated to this specific PR.

[novatech]

is this coming into next release anytime soon? 🙏