title: SVG Image in react-native
body: <p>I want to use SVG image react-native. Earlier it was not supported. But by looking into source code of react-native, it seems that it is now supported.</p>
  
  <p>Here is my sample code:</p>
  
  <pre><code>class SVGImageSample extends Component {
      render() {
          return (
              &lt;Image source={require("./Mysvg.svg")} style={{height:40,width:40}}/&gt;
          );
      }
  }
  </code></pre>
  
  <p>Here is my svg image</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 500 500" height="100" style="enable-background:new 0 0 500 500;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
      .st0{display:none;fill:#E0E0E0;}
      .st1{display:none;}
      .st2{display:inline;fill:#848484;}
      .st3{display:none;fill:#FFFFFF;}
      .st4{fill:#C22227;}
  &lt;/style&gt;
  &lt;rect id="XMLID_8_" x="-221.1" y="-49" class="st0" width="860" height="596.7"/&gt;
  &lt;g id="XMLID_4_" class="st1"&gt;
      &lt;rect id="XMLID_2_" x="-38.8" class="st2" width="577.5" height="10"/&gt;
      &lt;rect id="XMLID_5_" x="-38.8" y="490" class="st2" width="577.5" height="10"/&gt;
      &lt;rect id="XMLID_18_" x="0" y="-38.8" class="st2" width="10" height="577.5"/&gt;
      &lt;rect id="XMLID_19_" x="490" y="-38.8" class="st2" width="10" height="577.5"/&gt;
  &lt;/g&gt;
  &lt;image style="display:none;overflow:visible;" width="1242" height="2208" id="XMLID_1_" xlink:href="login_profile.png"  transform="matrix(0.3068 0 0 0.3068 -214.041 -274.2382)"&gt;
  &lt;/image&gt;
  &lt;circle id="XMLID_3_" class="st3" cx="250" cy="250" r="240"/&gt;
  &lt;path id="XMLID_13_" class="st4" d="M348.3,249.4l-84.5-84.8l-18,18l49.7,50.1c1.9,1.9,0.5,5.1-2.1,5.1H151.7v25.4l141.5-0.1
      c2.7,0,4,3.2,2.1,5.1l-49,49.1l18,18l84-85.8V249.4L348.3,249.4z"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>It does not show anything. </p>
  
  <p>Any help would be appreciated.</p>