reactjs - Animated.Text fade-in animation on change -

so receiving text web socket connection, , adding text component. starts off grey, , turns black after x amount of time ( app processes text ). have code below

    <text style={styles.confirmedtext}>        {this.state.confirmedtext}         <animated.text style={{ fontfamily: "helvetica neue", color: "#9b9b9b" }}>               {this.state.temptext}        </animated.text>     </text> 

so temptext changing, want there fade-in animation when text goes empty string -> / text @ all. ideas how this?

note: know code hasn't attempted implement haven't been able find working samples using animated.text follow.

thanks in advance,

edit: better yet, if temp had value of "some text", , word added it, eg "some text plus", added word "plus" animated in individually great. seems difficult though

first, you'll want set animated value so:

this.opacity = new animated.value(0) 

then, when receive text you'll want start animation:

animated.timing(this.opacity {     duration: 350, // number in milliseconds     tovalue: 1, // or whatever final opacity you'd   }).start(); 

finally, you'll need interpolate value on animated.text component:

style={{   opacity: this.opacity.interpolate({     inputrange: [0, 1],     outputrange: [0, 1],     extrapolate: 'clamp',   }),   ... }} 

hopefully can started!