javascript - React Native SVG Image not loading

Question

I created an svg. And want to re-create it in React-Native. I use this npm package for it (https://www.npmjs.com/package/react-native-svg#image).

Here is the SVG

What i created is this

 <TestApp
      imageWidth={2300}
      imageHeight={1438}
      width={width}
      url={'./url/to/picture'}
      scale1={0.00100794}
      scale2={0.000666667}
    />
const TestApp = ({
  width,
  overlayColor = 'black',
  overlayOpacity = '0.3',
  translate1,
  translate2,
  scale1,
  scale2,
  imageWidth,
  imageHeight,
  url,
}) => {
  const height = (254 / 202) * width;
  const translate = translate1
    ? `translate(${translate1} ${translate2 ? translate2 : ''})`
    : '';
  const scale = scale1 ? `scale(${scale1} ${scale2 ? scale2 : ''})` : '';
  return (
    <Svg
      width={width}
      height={height}
      viewBox={`0 0 ${202} ${254}`}
      fill="none"
    >
      <Mask
        id="breathMask"
        mask-type="alpha"
        maskUnits="userSpaceOnUse"
        x="0"
        y="0"
        width={width}
        height={height}
      >
        <Path
          d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
          fill="#C4C4C4"
        />
      </Mask>
      <G mask="url(#breathMask)">
        <Rect
          x="1"
          width={width}
          height={(303 / 254) * height}
          fill="url(#pattern0)"
        />
        <Path
          d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
          fill={overlayColor}
          fillOpacity={overlayOpacity}
        />
      </G>
      <Defs>
        <Pattern
          id="pattern0"
          patternContentUnits="objectBoundingBox"
          width="1"
          height="1"
        >
          <Use href="#image0" transform={`${translate} ${scale}`} />
        </Pattern>
        <Image
          id="image0"
          widht={imageWidth}
          height={imageHeight}
          href="../path/to/url"
        />
      </Defs>
    </Svg>
  );
};

Basically I copied the svg as it is.

The problem, the picture is not loading, even If I put a public url, such as this in it. The svg with a grey background is not rendering. The picture will render in webview, though but not in ios or android.

You got any ideas how to fix it? Or a complete other way to achieve something like this? Probably easiest way would be to just create a curved picture in photoshop, but thats not really dynamic.

question from:https://stackoverflow.com/questions/66063759/react-native-svg-image-not-loading

Answer 1

Have you tried the using other parameters?

<Image
   style={{ width: imageWidth, height: imageHeight }}
   source={{
      uri: '../path/to/url',
   }}
/>