1

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.

The Afghanistan flag has a width of 600 and height of 400 (aspect ratio 1.5), while the Albania flag is 700x500 (aspect ratio 1.4).

I can see how to display an SVG using the SvgUri and SvgCssUri components from react-native-svg, but these all require width and height props

import { SvgCssUri } from 'react-native-svg';
 
export default () => (
  <SvgCssUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/svg/accessibility.svg"
  />
);

Is there a way to get these values from the svg data to then pass to the component and set the viewbox?

Stephen
  • 11
  • 1

0 Answers0