Loading delay when using react-native-svg

Question

I am using react-native-svg for handling SVG but i am noticing a delay when switching to a stack/screen that contains SVG. I am using a tabBar in react-navigation 6 to switch stacks/screens.

When i have SVG in the screen as below i can notice a small delay of around 0,5-1s before the stack/screen shows up. If i remove all SVG it switches just fine with 0s delay.

I have tried with react-native-svg-transformer but the delay just increases.

I have around 10 SVG:s as below in one screen.

import { WithLocalSvg } from 'react-native-svg';

<WithLocalSvg width="28" height="28" style={{position:'absolute', top:16, left:0, transform: [{ rotate: '12deg' }]}} asset={require("../../images/svg_source.svg")} />

Any tips or ideas are welcome. Maybe there is another way to work with SVG in react-native?

this is exactly my problem. have you found the workaround? – Bryan Lumbantobing Aug 28 '23 at 08:48 — Bryan Lumbantobing, Aug 28 '23 at 08:48
I reverted back to using png as i never found a solution. – Quantal Aug 30 '23 at 18:34 — Quantal, Aug 30 '23 at 18:34

score 0 · Answer 1 · answered Jan 29 '23 at 16:54

0

Another approach is to use a library called react-native-fast-image, which is a performant image-loading library for react-native. It loads images as quickly as possible, and also supports SVG files.

and the delay you're experiencing when switching to a screen containing SVG is likely due to the fact that the SVG images are being loaded asynchronously, which can cause a delay in the rendering of the screen.

answered Jan 29 '23 at 16:54

ABDULLAH

550
3
13

All the svg images are stored locally so i guess react-native-fast-image wont help? But i will try :) – Quantal Jan 29 '23 at 17:06
It seems not to work with local stored svg :( – Quantal Jan 29 '23 at 18:28

Loading delay when using react-native-svg

1 Answers1