Aller au contenu
useffect.sh
Planifier 30 min avec un senior
Interface

Reanimated

La librairie d’animation de Software Mansion qui exécute les animations sur le thread UI via des worklets, sans attendre le thread JavaScript.

Définition

Reanimated (react-native-reanimated) est la librairie d’animation de Software Mansion pour React Native. Son principe : les valeurs animées (shared values) et les fonctions qui les mettent à jour sont exécutées sur le thread UI, dans un runtime JavaScript séparé, par des worklets. Une animation ou un geste continue donc à 60 ou 120 images par seconde même quand le thread JavaScript principal est occupé par un rendu React ou une réponse réseau. Elle remplace l’API Animated de React Native pour tout ce qui dépasse un fondu, et sert de base au drawer de React Navigation et à beaucoup de composants de sheets ou de carrousels. La version 4, limitée à la New Architecture, déplace les worklets dans le package react-native-worklets et ajoute des animations et transitions déclarées en CSS. Depuis React Native 0.85.1, un backend d’animation partagé entre Animated et Reanimated est disponible en expérimental. On y arrive dès qu’une animation doit suivre le doigt ou tenir pendant un rendu lourd.

Dans une vraie app

Dans un projet, l’installation se vérifie en trois points : react-native-reanimated et react-native-worklets dans les dépendances avec des versions compatibles (la table de compatibilité est dans la doc), le plugin Babel react-native-worklets/plugin en dernière position dans babel.config.js, et un build natif refait après installation. L’erreur « Native part of Reanimated doesn’t seem to be initialized » vient presque toujours d’un cache Metro ou d’un build natif oublié.

L’API à maîtriser : useSharedValue, useAnimatedStyle, withTiming, withSpring, withDecay, les modificateurs withDelay, withRepeat, withSequence, et useAnimatedScrollHandler pour tout ce qui suit un scroll. Le piège le plus courant est de lire .value d’une shared value dans le rendu React : la valeur lue est celle du thread JS, pas celle de l’animation en cours. Le second est de faire du travail lourd dans un worklet, qui bloque alors le thread UI à la place du thread JS.

Reanimated 4 exige la New Architecture ; un projet encore sur l’ancienne doit rester en 3.x. Les animations CSS (animationName, transitionProperty sur un Animated.View) couvrent les cas simples avec moins de code et sont une bonne porte d’entrée pour une équipe venue du web. Pour mesurer, le panneau Performance de React Native DevTools montre si une animation tombe sur le thread JS.

Sources

Les 35 termes du glossaire

Un de ces sujets bloque votre app ?

30 minutes avec un senior pour regarder le problème dans votre code. Gratuit.