title: React Native: Animation opacity transition only runs from componentDidMount
body: <p>I'm trying to run a fade out animation on react native but it will only run once on componentDidMount. </p>
  
  <p>Any other efforts to run the animation, doesn't show the animation even though the function runs. </p>
  
  <p>This class runs on a parent component which renders this component 6 times.</p>
  
  <p>I'm running this react native app with mobx, so typical react lifecycle hooks don't necessarily work as expected.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Animated } from 'react-native';
  
  class FadeOut extends Component {
      constructor(props) {
          super(props);
          this.state = {
              fadeAnim: new Animated.Value(0.3)
          };
      }
  
      componentDidMount() {
          console.log('testing lifecyles compdidmount');
          this.animateDetail();
      }
  
      componentWillUpdate() {
          console.log('componentWillUpdate');
          this.animateDetail();
      }
  
      animateDetail = () =&gt; {
          console.log('running animate Detail');
          Animated.timing(this.state.fadeAnim, {
              toValue: 0.01, // Animate to opacity: 1 (opaque)
              duration: 500 // Make it take a while
              // useNativeDriver: true
          }).start(console.log);
      };
      render() {
          const { fadeAnim } = this.state;
          return (
              &lt;Animated.View
                  style={{
                      ...this.props.style,
                      opacity: fadeAnim
                  }}
              &gt;
                  {this.props.children}
              &lt;/Animated.View&gt;
          );
      }
  }
  
  export default FadeOut;
  </code></pre>