Animate the layout of an element with react-native without knowing the initial size of the container
Animate the layout of an element with react-native without knowing the initial size of the container
👋🏻 For a English version of this article 🇺🇸 : let’s check out at Medium

Aujourd'hui j'ai eu besoin pour un client d'animer horizontalement une barre positionnée en absolute en bas de l'écran dans une application react-native.

Cette barre est un bouton positionné en bas à droite, qui, quand on clique dessus, s'agrandit pour prendre la largeur de l'écran.

Cependant je me suis heurté à plusieurs problèmes :

  • La fonction interpolate est claire et elle attends comme paramètre une plage d'entrée (dont on ne connait pas la taille initiale) et de sortie (100% de la largeur de l'écran). La valeur auto qui permettrait de déterminer automatiquement la taille n'est pas supportée…
  • Je ne pouvais pas déduire la taille initiale du contenu de mon composant car celle-ci était variable,  mon application étant multilingue les différentes traductions ne font pas le même nombre de caractères, bref : je ne connaissais pas la taille du composant de base.

Comment animer un composant dont on ne connait pas la taille initiale ?

Il existe plusieurs astuce, mais une très simple !

J'ai essayé un peu tout sorte de bêtises, on peut par exemple utiliser la props onlayout d'un composant et calculer la taille initiale, mais au final la meilleure solution est la suivante :

Utiliser un minWidth (ou bien minHeight) que l'on va faire s'animer entre 0% to 100%

Qu'est-ce que cela implique ?

Et bien quand on aura 0% de min-width l'élément va naturellement prendre la place dont il a besoin et va comparer à la règle min-width, imaginons qu'il ai besoin de 30px, le minimum étant de 0px car 0% de min-width, il restera à 30px de taille.

Maintenant quand on aura 100%, son calcul de taille étant à 30px et le minWidth à 100% (ce qui représente disons 372px de large), on voit que la règle ne match pas, il va donc naturellement scaler progressivement.