TextInput created with createAnimatedComponent and an adapter does not render the changed value.

Description

I am trying to create a component that receives a value N and this component must render an animation from 0 to N passing through the intermediate numbers.

For that I have created an animated component of type TextInput with the createAnimatedComponent function, I have added the adapter for the TextInput found in the documentation and I have used the useAnimatedProps function... but I cannot get the animation to be rendered, even though inside useAnimatedProps the value that represents the animation is printed by the console.

I have read the documentation from end to end and I cannot understand what is missing, there are examples on the internet and on GitHub and they are incomplete or have broken links.

It would be good to have a complete example of how to use this functionality. There are only small pieces of this solution and trying to put it all together without information is a complete headache.

Thanks.

Steps to reproduce

Add the 'text' property to the native properties whitelist and create animated component based on React-Native's TextInput component.
Use the adapter for TextInput defined in the official documentation: https://github.com/software-mansion/react-native-reanimated/blob/Reanimated2/src/reanimated2/PropAdapters.ts#L57
Define the body of the component and the animation logic.

import Animated, { createAnimatedPropAdapter, useAnimatedProps, useDerivedValue, withTiming } from "react-native-reanimated";
import { TextInput, Text } from "react-native";

Animated.addWhitelistedNativeProps({text: true})
const AnimatedText = Animated.createAnimatedComponent(TextInput);

const AnimatedNumberWrapper = () => {

  const animatedText = useDerivedValue(() => withTiming(3000, { duration: 1000 }));

  let animatedProps = useAnimatedProps(() => {
    console.log(animatedText.value) // <- This prints the numbers from 0 to 'target' correctly
    return {
      text: animatedText.value + ''
    }
  }, [], TextInputAdapter)

  return ( 
    <>
      { /* this dont render anything */ }
      <AnimatedText animatedProps={animatedProps}></AnimatedText> 
      <Text>hello world</Text>
    </>
  );
}

export const TextInputAdapter = createAnimatedPropAdapter(
  (props) => {
    'worklet';
    const keys = Object.keys(props);
    if (keys.includes('value')) {
      props.text = props.value;
      delete props.value;
    }
  },
  ['text']
);

export default AnimatedNumberWrapper;

Snack or a link to a repository

https://snack.expo.dev/@jorgitoexpodevv/hazardous-blue-waffle

Reanimated version

~3.10.1

React Native version

0.74.2

Platforms

Android

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Android emulator

Device model

Pixel 4

Acknowledgements

Yes

software-mansion / react-native-reanimated