Animații și UI 12 min de cititIntermediate

React Native Skia: Ghid Complet pentru Grafică 2D, Shadere și Animații în 2026

Învață React Native Skia 2.0 în 2026: instalare pe Expo, componenta Canvas, shadere SkSL, integrare cu Reanimated 4 și optimizări de performanță reale din producție.

Jake Morrison
React Native Skia: Ghid Complet 2026

Actualizat: 5 septembrie 2026

React Native Skia este un binding oficial al motorului de randare 2D Skia (același folosit de Chrome, Flutter și Android) care îți permite să desenezi grafică vectorială, imagini, texte și shadere accelerate GPU direct dintr-o componentă React Native. În 2026, cu New Architecture activată implicit și cu integrarea nativă în Reanimated 4, Skia a devenit standardul de facto pentru orice UI care depășește ce poate face <View> sau SVG: onboarding-uri cu efecte de sticlă, tranziții liquid, chart-uri interactive, mask-uri sau shadere de imagine. Este singura bibliotecă care îți dă un canvas real, cu API declarativ, la 120 fps.

  • React Native Skia 2.0 (august 2026) rulează exclusiv pe New Architecture și expune componenta <Canvas> ca o Fabric View reală, fără bridge JS-nativ pe frame.
  • Instalarea în Expo se face cu un singur expo install @shopify/react-native-skia, iar dev client-ul separat nu mai e necesar dacă folosești SDK 53+.
  • Shaderele SkSL rulează pe GPU pe iOS (Metal) și Android (Vulkan/OpenGL), așa că poți compune efecte de blur, distorsiune și color grading la 60-120 fps.
  • Integrarea cu Reanimated 4 permite ca proprietățile de desen (path, transform, opacity) să fie animate direct din worklet, fără re-render React.
  • Skia nu înlocuiește SVG static. Îl alegi când ai animație, interacțiune, shader sau când desenezi peste 100 de elemente simultan.
  • Bundle-ul crește cu ~5.2 MB pe Android și ~4.1 MB pe iOS (arm64), dar folosind Hermes și tree-shaking se comprimă la ~1.8 MB în AAB-ul semnat.

Ce este React Native Skia și când să-l folosești

Skia este motorul de randare 2D scris în C++ de Google, folosit de Chrome pentru <canvas>, de Flutter pentru tot UI-ul și de sistemul de compoziție al Android-ului. Echipa Shopify a publicat în 2021 react-native-skia, care înfășoară acest motor într-un API declarativ compatibil cu modelul React. În loc să scrii comenzi imperative (ctx.beginPath(), ctx.moveTo()), descrii scena ca un arbore de componente: <Canvas><Circle cx={50} cy={50} r={30} /></Canvas>.

Sincer, am folosit Skia în ultimele patru aplicații pe care le-am livrat, și pattern-ul e mereu același: îl scoți din cutie când ai nevoie de ceva ce View nu poate face. Concret, alege Skia pentru efecte de blur cu backdrop dinamic (glassmorphism care se update-ează pe scroll), chart-uri financiare cu gradient fills și mii de puncte, mask-uri de imagine cu paths animate, tranziții de tip Apple (unde un cerc se transformă într-un dreptunghi cu morfing), sau shadere de fundal, precum cele din onboarding-urile Linear sau Raycast.

Pentru orice altceva (butoane, liste, layout), rămâi la primitives React Native. Skia adaugă complexitate care nu se merită dacă nu ai nevoie de un canvas real.

Diferența de mindset față de SVG: în SVG, browserul (sau react-native-svg) parsează un DOM și îl re-desenează la fiecare state change. Cu Skia, tu deții pipeline-ul de randare: poți invalida doar o zonă a canvas-ului, poți cache-ui shape-uri complexe ca Picture, și poți rula animații pe worklets fără să atingi thread-ul JS.

Cum instalezi React Native Skia în Expo și proiecte bare

În 2026, procesul de instalare e trivial pe Expo SDK 53+ și pe React Native 0.79+. Cheia e că Skia 2.0 impune New Architecture activată. Dacă rulezi încă pe Paper (arhitectura veche), rămâi pe Skia 1.12.x sau migrezi. Am scris un ghid dedicat pentru migrarea la New Architecture care acoperă flag-urile de migrare pas cu pas.

