Performance problem with large number of item

[shuijinliuxi]

I use the zoomable-svg to draw many item with pan and zoom, but it has bad performance.
This is the gif:

gif.gif

[yuoppp]

Facing the same issue with 1000+ elements

[yuoppp]

Do not use "opacity". Use fill="rgba(r, g, b, a)" instead.
Saved me 4 seconds of rendering. But still 1sec render is unacceptable for my app.

[msand]

Is it fast without zoomable-svg? Can you measure the difference with and without? I suspect zoomable-svg contributes very little to any performance issues. You should probably look into refactoring out your content to a separate component and using shouldComponentUpdate. Such that only the updated transform needs to reconciled and sent over the bridge to the native side. Otherwise you might need to look into culling your render trees, such that you only include elements which should actually be visible in the currently visible area, to limit any redundant or output/side-effect free parts of the computation.

[yuoppp]

I'm using react-native-svg-pan-zoom, which transforms the view around the svg instead of the svg itself.

[MozilaIP]

@yuoppp is react-native-svg-pan-zoom performs faster than zoomable-svg in such cases?

[msand]

If your content doesn't change, or you don't care about the image getting pixelated when zoomed in, then it'll certainly be faster to transform the bitmap rather than rerendering the vector data.