Gráfico animado en React Native

Recientemente estaba buscando una biblioteca de gráficos React Native para mi aplicación Savee.io. Durante la investigación, me di cuenta de que no es fácil lidiar con gráficos en React Native. ¿Y si quieres animarlos? Se ve casi imposible. ¡El siguiente gif es lo que he hecho y hablaré en este "tutorial"!

Objetivo de este artículo

Sin biblioteca ART

Cuando estaba haciendo mi investigación sobre gráficos en React Native, descubrí que casi todos usan la biblioteca ART. Que es una biblioteca de dibujo realmente genial y poderosa. Mire este gráfico circular realizado por la biblioteca ART para la aplicación Savee.io.

Gráfico de sectores de la biblioteca ART en savee.io

Pero cuando quieres animarlo? Bien tu puedes. Es posible. Pero la animación está hecha por hilo JS. Siempre trato de encontrar una manera de mover todo a una parte nativa, para que nuestro hilo JS no esté bloqueado por la animación y pueda funcionar en otra cosa.

La tabla de columnas de la que voy a hablar (y puedes ver en el gif a continuación) ha sido hecha por puro React Native. No hay biblioteca de arte!

Hagámoslo un poco complicado

Me di cuenta de que también necesito un valor negativo en el gráfico. Los usuarios de Savee.io generalmente crean un grupo para un viaje y realizan un seguimiento de sus gastos. Obviamente, solo hay valores negativos, solo gastos. El siguiente gif muestra cómo se ve la animación para los valores negativos y positivos.

Diseño

Decidí hacer cada columna por separado como componente. Entonces podría agregar un efecto de "retraso". Puede ver que la animación comienza aleatoriamente para cada columna individual cuando el gráfico está cambiando una posición de línea de base. Trabajemos con la altura 200. La altura del valor podría ser 25 y la altura de la etiqueta 25 también. Eso hace 150 por columna.

Diseño para una sola columna

Si la altura del gráfico es 150, la altura de la columna es 300. Cada columna tiene una parte positiva (A) y una parte negativa (B). El lado opuesto de estas partes siempre está oculto. La A está oculta para la parte negativa y la B está oculta para la parte positiva. Significa que si movemos la parte positiva (A) debajo de la línea de base al espacio B, la columna positiva estará completamente oculta. Eso es lo que queremos cuando el valor es negativo.

Partes positivas de columnas (lado izquierdo) y partes negativas de las mismas columnas (partes derechas)

Puede ver el valor negativo de la última columna de la imagen. El valor es -5. La columna positiva se mueve completamente debajo de la línea de base (está oculta) y la columna negativa se mueve a la posición Y correcta para representar el valor -5. Un valor máximo para este gráfico es 10 (primera columna). Significa que el -5 estará en el medio de una parte negativa (75/2).

Necesitamos hacer un poco de matemática aquí porque necesitamos interpolar el valor real a la posición Y. Pero no voy a hablar de esto aquí. Creo que puedes resolver todo con bastante facilidad.

Columna animada

Usé mi biblioteca de código abierto llamada react-native-motion y el componente TranslateY. Lo que hace que las animaciones sean realmente fáciles de implementar. Mira el código Fácil de comprender. Usamos el componente TranslateY de la misma manera que usaríamos el componente View. Lo único que debemos hacer es calcular las posiciones Y para la columna positiva, la columna negativa, la línea de base y una etiqueta de valor.

Verifique el resultado en una aplicación real. Savee.io ya implementó el gráfico de columnas. Como dije antes, todo se hace mediante el hilo de la interfaz de usuario (es bastante rápido). Hay un evento onPress para que pueda cambiar los meses. Cuando selecciona la categoría, cambiará los valores de un gráfico y volverá a calcular las posiciones Y. Entonces el react-native-motion se encarga de la animación.

Numero animado

La animación de números es un pequeño problema. Porque no podemos moverlo al hilo de la interfaz de usuario. Tiene que hacerse por hilo JS. He visto que los desarrolladores suelen tener el efecto hecho por setInterval. Por supuesto, puedes usarlo, pero quería hacerlo de manera más segura.

Así que uso la API animada de React Native incluso para la animación de números. Podemos agregar un oyente al valor animado y cuando se cambia el valor, simplemente volvemos a representar el número. Es fácil y puedes aprovechar la API animada. Mediante el uso de una aceleración, por ejemplo. ¿Y cuál es el mejor? Puse el componente en la biblioteca react-native-motion que es de código abierto para ustedes guys

Solo tienes que escribir un par de líneas como esta. Una vez que se cambie el valor en su código, se encargará del resto.

Disponible en react-native-motion

¿Te gustó? Aplaudir, seguir y animarlo!

En realidad no tienes que hacer nada de eso. Pero me ayudará mucho. Es una gran motivación para los próximos artículos como este.

Sobre mi

Soy autor de Savee.io (que también uso como un patio de recreo para mis animaciones ‍). Y autor de las bibliotecas react-native-material-ui y react-native-motion. Escribiendo sobre ellos en este blog.

Si necesita ayuda con su aplicación React Native (animaciones, rendimiento, etc.), hágamelo saber, por favor;) Estaré encantado de discutirlo.
LinkedIn || Github || Gorjeo