title: Disappearing after pressing in 'react-native-svg'
body: <p>I use <code>SvgCss</code> from <code>react-native-svg</code> for displaying and changing the color of several external svgs.</p>
  <p>I put <code>onPress</code> on it and it works as expected in most cases. but I noticed that some <code>svgs</code> have weird behavior after pressing on them. for example the below <code>svg</code> disappears after pressing!</p>
  <p>what's the problem here?</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;188&quot; height=&quot;195&quot; viewBox=&quot;0 0 188 195&quot;&gt;
      &lt;defs&gt;
          &lt;clipPath id=&quot;sjkzt87o0a&quot;&gt;
              &lt;path fill=&quot;none&quot; stroke=&quot;#707070&quot; d=&quot;M0 0H188V195H0z&quot; transform=&quot;translate(277 228)&quot;/&gt;
          &lt;/clipPath&gt;
      &lt;/defs&gt;
      &lt;g clip-path=&quot;url(#sjkzt87o0a)&quot; transform=&quot;translate(-277 -228)&quot;&gt;
          &lt;g&gt;
              &lt;path fill=&quot;currentColor&quot; d=&quot;M424.413 141.66A183.073 183.073 0 0 0 241.34 324.733h139.35a43.723 43.723 0 0 1 87.445 0h139.35A183.073 183.073 0 0 0 424.413 141.66z&quot; transform=&quot;rotate(14 -112.125 652.114) rotate(-14 269.633 431.384)&quot;/&gt;
              &lt;path d=&quot;M-419.71-981.787a184.43 184.43 0 0 1-5.317-36.7 182.149 182.149 0 0 1 2.037-35.924 183.1 183.1 0 0 1 8.855-34.257 184.4 184.4 0 0 1 15.136-31.7 184.393 184.393 0 0 1 20.881-28.245 183.1 183.1 0 0 1 26.09-23.9 182.158 182.158 0 0 1 30.763-18.664 184.426 184.426 0 0 1 34.9-12.535 183.84 183.84 0 0 1 44.431-5.482 182.2 182.2 0 0 1 36.685 3.741 183.411 183.411 0 0 1 34.685 10.834 184.485 184.485 0 0 1 31.712 17.342 184.062 184.062 0 0 1 27.767 23.265 182.161 182.161 0 0 0-127.848-52.183 183.849 183.849 0 0 0-44.432 5.482c-96.058 23.95-156.256 121.918-134.191 218.387l-2.153.537zm220.059-54.867a43.8 43.8 0 0 0-10-18.771 43.609 43.609 0 0 1 7.076 8.251 43.559 43.559 0 0 1 4.9 10.028l-1.974.492z&quot; transform=&quot;rotate(14 -112.125 652.114) translate(636.09 1316.532)&quot; style=&quot;mix-blend-mode:multiply;isolation:isolate&quot; fill=&quot;#bfbfbf&quot;/&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I also tried <code>SvgXml</code> , <code>SvgUri</code>, <code>SvgCssUri</code>, no changes.</p>
  <p>here is the code:</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import Axios from 'axios';
  import { Text } from 'native-base';
  import { SvgCss } from 'react-native-svg';
  
  const PaintObject = ({ svg, objData }) =&gt; {
    const [color, setcolor] = useState(objData.initial_color);
    const [svgfile, setsvgfile] = useState('');
  
    useEffect(() =&gt; {
      Axios.get(svg).then(({ data }) =&gt; {
        setsvgfile(data);
      });
    }, []);
  
    if (svgfile !== '') {
      return (
        &lt;SvgCss
          width={`${objData.width}%`}
          height={`${objData.width}%`}
          style={{
            color,
            position: 'absolute',
            top: `${objData.y}%`,
            left: `${objData.x}%`,
          }}
          xml={[...svgfile].join('')}
          onPress={()=&gt; setcolor('green')}
        /&gt;
      );
    }
    return (&lt;Text&gt;{ }&lt;/Text&gt;);
  };
  
  export default PaintObject;
  </code></pre>