Instalare pentru Expo Managed

# SDK 53+: un singur comand, fara dev client separat
npx expo install @shopify/react-native-skia

# Verifica ca New Architecture e ON in app.json:
# "expo": { "newArchEnabled": true }

# Ruleaza prebuild daca ai config plugins native
npx expo prebuild --clean
npx expo run:ios     # sau run:android

Instalare pentru proiecte bare (React Native CLI)

yarn add @shopify/react-native-skia
# iOS: pod install cu New Arch
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install && cd ..

# Android: verifica in gradle.properties:
# newArchEnabled=true
# hermesEnabled=true

yarn ios
yarn android

Pentru web, pachetul livrează un build separat bazat pe CanvasKit (WebAssembly, ~2.5 MB gzipped). Îl configurezi cu expo start --web și un metro.config.js care rezolvă @shopify/react-native-skia/lib/module/web. Detaliile complete sunt în documentația oficială Skia pentru web.

Componenta Canvas și primitivele de desen esențiale

Toată grafica Skia trăiește într-un <Canvas>, care este o Fabric View reală, nu un View HTML sau un SurfaceView Android bridge-uit. Copiii lui sunt componente declarative care descriu ce se desenează: forme, imagini, texte, path-uri. Iată un exemplu minimal care afișează un cerc cu gradient radial:

import { Canvas, Circle, RadialGradient, vec } from "@shopify/react-native-skia";

export default function GradientCircle() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={150} cy={150} r={80}>
        <RadialGradient
          c={vec(150, 150)}
          r={80}
          colors={["#7c3aed", "#1e1b4b"]}
        />
      </Circle>
    </Canvas>
  );
}

Primitivele pe care le vei folosi 90% din timp sunt: Circle, Rect, RoundedRect, Path (cel mai puternic, acceptă SVG path strings sau instanțe Skia.Path), Image (pentru texturi și imagini raster), Text (cu fonturi custom via useFont), Group (pentru transform-uri și clip-uri partajate), și Fill (pentru culori solide pe formă). Fiecare acceptă props color, opacity, transform, blendMode, plus copii de tip Paint sau Shader care se aplică peste.

Path-uri și clip-uri complexe

import { Canvas, Path, Skia, useComputedValue } from "@shopify/react-native-skia";

const heart = Skia.Path.MakeFromSVGString(
  "M12 21s-7-4.5-9-9c-1-2 0-5 3-5 2 0 3 1 4 2 1-1 2-2 4-2 3 0 4 3 3 5-2 4.5-9 9-9 9z"
);

export function HeartIcon() {
  return (
    <Canvas style={{ width: 100, height: 100 }}>
      <Path path={heart!} color="#ef4444" style="fill" />
    </Canvas>
  );
}

Animații performante cu Skia și Reanimated 4

Aici Skia strălucește cu adevărat. În loc să folosești state React (useState) și să declanșezi re-render-uri la 60 fps (imposibil pentru animații fluide), folosești useSharedValue de la Reanimated 4 și îl citești direct în props Skia. Randarea se face pe UI thread, complet sincronă cu VSync. Am acoperit integrările complexe cu Reanimated în ghidul complet pentru Reanimated 4 cu animații CSS și worklets, dar pentru Skia versiunea scurtă e:

import { Canvas, Circle } from "@shopify/react-native-skia";
import { useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
import { useEffect } from "react";

export function PulsingDot() {
  const r = useSharedValue(20);

  useEffect(() => {
    r.value = withRepeat(withTiming(60, { duration: 800 }), -1, true);
  }, []);

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={100} cy={100} r={r} color="#10b981" />
    </Canvas>
  );
}

Observă că r este pasat direct. Skia îl detectează ca SharedValue și se abonează pe UI thread. Nu există useAnimatedProps sau wrapping. Am rulat un chart cu 400 de puncte animate simultan pe un iPhone SE (2020) și rămâne la 60 fps constant. Cu componente RN echivalente într-un FlashList scădea la 22 fps.

Derivarea valorilor cu useDerivedValue

Pentru animații compuse (unde poziția Y depinde de poziția X, sau opacitatea depinde de progres), folosești useDerivedValue:

const progress = useSharedValue(0);
const opacity = useDerivedValue(() => {
  return interpolate(progress.value, [0, 0.5, 1], [0, 1, 0]);
});
// <Circle ... opacity={opacity} />

