Logo of patwoz.de

react-native-svg: You might not need it

When joining a new project I mostly see the usage of react-native-svg and in all of them there was no need to use it at all.

SVG over PNG

What advantages has svg over png?

  • One file
  • Scalable without quality loss
  • Coloring by fill and stroke
  • SVGs can reduce bundle size, but this only holds if many SVGs are used, as library sizes also impact the total bundle.

What disadvantages?

  • You need a extra library (probably two of them if you use react-native-svg-transformer)
  • You have to maintain the library as dependency (That means it could also break when upgrading react-native!)
  • Extra cost of runtime performance

PNG over SVG

What advantages of using png over svg?

  • No extra library. Displaying images are built-in into react-native
  • The built-in tintColor property allows color adjustments without extra libraries.

What are the disadvantages?

  • The image must be exported in 3 resolutions (1x, 2x, 3x), but this is straightforward in tools like Figma.
  • Larger bundle size (But only if you exceed the size of the libraries)

When to use react-native-svg

There is only one case where it is technically required to use react-native-svg: If you have to change fill and stroke at runtime and you don't know the colors at build time.

If you know the colors at build time, just create multiple versions of the image and you are just fine.

When not to use react-native-svg

But if you have icons and images which are completly colored by just one color, just use tintColor.

<Image tintColor="red" />

That's it! Thanks for reading!