software-mansion / software-mansion/react-native-svg
SVG doesn't calculate width from height+viewbox (web/native inconsistency)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8k
- Forks
- 1.2k
- Avg merge
- 10d 9h
- Merged PRs (30d)
- 2
Description
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Snack and reproduce the case using an SVG with a viewBox and height but no width, then compare native behavior with the web result. Trace the SVG component's sizing and layout entry point; done means the native SVG derives a concrete width from its height and viewBox aspect ratio without requiring an explicit width.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100