Library version: 13.4.0

Snack link: https://snack.expo.dev/@chris_whiterosemaths/svgs-natural-aspect-ratio

I have an SVG defined with a viewbox (which I think should give it a "natural aspect ratio" (using CSS terminology)).

function Shape(props) {
  return <Svg
    viewBox="0 0 24 24"
    fill="black"
    {...props}
  >
    <Path d="...snip..." />
  </Svg>
}

Elsewhere, when using it, I provide the height but not the width.

<Shape height={100} />

Expected result

I would like this to mean that the SVG now has a concrete height and width, since the width can be calculated from the height and the aspect ratio. This behaviour works on web. See the snack link.

Actual result

However, on native with this library, the SVG isn't visible. I think this is because the width is being assumed as 0, but I'm not sure. If I give it a width, all is well

Why this is a problem / Use case

I'm using react-native-svg-transformer to auto-generate the Svg component from a .svg file. The .svg file has the viewbox defined in it, but no concrete width or height. There is no way to access that viewport, so I can't do my own calculations at runtime.

I would like to place several SVGs in a row within a View. I basically just want to fit all the SVGs in. I do that by giving each a height equal to the height of the row, and allowing their width to be whatever it needs to be for that height. As far as I can tell there's no way to allow an SVGs width/height to be based off the viewbox's aspect ratio on native, but this is how it's meant to work (on web)!

preserveAspectRatio, whilst amazing, isn't helpful here because I want each SVG to take up as much width as it needs to. I don't want to put it in a container and have it scale to fit that container.