https://github.com/cawfree/react-native-lottie

Lottie wrapper for React Native. (Android/iOS/Web)
https://github.com/cawfree/react-native-lottie

android animation ios lottie native react react-native web

Last synced: 14 days ago
JSON representation

Lottie wrapper for React Native. (Android/iOS/Web)

• Host: GitHub
• URL: https://github.com/cawfree/react-native-lottie
• Owner: cawfree
• License: mit
• Created: 2020-08-20T10:03:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-20T11:27:09.000Z (over 4 years ago)
• Last Synced: 2024-09-15T00:57:04.956Z (2 months ago)
• Topics: android, animation, ios, lottie, native, react, react-native, web
• Language: Java
• Homepage:
• Size: 510 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-lottie

This is a simple wrapper around [`lottie-react-native`](https://github.com/react-native-community/lottie-react-native) for Android and iOS runtimes, and [`react-native-web-lottie`](https://github.com/react-native-web-community/react-native-web-lottie) on the Web.

This project saves you from having to [**tinker with webpack**](https://github.com/react-native-web-community/react-native-web-lottie#getting-started), which is great if you're not ready to `expo eject`.

## 🚀 Installing

Using [`yarn`](https://yarnpkg.com) on `react-native init`:

```

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

```

Using [`yarn`](https://yarnpkg.com) 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 (

    

  );

};

```

## ✌️ License

[**MIT**](./LICENSE)