@bondparkerbond/lottie-react-native
v2.6.0
Published
React Native bindings for Lottie
Downloads
10
Maintainers
Readme
Lottie for React Native, iOS, and Android
Lottie component for React Native (iOS and Android)
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!
For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.
Getting Started
Get started with Lottie by installing the node module with yarn or npm:
yarn add lottie-react-native
or
npm i --save lottie-react-native
iOS
Use react-native link
to add the library to your project:
react-native link lottie-ios
react-native link lottie-react-native
After this, open the Xcode project configuration and add the Lottie.framework
as Embedded Binaries
.
Android
For android, you can react-native link
as well:
react-native link lottie-react-native
React Native Version Note:
React Native 0.59 included several significant changes to support 64-bit Android. Those who are on react-native versions BELOW 0.59.0 should continue using lottie-react-native 2.5.11.
Those using react-native 0.59+ without AndroidX can use lottie-react-native 2.6.0, which includes backwards compatibility for older SDK versions that Lottie currently relies upon.
Those on 0.59+ wanting out of the box AndroidX support should follow this issue.
Usage
(If you are using TypeScript, please read this first)
LottieView can be used in a declarative way:
import React from 'react';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
render() {
return (
<LottieView
source={require('./animation.json')}
autoPlay
loop
/>
);
}
}
Additionally, there is an imperative API which is sometimes simpler.
import React from 'react';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
this.animation.play(30, 120);
}
render() {
return (
<LottieView
ref={animation => {
this.animation = animation;
}}
source={require('../path/to/animation.json')}
/>
);
}
}
Lottie's animation progress can be controlled with an Animated
value:
import React from 'react';
import { Animated, Easing } from 'react-native';
import LottieView from 'lottie-react-native';
export default class BasicExample extends React.Component {
constructor(props) {
super(props);
this.state = {
progress: new Animated.Value(0),
};
}
componentDidMount() {
Animated.timing(this.state.progress, {
toValue: 1,
duration: 5000,
easing: Easing.linear,
}).start();
}
render() {
return (
<LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
);
}
}
API
You can find the full list of props and methods available in our API document. These are the most common ones:
| Prop | Description | Default |
|---|---|---|
|source
| Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri
property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json')
. | None |
|style
| Style attributes for the view, as expected in a standard View
. | 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. | true
|
|autoPlay
| A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | false
|
More
View more documentation, FAQ, help, examples, and more at airbnb.io/lottie