React Native Skia em 2026: Guia Completo de Gráficos GPU, Shaders e Animações no Expo

Atualizado: 1 de julho de 2026

O React Native Skia é uma biblioteca da Shopify que expõe o motor gráfico 2D Skia (o mesmo que roda no Chrome, no Android e no Flutter) dentro do React Native, permitindo desenhar canvas com aceleração de GPU, shaders SKSL, filtros de imagem e animações de 60/120 FPS. Em 2026, na versão 2.6.x com Expo SDK 55 e React Native 0.79+, ele virou a escolha padrão para gráficos customizados: charts, jogos 2D leves, drawings, efeitos visuais e qualquer UI que a stack de views nativas não consegue entregar sem travar.

• React Native Skia 2.6 exige React Native 0.79+ com Nova Arquitetura (Fabric) e integra com Expo SDK 55 usando o template with-skia.
• A API é declarativa: você escreve <Canvas><Circle /></Canvas> em JSX e o motor C++ cuida do rendering na GPU.
• Skia integra nativamente com Reanimated 4. O SharedValue pode ser passado direto como prop, sem createAnimatedComponent.
• A migração para Fabric trouxe animações até 50% mais rápidas no iOS e cerca de 200% no Android, com uma display list imutável que elimina race conditions no renderer concorrente.
• Shaders SKSL, Skottie (Lottie nativo) e filtros de imagem GPU-acelerados ampliam o que você pode fazer sem escrever código nativo.
• Suporte web via CanvasKit funciona out-of-the-box no template do Expo, permitindo uma única base de código para iOS, Android e navegador.

O que é React Native Skia?

React Native Skia é um wrapper declarativo em torno da biblioteca gráfica Skia, o mesmo motor 2D que o Google mantém e que renderiza pixels no Chrome, no Android nativo e no Flutter. Em vez de você desenhar em views nativas (UIView/Android View) e pagar o custo de layout, hit-testing e bridge, você desenha diretamente num display list que vai para a GPU numa única draw call. Isso muda o que é viável na UI: gráficos com 5.000+ pontos, efeitos que antes exigiam WebGL, jogos 2D simples e animações complexas rodam de forma estável no thread da UI.

Já shippei seis apps em React Native e o padrão se repete. Em cada um chegou um momento em que a UI pedia algo que View+Animated não entregava sem gastar 30 FPS. Antes de 2023, a resposta era escrever código nativo ou aceitar o custo. Honestamente, depois do Skia, a resposta virou "faz um Canvas". A versão 2.6, lançada em abril de 2026, consolida a biblioteca como a peça padrão de gráficos custom no ecossistema: além do desenho, ela agora inclui Skottie (motor de Lottie nativo), filtros de imagem, câmera com perspectiva 2D e integração completa com Reanimated 4.

Como instalar React Native Skia no Expo em 2026

A forma mais rápida de começar em julho de 2026 é usando o template oficial do Expo, que já vem com Skia, suporte web via CanvasKit e a Nova Arquitetura habilitada. Se você já tem um app rodando, dá para adicionar em três passos.

Novo projeto com o template with-skia

npx create-expo-app my-skia-app -e with-skia
cd my-skia-app
npx expo start

Adicionar Skia a um app Expo existente

# 1. Instale o pacote
npx expo install @shopify/react-native-skia

# 2. Confirme que a Nova Arquitetura está ativa em app.json
# "expo": { "newArchEnabled": true, ... }

# 3. Rebuild dev client (Skia tem código C++, não roda no Expo Go)
npx expo prebuild --clean
npx expo run:ios   # ou run:android

Do lado do React Native puro (CLI), o passo é o mesmo npm install @shopify/react-native-skia, seguido de pod install no iOS e um rebuild. No Android você precisa do NDK instalado (via Android Studio, SDK Manager, SDK Tools) porque o build compila a libskia.so localmente. A tabela de compatibilidade está no guia oficial. Para 2.6.x: React Native 0.79+, React 19, Nova Arquitetura obrigatória.

