Animating Text & Numbers

Reanimated cannot animate text children on the UI thread. <Animated.Text>{value}</Animated.Text> only re-renders when value changes on the JS thread — driving it from a shared value does nothing. To animate displayed text or a counting number at 60/120fps, you animate a prop, not a child, using useAnimatedProps on an animated TextInput. This is the classic ReText pattern.

Why not <Animated.Text>?

// Bad — text children are not animatable from a shared value
const count = useSharedValue(0);
const style = useAnimatedStyle(() => ({ /* can style, but... */ }));
return <Animated.Text style={style}>{count.value}</Animated.Text>; // ❌ reads .value in render; never updates on UI thread

Text has no prop that carries its content. TextInput, however, has a text prop — and props can be driven by useAnimatedProps.

The pattern: animated TextInput (ReText)

Create an animated TextInput, make it non-editable, and feed it text via useAnimatedProps. All formatting happens inside the worklet on the UI thread.