remote SVG image can't be rendered?

[Xi-gofore]

Does this library support remote SVG image rendering & pan-zooming?

I am developing a react-native mobile app. Mybackend returns image url like https://foo.com/bar.svg, I tried to render it with this library in the following way:

const svgImage = [{url: image.url}];
<ImageViewer
            enableImageZoom={true}
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
              imageUrls={svgImage} />

But when I run the app, it shows me blank screen, no SVG image is rendered.

[blazk0]

You need to wrap it in a Modal otherwise it wont show.

[Xi-gofore]

@blazk0 thanks, I tried the following the modal shows but the remote svg is not rendered on screen still.

<View>
  ...
  <Modal visible={true}>
        <ImageViewer
           width={winWidth}
           height={winHeight}
           enableImageZoom={true}
                imageUrls={svgImage} />
        </Modal>
</View>

Where the winWdith and winHeight are the width and height of the mobile simulator screen.

const winWidth = Dimensions.get('window').width;
 const winHeight = Dimensions.get('window').height;

(For example to render a remote SVG like this one https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg )

[blazk0]

@Xi-gofore have you tried giving the svg width and height ? if it does not show , then try using react native remote svg which gives you Image Component that supports svg.

Just use renderImage Prop in ImageViewer and use that Image Component.

[Xi-gofore]

@blazk0 Yes, I have tried giving svg width and height like :

const svgImage = [{ url: svgImg.url, width: winWidth, height: winHeight }];

The svg is not shown either.

The key feature for my project is not only showing the remote SVG image but also having pan-zoom feature. Do you have any suggestion about other libraries? What do you mean react native remote svg exactly? Could you please provide a link about that?

[blazk0]

@Xi-gofore you are just changing the image component, i dont think it will affect the pan zoom feature.

here is the link : react-native-remote-svg

[Xi-gofore]

@blazk0 I tried that library, yes it renders the remote svg but no pan-zoom feature, but you said you don't think it affects pan zoom feature, how can I have the pan-zoom?

[blazk0]

@Xi-gofore have you downloaded this lib ?

this package is dependent on it