title: Using React Native Animated to fade in and out elements
body: <p>I am new to react native animated feature.  I am hoping to use it to fade in and out elements on button press.  The below code works to fade in the element when the page loads, but the button to fade it out does not fade it out as I would expect.  Can someone explain what I am doing wrong.  Thank you.</p>
  
  <pre><code>class FadeComponent extends Component {
  
    constructor(props) {
      super(props)
      this.state = {
        fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
      }
      this.fadeOut = this.fadeOut.bind(this);
    }
  
    componentDidMount() {
      Animated.timing(          // Animate over time
        this.state.fadeAnim,    // The animated value to drive
        {
          toValue: 1,           // Animate to opacity: 1 (opaque)
          duration: 2000,       // 2000ms
        }
      ).start();                // Starts the animation
    }
  
    fadeOut(){
      this.setState({fadeAnim: new Animated.Value(1)})
      Animated.timing(          // Animate over time
        this.state.fadeAnim, // The animated value to drive
        {
          toValue: 0,           // Animate to opacity: 1 (opaque)
          duration: 2000,       // 2000ms
        }
      ).start();                // Starts the animation
    }
  
    render() {
      let { fadeAnim } = this.state;
  
      return (
        &lt;View style = {{ backgroundColor: '#1a8cff', marginTop: 100 }}&gt;
  
          &lt;Animated.View style={{ ...this.props.style, opacity: fadeAnim }} &gt;
            {this.props.children}
            &lt;View style = {{ backgroundColor: '#000000', height: 50, width: 50 }}&gt;
            &lt;/View&gt;
          &lt;/Animated.View&gt;
  
          &lt;TouchableOpacity onPress={this.fadeOut} &gt;
            &lt;Text style={{ color: 'white', textDecorationLine: 'underline', marginTop: 10 }}&gt;
            fade out
            &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  
        &lt;/View&gt;
      );
    }
  }
  </code></pre>