Cómo crear un cargador bellamente animado en React Native

Programación

Utilice la biblioteca Lottie de Airbnb para animar sus cargadores.

Un cargador en Web o Móvil es un elemento de diseño esencial que generalmente se usa cuando necesitamos realizar alguna tarea asincrónica como el procesamiento o la búsqueda de datos. Dado que estas tareas pueden llevar algo de tiempo y los usuarios deben entretenerse durante este tiempo, aquí es donde los cargadores son útiles.

Los cargadores ayudan a los desarrolladores a mantener al usuario involucrado mientras esperan y evitar cualquier falta de capacidad de respuesta en la aplicación. ?

¿No quieres esperar? Consulte el paquete npm React-Native-Animated-Loader.

Empezando

React Native tiene un ActivityIndicatorincorporado que se puede usar como indicador de carga.

Pero Loadersno podemos simplemente usarlo ActivityIndicatorcomo queremos para evitar que el usuario realice cualquier acción hasta que la tarea esté completa. Y para esto usaremos Modals.

Si solo desea un cargador simple y sencillo, consulte este tutorial.

¿Pero si quieres algo genial? rociado en sus cargadores, continúe con el tutorial. ?

Lottie de Airbnb?

Lottie es una biblioteca de iOS, Android y React Native que procesa animaciones de After Effects en tiempo real, lo que permite que las aplicaciones usen animaciones tan fácilmente como usan imágenes estáticas.

Vamos a utilizar su biblioteca de envoltorios React Native lottie-react-native para nuestra animación de carga personalizada.

Crea una aplicación

Lo usaremos react-native-clipara crear un proyecto React Native, pero también puede usar Expo.

Cree un proyecto de ejemplo con el siguiente comando:

~ react-native init LoaderExample

Instalar dependencias

Ahora agreguemos los paquetes necesarios. Primero instale react-native-animated-loadery lottie-react-native.

~ npm install react-native-animated-loader --save
~ npm i --save lottie-react-native
Si está utilizando Expo, no necesita instalar Lottie.

Dado que lottie-react-nativerequiere un enlace nativo, ejecute los siguientes comandos:

~ react-native link lottie-ios
~ react-native link lottie-react-native

Después de esto, abra la configuración del proyecto Xcode y agregue el archivo Lottie.frameworkas Embedded Binaries.

Si tiene algún error después de vincular Lottie, siga las instrucciones de instalación detalladas aquí.

¿Agreguemos magia?

Ahora actualice su App.jscon el siguiente código:

import React, { Component } from 'react';import { StyleSheet, View, Button } from 'react-native';import AnimatedLoader from 'react-native-animated-loader';
export default class App extends Component { constructor(props) { super(props); this.state = { visible: false }; }
 handlePress = () => { setTimeout(() => { this.setState({ visible: !this.state.visible, }); }, 1000); };
 render() { const { visible } = this.state;
 return (     ); }}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, lottie: { width: 100, height: 100, },});

Al hacer clic, debería aparecer la siguiente animación en unos segundos.

Personalizar animación

La animación que ve es la predeterminada, pero puede agregar su propia animación Lottie. Si desea encontrar algunas animaciones de cargador geniales, vaya a lottiefiles, donde puede encontrar algunas animaciones de cargador preconstruidas. Simplemente elija el que le guste y descargue su archivo JSON.

Ahora agregue el archivo JSON descargado al LoaderExampleproyecto y agregue la fuente de apoyo al archivo AnimatedLoader. Después de agregar la fuente, debería verse así:

También puede personalizar los estilos del cargador agregando animationStyleprop.

Uso

En nuestro ejemplo, solía setTimeoutimitar una tarea asincrónica. En el mundo real, lo usaría para todo tipo de tareas asincrónicas, como obtener datos de una API.

Conclusión

Ahora que sabe cómo hacer un cargador animado genial, espero que deje de usar el antiguo y aburrido indicador de actividad para sus cargadores.

Encuentre el repositorio de la biblioteca aquí.

Si te gusta este artículo, sigue adelante y muestra algo de amor con tus aplausos.

Mira mis otros artículos sobre React Native:

  • Reaccionar Native FlatList con capacidad de búsqueda en tiempo real
  • Reaccionar seguimiento de ubicación nativo
  • Reaccionar gráficos nativos con información sobre herramientas dinámicas