0

I have an SVG as a component. When I set it's width to 100% it works on React Native Web but not on native.

There is a link to the code here however the simulator devices arn't wide enough to show the issue. If test it on your own device which is over 375px wide then you'll see the issue. https://snack.expo.io/@jamesweblondon/bold-scones

I cant post the full component here as it's too big but this is the start of it:

function SvgComponent() {
  return (
    <Svg
      width={375}
      height={337}
      fill="none"
      viewBox="0 0 375 337"
      style={{
        width: "100%",
        height: "auto",
      }}
    >
Evanss
  • 23,390
  • 94
  • 282
  • 505

1 Answers1

0

Usually width 100% works fine when width of a parent element is defined not in percent but in some units like pixels and etc. try to hardcode width of a parent.

Nikita Prokofyev
  • 51
  • 6
  • I tired it and that didnt fixed it for me. Also if I was going to do that then I could just set the width of the SVG in pixels. – Evanss Apr 11 '20 at 15:08