Reanimated avec React Native

9 min readDec 6, 2023

Description de reanimated et pourquoi l’utiliser

Reanimated” est une bibliothèque avancée pour React Native, conçue pour gérer des animations complexes et fluides dans les applications mobiles. Contrairement à l’API d’animation standard de React Native, Reanimated fournit une plus grande flexibilité et de meilleures performances.

Voici quelques points clés à retenir sur Reanimated :

1️⃣ Performance Optimisée

2️⃣ API Déclarative

3️⃣ Contrôle avancé

4️⃣ Compatibilité avec les Hooks

5️⃣ Utilisation des Worklets

1 — Performances optimisées :

Traditionnellement, dans React Native, les animations sont gérées par le thread JavaScript. Cependant, Reanimated déplace une grande partie du traitement des animations sur le thread natif. Cela signifie que même si le thread JavaScript est surchargé par d’autres tâches, les animations continuent de s’exécuter de manière fluide. (on parle des différents Thread dans un autre article !)

En réduisant la charge sur le thread JavaScript et en exploitant plus efficacement les capacités du thread natif, Reanimated permet une utilisation plus optimale des ressources du dispositif. Cela se traduit par une meilleure réactivité de l’application et une expérience utilisateur plus fluide (bye bye les drop de frame rate 📉).

Grâce à cette approche, les animations avec Reanimated sont plus fluides et réactives. Même dans des scénarios complexes où plusieurs animations se déroulent simultanément, Reanimated assure un rendu fluide sans ralentir l’interface utilisateur.

En évitant les blocages du thread principal, les applications React Native avec Reanimated offrent une expérience utilisateur plus constante et fiable, même lors de l’exécution de tâches lourdes en arrière-plan.

💡 petit tip: Reanimated offre un contrôle plus détaillé sur le comportement des animations. Les développeurs peuvent créer des animations interdépendantes et réactives sans compromettre les performances mais surtout bien plus facilement !!!

Reanimated améliore considérablement les performances des animations en React Native, en exploitant plus efficacement les capacités natives du dispositif et en réduisant la charge sur le thread JavaScript. Cela se traduit par des animations plus fluides et une meilleure expérience utilisateur, ce qui est crucial pour les applications modernes où l’interaction utilisateur et l’esthétique jouent un rôle majeur.

Et assez récemment la version 3 de reanimated à vu le jour avec plein de nouvelles optimisations dont un support plus solide coté Expo !

2 — API Déclarative

Je viens de vous dire que Reanimated permettait de faire des animations performantes mais surtout beaucoup plus simple à construire. On s’évite les maux de têtes avec l’interaction Manager ou le LayoutAnimation par exemple (enfin dans une grande partie des cas).

✨ L’approche déclarative permet de définir ce que l’animation doit faire, plutôt que de décrire comment elle doit le faire. Cela rend le code plus lisible et plus facile à comprendre. On décrit l’état final de l’animation et les paramètres qui y mènent, sans se préoccuper des détails de l’exécution car c’est la lib qui s’occupe de ça.

Cette approche s’aligne parfaitement avec le paradigme de React. Elle permet aux développeurs qui sont déjà familiers avec React de s’adapter rapidement à Reanimated. Utiliser des concepts familiers comme les états et les props rend la courbe d’apprentissage plus douce

Bien que l’API soit simple et déclarative, elle n’en reste pas moins puissante. Elle permet de créer des animations complexes et personnalisées, en donnant aux développeurs la liberté de définir des comportements d’animation précis 🎯.

Bien entendu tout ça est compatible avec les hooks ! Avec Reanimated 2, l’API déclarative est entièrement compatible avec les hooks de React, ce qui permet de créer des animations dans les composants fonctionnels de manière concise et élégante. Le code d’animation écrit de manière déclarative est généralement plus facile à maintenir et à faire évoluer. Les modifications ou ajouts d’animations deviennent plus simples, car la logique d’animation est clairement définie et isolée.

Tout cela permet de lier facilement les animations à l’état de l’application ou à l’entrée utilisateur, rendant les animations dynamiques et réactives.

3 — Un contrôle avancé

Le contrôle avancé offert par Reanimated en React Native est un aspect crucial qui distingue cette bibliothèque des autres solutions d’animation. Il apporte une flexibilité et une précision accrues dans la création d’animations. Si on veut donner des exemples un peu plus concrets :

🔃 Animations Interdépendantes : Avec Reanimated, il est possible de créer des animations qui dépendent les unes des autres. Par exemple, on peut faire en sorte qu’une animation commence seulement après la fin d’une autre, ou qu’elle réagisse à des changements dans l’état d’une autre animation.

