Animate text color change in React-Native

Question

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);

Answer 1

Here is the thread for backgroundColor prop animation, which is almost the same: Animating backgroundColor in React Native

Basically, you can not use the color hex string directly, but declare your colorAnim as new Animated.Value(1). The value inside () should be integer such as 1.

And in the begining of render, the integer value is "interpolated" to real color like this:

var color = this.state.colorAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['#858a91', '#ffffff']
});

Then this color object can be used for the color prop of your Animated.Text

...
color: color,
...