react-native-lottie

react-native-lottie

This is a simple wrapper around lottie-react-native for Android and iOS runtimes, and react-native-web-lottie on the Web.

This project saves you from having to tinker with webpack, which is great if you're not ready to expo eject.

🚀 Installing

Using yarn on react-native init:

yarn add react-native-lottie lottie-react-native

Using yarn on create-react-native-app:

yarn add react-native-lottie ; expo install lottie-react-native

💭 Usage

import React, { useState, useEffect } from "react";
import Animation from "react-native-lottie";
import { Animated, Platform, StyleSheet } from "react-native";

import SomeLottieAnimation from "./assets/some-lottie-animation.json";

const styles = StyleSheet.create({
  anim: { width: 200, height: 200, backgroundColor: "green" },
});

export default () => {
  const [progress] = useState(() => new Animated.Value(0));
  useEffect(
    () => {
      Animated.timing(
        progress,
        { toValue: 1, duration: 1000, useNativeDriver: Platform.OS !== "web" },
      ).start();
    },
    [progress],
  );
  return (
    <Animation
      style={styles.anim}
      source={SomeLottieAnimation}
      progress={progress}
    />
  );
};

✌️ License

MIT