Skip to content

Commit f24ef83

Browse files
committed
update README
1 parent 7e891ef commit f24ef83

File tree

1 file changed

+29
-26
lines changed

1 file changed

+29
-26
lines changed

README.md

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
Lottie for React Native, [iOS](https://github.com/airbnb/lottie-ios), and [Android](https://github.com/airbnb/lottie-android)
2-
===
1+
# Lottie for React Native, [iOS](https://github.com/airbnb/lottie-ios), and [Android](https://github.com/airbnb/lottie-android)
32

43
[![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) [![Build Status](https://travis-ci.org/airbnb/lottie-react-native.svg)](https://travis-ci.org/airbnb/lottie-react-native)
54

@@ -9,18 +8,36 @@ Lottie is a mobile library for Android and iOS that parses [Adobe After Effects]
98

109
For the first time, designers can create **and ship** beautiful animations without an engineer painstakingly recreating it by hand.
1110

12-
# Getting Started
11+
## Getting Started
1312

1413
Get started with Lottie by installing the node module with yarn or npm:
1514

1615
```
1716
yarn add lottie-react-native
1817
```
18+
1919
or
20+
2021
```
2122
npm i --save lottie-react-native
2223
```
2324

25+
**_ IMPORTANT _**
26+
27+
Apps using older versions of React Native **_(RN < 0.59)_** should use `lottie-react-native` **_2.5.11_** due to AndroidX support being introduced only by React Native 0.59.
28+
29+
Therefore, any app running on RN <= 0.58.4 has to install lottie as follows:
30+
31+
```
32+
33+
```
34+
35+
or
36+
37+
```
38+
npm i --save [email protected]
39+
```
40+
2441
## iOS
2542

2643
Use `react-native link` to add the library to your project:
@@ -40,15 +57,7 @@ For android, you can `react-native link` as well:
4057
react-native link lottie-react-native
4158
```
4259

43-
## React Native Version Note:
44-
45-
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.
46-
47-
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.
48-
49-
Those on 0.59+ wanting out of the box AndroidX support should follow [this issue](https://github.com/react-native-community/lottie-react-native/issues/443).
50-
51-
# Usage
60+
## Usage
5261

5362
(If you are using TypeScript, please read [this first](/docs/typescript.md))
5463

@@ -60,13 +69,7 @@ import LottieView from 'lottie-react-native';
6069

6170
export default class BasicExample extends React.Component {
6271
render() {
63-
return (
64-
<LottieView
65-
source={require('./animation.json')}
66-
autoPlay
67-
loop
68-
/>
69-
);
72+
return <LottieView source={require('./animation.json')} autoPlay loop />;
7073
}
7174
}
7275
```
@@ -132,16 +135,16 @@ export default class BasicExample extends React.Component {
132135

133136
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:
134137

135-
| Prop | Description | Default |
136-
|---|---|---|
137-
|**`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* |
138-
|**`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` |
139-
|**`loop`**| A boolean flag indicating whether or not the animation should loop. | `true` |
140-
|**`autoPlay`**| A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | `false` |
138+
| Prop | Description | Default |
139+
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
140+
| **`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_ |
141+
| **`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` |
142+
| **`loop`** | A boolean flag indicating whether or not the animation should loop. | `true` |
143+
| **`autoPlay`** | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | `false` |
141144

142145
[More...](https://github.com/airbnb/lottie-react-native/blob/master/docs/api.md)
143146

144-
# More
147+
## More
145148

146149
View more documentation, FAQ, help, examples, and more at [airbnb.io/lottie](http://airbnb.io/lottie/react-native/react-native.html)
147150

0 commit comments

Comments
 (0)