pand and zoom SVG image but when zoom in the image is not sharp

Question

I am developing an React Native project. Our backend returns a URL which points to a remote SVG image. I need to not only show the SVG but also be able to pan and zoom it in the mobile app.

• To show remote SVG image, I use react-native-svg library.
• To pan and zoom SVG, I use react-native-simple-svg-pan-zoom library.

Here is what I tried:

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

// I hardcode the remote SVG URL here for illustration purpose, it is from backend in my code.
const imageSource = 'https://www.example.com/foo.svg';
...
return (
      <SvgPanZoom
          canvasHeight={windowHeight}
          canvasWidth={windowWidth}
          minScale={0.5}
          maxScale={10}
          initialZoom={1}
          onZoom={zoom => {
            console.log('onZoom:' + zoom);
          }}>
          <SvgUri width="100%" height="100%" uri={imageSource} />
        </SvgPanZoom>
  )

When run my app, the remote SVG image is shown & I can zoom in and out based on the configuration. But when zoom in, the SVG image is not sharp. It looks more like a bitmap being scaled. Here is an example how it looks like when I zoom in to the max scale (in above code snippet you can see maxScale={10}).

So, how can I zoom a remote SVG image ? If the libraries I am using is not a good choice, anyone can suggest me other libraries to solve my problem?

==== Update 02.02.2021 ====

I tried react-native-image-zoom-viewer as @Minh Vo suggested. However I get blank screen, the remote svg image is not rendered by the library.

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

If you feel I should provide the URL of SVG for my question, you can use this as an example https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg

Answer 1

i have same problem and i find a library can help this. I suggest this react-native-image-zoom-viewer. You can easy zoom in and zoom out even though url is 1 image or multi image. More infomation in that link. Here is code demo:

        const images = "www.abc.com/image.svg"
        <ImageViewer
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
            index={this.state.index}
            imageUrls={this.images} />