React Native Skia — Best Practices & Performance Guide

@shopify/react-native-skia 2.x / React Native >= 0.79 / React >= 19 / Reanimated v3+

Critical Rules

1. Never read .value in JSX render — pass shared values directly as props: <Circle cx={x} /> not <Circle cx={x.value} />.
2. Never create Skia objects in render — use useMemo for Paint, Path, PictureRecorder, RuntimeEffect.
3. Always mark worklet functions with "worklet" directive in useDerivedValue callbacks.
4. Animate properties, not structure — keep the component tree static; only animate numeric/color props.
5. Use Atlas for 10+ similar elements — single draw call beats N individual components.
6. Reuse Paint and PictureRecorder objects — creating per frame causes GC pressure and frame drops.
7. Prefer retained mode for UI animations (near-zero FFI cost); use immediate mode (Picture API) only for variable draw command counts (particles, generative art, games).
8. Use BlurMask over Blur for simple shapes — it's cheaper.
9. Order filters cheapest-first — MatrixColorFilter before Blur.
10. Load fonts/images at component level with useFont/useImage — handle null loading state before rendering.

Version Compatibility