Animate text color change in React-Native

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.

For this I am using an tag.

What am I missing to make this work?

This is my component so far:

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 (
        <CardSection>
          <Text style={styles.textStyle}>
            { library.description }
          </Text>
        </CardSection>
      );
    }
  }

  render() {
    const { titleStyle } = styles;
    const { id, title } = this.props.library;

    return (
      <TouchableWithoutFeedback
        onPress={() => this.props.selectLibrary(id)}
      >
        <View>
          <CardSection>
            <Animated.Text
              style={{
                ...titleStyle,
                color: this.state.colorAnim
              }}
            >
              { title }
            </Animated.Text>
          </CardSection>
          { this.renderDescription() }
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  titleStyle: {
    fontSize: 18,
    paddingLeft: 15
  },

  textStyle: {
    paddingLeft: 18,
    paddingRight: 5
  }
}

const mapStateToProps = (state, ownProps) => {
  const expanded = state.selectedLibraryId === ownProps.library.id;

  return {
    expanded: expanded
  };
};

export default connect(mapStateToProps, actions)(ListItem);