@shopify/react-native-skia: Custom Drawing, Shaders, and GPU-Accelerated UI

Standard React Native views excel at application UI, but data visualization, creative tooling, and bespoke transitions sometimes need direct control over 2D drawing. Skia, the graphics engine behind Chrome and Flutter, is exposed to React Native via @shopify/react-native-skia, enabling GPU-backed canvases with shader programs and path operations.

Canvas lifecycle and invalidation

Skia surfaces redraw when props change or animation drivers tick. Avoid unnecessary full canvas clears when differential updates suffice. Batch draw calls within frames to minimize GPU state changes.

Shaders and complexity

Runtime effects and fragment shaders unlock gradients, blur, and distortion—at the risk of thermal throttling on older phones. Profile frame time distributions, not averages, under sustained animations.

Integration with Reanimated

Drive Skia properties from shared values on the UI thread when possible to avoid bridge round trips. Keep worklets pure and side-effect free across frames.

Accessibility and fallbacks

Decorative canvases may be invisible to assistive technologies—provide textual summaries or alternative representations for critical data. Offer reduced motion variants.

When not to use Skia

Simple charts may be satisfied by SVG or WebView-hosted libraries with lower integration cost. Adopt Skia when interaction fidelity or shader effects justify maintenance overhead.

Summary

GPU paths demand disciplined profiling on minimum supported devices defined by product—not only flagship handsets used in development.