Melhores Práticas de Animações
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
//
Busque em todas as páginas da documentação
Um resumo condensado das 25 melhores práticas mais importantes extraídas de todas as páginas desta seção.
Instale com npx expo install: As versões de react-native-reanimated e react-native-gesture-handler devem corresponder à matriz do SDK 57 - fixações manuais de npm causam falhas na compilação nativa.
Plugin do Babel por último: react-native-reanimated/plugin é sempre a última entrada em babel.config.js - outros plugins depois dele quebram as transformações de worklet.
Limpe o Metro após alterações no plugin: Execute npx expo start --clear sempre que as versões do Babel ou Reanimated mudarem - caches desatualizados produzem erros de "falha ao criar um worklet".
Envolva a raiz com GestureHandlerRootView: Necessário em app/_layout.tsx para gestos de arrastar, gavetas e gestos adjacentes à pilha - nenhum aviso de tempo de compilação quando ausente.
Importe Animated de Reanimated para worklets: O Animated de react-native-reanimated suporta useAnimatedStyle, entrada/saída e transições compartilhadas - não o Animated de react-native.
Use valores compartilhados para movimento interativo: Atualizações de useSharedValue não re-renderizam o React - a base para arrastar a 60fps, molas e estilos vinculados ao scroll.
Nunca use setState em cada frame de animação: onPanResponderMove ou onUpdate de gesto chamando setState competem com a reconciliação do React - frames perdidos em qualquer dispositivo de gama média.
Prefira Reanimated para UI vinculada a gestos: Se o movimento segue um dedo ou ocorre durante o scroll de uma lista, migre da API legada Animated para Reanimated 4.
Mantenha Animated para fades simples de um único disparo: Timing de opacidade curto em montagem estática com useNativeDriver: true é aceitável - não crie animações de toast excessivamente complexas.
Conheça o limite do driver nativo: opacity e transform suportam useNativeDriver: true; width, height e flex precisam de animações de layout Reanimated ou useAnimatedStyle.
Combine RNGH com Reanimated: Reconhecimento de gestos na thread nativa mais atualizações de valores compartilhados na UI thread - Pressable sozinho não consegue igualar a frequência de arrastar.
Ajuste os pans antes de reescrever árvores de scroll: activeOffsetX e failOffsetY resolvem a maioria dos conflitos entre linhas de swipe e ScrollView - veja Resolução de Conflitos de Gestos.
Use simultaneousWithExternalGesture para linhas de swipe: Conecte a referência do ScrollView / FlatList pai para que os pans horizontais da linha coexistam com o scroll vertical após qualificação de offset.
Importe scrollables internos de RNGH quando o scroll aninhado falhar: Mude primeiro o FlatList horizontal interno - não ambos os eixos cegamente (Scrollables Aninhados).
Chaves estáveis para listas animadas: keyExtractor deve retornar IDs do servidor - chaves de índice fazem com que animações de layout e tags de transição compartilhadas saltem entre linhas erradas.
Um wrapper de entrada/saída por linha: Aplique FadeIn / SlideInRight e layout={Layout} em um único Animated.View por renderItem - não em cada Text aninhado.
Encurte a duração de saída: Sair em 150–220ms parece mais ágil do que 400ms simétricos de entrada/saída - os usuários percebem o feedback de exclusão mais rapidamente.
Limite os atrasos de stagger em listas longas: FadeInDown.delay(index * 40) além de ~12–20 itens adiciona latência de montagem perceptível - faça stagger apenas no primeiro viewport.
sharedTransitionTag único por entidade: Inclua IDs estáveis em strings de tag - tags duplicadas entre linhas de lista quebram transições de herói (Transições de Elementos Compartilhados).
Combine tags exatamente entre telas de pilha: A célula da lista e a rota de detalhe do Expo Router devem usar o mesmo construtor de tag - combine com pilhas aninhadas (Navegação em Pilha).
Use runOnJS com moderação: Faça ponte para navegação, setState e analytics no fim do gesto - não dentro de onUpdate a cada frame.
Extraia helpers de worklet compartilhados: Funções de clamp, rubber-band e interpolate pertencem a módulos 'worklet' - reduz a duplicação do Hermes e facilita os testes (Worklets & Modo de Bundle).
Perfilar a versão de lançamento em Android de gama média: Simuladores de iPhone Pro e Expo Go no Mac escondem a contenção da thread JS - use Flashlight ou RN DevTools em um dispositivo com pouca RAM antes de enviar.
Respeite motion reduzido: Verifique AccessibilityInfo.isReduceMotionEnabled() e pule ou encurte animações de entrada/layout - forneça transições de estado instantâneas como fallback.
Execute a lista de verificação de gestos antes do lançamento: Teste swipe-in-scroll, trilhos aninhados, sheet-over-feed, pop de herói compartilhado e exclusão rápida de lista no Android - simuladores não detectam corridas de scroll vs swipe.
Animated continua bom para fades estáticos raros com useNativeDriver: true.FadeIn, Layout) não requer RNGH.Versões da Pilha: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (
expo~57.0.4).
Revisado por Chris St. John·Última atualização: 16 de jul. de 2026