$ show wcandillon/react-native-skia
This repository is a high-performance 2D graphics library for React Native, wrapping the Skia graphics engine. It provides both a declarative JSX component API (Canvas, Group, Circle, Path) and an imperative Skia API, rendering on iOS, Android, macOS, and Web via CanvasKit WASM. The core architecture uses a custom React reconciler to convert the component tree into a command list, which is then replayed onto a Skia canvas, supporting GPU acceleration through Skia's Graphite backend and WebGPU via Dawn. The library's primary data flow involves recording drawing commands from the declarative tree or imperative API, then replaying them on the target platform's rendering backend. It deeply integrates with react-native-reanimated for declarative animations and react-native-worklets for multi-threaded rendering. The codebase is a monorepo with a core package, an extensive example app, a Docusaurus documentation site, and a headless Node.js rendering mode. Notable engineering highlights include a well-implemented Command Pattern for the recording/replay system, a sophisticated singleton Shared WebGL Context for managing browser context limits, a pure worklet-safe 3D math library, and a robust C++ template system for JS-to-native type conversion. These components demonstrate high craftsmanship and are safely reusable in other projects. The project is actively maintained with frequent commits and responsive issue triage. However, it exhibits medium technical drift due to its heavy reliance on patched versions of Skia and Dawn, an incomplete web API surface, and the coexistence of two JSI object models. The complex multi-platform build system is a significant maintenance burden.
The LLM identified 5 files worth highlighting for reuse:
Implements a Command Pattern to decouple the declarative React component tree from imperative Skia drawing calls. The Recorder compiles nodes into typed commands, the Player replays them onto a canvas. This pattern is reusable for any system needing to serialize, transmit, and replay rendering operations (e.g., remote desktop, collaborative editing, test recording). The ReanimatedRecorder variant demonstrates deep integration with shared-value animation systems for efficient multi-threaded updates.
Solves the browser limitation of a maximum number of WebGL contexts by implementing a singleton shared context. It manages a surface cache, handles context loss/restore events, and uses lease-based generation checks to ensure stale surfaces are not used. This is a highly reusable pattern for any web application that needs to render multiple views using WebGL (e.g., game engines, data visualization dashboards, map renderers).
A pure, dependency-free module for 3D matrix operations (transforms, camera projections, inversion). It is explicitly designed to be safe for execution in constrained runtimes like Web Workers or Reanimated Worklets. This is a high-quality, reusable linear algebra utility that can be extracted and used in any project requiring 3D math without external dependencies.
A sophisticated C++ template system for converting JavaScript values to native Skia types. It handles optional values, arrays, enums, and complex nested objects with a clean, declarative API. This pattern is highly reusable for any native module (JSI, FFI) that needs to bridge JS and C++ types safely and efficiently, demonstrating deep understanding of both C++ metaprogramming and JS runtime semantics.
A self-contained, well-tested CSS color parser that handles named colors, hex, rgb(a), hsl(a) and converts them to a normalized Float32Array. This is a classic 'hidden gem' utility that solves a universal problem in graphics and web development. It can be cleanly extracted and used in any project requiring robust color string parsing.