# easy-lottie-react-native

> Lottie for React Native without hassle

Latest version **2.0.2** (published 2017-10-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install easy-lottie-react-native
pnpm add easy-lottie-react-native
yarn add easy-lottie-react-native
bun add easy-lottie-react-native
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2017-10-29 |
| First published | 2017-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Louis Lagrange |
| Maintainers | minishlink |
| Keywords | react-native, lottie-react-native, react-native-lottie, ios, android |

## Links

- npm: https://www.npmjs.com/package/easy-lottie-react-native
- Repository: git@github.com:Minishlink/easy-lottie-react-native
- npm.io page: https://npm.io/package/easy-lottie-react-native

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2017-10-29
- 2.0.1 — 2017-10-22
- 2.0.0 — 2017-10-17
- 1.0.0 — 2017-08-28

## README

# easy-lottie-react-native
*Lottie for React Native without hassle*

A component for [airbnb/lottie-react-native](https://github.com/airbnb/lottie-react-native) that handles animation, looping,
layout, and platform quirks for you. It fixes:
* the default duration
* the default aspect ratio (and size if you don't provide a width or height)
* the default easing
* iOS positioning
* Android playback for some animations

## Props
You can pass [additional props](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md) 
expected by `lottie-react-native`, like `imageAssetsFolder`. 

| Prop | Description | Default |
|---|---|---|
|**`source`**| **Mandatory** - The source of animation. This must be a JS object of an animation, obtained (for example) with something like `require('../path/to/animation.json')`. This is needed in order to fix things. | *None* |
|**`style`**| Style attributes for the view, as expected in a standard [`View`](https://facebook.github.io/react-native/docs/layout-props.html). | The `aspectRatio` exported by Bodymovin will be set. Also the `width` if you haven't provided a `width` or `height` |
|**`loop`**| A boolean flag indicating whether or not the animation should loop. | `false` |
|**`duration`**| Custom duration (in milliseconds). | The `duration` exported by Bodymovin |
|**`easing`**| Custom `Easing` or function | Linear easing (`t => t`) |
|**`delay`**| Delay before the animation or between loops if looping (milliseconds) | `0` |
|**`animation`**| A function that takes an `Animated.Value` and returns a custom `CompositeAnimation` | *None* |

## Installation

You'll need to already have installed:
* `react`
* `react-native`
* `lottie-react-native`

Now `yarn add easy-lottie-react-native`.

## Usage

### Minimal
```jsx
import LottieAnimation from 'easy-lottie-react-native';

...

<LottieAnimation source={require('../path/to/your/animation.json')} />
```

### Custom size
```jsx
import { StyleSheet } from 'react-native';
import LottieAnimation from 'easy-lottie-react-native';

const styles = StyleSheet.create({
  animation: {
    width: 100,
  },
});

...

<LottieAnimation source={require('../path/to/your/animation.json')} style={styles.animation} />
```

### Looping with custom easing
Note that customizing easing will make the animation differ from what the designer intended.
```jsx
import { Easing } from 'react-native';
import LottieAnimation from 'easy-lottie-react-native';

const easing = Easing.inOut(Easing.quad);

...

<LottieAnimation source={require('../path/to/your/animation.json')} loop easing={easing} />
```

### Custom animation
```jsx
import { Animated } from 'react-native';
import LottieAnimation from 'easy-lottie-react-native';

const getAnimation = (value: Animated.Value) => 
  Animated.spring(value, {
    toValue: 1,
    useNativeDriver: true,
  });

...

<LottieAnimation source={require('../path/to/your/animation.json')} animation={getAnimation} />
```

---
_Source: https://npm.io/package/easy-lottie-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._