Github url

lottie-react-native

by react-native-community

react-native-community /lottie-react-native

Lottie wrapper for React Native.

13.2K Stars 1.4K Forks Last release: Not found Apache License 2.0 461 Commits 39 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Lottie for React Native, iOS, and Android

npm Version License

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.

Installing (React Native >= 0.60.0)

Install

lottie-react-native

(latest) and

lottie-ios

(3.1.3):

yarn add lottie-react-native yarn add [email protected]

or

npm i --save lottie-react-native npm i --save [email protected]

Go to your ios folder and run:

pod install

_ IMPORTANT _

If you have issues linking your iOS project check out this StackOverflow thread on how to fix it.

If your app crashes on Android, means auto linking didn't work. You will need to make the following changes:

android/app/src/main/java/<AppName>/MainApplication.java

  • add
    import com.airbnb.android.react.lottie.LottiePackage;
    on the imports section
  • add
    packages.add(new LottiePackage());
    in
    List<reactpackage> getPackages()</reactpackage>
    ;

android/app/build.gradle

add

implementation project(':lottie-react-native')

in the

dependencies

block

android/settings.gradle

add:

include ':lottie-react-native' project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node\_modules/lottie-react-native/src/android')

Installing (React Native == 0.59.x)

Install

lottie-react-native

(3.0.2) and

lottie-ios

(3.0.3):

yarn add [email protected] yarn add [email protected]

or

npm i --save [email protected] npm i --save [email protected]

Use

react-native link

to add the library to your project:

react-native link lottie-ios react-native link lottie-react-native

Link the native iOS code by running:

npx pod-install

_ IMPORTANT _

If you have issues with your iOS project, open the Xcode project configuration and add the

Lottie.framework

as

Embedded Binaries

.

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.

Auto Embed

The following fastlane will auto embed the missing Lottie.framework file:

desc "Add Lottie.framework to Embedded Binaries" lane :add\_lottie\_framework do lottie\_xcodeproj\_path = '../../node\_modules/lottie-ios/Lottie.xcodeproj' if File.exist?(lottie\_xcodeproj\_path) project\_location = '../ENV["GYM\_SCHEME"].xcodeproj' target\_name = 'ENV["GYM\_SCHEME"]' framework\_name = 'Lottie.framework' # Get useful variables project = Xcodeproj::Project.open(project\_location) target = project.targets.find { |target| target.to\_s == target\_name } frameworks\_build\_phase = target.build\_phases.find { |build\_phase| build\_phase.to\_s == 'FrameworksBuildPhase' } # Add new "Embed Frameworks" build phase to target embed\_frameworks\_build\_phase = target.new\_copy\_files\_build\_phase('Embed Frameworks') embed\_frameworks\_build\_phase.symbol\_dst\_subfolder\_spec = :frameworks # Get reference to Lottie.framework file objects = project.objects.select { |obj| obj.isa == 'PBXContainerItemProxy'} lottie\_ios = objects.find { |object| object.remote\_info == 'Lottie\_iOS' } objects = project.objects.select { |obj| obj.isa == 'PBXReferenceProxy'} framework\_ref = objects.find { |object| object.remote\_ref == lottie\_ios } # Add framework to target as "Embedded Frameworks" build\_file = embed\_frameworks\_build\_phase.add\_file\_reference(framework\_ref) frameworks\_build\_phase.add\_file\_reference(framework\_ref) build\_file.settings = { 'ATTRIBUTES' =\> ['CodeSignOnCopy', 'RemoveHeadersOnCopy'] } project.save end end

Installing (React Native <= 0.58.x)

Install

lottie-react-native

(2.5.11) and

lottie-ios

(2.5.3):

yarn add [email protected] yarn add [email protected]

or

npm i --save [email protected] npm i --save [email protected]

Use

react-native link

to add the library to your project:

react-native link lottie-ios react-native link lottie-react-native

Note: If you are using react-native version 0.60 or higher you don't need to link lottie-react-native.

Go to your ios folder and run:

pod install

_ IMPORTANT _

If you have issues with your iOS project, open the Xcode project configuration and add the

Lottie.framework

as

Embedded Binaries

.

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.

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></lottieview>; } }

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')}
      /&gt;
    );
  }
}
</lottieview>

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}"></lottieview> ); } }

Changing color of layers:

import React from 'react'; import LottieView from 'lottie-react-native'; export default class BasicExample extends React.Component { render() { return ( <lottieview source="{require('../path/to/animation.json')}" colorfilters="{[{" keypath: color: loader autoplay loop></lottieview> ); } }

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

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

](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. | 

true

 | | 
**```
autoPlay
```** | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | 

false

 | | 
**```
colorFilters
```** | An Array of layers you want to change the color filter. | 

[]

``` |

More...

More

View more documentation, FAQ, help, examples, and more at airbnb.io/lottie

Example1

Example2

Example3

Community

Example4

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.