React native: is it recommended to use PNG or SVG images?

Question

I'm working on a react-native project and I have over 30 icons of SVG format. I want to know if it is recommended to convert those images to PNG or it's better to use as SVG files. If it's better to use images as SVG what is the best way to show SVG file on react native?

Answer 1

You can always prefer svgs over pngs as the latter are heavy to render.

To render svg assets you can use react-native-svg.It's the best i found for react-native.But it is not fully complete.You can't show filters and shadows using this package.For that use the pngs instead.

Answer 2

SVG is not always the best solution. If your SVG is not optimized and has lots of Paths / Lines or if you need to use it many times over, it can generate a lot of views and slow down your app.

Best answer is it depends.

Answer 3

Prefer PNG over SVG for react-native apps because its rendering is less CPU intensive, and comparing to web apps user don't need to load all images on each app launch but only on installation, so the size doesn't matter that much.

Just make sure you provide three (or at least the last two) sizes:

image.png
[email protected]
[email protected]