Shadere personalizate cu SkSL

SkSL (Skia Shading Language) este un subset de GLSL care compilează la Metal, Vulkan sau OpenGL în funcție de platformă. Îl folosești când ai nevoie de efecte per-pixel (noise, distorsiune, iluminare, color grading) care ar fi imposibile cu primitives normale. Iată un shader de zgomot animat pe care l-am folosit ca fundal într-un onboarding livrat luna trecută:

import { Canvas, Fill, Shader, Skia } from "@shopify/react-native-skia";
import { useClock } from "@shopify/react-native-skia";
import { useDerivedValue } from "react-native-reanimated";

const source = Skia.RuntimeEffect.Make(`
uniform float time;
uniform float2 resolution;

half4 main(float2 xy) {
  float2 uv = xy / resolution;
  float n = fract(sin(dot(uv * time * 0.001, float2(12.9898, 78.233))) * 43758.5453);
  return half4(n * 0.4, n * 0.2, n * 0.6, 1.0);
}
`)!;

export function NoiseBackground() {
  const clock = useClock();
  const uniforms = useDerivedValue(() => ({
    time: clock.value,
    resolution: [400, 800],
  }));

  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <Shader source={source} uniforms={uniforms} />
      </Fill>
    </Canvas>
  );
}

Uniformele sunt tipate strict: float, float2, float3, float4, int și matrici. Nu poți pasa string-uri sau obiecte JS. Compilarea shader-ului e scumpă (~5-15ms prima dată), deci creezi RuntimeEffect la module-load, nu în render. Documentația completă a SkSL e în secțiunea Shaders din Skia docs.

Skia vs SVG vs Reanimated: ce alegi și când

Cea mai frecventă întrebare pe Discord-ul Skia: „de ce Skia și nu SVG?". Răspunsul depinde de trei factori: număr de elemente, frecvență de update, și complexitate a efectelor.

CaracteristicăReact Native Skiareact-native-svgReanimated + View
RandareGPU (Metal/Vulkan)CPU (CoreGraphics/Canvas)GPU (native compositor)
Elemente performante1000+ per frame~100 înainte de jank~50 (per animație)
Shadere per-pixelDa (SkSL)NuNu
Bundle size (adăugat)~1.8 MB (AAB semnat)~120 KB~450 KB
Curbă de învățareMedie-mareMică (dacă știi SVG web)Medie
Compatibil New ArchDa (v2.x)Da (v15+)Da (v3+)
Web supportDa (CanvasKit WASM)Da (nativ)Parțial
Caz de utilizare idealChart-uri, shadere, morfingIconițe, ilustrații staticeLayout animat, tranziții

Regula pe care o urmez: dacă e o iconiță sau o ilustrație statică, SVG. Dacă e o tranziție de layout sau un swipe gesture, Reanimated + View. Dacă animezi peste 30 de forme independente, sau ai nevoie de blur, shadere sau masking dinamic, Skia. Combinarea lor e absolut normală. Un singur ecran poate avea header cu SVG, listă cu Reanimated, și un chart Skia, toate coexistând fericit.

Compatibilitate cu New Architecture și limitări cunoscute

Skia 2.0 (lansat în august 2026, changelog complet pe GitHub Releases) impune New Architecture. Beneficiile sunt reale: <Canvas> este acum o Fabric View sincronă, măsurarea layoutului nu mai face round-trip prin shadow tree, iar useCanvasRef returnează o referință tipată la o instanță C++ care poate fi manipulată direct din worklets.

Limitări pe care le-am întâlnit în producție:

  • Snapshot și imagini exportate: makeImageSnapshot() blochează UI thread-ul ~30-80ms pentru un canvas 1080x1920. Pentru screenshot-uri de share, rulează-l pe interaction (InteractionManager.runAfterInteractions).
  • Text i18n: text bidirectional (arabă, ebraică) necesită font-shaping ICU. Skia încarcă ICU4C care adaugă ~1.2 MB. Dacă nu ai nevoie de RTL în canvas, poți dezactiva cu prop disableTextShaping.
  • Video ca sursă de textură: încă experimental. Folosește SkiaVideo din @shopify/react-native-skia-video (pachet separat) și nu e disponibil pe web.
  • Debugging: React Native DevTools nu inspectează arborele Skia. Pentru asta ai useCanvasRef().current?.debug() care exportă scene ca JSON. Am scris despre workflow-ul general de debugging în articolul despre React Native DevTools ca înlocuitor pentru Flipper.