Canvas e primitivas de desenho

O Canvas é a raiz de qualquer cena Skia. Ele se comporta como uma View comum do React Native (aceita style, participa do layout do Flexbox), mas por dentro cria seu próprio renderer. Todo elemento filho é uma primitiva declarativa: Circle, Rect, Path, Text, Image, Group. Você não desenha imperativamente com canvas.drawCircle(); você declara o que quer que exista e o Skia constrói a display list.

import { Canvas, Circle, Rect, Group } from '@shopify/react-native-skia';

export function HelloSkia() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={300} height={300} color="#0f172a" />
      <Group transform={[{ translateX: 150 }, { translateY: 150 }]}>
        <Circle cx={0} cy={0} r={64} color="#38bdf8" />
        <Circle cx={0} cy={0} r={40} color="#0ea5e9" />
      </Group>
    </Canvas>
  );
}

Alguns padrões que vale internalizar cedo. O Group agrupa transformações e filtros (translate/rotate/scale, opacidade, clip). O Path aceita SVG paths diretos via path="M10 10 L 100 100 Z", então importar arte vetorial é trivial. Já o Text exige uma Font carregada com useFont (Skia não usa a fonte do sistema por baixo). Para carregar fontes locais em Expo, use require('./assets/inter.ttf'). O guia de texto tem os detalhes.

Como criar animações com React Native Skia?

A resposta curta: você usa Reanimated 4 e passa SharedValue diretamente como prop das primitivas Skia. Não existe createAnimatedComponent, não existe useAnimatedProps. O renderer Skia inspeciona as props e, se detecta um SharedValue, ele se inscreve para redraw automático quando o valor muda no thread da UI.

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

export function PulsingCircle() {
  const radius = useSharedValue(20);

  useEffect(() => {
    radius.value = withRepeat(
      withTiming(80, { duration: 800 }),
      -1,   // infinito
      true, // alterna ida/volta
    );
  }, []);

  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={150} cy={150} r={radius} color="#f97316" />
    </Canvas>
  );
}

Esse padrão escala. Um chart com 5.000 pontos animando durante um pinch-zoom é literalmente o mesmo código: você mantém SharedValue<number[]> e passa como points. A animação roda no thread da UI e o JS thread pode estar completamente bloqueado processando uma request, mas o frame rate não cai. Se você já usa Reanimated no app, complementa bem esse artigo o meu guia comparativo de FlatList vs FlashList v2 vs LegendList, que discute quando você deve renderizar linha nativa e quando faz sentido migrar para o experimental SkiaList.

Shaders SKSL: gráficos avançados na GPU

SKSL é a linguagem de shader do Skia, um dialeto próximo do GLSL que roda em Metal (iOS), Vulkan/OpenGL (Android) e WebGL (web). Com Shader e useSharedValue, você escreve um fragment shader inline e anima seus uniforms sem sair do JS. Isso destrava efeitos que costumavam exigir OpenGL nativo: ondas, gradientes procedurais, distorções, blur direcional, transições estilo Metaballs.

