RN-Skia — use case (canvas, charts, blur, glassmorphism)?

@shopify/react-native-skia mang Skia engine (2D graphics của Google, dùng trong Chrome/Flutter) vào RN. Cho phép vẽ canvas-style với GPU acceleration.

Use case:

1. Custom canvas drawing: logo animated, signature pad, drawing app.

<Canvas style={{ flex: 1 }}>
  <Circle cx={100} cy={100} r={50} color="cyan" />
  <Path path="M 0 0 L 100 100" color="red" />
</Canvas>

2. Charts performance: Victory/D3 trong RN render qua SVG, lag với 1000+ data point. Skia render qua GPU, smooth với 10k+ point.

3. Blur backdrop / glassmorphism: built-in Blur filter, áp lên image hoặc layer trên — iOS-quality blur trên cả Android.

<Image image={img} fit="cover" />
<Blur blur={20} />

4. Image filters / shaders: color tint, ColorMatrix, BlendMode (multiply, overlay, etc), runtime SkSL shader (custom GLSL-style code).

5. Particle/animation phức tạp: kết hợp Reanimated shared value + Skia animated value → 60fps animation 1000+ particle.

Lợi:
- Performance ngang Flutter cho graphics nặng.
- Cross-platform pixel-perfect (giống Flutter).
- GPU-accelerated.

Nhược:
- Bundle size +~3MB.
- Learning curve: Skia API ≠ Canvas web ≠ React Native.
- Debugger limited (canvas content không tương tác bằng inspector).

Khi nào KHÔNG dùng:
- UI thường (button, list, form) — overhead không xứng.
- Animation đơn giản — Reanimated transform đủ.
- App size critical (banking app yêu cầu APK <30MB).

@shopify/react-native-skia brings Skia (Google's 2D graphics engine, used in Chrome/Flutter) to RN. Lets you draw canvas-style with GPU acceleration.

Use cases:

1. Custom canvas drawing: animated logos, signature pads, drawing apps.

<Canvas style={{ flex: 1 }}>
  <Circle cx={100} cy={100} r={50} color="cyan" />
  <Path path="M 0 0 L 100 100" color="red" />
</Canvas>

2. Chart performance: Victory/D3 in RN renders via SVG and lags past 1,000+ points. Skia renders on the GPU, smooth past 10k.

3. Blur backdrop / glassmorphism: built-in Blur filter on top of an image or layer — iOS-quality blur on Android too.

<Image image={img} fit="cover" />
<Blur blur={20} />

4. Image filters / shaders: color tint, ColorMatrix, BlendMode (multiply, overlay, etc.), runtime SkSL shaders (custom GLSL-style code).

5. Complex particle/animation: combine Reanimated shared values + Skia animated values → 60 fps with 1,000+ particles.

Pros:
- Performance close to Flutter for heavy graphics.
- Pixel-perfect cross-platform (like Flutter).
- GPU-accelerated.

Cons:
- Bundle size +~3 MB.
- Learning curve: Skia API ≠ Web Canvas ≠ React Native.
- Limited debugger (canvas content is not inspectable).

When NOT to use it:
- Regular UI (buttons, lists, forms) — overhead is not worth it.
- Simple animation — Reanimated transforms suffice.
- App-size critical (banking apps capped at <30 MB APK).