🎭 Gestion Fine des Événements : Reanimated permet une gestion très précise des événements, tels que les touches ou les mouvements de balayage. Cela ouvre la porte à des interactions utilisateur très réactives et des animations qui se déclenchent en réponse à des actions spécifiques.

👌 Utilisation des Gestes : En combinaison avec la bibliothèque react-native-gesture-handler, Reanimated offre une intégration fluide des gestes dans les animations. Cela permet de créer des interactions complexes et naturelles, comme des glissements et des pincements.

🔀 Animations Conditionnelles : Reanimated permet de définir des animations qui se déclenchent ou changent en fonction de conditions spécifiques. Cela permet une grande personnalisation et s’adapte parfaitement aux exigences de l’interface utilisateur dynamique.

✍️ Changement Dynamique des Propriétés : Les développeurs peuvent modifier dynamiquement les propriétés des animations en cours d’exécution, ce qui offre une grande flexibilité pour ajuster les animations en fonction des interactions de l’utilisateur ou des changements d’état de l’application.

🖥️ Animation de Layouts Complexe : Reanimated est capable de gérer des animations de mise en page complexes, permettant de créer des transitions fluides entre différents états de l’interface utilisateur.

4 — Compatibilité avec les Hooks

Les hooks sont arrivés (ça fait un moment et merci parce que ça aide vraiment !) Les hooks sont un élément central des composants fonctionnels dans React. Reanimated s’intègre naturellement dans ce paradigme, permettant aux développeurs de créer et de gérer des animations au sein des composants fonctionnels de manière élégante et intuitive.

Avec Reanimated, on peut créer des hooks personnalisés pour encapsuler la logique d’animation. Cela simplifie la réutilisation du code d’animation et maintient le code des composants propre et organisé. Les hooks tels que useState et useEffect peuvent être utilisés en conjonction avec Reanimated pour contrôler l'état et le cycle de vie des animations. Cela offre une grande flexibilité dans la gestion des animations en réponse aux changements d'état de l'application.

Reanimated permet d’utiliser des hooks pour synchroniser les animations avec l’état global de l’application, comme l’état géré par Redux ou Context API. Cela ouvre des possibilités pour des animations qui réagissent de manière dynamique aux changements d’état de l’application.

La compatibilité de Reanimated avec les hooks améliore significativement l’expérience de développement en React Native. Elle permet une intégration harmonieuse des animations dans l’architecture des composants, favorise la réutilisation du code et assure une gestion plus fine des animations en lien avec l’état et le comportement de l’application.

5 — L’utilisation des Worklets

Déjà c’est quoi un worklet ? Un worklet est une fonction JavaScript qui s’exécute sur le thread natif. Contrairement aux fonctions JavaScript traditionnelles qui s’exécutent sur le thread JavaScript, les worklets permettent de réaliser des calculs liés aux animations directement sur le thread natif.

En exécutant le code d’animation sur le thread natif, les worklets réduisent la charge sur le thread JavaScript. Cela permet d’éviter les ralentissements et les saccades dans les animations, surtout lors de tâches lourdes ou complexes (c’est un sujet déjà abordé mais c’est grâce à eux en grande partie). Comme ils s’exécutent sur le thread natif, ils peuvent gérer des tâches exigeantes sans impacter les performances de l’application.

Les worklets peuvent être utilisés en combinaison avec d’autres fonctionnalités de Reanimated, comme les animations conditionnelles, les gestes, et la gestion des états. Malgré leur puissance, les worklets sont relativement simples à utiliser. Leur syntaxe est concise et ils s’intègrent naturellement dans le flux de travail de React Native.

Aller, un petit exemple concret d’un worklet dans Reanimated en React Native pour aider à comprendre comment ils fonctionnent et sont utilisés pour créer des animations. On Imagine vouloir créer une animation simple où un élément se déplace horizontalement en fonction d’une interaction utilisateur. Voici comment cela pourrait être réalisé avec un worklet :

Tout d’abord, nous définissons un worklet pour gérer le déplacement de l’élément. Un worklet est déclaré en utilisant la fonction runOnUI de Reanimated. Cette fonction transforme le code JavaScript standard en un worklet qui s'exécute sur le thread natif.

import { runOnUI } from 'react-native-reanimated';

const moveX = runOnUI((x) => {
  'worklet';
  return {
    transform: [{ translateX: x }],
  };
});

Ici, moveX est un worklet qui prend en paramètre x (la distance de déplacement) et renvoie un objet de style pour déplacer un élément horizontalement.

On peut maintenant utiliser ce worklet dans un composant React Native. Supposons que nous ayons un composant appelé AnimatedComponent que nous voulons animer.

import React from 'react';
import { View, Button } from 'react-native';
import Animated from 'react-native-reanimated';