import { Canvas, Fill, Shader, Skia } from '@shopify/react-native-skia';
import { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
import { useEffect } from 'react';

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

half4 main(float2 xy) {
  float2 uv = xy / resolution;
  float wave = 0.5 + 0.5 * sin(uv.x * 10.0 + time * 2.0);
  return half4(uv.x, wave, 1.0 - uv.y, 1.0);
}`)!;

export function WaveShader() {
  const time = useSharedValue(0);

  useEffect(() => {
    time.value = withRepeat(withTiming(6.28, { duration: 4000 }), -1, false);
  }, []);

  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <Shader source={source} uniforms={{ time, resolution: [400, 400] }} />
      </Fill>
    </Canvas>
  );
}

Skottie, filtros de imagem e a versão 2.6

A partir da 2.1, publicada no fim de 2025, o Skia trouxe três recursos que mudaram a decisão de "usar Skia ou algo separado": Skottie, filtros de imagem e câmera 2D com perspectiva. O Skottie é o motor nativo de Lottie do Skia. Ou seja, em vez de acoplar react-native-skottie (que roda numa view nativa fora do canvas), você renderiza Lottie dentro do próprio Canvas. Isso significa compor Lottie com shaders, aplicar máscara em cima de uma animação Lottie, ou clipar dentro de um Group transformado.

Os filtros de imagem (BlurMask, ColorMatrix, DropShadow, Displacement) são GPU-acelerados e componíveis. Você pode aplicar drop shadow + color shift em cima de uma foto renderizada no canvas com dois nodes JSX. Antes disso, blur real e color-matrix exigiam ou uma biblioteca nativa dedicada ou uma abordagem de renderizar para SkImage e reprocessar. Hoje é uma prop.

A câmera com perspectiva 2D permite compor cenas 2D como se estivessem num espaço 3D básico (translate Z, rotação em Y). Não substitui Three.js via expo-three para 3D real, mas cobre o caso comum de "card flip com profundidade" sem ter que carregar uma engine 3D inteira. Se você chegou até aqui pensando em renderização nativa de conteúdo dinâmico, meu guia da Nova Arquitetura explica por que o Fabric é o que viabiliza tudo isso sem travar.

Skia vs Reanimated vs SVG: quando usar cada um?

Essa é a pergunta que aparece toda semana em code review. A resposta pragmática está na tabela abaixo. Não é sobre qual é "melhor", é sobre onde cada um encaixa.

Critério	Reanimated 4	React Native SVG	React Native Skia
Melhor caso de uso	Animar props de views nativas	Ícones e ilustrações estáticas	Charts, canvas custom, efeitos GPU
Renderiza para	Views nativas (Fabric)	Views nativas SVG	Canvas GPU (Metal/Vulkan)
Thread de execução	UI thread	UI thread	UI thread
Performance com muitos elementos	Boa até algumas dezenas	Cai acima de ~200 nodes	60 FPS com 5.000+ elementos
Shaders custom	Não	Não	Sim (SKSL)
Suporte a Lottie	Não (usa lib externa)	Não	Sim (Skottie built-in)
Roda no Expo Go	Sim	Sim	Não, precisa dev client
Curva de aprendizado	Média (worklets)	Baixa	Média-alta

Na prática: use Reanimated se você está animando componentes que já são View/Text/Image. Use SVG para ícones vetoriais estáticos e ilustrações simples que vão no design system. Use Skia quando o resultado depende de desenho procedural: gráficos, jogos 2D, drawings, particles, transições complexas, efeitos com blur/glow reais, ou qualquer coisa acima de umas 100 a 200 primitivas SVG.

Performance no Fabric e boas práticas

O ganho de Fabric no Skia veio de arquitetura: o time da Shopify moveu do SkiaDOM (scene graph totalmente mutável, escrito em C++) para uma display list imutável. No modelo antigo, updates vindos do JS thread e do UI thread eram tratados igualmente, e isso criava gargalos em animações, com race conditions no renderer concorrente do React 18/19. Com a display list imutável, cada frame é uma snapshot e o Fabric pode reconciliar sem locks.

O resultado medido pelo time: animações até 50% mais rápidas no iOS e quase 200% mais rápidas no Android. Charts que travavam com 500 pontos hoje passam de 5.000 mantendo 60 FPS durante scrubbing. O SkiaList experimental, quando o item é renderizado inteiramente em Skia, entrega 120 FPS estáveis sem blank rows, e supera o FlashList em conteúdo custom-drawn.

Boas práticas que já queimaram meu app

• Passe SharedValue direto, sem .value. Se você lê radius.value num render normal do React, perde o benefício de UI-thread updates.
• Evite recriar objetos Skia.* a cada render. Envolva Skia.RuntimeEffect.Make, Skia.Path.Make e Skia.Paint() em useMemo. Recompilar shader por frame mata a GPU.
• Use Group para agrupar transformações compartilhadas. É mais barato que aplicar transform em cada primitiva.
• Ative opaque no Canvas se o fundo é sólido. O compositor pode pular alpha blending.
• Não anime width/height do Canvas. Anime as primitivas dentro. Redimensionar o canvas recria o surface Metal/Vulkan.

Erros comuns e como resolver

Três erros aparecem em quase todo primeiro projeto Skia. Vale documentar.

"Cannot find module '@shopify/react-native-skia'" no Expo Go

Skia tem C++, então não roda no Expo Go. Faça npx expo prebuild e rode um development build. Se você quer manter Expo Go para partes do app, isole Skia atrás de um Platform.OS !== 'web' && !isExpoGo. Mas, realisticamente, migrar para dev client é o caminho.

"Font is not loaded" ao usar <Text>

useFont é assíncrono. Renderize null enquanto font === null, senão o Skia crasha por tentar medir texto sem tipografia:

const font = useFont(require('./assets/Inter.ttf'), 24);
if (!font) return null;
return <Canvas><Text x={20} y={40} text="Olá" font={font} /></Canvas>;

Shader compila mas não anima

Confira se o uniform que você quer animar é um SharedValue e se está sendo passado dentro do objeto uniforms={{ ... }} como referência (não uniforms={{ time: time.value }}). O renderer só se inscreve se receber o SharedValue em si.

Próximos passos

Com Skia instalado, a curva de valor é rápida. Em uma tarde você monta um chart interativo que era impossível com libs SVG; em dois dias você troca uma tela de onboarding cheia de Lottie por uma versão com Skottie que abre 500 ms mais rápido. A partir daí, o próximo passo natural é combinar Skia com Reanimated 4 para gestos e transições, e explorar o catálogo de exemplos oficial. Se seu app ainda está na arquitetura antiga, comece por aí: Skia 2.6 só roda com Fabric, e a migração destrava também Reanimated 4, TurboModules e o resto do stack novo.

Perguntas Frequentes

React Native Skia funciona no Expo?

Sim, funciona no Expo SDK 51 ou superior, mas apenas em development builds. Não roda no Expo Go porque depende de código nativo em C++. O template oficial with-skia já vem preconfigurado com suporte web via CanvasKit.

Skia precisa da Nova Arquitetura do React Native?

Sim. A partir da versão 2.x, o Skia exige Fabric e JSI ativos. Isso significa React Native 0.76+ com newArchEnabled=true. A dependência é o que permitiu ganhos de até 200% de performance em Android.

Qual a diferença entre React Native Skia e Reanimated?

Reanimated anima props de views nativas do React Native (opacity, transform, height). Skia desenha pixels diretamente na GPU dentro de um Canvas. Use Reanimated para animar componentes existentes; use Skia quando o conteúdo em si precisa ser desenhado: charts, drawings, shaders, jogos 2D.

Posso usar React Native Skia junto com React Native SVG?

Pode, e é comum. SVG segue ótimo para ícones do design system, enquanto o Skia entra em telas com gráficos ou animações complexas. Os dois convivem no mesmo app sem conflito. Só pesa mais alguns MB no bundle final.

React Native Skia funciona na web?

Sim, via CanvasKit, uma versão WebAssembly do Skia. O template with-skia do Expo já configura isso; em projetos existentes você adiciona canvaskit-wasm como dependência e ajusta o bundler. A mesma API JSX roda em iOS, Android e navegador.

Qual a versão mais recente do React Native Skia em 2026?

A versão estável em julho de 2026 é a 2.6.x, lançada em abril. Ela exige React Native 0.79+ e React 19, e integra com o Expo SDK 55. As adições principais desde a 2.0 foram Skottie (Lottie nativo), filtros de imagem GPU e a câmera com perspectiva 2D.