Cómo integrar Lottie View Animations en React Native

Empresas como Microsoft, Facebook, Instagram y Tesla han adoptado esta herramienta para desarrollar sus aplicaciones, y por ello React Native es uno de los frameworks más populares del momento. React Native es una tecnología de código abierto desarrollada por Facebook para crear aplicaciones móviles nativas y multiplataforma a partir de la misma base de código escrita en JavaScript y React.

¿Qué significa esto? Esto resuelve el problema típico de crear una aplicación, que se puede ejecutar tanto en Android como en iOS, sin tener dos proyectos separados en dos lenguajes de programación, algo que se ha vuelto típico en el desarrollo de aplicaciones.

React Native te permite crear aplicaciones móviles usando React pero no es lo mismo React para la web sino un React enfocado a apps, esto quiere decir que cuando desarrollas, aunque puedes usar muchos conceptos de React como componentes, manejadores de estado y otros, ya no usará elementos HTML si no, ahora los usará con elementos nativos de la interfaz móvil.

Cómo usar Lottie para integrar animaciones en una aplicación React Native

Lottie es una librería para crear mostrar animaciones con archivos json. Su popularidad ha aumentado en los últimos años, por lo que ya varias empresas importantes la utilizan para integrar animaciones en sus aplicaciones.

Primero, debemos crear un proyecto React Native. En la terminar, ejecuta el siguiente comando: 

npx react-native init lottie
cd lottie

Luego, se instala el paquete npm Lottie para React Native:

npm i lottie-react-native

Al tener el paquete instalado, ve a la página oficial de Lottie: https://lottiefiles.com/ y vas a hacer click en la sección “discover” y luego en “free animations” (cabe destacar que antes de descargar cualquier animación, debes registrarte primero), luego solo seleccionas la animación que quieras utilizar en tu aplicación.

Lottie tiene dos tipos de animaciones: las gratis y las accesibles a los usuarios pagos, algo para tener en cuenta.

Luego de haber seleccionado la aplicación que se desea integrar a la aplicación React Native, haz click en download y descárgala con un archivo json, ideal para utilizar en tu aplicación. Luego, coloca este archivo en el proyecto. 

Ejecuta tu aplicación React Native con el siguiente comando:

npm run Android

Mientras la aplicación se ejecuta, incluye en siguiente código en App.js:

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text>Lottie View Animation</Text>
    </SafeAreaView>
  );
};

export default App;

Luego, en el mismo App.js, incluir la animación Lottie:

<View style={{height: 400, width: 400}}>
 <LottieView source={require('./lottie.json')} autoPlay loop />
 </View>

Podrás darte cuenta que la animación se comenzará a reproducir en el emulador y lo hará por una cantidad de tiempo indefinido, así que para asegurarte de que solo se reproduzca una vez, usarás los hooks useRef y useEffect para que se reproduzca por tres segundos mientras la aplicación se esté cargando.

Además, en este ejemplo, se utilizó el módulo Animated y se creó una función que hará que la animación se reproduzca solo una vez y luego se cree una variable llamada progress para utilizar en el componente LottieView.

El código App.js será este:

import React, {useEffect, useRef} from 'react';
import {SafeAreaView, Text, View, Animated} from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  const progress = useRef(new Animated.Value(0)).current;

  const handleLikeAnimation = () => {
    Animated.timing(progress, {
      toValue: 1,
      duration: 3000,
      useNativeDriver: true,
    }).start();
  };
  useEffect(() => {
    handleLikeAnimation();
  }, []);

  return (
    <SafeAreaView>
      <Text>Lottie View Animation</Text>
      <View style={{height: 400, width: 400}}>
        <LottieView
          progress={progress}
          source={require('./lottie.json')}
        />
      </View>
    </SafeAreaView>
  );
};

export default App;

Y de esta manera se logró integrar una animación Lottie dentro de una aplicación React Native, dándole un toque dinámico y mejorando la experiencia del usuario cada vez que visite nuestra aplicación.

Te recomendamos en video