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.
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.
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.