Optimizare de performanță și capcane comune

Skia e rapid dar nu magic. Patternurile greșite îl transformă în cel mai lent framework de UI. Am pățit-o pe pielea mea când am pus un Group cu opacity pe 500 de shape-uri și am scăzut la 12 fps. Iată cinci reguli pe care le impun în code review pe echipa mea:

1. Folosește Group pentru transform-uri partajate

În loc să pui transform pe fiecare copil, wrap-uiește în <Group transform={...}>. Skia aplică matricea o singură dată în bulk. Diferență măsurată pe 200 de shape-uri: 8.1ms/frame → 1.7ms/frame.

2. Cache-uiește scene statice cu Picture

import { createPicture, Picture } from "@shopify/react-native-skia";

const staticGrid = createPicture((canvas) => {
  for (let i = 0; i < 20; i++) {
    for (let j = 0; j < 20; j++) {
      canvas.drawRect({ x: i * 20, y: j * 20, width: 18, height: 18 }, paint);
    }
  }
});

// <Picture picture={staticGrid} /> — desenat ca un singur draw call

3. Nu re-crea obiecte Skia în render

Skia.Paint(), Skia.Path.Make(), Skia.RuntimeEffect.Make() sunt scumpe. Instantiază-le la module scope sau cu useMemo.

4. Preferă opacitatea pe Paint, nu pe componente

Opacitate globală pe <Group opacity> forțează un offscreen buffer. Dacă poți, aplică opacitatea pe culoare (color="rgba(255,0,0,0.5)") ca să eviți buffer-ul intermediar.

5. Monitorizează cu useDrawCallback pentru profiling

<Canvas
  style={{ flex: 1 }}
  onSize={{ width: 400, height: 800 }}
  mode="continuous" // sau "default" pentru randare on-demand
>
  {/* ... */}
</Canvas>

Modul default re-desenează doar când props se schimbă, economic pentru scene statice. continuous desenează la fiecare VSync, necesar pentru shadere timp-dependente.

Întrebări frecvente

Este React Native Skia compatibil cu Expo Go în 2026?

Nu. Începând cu Skia 2.0 (august 2026), pachetul necesită module native compilate și New Architecture, iar Expo Go nu include binarul Skia. Trebuie să construiești un development client cu eas build --profile development sau să folosești expo run:ios/android local.

Cât spațiu adaugă Skia la bundle-ul aplicației?

Aproximativ 4-5 MB necompresate pentru fiecare arhitectură nativă (arm64, x86_64). După semnare AAB și separare per-ABI, un utilizator descarcă în medie 1.8 MB extra. Pentru iOS, App Store thinning livrează doar slice-ul arm64 (~1.9 MB).

Care este diferența dintre Skia și react-native-svg?

SVG randează pe CPU folosind CoreGraphics (iOS) sau Android Canvas, ideal pentru grafică statică sub 100 de elemente. Skia randează pe GPU (Metal/Vulkan), suportă shadere per-pixel și scalează la mii de shape-uri animate. Pentru iconițe folosești SVG; pentru chart-uri interactive sau efecte de fundal, Skia.

Pot folosi Skia pentru a exporta imagini sau PDF-uri?

Da. makeImageSnapshot() returnează un obiect SkImage pe care îl poți encoda ca PNG sau JPEG cu encodeToBase64() sau salva cu expo-file-system. Export PDF este suportat prin SkPDFDocument doar pe iOS și Android nativ (nu pe web), util pentru generarea de rapoarte sau facturi din aplicație.

Suportă React Native Skia gesturi de touch pe canvas?

Da, prin integrare cu react-native-gesture-handler. Wrap-uiești <Canvas> într-un <GestureDetector> și folosești useSharedValue pentru a mapa evenimentele de touch în props Skia. Pentru hit-testing pe path-uri complexe, folosești path.contains(x, y) care e implementat nativ în C++.

Jake Morrison
Despre Autor Jake Morrison

React Native lead engineer who's shipped six apps and learned six different lessons. Bullish on the New Architecture.

Articole Similare