title: Animate text color change in React-Native
body: <p>This problem has been bugging me for a while now and I am stuck.
  I want to animate the color property of my text when a user clicks on a Touchable.</p>
  
  <p>For this I am using an  tag.</p>
  
  <p>What am I missing to make this work?</p>
  
  <p>This is my component so far:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Text, View, TouchableWithoutFeedback, LayoutAnimation, Animated } from 'react-native';
  
  import { CardSection } from './common';
  import * as actions from '../actions';
  
  class ListItem extends Component {
    state = {
      colorAnim: new Animated.Text('#000')
    };
  
    componentWillUpdate() {
      LayoutAnimation.easeInEaseOut();
  
      Animated.timing(
        this.state.colorAnim,
        {
          toValue: '#47bed1',
          duration: 5000,
        }
      ).start();
    }
  
    renderDescription () {
      const { library, expanded } = this.props;
  
      if (expanded) {
        return (
          &lt;CardSection&gt;
            &lt;Text style={styles.textStyle}&gt;
              { library.description }
            &lt;/Text&gt;
          &lt;/CardSection&gt;
        );
      }
    }
  
    render() {
      const { titleStyle } = styles;
      const { id, title } = this.props.library;
  
      return (
        &lt;TouchableWithoutFeedback
          onPress={() =&gt; this.props.selectLibrary(id)}
        &gt;
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Animated.Text
                style={{
                  ...titleStyle,
                  color: this.state.colorAnim
                }}
              &gt;
                { title }
              &lt;/Animated.Text&gt;
            &lt;/CardSection&gt;
            { this.renderDescription() }
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  
  const styles = {
    titleStyle: {
      fontSize: 18,
      paddingLeft: 15
    },
  
    textStyle: {
      paddingLeft: 18,
      paddingRight: 5
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    const expanded = state.selectedLibraryId === ownProps.library.id;
  
    return {
      expanded: expanded
    };
  };
  
  export default connect(mapStateToProps, actions)(ListItem);
  </code></pre>