title: How to make svg animation with Animated in react-native
body: <p>ReactNative:</p>
  
  <pre><code>&lt;ScrollView style={styles.container}&gt;
      &lt;Svg
        height="100"
        width="100"&gt;
          &lt;Circle
            cx="50"
            cy="50"
            r="50"
            stroke="blue"
            strokeWidth="2.5"
            fill="green"/&gt;
        &lt;/Svg&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>I want to make Circle scale with Animated.Value. I have tried this :</p>
  
  <pre><code>    let AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
      let AnimatedCircle = Animated.createAnimatedComponent(Circle);
  
      &lt;ScrollView style={styles.container}&gt;
              &lt;Svg
                height="100"
                width="100"&gt;
                  &lt;AnimatedCircle
                    cx="50"
                    cy="50"
                    r={this.state.animator}
                    stroke="blue"
                    strokeWidth="2.5"
                    fill="green"/&gt;
                &lt;/Svg&gt;
          &lt;/ScrollView&gt;
  </code></pre>
  
  <p>Then flash back with no error.</p>
  
  <p>How can I do?</p>
  
  <hr>
  
  <p><strong>update 2016.8.24</strong></p>
  
  <p>I found a new way instead of requestAnimationFrame :</p>
  
  <p>constructor: </p>
  
  <pre><code>this.state = {
        animator: new Animated.Value(0),
        radius: 1,
      };
  
      this.state.animator.addListener((p) =&gt; {
        this.setState({
          radius: p.value,
        });
      });
  </code></pre>
  
  <p>render: </p>
  
  <pre><code>&lt;Circle
      cx="50"
      cy="50"
      r={this.state.radius}
      stroke="blue"
      strokeWidth="2.5"
      fill="green"/&gt;
  </code></pre>
  
  <p>But here <a href="http://facebook.github.io/react-native/docs/animated.html" rel="noreferrer">the guides</a> gives advice using it sparingly since it might have performance implications in the future.</p>
  
  <p>so what's the best way ?</p>