Skia Comes to React Native

Skia is the cross-platform 2D drawing library that powers Chrome, Android, Flutter, and now React Native. It provides a set of drawing primitives developers can rely on across iOS, Android, macOS, Windows, Linux, and the browser. Shopify has released React Native Skia as an open source project to bring those same primitives to React Native, an ecosystem not known for rich graphical capabilities.

One goal is to give React Native developers access to graphics features that weren't previously available to them. The other is to bridge the gap between designers and developers. By using the same drawing vocabulary found in tools like Figma, the project aims to reduce friction between design and implementation.

Skia logo image. The background is back and Skia is displayed in cursive rainbow font in the middle of the screen
React Native Skia logo

The Architecture Behind the API

React Native Skia relies on the new React Native architecture and the JavaScript Interface (JSI). Unlike the asynchronous messaging between JavaScript and native modules in earlier approaches, JSI enables direct communication through C++. This lets the project expose the Skia API directly to JavaScript.

The team has made the API almost 100% compatible with Flutter's drawing API. The decision was deliberate: it lets the project leverage a mature, complete drawing API, and it paves the way for react-native-web support using CanvasKit, the Skia WebAssembly build that Flutter uses for web applications.

While the low-level API is imperative, React Native Skia. One of those improvements is a declarative layer on top of it. This allows developers to express complex drawings with composable primitives. Under the hood, the implementation uses the React Reconciler to diff the internal representation states, passing only the differences through to the Skia engine.

What's In the Box

The library includes a wide range of APIs, covering advanced image filters, shaders, SVG, path operations, vertices, and text layouts. The demo below shows some drawing primitives that haven't been available to the React Native ecosystem, including drop and inner shadows in buttons, an angular gradient on a progress bar, and a bottom sheet rendered with a backdrop filter that blurs the content beneath it.

Gang, please use those shadows responsibly 😉 pic.twitter.com/3TlIXbiMBc

— William Candillon (@wcandillon) March 21, 2022

In last week's tutorial, we looked at two ways of building mesh gradients with React Native Skia. The first one using vertices. pic.twitter.com/tBt2O3lkT3

— William Candillon (@wcandillon) April 7, 2022

Animations and the Reanimated Connector

Reanimated 2, another Shopify-supported project, made it possible to write React Native animations in JavaScript on a dedicated thread. React Native Skia animations work the same way. For cases where a drawing animation depends on an external view—say, a React Native gesture handler—there is also a direct connector to Reanimated 2.

Example of the Breathe code animated

Getting Started

React Native Skia is available now via npm install @shopify/react-native-skia. The project is open source, and the team describes the current release as only the beginning, with more features in active development.