Comment fonctionnent les animations dans React Native ?

Question

Accepted Answer

React Native supporte les **animations** via l'API **Animated** intégrée et la bibliothèque populaire **Reanimated**. Les animations améliorent l'UX avec des mouvements et transitions fluides. La performance (exécution des animations sur le thread natif) est une considération clé. ## L'API Animated (intégrée) ```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 ... ``` L'API **Animated** utilise des valeurs animées appliquées à `Animated.View`, etc. Le crucial `useNativeDriver: true` exécute l'animation sur le **thread natif** (fluide, non bloqué par JS). ## Reanimated (recommandé pour les animations complexes) ```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. ``` ## Pourquoi c'est important ici ```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. ``` ## Pourquoi c'est important Comprendre les animations dans React Native est précieux car **les animations améliorent l'expérience utilisateur** avec des mouvements et transitions fluides qui donnent aux apps une apparence soignée, c'est donc une connaissance pratique utile — et les considérations de performance sont particulièrement importantes dans React Native. L'API **Animated** intégrée (utilisant des valeurs animées appliquées aux composants Animated) fournit la base des animations. Critiquement, comprendre l'aspect performance — que **les animations pilotées par le thread JavaScript peuvent être saccadées** (si le thread JS est occupé) et que l'exécution des animations sur le **thread natif/UI** (via `useNativeDriver: true` dans Animated, ou via Reanimated) les garde fluides même quand JS est occupé — est l'insight clé pour les animations performantes dans React Native, une considération notable compte tenu du modèle de threading JS/natif de React Native. Comprendre **Reanimated** (la bibliothèque populaire pour les animations performantes, complexes, pilotées par geste qui s'exécute sur le thread natif, supportant les worklets, la physique des ressorts et les gestes) est précieux car c'est **la solution de référence pour les animations avancées** dans React Native, meilleure que l'API Animated basique pour les animations interactives complexes. Comprendre les deux — l'API Animated intégrée (avec useNativeDriver) pour les animations plus simples et Reanimated pour les animations complexes, tous deux mettant l'accent sur l'exécution des animations nativement pour la fluidité — couvre la boîte à outils d'animation. Les animations soignées améliorent significativement l'UX, et les rendre fluides (en les exécutant sur le thread natif) est le défi clé que l'architecture de React Native présente. Puisque les animations fluides améliorent l'UX et que la performance des animations de React Native dépend critiquement de l'exécution des animations sur le thread natif (via useNativeDriver ou Reanimated), et puisque comprendre l'API Animated, Reanimated, et en particulier la considération de performance du thread natif permet de construire des animations fluides, comprendre les animations dans React Native est une connaissance précieuse et pratiquement pertinente — utile pour améliorer l'UX avec du mouvement, où la préoccupation spécifique à React Native d'exécuter les animations nativement pour la fluidité est particulièrement importante, une compétence précieuse pour construire des apps React Native soignées.