Como funcionam as animações no React Native

Nesse caso, as etapas são mais ou menos assim:

1. Animação começa
2. JS serializa as informações da animação e as envia pela ponte.
3. No outro extremo, o sistema operacional recebe essas informações e executa a animação nativamente.

É isso aí! Muito mais leve para o encadeamento JS agora. Não mais requestAnimationFrame corrida.

No entanto, ele tem sua própria parcela de prós e contras.

Prós:

1. Animações mais rápidas
2. Encadeamento JS sem bloqueio
3. Ponte menos inchada

Contras:

1. Menos controle sobre as animações (o JS não consegue ver o que está acontecendo na tela depois que a animação “automática” é iniciada)
2. Menos propriedades para manipular – o driver nativo não suporta todas as propriedades a serem animadas, como width ou height não é nativamente animado, mas opacity e transform é.

Em muitos casos, você descobrirá que pode solucionar um conjunto diferente de animações usando o useNativeDriver: true para criar um efeito semelhante que não pode ser alcançado sem definir useNativeDriver: false. A equipe do React Native está trabalhando para adicionar suporte a mais propriedades enquanto falamos, mas por enquanto, acredito que seja ótimo no momento.

Conclusão

Este artigo mostrou como as animações do React Native realmente funcionam sob o capô e por que é bonito. O que você acha deste artigo? Diga-me conectando comigo no meu Instagram e Twitter contas! Novo no React Native? Comece a aprender codedamn – uma plataforma para os desenvolvedores aprenderem e se conectarem!

Paz!