React Components

TextChangeAnimated.js

class TextChanges extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animation:  new Animated.Value(0),
      currentText: '',
      oldText: ''
    };
  }
  startAnimation() {
    Animated.timing(this.state.animation, {
      toValue: 1,
      duration: 200,
      easing: Easing.inOut(Easing.quad)
    }).start();
  }
  componentWillReceiveProps({text}) {
    if (text === this.state.currentText) {
      return;
    }
    this.updateState(text);
  }
  updateState(text) {
    this.setState({
      currentText: text,
      oldText: this.state.currentText
    });
    this.state.animation.setValue(0);
  }
  componentDidUpdate() {
    this.startAnimation();
  }
  componentDidMount() {
    this.updateState(this.props.text);
  }
  render() {
    const { currentText, oldText } = this.state;
    const oldStyle = {
      opacity: this.state.animation.interpolate({
        inputRange: [0, 1],
        outputRange: [1, 0]
      }),
    };
    
    const currentStyle = {
      opacity: this.state.animation,
    };
    
    return (
      <Animated.div style={containerStyle}>
        <Animated.span style={oldStyle}>{currentText}</Animated.span>
        { oldText && <Animated.span style={currentStyle}>{oldText}</Animated.span> }
      </Animated.div>
    );
  }
}