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

`javascript
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 (
style={styles.anim}
source={SomeLottieAnimation}
progress={progress}
/>
);
};
``

✌️ License

MIT