software-mansion / software-mansion/react-native-svg

SVG doesn't calculate width from height+viewbox (web/native inconsistency)

Open
#2,138 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.