title: React-Native svg with unknown dimensions
body: <p>I am trying to display svg flag images from the REST Countries API, so that the flag is the width of the screen while maintaining its aspect ratio, meaning the height will change. This means the flags will not always be the same aspect ratio, so I can't give them all the same viewbox.</p>
  <p>The <a href="https://restcountries.eu/data/afg.svg" rel="nofollow noreferrer">Afghanistan flag</a> has a width of 600 and height of 400 (aspect ratio 1.5), while the <a href="https://restcountries.eu/data/alb.svg" rel="nofollow noreferrer">Albania flag</a> is 700x500 (aspect ratio 1.4).</p>
  <p>I can see how to display an SVG using the SvgUri and SvgCssUri components from <a href="https://www.npmjs.com/package/react-native-svg#css-support" rel="nofollow noreferrer">react-native-svg</a>, but these all require width and height props</p>
  <pre><code>import { SvgCssUri } from 'react-native-svg';
   
  export default () =&gt; (
    &lt;SvgCssUri
      width=&quot;100%&quot;
      height=&quot;100%&quot;
      uri=&quot;http://thenewcode.com/assets/svg/accessibility.svg&quot;
    /&gt;
  );
  </code></pre>
  <p>Is there a way to get these values from the svg data to then pass to the component and set the viewbox?</p>