import React from 'react' ; import { Platform , StyleSheet , TextProps as RNTextProps } from 'react-native' ; import { TextInput } from 'react-native' ; import Animated , { useAnimatedProps , useAnimatedReaction , } from 'react-native-reanimated' ; Animated . addWhitelistedNativeProps ( { text : true } ) ; interface AnimatedTextProps { text : Animated . SharedValue < string > ; style ? : Animated . AnimateProps < RNTextProps > [ 'style' ] ; } const AnimatedTextInput = Animated . createAnimatedComponent ( TextInput ) ; export const AnimatedText = ( { text , style } ) => { const inputRef = React . useRef < any > ( null ) ; if ( Platform . OS === 'web' ) { useAnimatedReaction ( ( ) => { return text . value ; } , ( data , prevData ) => { if ( data !== prevData && inputRef . current ) { inputRef . current . value = data ; } } ) ; } const animatedProps = useAnimatedProps ( ( ) => { return { text : text . value , } as any ; } ) ; return ( < AnimatedTextInput underlineColorAndroid = "transparent" editable = { false } ref = { Platform . select ( { web : inputRef } ) } value = { text . value } style = { [ styles . text , style ] } animatedProps = { animatedProps } / > ) ; } ; const styles = StyleSheet . create ( { text : { color : 'black' , } , } ) ;