Como as animações funcionam no React Native?

Question

Accepted Answer

O React Native suporta **animações** através da **Animated** API integrada e da popular biblioteca **Reanimated**. Animações melhoram a UX com movimento e transições suaves. O desempenho (executar animações na thread nativa) é uma consideração chave. ## The Animated API (built-in) ```jsx import { Animated } from 'react-native'; const fadeAnim = useRef(new Animated.Value(0)).current; // an animated value // animate it (e.g. fade in) Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true, // run on the NATIVE thread (smooth — important!) }).start(); // apply it to a component ... ``` A **Animated** API usa valores animados aplicados a `Animated.View` etc. O crucial `useNativeDriver: true` executa a animação na **thread nativa** (suave, não bloqueada pelo JS). ## Reanimated (recomendado para animações complexas) ```text REACT NATIVE REANIMATED → a popular library for performant, complex animations: → runs animations on the native/UI thread (smooth, off the JS thread) → supports gestures (with react-native-gesture-handler), worklets, spring physics → better for complex, interactive, gesture-driven animations than the basic Animated API → The go-to for advanced animations in React Native. ``` ## Por que o desempenho importa aqui ```text ⚠️ Animations driven by the JS thread can be JANKY (the JS thread is busy / blocked) → → useNativeDriver (Animated) or Reanimated run animations on the NATIVE/UI thread → smooth even if JS is busy → Running animations natively (not on the JS thread) is KEY to smooth animations in RN. ``` ## Por que isso importa Compreender animações no React Native é valioso porque **animações melhoram a experiência do usuário** com movimento e transições suaves que tornam os apps mais polidos, então é conhecimento prático útil — e as considerações de desempenho são particularmente importantes no React Native. A **Animated** API integrada (usando valores animados aplicados a componentes Animated) fornece a base para animações. Criticamente, compreender o aspecto de desempenho — que **animações acionadas pela thread JavaScript podem ser instáveis** (se a thread JS estiver ocupada) e que executar animações na **thread nativa/UI** (via `useNativeDriver: true` na Animated, ou via Reanimated) as mantém suaves mesmo quando JS está ocupado — é o insight chave para animações performáticas no React Native, uma consideração notável dado o modelo de threading JS/nativo do React Native. Compreender **Reanimated** (a biblioteca popular para animações performáticas, complexas e acionadas por gestos que executa na thread nativa, suportando worklets, física de spring e gestos) é valioso porque é a **solução mais indicada para animações avançadas** no React Native, melhor que a Animated API básica para animações interativas complexas. Compreender ambas — a Animated API integrada (com useNativeDriver) para animações mais simples e Reanimated para as complexas, ambas enfatizando a execução de animações nativamente para suavidade — cobre o kit de ferramentas de animação. Animações polidas melhoram significativamente a UX, e torná-las suaves (executando-as na thread nativa) é o desafio chave que a arquitetura do React Native apresenta. Pois animações suaves melhoram a UX e o desempenho de animações do React Native depende criticamente de executar animações na thread nativa (via useNativeDriver ou Reanimated), e como compreender a Animated API, Reanimated, e especialmente a consideração de desempenho da thread nativa permite construir animações suaves, compreender animações no React Native é conhecimento valioso e praticamente relevante — útil para melhorar a UX com movimento, onde a preocupação específica do React Native de executar animações nativamente para suavidade é particularmente importante, uma habilidade valiosa para construir apps React Native polidos.