const AnimatedComponent = () => {
  const animatedStyle = useAnimatedStyle(() => {
    return moveX(100); // Déplacement de 100 unités
  });

  return (
    <Animated.View style={[styles.box, animatedStyle]} />
  );
};

Dans cet exemple, useAnimatedStyle est un hook de Reanimated qui permet d'appliquer des styles animés à un composant. Le style retourné par moveX(100) est utilisé pour déplacer le composant Animated.View de 100 unités horizontalement.

Pour rendre l’animation interactive, nous pouvons ajouter un bouton qui déclenche le déplacement lorsque l’utilisateur appuie dessus.

const handlePress = () => {
  moveX(200); // Déplacement de 200 unités lors de l'appui sur le bouton
};

return (
  <View>
    <AnimatedComponent />
    <Button title="Move" onPress={handlePress} />
  </View>
);

Dans cet exemple, lorsque l’utilisateur appuie sur le bouton “Move”, le worklet moveX est appelé avec une nouvelle valeur, déclenchant l'animation du composant Animated.View. Le worklet s'exécute sur le thread natif, garantissant ainsi que l'animation reste fluide même si le thread JavaScript est occupé.

Si on veut, on peut comparer avec le même code sans reanimated:

import React, { useState } from 'react';
import { View, Animated, Button } from 'react-native';

const StandardAnimatedComponent = () => {
  const [position] = useState(new Animated.Value(0));

  const handlePress = () => {
    Animated.timing(position, {
      toValue: 100, // Déplacement de 100 unités
      duration: 500, // Durée de l'animation en millisecondes
      useNativeDriver: true, // Utilisation du driver natif pour de meilleures performances
    }).start();
  };

  return (
    <View>
      <Animated.View 
        style={{
          transform: [{ translateX: position }],
        }} 
      />
      <Button title="Move" onPress={handlePress} />
    </View>
  );
};

1️⃣ Ici on utilise l’api de React Native, bien que useNativeDriver: true améliore les performances en utilisant le thread natif pour les animations, Reanimated offre une meilleure optimisation en exécutant l'intégralité du code d'animation sur le thread natif.

2️⃣ Pour des animations simples, l’API Animated de React Native peut être plus simple à utiliser. Cependant, pour des animations plus complexes ou interdépendantes, Reanimated offre plus de flexibilité et de contrôle.

3️⃣ L’API Animated standard n'offre pas la même intégration fluide avec les hooks de React que Reanimated, ce qui peut rendre le code moins élégant dans les composants fonctionnels.

4️⃣ Reanimated permet une meilleure synchronisation des animations avec les interactions utilisateur et l’état de l’application, offrant ainsi une réactivité supérieure.

Conclusion

Reanimated en React Native représente une avancée significative dans le domaine des animations pour les applications mobiles. Ses caractéristiques clés, telles que l’exécution sur le thread natif, l’utilisation des worklets, l’API déclarative, le contrôle avancé et la compatibilité avec les hooks de React, en font un outil puissant et flexible pour créer des animations complexes et réactives.

L’efficacité de Reanimated se distingue particulièrement dans sa capacité à gérer des animations fluides et performantes, un aspect crucial dans l’expérience utilisateur moderne. La comparaison avec l’API d’Animation standard de React Native révèle que Reanimated offre des performances supérieures, surtout pour des animations plus complexes et interactives.

L’intégration de Reanimated avec les composants fonctionnels de React et son adéquation avec l’architecture et les pratiques de React Native rendent son adoption attrayante pour les développeurs. Que ce soit pour des animations simples ou des interactions utilisateur dynamiques, Reanimated ouvre des possibilités créatives étendues, améliorant ainsi la qualité et l’attractivité des applications React Native.

On a exploré les divers aspects de Reanimated, et j’espère vous avoir donné envie de l’utiliser pour ceux qui s’y refusaient, ou vous avoir fait découvrir cet outil incroyable pour les autres qui ne le connaissaient pas ! Si tu n’es pas dans l’une de ces catégories, alors tu l’utilises et l’aimes déjà 😌 ! Dans tous les cas, ton avis m’intéresse et je suis curieux d’avoir ton retour ou avis en commentaire ou en DM !

N’hésites pas à caresser le bouton “like” et “follow” pour voir les nouveaux articles et ça fait toujours plaisir !

Stay tuned ! 📻

Moi, c’est Kévin Bidet, développeur freelance React et React Native, créateur de contenus et apporteur d’affaires à mes heures perdues ! J’accompagne les entreprises pour améliorer et faire grandir leurs apps ! Tu veux plus d’infos ? Contacte-moi via mon site web → kevinbidet.me !