Lottie wrapper for React Native.

Overview

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

Install lottie-react-native (latest) and lottie-ios (3.2.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

Versioning

Depending on which version of React Native your app runs on you might need to install a specific version of lottie-react-native. Here's the compatibility list:

App built in React Native version Requires lottie-react-native version Requires lottie-ios version
>= 0.59 3.0.2 3.0.3
>= 0.60 4.0.2 3.2.3
>= 0.63 4.0.3 3.2.3
>= 0.64 4.1.3 3.2.3
>= 0.66 latest 3.2.3

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

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: 'button',
            color: '#F00000',
          },
          {
            keypath: 'Sending Loader',
            color: '#F00000',
          },
        ]}
        autoPlay
        loop
      />
    );
  }
}

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
colorFilters An Array of layers you want to change the color filter. []

More...

Troubleshooting

Not all After Effects features are supported by Lottie. If you notice there are some layers or animations missing check this list to ensure they are supported.

iOS specifc problems

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

Android specific problems

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();

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')

More

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

Example1

Example2

Example3

Community

Example4

Comments
  • iOS doesn't build latest version 3.0.3

    iOS doesn't build latest version 3.0.3

    Description

    I'm receiving an error while trying to build my project, something related to Lottie.modulemap.

    Error:

    fatal error: module map file '/Users/user/Library/Developer/Xcode/DerivedData/app-dzebxnujdxzfoldhzwemhljtfkye/Build/Products/Debug-iphonesimulator/lottie-ios/Lottie.modulemap' not found
    

    Steps to Reproduce

    1. Install the latest dependency
    2. run react-native run-ios or try to build in the Xcode

    Expected behavior: The project should build and run the app.

    Actual behavior: [What actually happened] Build process fails by not finding the path lottie-ios/Lottie.modulemap

    Versions

    react-native: 0.60.3 lottie-ios: 3.0.3 lottie-react-native: 3.0.2

    You can get this information from executing npm version.

    { app: '0.0.1',
      npm: '6.9.0',
      ares: '1.14.0',
      cldr: '33.1',
      http_parser: '2.8.0',
      icu: '62.1',
      modules: '64',
      napi: '3',
      nghttp2: '1.34.0',
      node: '10.13.0',
      openssl: '1.1.0i',
      tz: '2018e',
      unicode: '11.0',
      uv: '1.23.2',
      v8: '6.8.275.32-node.36',
      zlib: '1.2.11' }
    
    opened by iagormoraes 55
  • Windows support [C#]

    Windows support [C#]

    It is based on the macOS support: #679

    How to run it

    Create a react-native-windows app in C# see this doc, use npx react-native-windows-init --overwrite --language cs

    Add lottie-react-native to deps: yarn add

    Add node_modules/lottie-react-native/src/windows/LottieReactNativeWindows/LottieReactNativeWindows.csproj to the solution.

    Add LottieReactNativeWindows project to the references of the main project.

    Add the following to the main project's App.xaml.cs to the constructor.

    PackageProviders.Add(new LottieReactNativeWindows.ReactPackageProvider());
    

    Now you can use LottieView!

    Using CodeGen & Color Filters

    Windows version allows using codegen files: https://docs.microsoft.com/en-us/windows/communitytoolkit/animations/lottie-scenarios/getting_started_codegen

    That is the only way to make sure that the colors change.

    That is the example on how to use that:

    
    <LottieView
              style={{width: 600, height: 600}}
              source="codegen://LottieWindowsDemoApp.AnimatedVisuals.Data"
              loop
              autoPlay
              colorFilters={[
                {keypath: "PlayPauseColor", color: "#ABABAB"},
              ]}
    />
    

    Where LottieWindowsDemoApp.AnimatedVisuals.Data is the identifier of the class generated by the codegen utility and PlayPauseColor is a special name of the layer supported by the codegen utility.

    This code of course assumes that the class Data in namespace AnimatedVisuals is added to your project that is named LottieWindowsDemoApp.

    opened by mandrigin 49
  • Cycle in dependencies between targets 'LottieLibraryIOS' and 'LottieReactNative'

    Cycle in dependencies between targets 'LottieLibraryIOS' and 'LottieReactNative'

    Description

    Getting this on react-native run-ios:

    Build system information
    
    error: Cycle in dependencies between targets 'LottieLibraryIOS' and 'LottieReactNative'; building could produce unreliable results.
    Cycle path: LottieLibraryIOS → LottieReactNative → LottieLibraryIOS
    Cycle details:
    Target build order preserved because “Parallelize Build” is off
    
    → Target 'LottieLibraryIOS' has copy command from '/Users/username/Workspace/projectName/node_modules/lottie-ios/lottie-ios/Classes/PublicHeaders/Lottie.h' to '/Users/username/Workspace/projectName/ios/build/Build/Products/Debug-iphonesimulator/include/Lottie/Lottie.h'
    ○ Target 'LottieLibraryIOS' has target dependency on Target 'LottieReactNative' due to target order in a “Target Dependencies” build phase or the scheme
    → Target 'LottieReactNative' has compile command with input '/Users/username/Workspace/projectName/node_modules/lottie-react-native/src/ios/LottieReactNative/LRNContainerView.m'
    
    
    ** BUILD FAILED **
    
    

    Interestingly - the app builds and runs fine, lottie animations work fine - but the build is failed and obviously I'd like to avoid it.

    I've followed installation steps to the letter (both automatic and manual), tried unlinking, removing, adding everything back again. Cleaning build folder doesn't help. Only first application build succeeds, if I'd run react-native run-ios again - I get the BUILD FAILED. Need to remove and readd lottie back again. Passing --reset-cache flag doesn't change anything.

    Versions

    react-native: 0.57.0 lottie-react-native: 2.5.8 lottie-ios: 2.5.0 xcode: 10 (new build system)

    screen shot 2018-09-24 at 17 59 14

    opened by p-grzelczak 45
  • "Unable to load script from assets 'index.android.bundle'..."

    When I follow the instructions here for Android, I immediately receive the error "unable to load script from assets 'index.android.bundle' as shown in the screenshot. I have refreshed my project and followed the instructions closely several times. My project runs fine until I try to link Lottie. Any idea why I am getting this error?

    screenshot_1516491511

    opened by kpolley 41
  • 2.3.0 Animations no longer appear (upgrading from 1.2 to 2.3)

    2.3.0 Animations no longer appear (upgrading from 1.2 to 2.3)

    I just upgraded to lottie-react-native 2.3.0 and now none of my animations are showing up. I have had my same code working since version 1.2 and now with 2.3 it doesn't event show up. Does anyone know how to fix this?

    build issue 
    opened by RyanMitchellWilson 38
  • Cannot build on React Native 0.41.2

    Cannot build on React Native 0.41.2

    Current behavior:

    Cannot build.

    Reproduce:

    $ React native awesome $ cd awesome $ npm i --save lottie-react-native

    └─┬ [email protected] 
      ├── [email protected] 
      └─┬ [email protected] 
        └── [email protected] 
    

    $ react-native link lottie-ios

    rnpm-install info Linking lottie-ios ios dependency 
    rnpm-install info iOS module lottie-ios has been successfully linked 
    

    $ react-native link lottie-react-native/

    rnpm-install info Linking lottie-react-native/ android dependency 
    rnpm-install info Android module lottie-react-native/ has been successfully linked 
    rnpm-install info Linking lottie-react-native/ ios dependency 
    rnpm-install info iOS module lottie-react-native/ has been successfully linked 
    

    $ react-native run-ios

    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableLayer.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTEllipseShapeLayer.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTGroupLayerView.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTLayerView.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTMaskLayer.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTRectShapeLayer.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeLayerView.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableBoundsValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableColorValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableNumberValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatablePointValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableScaleValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimatableShapeValue.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeRectangle.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimationCache.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTComposition.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeGroup.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTMask.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeStroke.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTLayer.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimationView.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapePath.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeTransform.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeFill.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeTrimPath.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTShapeCircle.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(CAAnimationGroup+LOTAnimatableGroup.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(CGGeometryAdditions.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(UIColor+Expanded.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(LOTAnimationTransitionController.o)) was built for newer iOS version (10.2) than being linked (8.0)
    ld: warning: object file (/Users/yuhogyun/test/awesome/ios/build/Build/Products/Debug-iphonesimulator/libLottie.a(Lottie_vers.o)) was built for newer iOS version (10.2) than being linked (8.0)
    Undefined symbols for architecture x86_64:
      "_OBJC_CLASS_$_LOTStrokeShapeLayer", referenced from:
          _OBJC_CLASS_$_LOTCircleShapeLayer in libLottie.a(LOTEllipseShapeLayer.o)
          _OBJC_CLASS_$_LOTRoundRectLayer in libLottie.a(LOTRectShapeLayer.o)
          objc-class-ref in libLottie.a(LOTShapeLayerView.o)
      "_OBJC_METACLASS_$_LOTStrokeShapeLayer", referenced from:
          _OBJC_METACLASS_$_LOTCircleShapeLayer in libLottie.a(LOTEllipseShapeLayer.o)
          _OBJC_METACLASS_$_LOTRoundRectLayer in libLottie.a(LOTRectShapeLayer.o)
    ld: symbol(s) not found for architecture x86_64
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    
    
    ** BUILD FAILED **
    
    
    The following commands produced analyzer issues:
    	Analyze Modules/RCTRedBox.m
    (1 command with analyzer issues)
    
    
    The following build commands failed:
    	Ld build/Build/Products/Debug-iphonesimulator/awesome.app/awesome normal x86_64
    (1 failure)
    
    Installing build/Build/Products/Debug-iphonesimulator/awesome.app
    An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
    Failed to install the requested application
    The bundle identifier of the application could not be determined.
    Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
    Print: Entry, ":CFBundleIdentifier", Does Not Exist
    
    Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/awesome.app/Info.plist
    Print: Entry, ":CFBundleIdentifier", Does Not Exist
    

    So, I open my iOS project ,clean and then build

    But error log here

    Undefined symbols for architecture x86_64:
      "_OBJC_CLASS_$_LOTStrokeShapeLayer", referenced from:
          _OBJC_CLASS_$_LOTCircleShapeLayer in libLottie.a(LOTEllipseShapeLayer.o)
          _OBJC_CLASS_$_LOTRoundRectLayer in libLottie.a(LOTRectShapeLayer.o)
          objc-class-ref in libLottie.a(LOTShapeLayerView.o)
      "_OBJC_METACLASS_$_LOTStrokeShapeLayer", referenced from:
          _OBJC_METACLASS_$_LOTCircleShapeLayer in libLottie.a(LOTEllipseShapeLayer.o)
          _OBJC_METACLASS_$_LOTRoundRectLayer in libLottie.a(LOTRectShapeLayer.o)
    ld: symbol(s) not found for architecture x86_64
    clang: error: linker command failed with exit code 1 (use -v to see invocation)
    

    My environment is OS X Elcapitan 10.11

    $ node -v

    v7.5.0
    

    $ npm -v

    4.1.2
    

    $ react-native -v

    react-native-cli: 2.0.1
    react-native: 0.41.2
    

    Comment

    The recent lottie-ios is 1.0.3 but lottie-react-native dependency ios is 1.0.2

    Is it related to the version dependency?

    Editted

    $ react-native upgrade

    Then i can use lottie.

    but animation not showing without any error.

    build issue 
    opened by philographer 34
  • React Native 0.64 rc-1

    React Native 0.64 rc-1

    Description

    I'm trying to use lottie on the new release candidate of react native (0.64 rc-1) with hermes enabled, and i encountered this problem. Screenshot 2020-11-26 at 00 22 48

    Steps to Reproduce

    1. npx react-native init RN64 --version 0.64.0-rc.1
    2. yarn add lottie-react-native
    3. yarn add [email protected]
    4. cd ios && pod instal

    Expected behavior: I can build the app on xcode.

    Actual behavior: Screenshot 2020-11-26 at 00 22 48

    Versions

    "react": "17.0.1", "react-native": "0.64.0-rc.1" "lottie-ios": "3.1.8", "lottie-react-native": "^3.5.0",

    opened by lorenzoangelini 33
  • Could not find com.android.support:appcompat-v7:26.1.0.

    Could not find com.android.support:appcompat-v7:26.1.0.

    I'm trying to run React Native on android for first time in a while. I'm getting:

    A problem occurred configuring project ':app'. Could not resolve all dependencies for configuration ':app:_debugApk'. A problem occurred configuring project ':lottie-react-native'. > Could not resolve all dependencies for configuration ':lottie-react-native:_debugPublishCopy'. > Could not find com.android.support:appcompat-v7:26.1.0. Required by: QuickChinese:lottie-react-native:unspecified > com.airbnb.android:lottie:2.2.5

    Any ideas how to fix this?

    opened by martinblampied 32
  • Animation not showing, lottie-react-native

    Animation not showing, lottie-react-native

    Description

    I have a react-native view which has a lottie animation in it, but the lottie animation doesn't show at all, the screen is just yellow(background color of the enclosing view), please what may be wrong, below is my code

    import React, { Component } from 'react';
    import {
    StyleSheet,
    View, 
    } from 'react-native';
    import LottieView from 'lottie-react-native';
    export default class Splash extends Component {
    constructor(props) {
    super(props);
    }
    static navigationOptions = {
    header: null,
    };
    render() {
    return (
    <View style={{flex: 1, backgroundColor: 'yellow'}}>
       <LottieView
       style={{flex: 1}}
        source={require('../check.json')}
        autoPlay
        loop
      />
      </View>
      );
        ` }}`
    

    **Expected behavior:**The Animation is meant to play normally

    Actual behavior: The animation doesn't show at all

    Versions

    "lottie-react-native": "2.3.2",
    "react": "16.3.0-alpha.0",
    "react-native": "0.55.0",
    
    opened by Adokiye 31
  • remote uri

    remote uri

    I tried using along the following lines, but it doesn't render the animation. I am using it as follows

    <LottieLoader source= {{uri: <path + filename.json>}}/>

    However, if I reference the file locally using require(<path/filename>), it works fine. Couldn't find an example to do this.

    Does the remote uri option work?

    bug 
    opened by ganap 31
  • 'Lottie/Lottie.h' file not found on release builds

    'Lottie/Lottie.h' file not found on release builds

    Dear,

    I added lottie-react-native into my project, linked everything and added the framework in build phases. It works well when debugging the project, but when I try to create an archive, it crashes and says 'Lottie/Lottie.h' file not found in LRNAnimationViewManager.

    I'm using "lottie-react-native": "^2.2.0" according to package.json. How do I fix this issue? This is what my build phases looks like: http://prntscr.com/gb97op

    build issue 
    opened by dejakob 31
  • Android animations not playing with RN 0.70.4 and the new build architecture

    Android animations not playing with RN 0.70.4 and the new build architecture

    Description

    My Lottie animations do not work on Android anymore after upgrading RN. They work on iOS though.

    I suspect it's because of react-native 0.70.4 and the new build architecture.

    I tried to trigger the animation with autoPlay and this.animationRef.current.play(). Both do not work on Android.

    Files are loaded via a require and not as a string source={require('....')}

    Steps to Reproduce

    Build an app with the RN version and the new build architecture + Hermes.

    Expected behavior: Animations are animating on Android

    Actual behavior: Animations are static images on Android

    Versions

    react-native 0.70.4 lottie-react-native 5.1.4

    opened by mklb 0
  • The animation don't move

    The animation don't move

    Description

    [Description of the bug]

    Steps to Reproduce

    In short, I found that I used the app in dark mode it would stop. (In IOS.) later I will test Android, thanks. And if I turn off the dark mode, it will work again(be ok)

    Expected behavior: move

    Actual behavior: don't move

    Versions

    "react-native": "0.69.6", "lottie-react-native": "^5.1.4",

    opened by weiawesome 0
  • How to pre-fetch/pre-load or showing loading spinner for Lotties from remote URI?

    How to pre-fetch/pre-load or showing loading spinner for Lotties from remote URI?

    Description

    I want to pre-fetch/pre-load remote URI's so that when I am displaying a Lottie, it is instant. However, right now my component takes a second or two after mounted to fetch the Lottie from the remote URI.

    The native <Image /> component from React Native has a defaultSource and also onLoadStart and onLoadEnd components that allow to show loading spinners while the image is fetching. Furthermore, it also has the prefetch() function that allows for pre-fetching.

    How can I do either show a loading spinner or pre-fetch/pre-load remote Lottie URI's?

    enhancement 
    opened by ansh 2
  • "react/bridging/AString.h" file not found

    "lottie-ios": "^3.4.0",
    "lottie-react-native": "^5.1.4",
    "react-native": "^0.70.5",
    

    Expected behavior: Build should succeed.

    Actual behavior: Even though the file is present in node_modules/react-native/ReactCommon/react/bridging/AString.h. It throws an error Could not build Objective-C module 'React' "react/bridging/AString.h" file not found

    Also tried solution as present here https://github.com/lottie-react-native/lottie-react-native/issues/708#issuecomment-775175081

    Versions

    {
      npm: '8.19.2',
      node: '14.17.6',
      v8: '8.4.371.23-node.76',
      uv: '1.41.0',
      zlib: '1.2.11',
      brotli: '1.0.9',
      ares: '1.17.2',
      modules: '83',
      nghttp2: '1.42.0',
      napi: '8',
      llhttp: '2.1.3',
      openssl: '1.1.1l',
      cldr: '39.0',
      icu: '69.1',
      tz: '2021a',
      unicode: '13.0'
    }
    
    opened by roots-ai 11
  • Lottie only works locally

    Lottie only works locally

    Description

    When using Lottie locally, the animation plays as expected. When running the app not locally, the app crashes when the animation is played.

    Steps to Reproduce

    1. Add animation using LottieView
    2. Use autoPlay or call play to play the animation
    3. Confirm the animation works locally
    4. Deploy code
    5. Attempt to view animation in non local environment. Note that the app crashes

    Expected behavior: The animation should play. Actual behavior: The animation crashes the app on play.

    Versions

    "lottie-react-native": "5.0.1" "react-native": "0.68.2" "expo": "^45.0.0"

    • I am on a managed version of expo
    • I've tried exporting my animation using Bodymovin, v5.9.0 and LottieFiles v3.0.2

    Errors

    screen2 screen1

    bug 
    opened by harurang 1
Releases(v5.1.4)
Owner
Lottie - React Native
Lottie - React Native
React native wrapper for Jitsi Meet SDK Library that rely on the native view (Activity / ViewController)

react-native-jitsi-meet-sdk React native wrapper for Jitsi Meet SDK Library. This Library implements the Jitsi SDK with a native activity on the Andro

null 7 May 2, 2022
Sceneform React Native AR Component using ARCore and Google Filament as 3D engine. This the Sceneform Maintained Component for React Native

Discord Server Join us on Discord if you need a hand or just want to talk about Sceneform and AR. Features Remote and local assets Augmented Faces Clo

SceneView Open Community 41 Oct 27, 2022
With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any other file server

React Native In-App update With react-native-update-in-app library you can easily implement in-app updates in your React Native app using CDN or any o

Nepein Andrey 5 Aug 24, 2022
React Native wrapper around Indy SDK Java and Objective-C wrappers.

React Native Indy SDK React Native Indy SDK wrapper. Installation with npm: $ npm install indy-sdk-react-native --save with Yarn: $ yarn add indy-sdk-

Hyperledger 20 Oct 22, 2022
Android Library to create Lottie animation view dialog easily with a lot of customization

LottieDialog Android Library to create Lottie animation view dialog easily with a lot of customization Why you should use Lottie Dialog You have no li

Amr Hesham 39 Oct 7, 2022
An awesome native wheel picker component for React Native.

⛏️ react-native-picky An awesome native wheel picker component for react-native. Features Supports multiple columns ✅ Supports looping ✅ Native Androi

null 28 Dec 4, 2022
React wrapper for android and ios

Deepvue Aadhaar Offline e-KYC React Native SDK This is a wrapper over Android and iOS SDK for react native. Aadhaar Paperless Offline eKYC is a secure

null 2 May 10, 2022
A React Native project starter with Typescript, a theme provider with hook to easy styling component, a folder architecture ready and some configs to keep a codebase clean.

React Native Boilerplate Folder structure : src ├── assets │   ├── audios │   ├── fonts │   ├── icons │   └── images ├── components │   ├── Layout.tsx

LazyRabbit 23 Sep 1, 2022
Lightweight React Native UI Components inspired on Vant

vant-react-native Install yarn add vant-react-native Or npm install vant-react-native Usage import React, { Component } from 'react'; import { View, T

洛竹 51 Sep 29, 2022
Admob for React Native with powerful hooks and components

React Native Admob ⚠️ Please note, this package is under active development, which means it may be not stable to apply on production. Please use this

null 127 Oct 4, 2022
Ship React Native .jsbundles compressed by Brotli algorithm.

Ship compressed JS bundles Warning: not yet available for Android. Sometimes you need a very small .app, for example if you are building an App Clip.

Ivan Moskalev 37 Nov 15, 2022
Prevent Screenshots in your React Native app when needed. 🦄

React Native Prevent Screenshots Prevent Screenshots in your React Native app when needed. ?? Installation First, you need to install the package usin

Ahmed Mahmoud 64 Oct 19, 2022
Using turborepo & react-native

Turborepo starter with NPM This is an official starter turborepo. What's inside? This turborepo uses NPM as a package manager. It includes the followi

Renan Machado 5 Feb 16, 2022
This is a Food Delivery Mobile Application. Build Using React Native

Ax Food Delivery Service This is a Food Delivery Mobile Application build using ?????????? ???????????? ?? Installation Clone this repository git clon

Mindula Dilthushan Manamperi 13 Jul 14, 2022
Project developed for MB Talk - App Center integration on React Native

App Center Setup Download APK Click here Requirements React Native CLI Yarn Sign Up on App Center and create a new App. How to use this repo Clone thi

André Angeloni 2 Oct 31, 2022
Render After Effects animations natively on Android and iOS, Web, and React Native

Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations expo

Airbnb 33.4k Dec 2, 2022
React Native FBSDK Next

React Native FBSDK Next This project aims to keep continuity of the React Native FBSDK from Facebook. As Facebook dropped support from it. As a commun

Marcos Bérgamo 470 Dec 5, 2022
📹 Live stream RTMP Publisher for React Native

react-native-rtmp-publisher ?? Live stream RTMP publisher for React Native ⚠️ iOS on development Installation npm install react-native-rtmp-publisher

Ezran Bayantemur 54 Nov 30, 2022
Template to speed up your development in React Native projects.

React Native SpaceShip I created this template with the purpose of leaving the development environment already configured for use. ?? How to use it in

Lucas Augusto 3 Mar 23, 2022