React Native Skia At Shopify
Article Summary
Christian Falch and William Candillon from Shopify just solved React Native's biggest weakness. They brought Skia (the graphics engine powering Chrome, Android, and Flutter) directly to React Native developers.
Shopify open-sourced React Native Skia to give mobile developers powerful 2D drawing primitives that work consistently across iOS, Android, and Web. The project leverages React Native's new JSI architecture for direct JavaScript-to-native communication and offers both imperative and declarative APIs compatible with Flutter's drawing system.
Key Takeaways
- Uses JSI for direct JS-to-native communication, eliminating async bridge bottlenecks
- Provides Flutter-compatible API enabling eventual CanvasKit web support
- Integrates with Reanimated 2 for performant animations on dedicated thread
- Unlocks advanced features: drop shadows, backdrop filters, mesh gradients, SVG rendering
- Bridges designer-developer gap by matching Figma's UI capabilities
React Native developers can now access the same production-grade graphics engine that powers Chrome and Android, with a declarative React API that matches Flutter's completeness.
About This Article
React Native couldn't match the graphical capabilities of design tools like Figma. This left graphic designers and developers struggling to communicate, since developers couldn't build the same UI features that designers created.
Shopify used React Native's JavaScript Interface (JSI) to expose the Skia API directly. This allowed C++ to communicate between JavaScript and native modules without relying on asynchronous bridge messages.
Developers can now use advanced drawing primitives like drop shadows, backdrop filters, mesh gradients, and SVG rendering. These features didn't exist in React Native before. The declarative API matches what Flutter offers.
