1 | # Lottie for React Native, [iOS](https://github.com/airbnb/lottie-ios), and [Android](https://github.com/airbnb/lottie-android)
|
2 |
|
3 | [![npm Version](https://img.shields.io/npm/v/lottie-react-native.svg)](https://www.npmjs.com/package/lottie-react-native) [![License](https://img.shields.io/npm/l/lottie-react-native.svg)](https://www.npmjs.com/package/lottie-react-native)
|
4 |
|
5 | Lottie component for React Native (iOS and Android)
|
6 |
|
7 | Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/bodymovin) and renders them natively on mobile!
|
8 |
|
9 | For the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.
|
10 |
|
11 | ## Installing (React Native >= 0.60.0)
|
12 |
|
13 | Install `lottie-react-native` (latest) and `lottie-ios` (3.1.3):
|
14 |
|
15 | ```
|
16 | yarn add lottie-react-native
|
17 | yarn add lottie-ios@3.1.3
|
18 | ```
|
19 |
|
20 | or
|
21 |
|
22 | ```
|
23 | npm i --save lottie-react-native
|
24 | npm i --save lottie-ios@3.1.3
|
25 | ```
|
26 |
|
27 | Go to your ios folder and run:
|
28 |
|
29 | ```
|
30 | pod install
|
31 | ```
|
32 |
|
33 | **_ IMPORTANT _**
|
34 |
|
35 | If you have issues linking your **iOS** project check out this [StackOverflow thread](https://stackoverflow.com/questions/52536380/why-linker-link-static-libraries-with-errors-ios) on how to fix it.
|
36 |
|
37 | If your app crashes on **Android**, means auto linking didn't work. You will need to make the following changes:
|
38 |
|
39 | **android/app/src/main/java/\<AppName\>/MainApplication.java**
|
40 |
|
41 | - add `import com.airbnb.android.react.lottie.LottiePackage;` on the imports section
|
42 | - add `packages.add(new LottiePackage());` in `List<ReactPackage> getPackages()`;
|
43 |
|
44 | **android/app/build.gradle**
|
45 |
|
46 | add `implementation project(':lottie-react-native')` in the `dependencies` block
|
47 |
|
48 | **android/settings.gradle**
|
49 |
|
50 | add:
|
51 |
|
52 | ```
|
53 | include ':lottie-react-native'
|
54 | project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
|
55 |
|
56 | ```
|
57 |
|
58 |
|
59 | ## Installing (React Native == 0.59.x)
|
60 |
|
61 | Install `lottie-react-native` (3.0.2) and `lottie-ios` (3.0.3):
|
62 |
|
63 | ```
|
64 | yarn add lottie-react-native@3.0.2
|
65 | yarn add lottie-ios@3.0.3
|
66 | ```
|
67 |
|
68 | or
|
69 |
|
70 | ```
|
71 | npm i --save lottie-react-native@3.0.2
|
72 | npm i --save lottie-ios@3.0.3
|
73 | ```
|
74 |
|
75 | Use `react-native link` to add the library to your project:
|
76 |
|
77 | ```
|
78 | react-native link lottie-ios
|
79 | react-native link lottie-react-native
|
80 | ```
|
81 | Note:
|
82 |
|
83 | Go to your ios folder and run:
|
84 |
|
85 | ```
|
86 | pod install
|
87 | ```
|
88 |
|
89 | **_ IMPORTANT _**
|
90 |
|
91 | If you have issues with your iOS project, open the Xcode project configuration and add the `Lottie.framework` as `Embedded Binaries`.
|
92 |
|
93 | Apps that use static Xcode project linking need to set iOS deployment version to iOS 12 _or_ switch to CocoaPods-based linking (using frameworks) _or_ downgrade `lottie-react-native` to version **_2.6.1_**.
|
94 |
|
95 | ## Installing (React Native <= 0.58.x)
|
96 |
|
97 | Install `lottie-react-native` (2.5.11) and `lottie-ios` (2.5.3):
|
98 |
|
99 | ```
|
100 | yarn add lottie-react-native@2.5.11
|
101 | yarn add lottie-ios@2.5.3
|
102 | ```
|
103 |
|
104 | or
|
105 |
|
106 | ```
|
107 | npm i --save lottie-react-native@2.5.11
|
108 | npm i --save lottie-ios@2.5.3
|
109 | ```
|
110 |
|
111 | Use `react-native link` to add the library to your project:
|
112 |
|
113 | ```
|
114 | react-native link lottie-ios
|
115 | react-native link lottie-react-native
|
116 | ```
|
117 | Note: If you are using react-native version 0.60 or higher you don't need to link [lottie-react-native](https://github.com/react-native-community/lottie-react-native).
|
118 |
|
119 | Go to your ios folder and run:
|
120 |
|
121 | ```
|
122 | pod install
|
123 | ```
|
124 |
|
125 | **_ IMPORTANT _**
|
126 |
|
127 | If you have issues with your iOS project, open the Xcode project configuration and add the `Lottie.framework` as `Embedded Binaries`.
|
128 |
|
129 | Apps that use static Xcode project linking need to set iOS deployment version to iOS 12 _or_ switch to CocoaPods-based linking (using frameworks) _or_ downgrade `lottie-react-native` to version **_2.6.1_**.
|
130 |
|
131 | ## Usage
|
132 |
|
133 | (If you are using TypeScript, please read [this first](/docs/typescript.md))
|
134 |
|
135 | LottieView can be used in a declarative way:
|
136 |
|
137 | ```jsx
|
138 | import React from 'react';
|
139 | import LottieView from 'lottie-react-native';
|
140 |
|
141 | export default class BasicExample extends React.Component {
|
142 | render() {
|
143 | return <LottieView source={require('./animation.json')} autoPlay loop />;
|
144 | }
|
145 | }
|
146 | ```
|
147 |
|
148 | Additionally, there is an imperative API which is sometimes simpler.
|
149 |
|
150 | ```jsx
|
151 | import React from 'react';
|
152 | import LottieView from 'lottie-react-native';
|
153 |
|
154 | export default class BasicExample extends React.Component {
|
155 | componentDidMount() {
|
156 | this.animation.play();
|
157 | // Or set a specific startFrame and endFrame with:
|
158 | this.animation.play(30, 120);
|
159 | }
|
160 |
|
161 | render() {
|
162 | return (
|
163 | <LottieView
|
164 | ref={animation => {
|
165 | this.animation = animation;
|
166 | }}
|
167 | source={require('../path/to/animation.json')}
|
168 | />
|
169 | );
|
170 | }
|
171 | }
|
172 | ```
|
173 |
|
174 | Lottie's animation progress can be controlled with an `Animated` value:
|
175 |
|
176 | ```jsx
|
177 | import React from 'react';
|
178 | import { Animated, Easing } from 'react-native';
|
179 | import LottieView from 'lottie-react-native';
|
180 |
|
181 | export default class BasicExample extends React.Component {
|
182 | constructor(props) {
|
183 | super(props);
|
184 | this.state = {
|
185 | progress: new Animated.Value(0),
|
186 | };
|
187 | }
|
188 |
|
189 | componentDidMount() {
|
190 | Animated.timing(this.state.progress, {
|
191 | toValue: 1,
|
192 | duration: 5000,
|
193 | easing: Easing.linear,
|
194 | }).start();
|
195 | }
|
196 |
|
197 | render() {
|
198 | return (
|
199 | <LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
|
200 | );
|
201 | }
|
202 | }
|
203 | ```
|
204 |
|
205 | Changing color of layers:
|
206 |
|
207 | ```jsx
|
208 | import React from 'react';
|
209 | import LottieView from 'lottie-react-native';
|
210 |
|
211 | export default class BasicExample extends React.Component {
|
212 | render() {
|
213 | return (
|
214 | <LottieView
|
215 | source={require('../path/to/animation.json')}
|
216 | colorFilters={[{
|
217 | keypath: "button",
|
218 | color: "#F00000"
|
219 | },{
|
220 | keypath: "Sending Loader",
|
221 | color: "#F00000"
|
222 | }]}
|
223 | autoPlay
|
224 | loop
|
225 | />
|
226 | );
|
227 | }
|
228 | }
|
229 | ```
|
230 |
|
231 | ## API
|
232 |
|
233 | You can find the full list of props and methods available in our [API document](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md). These are the most common ones:
|
234 |
|
235 | | Prop | Description | Default |
|
236 | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
|
237 | | **`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_ |
|
238 | | **`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` |
|
239 | | **`loop`** | A boolean flag indicating whether or not the animation should loop. | `true` |
|
240 | | **`autoPlay`** | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | `false` |
|
241 | | **`colorFilters`** | An Array of layers you want to change the color filter. | `[]` |
|
242 |
|
243 | [More...](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md)
|
244 |
|
245 | ## More
|
246 |
|
247 | View more documentation, FAQ, help, examples, and more at [airbnb.io/lottie](https://airbnb.io/lottie/)
|
248 |
|
249 | ![Example1](docs/gifs/Example1.gif)
|
250 |
|
251 | ![Example2](docs/gifs/Example2.gif)
|
252 |
|
253 | ![Example3](docs/gifs/Example3.gif)
|
254 |
|
255 | ![Community](docs/gifs/Community%202_3.gif)
|
256 |
|
257 | ![Example4](docs/gifs/Example4.gif)
|