Using SVG heavily in an app can degrade its performance, therefore use it with parsimony. And if you do, the app performance will be fine. Now, if you are working from an original design in Sketch or Illustrator, you won’t be able to simply copy and paste the SVG into your React Native project but things are almost that simple. There is also a great project that converts SVG code to JSX.

If you work from an original design in Sketch or Illustrator you can start implementing your React Native SVG component from the SVG of the original design.

Below are two examples of subtle SVG use in an app. Hopefully these examples can help you build a nice strategy when approaching your own use-case.

The Airbnb Chat Box

In the Airbnb chat message example, each message is a row composed of three components: the message, the chat bubble corner, and the avatar. Below is the anatomy of the chat message.

The last step consist in positioning the avatar with a left offset of half its size. That way it will appear above the SVG corner. And below is the pseudo code of how it looks like.

Stacked Avatars

To implement the stacked avatars from Sketch elements, I first copied the SVG code from the sketch file, below is how the code looks like.

Unfortunately, the Pattern element is not supported in react-native-svg. However the same effect can be achieved using ClipPath which is supported.

That’s all folks!

Is this story useful? How do you use SVG in your React Native projects Looking forward to read your thoughts.

Interested by a strong starter kit for React Native? Checkout React Native Sketch Elements.