Skia is an open-source, high-performance 2d Graphics library that works across a variety of software & hardware. Skia uses platform-specific graphics API which makes it very efficient and swift.
Engineers at Shopify created a library for React Native developers to add 2d graphics in mobile applications using Skia. Skia serves as the graphics engine for Chrome OS, Google Chrome, Flutter, Android, Firefox & many other products. Expo also supports React Native Skia.
React Native Skia is still in alpha release & is informed to use with caution.
In this blog, we will explore how to use React Native Skia in our projects. To get it installed using yarn:
yarn add @shopify/react-native-skiaor using npm
npm install @shopify/react-native-skiaHello World!
React Native Skia offers two APIs: a declarative API and an imperative API. The recommended way to use this library is using the declarative API. Developers may take advantage of the imperative API to add custom features.
Result:
Canvas
Canvas component is the root of your Skia drawing. You can treat canvas as a parent View component.
Group
Group component is an essential construct in React Native Skia. Group components can be deeply nested with one another.
React Native Skia offers a wide range of APIs such as advanced image filters, shaders, SVG, path operations, vertices, and text layouts.
After using Skia I have strong feelings that the way of creating UI in React Native will change. React Native Skia uses the full potential of the new React Native architecture (JSI) and the new renderer, it will surely increase our React Native application’s performance.
Thanks for reading, Don’t forget to share your thoughts in the comment section!
