title: New animation after setState - React Native
body: <p>I don't find the answer to my problem for my react native app.</p>
  
  <p>If you have an idea how to achieve that, that would be great :)</p>
  
  <p><strong>What I'm trying to do:</strong></p>
  
  <p>In a page, when I press somewhere, I want to display an animation (for example a square apparition) on the press position.</p>
  
  <p><strong>What I have achieved:</strong>
  When I click, a square is display with an animation on the right position.
  But when i click somewhere else, The position of the square changes but the animation doesn't restart. </p>
  
  <p><strong>What I have tried:</strong></p>
  
  <p>To do the animation, I place a &lt; View/> (with position: 'absolute') on the press position.</p>
  
  <p>This &lt; View/> is embeded in a component that I call 1 time in my App render:  </p>
  
  <pre><code>&lt;ClickAnimation x={item.x} y={item.y}/&gt;
  </code></pre>
  
  <p>where item.x and item.y are are the coordinate.</p>
  
  <p>This is the code of my component:</p>
  
  <pre><code>import React from 'react';
  import {Animated, View} from 'react-native';
  
  export default class ClickAnimation extends React.Component {
    state = {
      scaleAnim: new Animated.Value(0)
    };
    componentWillMount() {
      Animated
        .timing(this.state.scaleAnim, {
        toValue: 2,
        duration: 500
      })
        .start();
    }
    componentWillUpdate(nextProps) {
      if (nextProps.x != this.props.x &amp;&amp; nextProps.y != this.props.y) {
        this.setState({
          scaleAnim: new Animated.Value(0)
        })
      }
    }
    componentDidUpdate() {
      console.log("componentDidUpdate",this.state.scaleAnim)
      Animated
        .timing(this.state.scaleAnim, {
        toValue: 2,
        duration: 500
      })
        .start();
    }
    render() {
      return (&lt;Animated.View
        style={{
        position: "absolute",
        top: this.props.y,
        left: this.props.x,
        width: 50,
        height: 50,
        backgroundColor: "red",
        transform: [
          {
            scaleY: this.state.scaleAnim
          }, {
            scaleX: this.state.scaleAnim
          }, {
            translateX: -25
          }, {
            translateY: -25
          }
        ]
      }}/&gt;);
    }
  }
  </code></pre>
  
  <p>The console.log in componentDidUpdate give me for each click 2 logs:</p>
  
  <p>{_children: Array(2), _value: 2, ..., _animation: null…}</p>
  
  <p>{_children: Array(2), _value: 0,..., _animation: null…}</p>
  
  <p>I really don't know what to do next.</p>
  
  <p>PS: In NativeScript, that was more easy. I had just to add the new component to the DOM.</p>