React Native Skia—For Us, For You, and For Fun

Summary

React Native Skia brings Skia’s cross-platform 2D drawing primitives to React Native, with the stated goals of improving its limited graphical capabilities and aligning designers and developers around capabilities comparable to Figma. The integration uses React Native’s JavaScript Interface (JSI), enabling direct JavaScript-to-native communication through C++ rather than asynchronous messages, and exposes an API described as virtually 100% compatible with Flutter’s. On top of the imperative API, a declarative layer uses the React Reconciler to diff internal representation states and send changes to the Skia engine, supporting composable drawings and declarative optimizations. The library includes image filters, shaders, SVG, path operations, vertices, text layouts, mesh gradients, shadows, backdrop blur, and animations, with a direct connector to Reanimated 2; the authors expect it to address a major React Native pain point and describe the work as just beginning.

Context

React Native is described as having limited graphical capabilities. The project also aims to bridge graphic designers and React Native developers by providing UI capabilities comparable to those of tools such as Figma.

Approach / What changed

React Native Skia integrates Skia through React Native’s JavaScript Interface, using direct JavaScript-to-native communication through C++ and an API designed to be virtually 100% compatible with Flutter’s. It adds a declarative API using the React Reconciler to diff internal representation states, supports composable drawings and declarative optimizations, and connects animations to Reanimated 2.

Takeaways

• JSI enables direct communication between JavaScript and native modules through C++, replacing asynchronous messages between the two sides.
• The declarative API passes differences from React Reconciler state diffing to the Skia engine and is layered over an imperative API.
• Supported capabilities include advanced image filters, shaders, SVG, path operations, vertices, text layouts, mesh gradients, shadows, backdrop blur, and animation.

Related reading