https://github.com/react-native-web-community/react-native-web-lottie

React Native for Web implementation of Lottie
https://github.com/react-native-web-community/react-native-web-lottie

Last synced: 13 days ago
JSON representation

React Native for Web implementation of Lottie

• Host: GitHub
• URL: https://github.com/react-native-web-community/react-native-web-lottie
• Owner: react-native-web-community
• License: mit
• Created: 2017-11-05T21:13:00.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-09T17:20:03.000Z (almost 2 years ago)
• Last Synced: 2024-09-21T09:12:23.897Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://react-native-web-community.github.io/react-native-web-lottie/storybook/
• Size: 3.7 MB
• Stars: 83
• Watchers: 2
• Forks: 19
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-web-lottie

> React Native for Web implementation of Lottie

## Getting started

`$ npm install react-native-web-lottie --save`

Alias the package in your webpack config:

```js

resolve: {

    alias: {

        'react-native': 'react-native-web',

        ...

        'lottie-react-native': 'react-native-web-lottie',

    }

}

```

If you are using [Expo](https://docs.expo.dev/guides/customizing-webpack/), you can simply do

```js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {

  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias['lottie-react-native'] = 'react-native-web-lottie';

  return config;

};

```

## Usage

See [Lottie's docs](https://airbnb.io/lottie/#/react-native).

## Examples

See the [storybook](https://react-native-web-community.github.io/react-native-web-lottie/storybook).

## Contributing

PRs are welcome!

The following important features are not implemented:

- `progress` prop (partially implemented using Animated.Value)

- imperative API