title: Animating SVG in react native
body: <p>I'm trying to create an endless animation of a Sine wave in react native. I'm using <code>react-native-svg</code> library.
  I'm using an xml animation:</p>
  <pre class="lang-xml prettyprint-override"><code>const xml = `
  &lt;svg width=&quot;200&quot; height=&quot;100&quot; viewBox=&quot;0 0 200 100&quot;&gt;
      &lt;defs&gt;
          &lt;path id=&quot;double-wave&quot; fill=&quot;red&quot; d=&quot;M0 50
                 C 40 10, 60 10, 100 50 C 140 90, 160 90, 200 50
                 C 240 10, 260 10, 300 50 C 340 90, 360 90, 400 50
                 L 400 100 L 0 100 Z&quot; /&gt;
      &lt;/defs&gt;
  
      &lt;use xlink:href=&quot;#double-wave&quot; x=&quot;0&quot; y=&quot;0&quot;&gt;
          &lt;animate attributeName=&quot;x&quot; from=&quot;0&quot; to=&quot;-200&quot; dur=&quot;3s&quot; repeatCount=&quot;indefinite&quot; /&gt;
      &lt;/use&gt;
  &lt;/svg&gt;
  `;
  </code></pre>
  <p>I add it like this:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;SvgXml xml={xml} width={200} height={100} /&gt;
  </code></pre>
  <p>However, the result is that I only see the shape on the screen but the shape doesn't move.
  How can I create a recurrent movement of the Sine wave correctly?</p>