How to make a React Native animation happen again?

Question

Currently, my React Native animation only happens one time then never again. I need it to happen every time one of my props for that component changes. I have the data display changing when the new prop data comes in but it only animates the first time. Is there a way for me to for the animation to happen again every time that props changes/the component updates?

Here is what I have so far:

import React from 'react';
import {Animated, Easing, StyleSheet, Text, View} from 'react-native';




//Animation
class FadeInView extends React.Component {
  state = {
    yAnimation: new Animated.Value(21),
  }

  componentDidMount() {
    Animated.timing(
      this.state.yAnimation,
      {
        //easing: Easing.bounce,
        toValue: 0,
        duration: 150,
      }
    ).start();
  }

  render() {
    let { yAnimation } = this.state;

    return (
      <Animated.View
        style={{
          ...this.props.style,
          transform: [{translateY: this.state.yAnimation}],
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

//Price Component
export default class Price extends React.Component {

constructor(props) {
  super(props);

  this.animateNow = false;
}

shouldComponentUpdate(nextProps, nextState) {
  if (this.props.price !== nextProps.price) {
    console.log('true');
    return true;
  } else {
    return false;
  }
}

componentWillUpdate() {
  if (this.props.price != this.localPrice) {
    this.animateNow = true;
  }
}

componentDidUpdate() {
this.localPrice = this.props.price;
this.animateNow = false;

console.log(this.props.price);
}

render() {
if (this.animateNow) {
  return (
    <FadeInView>
      <Text style={styles.price}>{this.props.price}</Text>
    </FadeInView>
  );
} else {
  return (
    <View>
      <Text style={styles.price}>{this.props.price}</Text>
    </View>
  );
}

}
}

const styles = StyleSheet.create({
price: {
fontFamily: 'Avenir',
fontSize: 21,
color: '#606060',
textAlign: 'right',
marginRight: 20,
backgroundColor: 'transparent'

}
});

Answer 1

If you want to animate again when receive props, you should call that again inside componentWillReceiveProps():

playAnimation() {
    Animated.timing(
        this.state.yAnimation,
        {
            toValue: 0,
            duration: 150,
        }
    ).start();
}

componentWillReceiveProps(next) {
    if (next.props.changed) {
        this.playAnimation();
    }
}