Como usar React Native e Skia para criar jogos mobile

“React Native não dá pra fazer jogos.” Já ouvimos isso centenas de vezes. E faz sentido se você está pensando em jogos 3D AAA. Mas para jogos 2D — tycoon, puzzle, idle, arcade — React Native com Skia é uma opção surpreendentemente poderosa.

Por que Skia

@shopify/react-native-skia traz o motor de renderização Skia (o mesmo usado pelo Chrome e Flutter) para o React Native. Isso significa:

• Canvas nativo renderizando a 60fps
• Desenho procedural — retângulos, círculos, gradientes, paths
• Sem bridge — renderização direta na thread nativa de UI
• Multiplataforma — mesmo código no iOS e Android

Nosso caso: Build Your Empire

No nosso jogo de simulação empresarial, toda a cena visual é desenhada com Skia:

// Cada edifício é uma série de retângulos 8x8
const drawBuilding = (canvas, x, y, floors, color) => {
  for (let f = 0; f < floors; f++) {
    canvas.drawRect(
      { x, y: y - f * 8, width: 16, height: 8 },
      { color }
    );
  }
};

Vantagens dessa abordagem:

1. Zero assets — não precisa de sprite sheets ou texture atlases
2. Dinâmico — a torre do jogador cresce em tempo real com base nos funcionários
3. Leve — o bundle pesa menos sem assets de imagem
4. Personalizável — mudar cores ou tamanhos significa mudar um número

Limitações reais

Nem tudo é perfeito:

• Não adequado para jogos com animações complexas — sem sistema nativo de partículas
• Sem física — seria necessário integrar uma biblioteca separada
• Debug visual — sem inspector como no Unity
• Comunidade pequena — menos recursos e tutoriais que Unity/Godot

Quando usar React Native + Skia para jogos

Conclusão

Se você já conhece React Native e quer criar um jogo 2D sem aprender um novo motor, Skia é a melhor opção. Não substitui Unity ou Godot, mas para certos gêneros é mais que suficiente — e permite reutilizar todo o seu conhecimento de React, TypeScript e do ecossistema npm.

Veja Build Your Empire em ação →