Subtle Use of SVG in React Native

SVG support in React Native via react-native-svg can help you enhancing the visual design of your app in subtle ways that could make a big difference to the look and feel of your app. The two examples below respectively come from the React Native Sketch Elements and Ting starter kits.

The stacked avatars on the right are done in Svg. Its path value was directly copied from Sketch

These chat boxes cloned from the airbnb app have their bottom corner done in Svg

Only use Svg where necessary. These animated shapes from Fiber are exclusively done using the <View> component.

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.

React Native Sketch Elements_After two months in the making, React Native Sketch Elements is finally here. React Native Elements covers a wide…_hackernoon.com