Animated.Text fade-in animation on change

Question

so i am receiving text from a web socket connection, and adding it to a Text component. It starts off as grey, and then turns into black after x amount of time ( The app processes the text ). I have the code below

    <Text style={styles.confirmedText}>
       {this.state.confirmedText}

       <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}>
              {this.state.tempText}
       </Animated.Text>
    </Text>

So this tempText is constantly changing, but i want there to be a fade-in animation when the text goes from an empty string -> some / any text at all. Any ideas how i could do this?

Note: i know my code hasn't attempted to implement this but I haven't been able to find any working samples using Animated.Text to follow.

Thanks in advance,

EDIT: Better yet, if temp had a value of say "some text", and a word was added to it, eg "some text plus", the added word "plus" to be animated in individually would be great. Seems difficult though

Answer 1

First, You'll want to set up an Animated value like so:

this.opacity = new Animated.Value(0)

Then, when you receive the text you'll want to start the animation:

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

Finally, you'll need to interpolate that value on your Animated.Text component:

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

Hopefully that can get you started!

Answer 2

You probably want to look at the componentWillReceiveProps method.

http://devdocs.io/react/react-component#componentwillreceiveprops

You can then add/remove classes to your element (or to a span for individual words), according to the props changes.

You may need to store a ref to your element too so you can apply classes or animate css properties.

See http://devdocs.io/react/refs-and-the-dom

Answer 3

Try this Code for Change Text Animation.

import React, { Component, PropTypes } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,Animated
} from 'react-native';


export default class YourView extends Component {
    constructor(props) {
        super(props);
        // 1) You'll want to set up an Animated value like:
        this.state = {
            tempText : "Hello"
        };

    }

    componentWillMount () {
        // 2) when you receive the text you'll want to start 

        setInterval(() => {
            this.setState({tempText: "Hello World"})
        }, 1000);
    };

    render() {
        return (
            <View>
                <Animated.Text style={{ fontFamily: "Helvetica Neue", color: "#9b9b9b" }}>
                   {this.state.tempText}
                </Animated.Text>
            </View>
        );
    }
}

Hopefully its work for you.