SVG support in React Native via 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 and starter kits. react-native-svg React Native Sketch Elements Ting 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 are exclusively done using the <View> component. Fiber 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 _After two months in the making, React Native Sketch Elements is finally here. React Native Elements covers a wide…_hackernoon.com React Native Sketch Elements

AirBnB

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Subtle Use of SVG in React Native

Too Long; Didn't Read

Company Mentioned

William Candillon

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Subtle Use of SVG in React Native

Too Long; Didn't Read

Company Mentioned

William Candillon

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES