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 (React Native >= 0.60.0)

Install lottie-react-native (latest) and lottie-ios (3.1.8):

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

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

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

More

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

Example1

Example2

Example3

Community

Example4

Issues
  • Error in Latest versions (3.0.1)

    Error in Latest versions (3.0.1)

    From the changelog, version 3.0.0 and 3.0.1 are released. On npm, both versions are not available.

    Any plans on publishing?

    opened by cheeaun 62
  • 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 51
  • 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 44
  • "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 40
  • 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
  • '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
  • Bump node-fetch from 2.6.0 to 2.6.6

    Bump node-fetch from 2.6.0 to 2.6.6

    Bumps node-fetch from 2.6.0 to 2.6.6.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    v2.6.1

    This is an important security release. It is strongly recommended to update as soon as possible.

    See CHANGELOG for details.

    Changelog

    Sourced from node-fetch's changelog.

    Changelog

    All notable changes will be recorded here.

    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

    3.1.0

    What's Changed

    New Contributors

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.0.0...v3.1.0

    v3.0.0

    • other: Marking v3 as stable
    • docs: Add example for loading ESM from CommonJS (#1236)

    v3.0.0-beta.10

    • Breaking: minimum supported Node.js version is now 12.20.

    ... (truncated)

    Commits
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • b5e2e41 update version number
    • 2358a6c Honor the size option after following a redirect and revert data uri support
    • 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
    • 1e99050 fix: Change error message thrown with redirect mode set to error (#653)
    • 244e6f6 docs: Show backers in README
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Document onAnimationFinish isCancelled argument

    Document onAnimationFinish isCancelled argument

    Add missing documentation for the argument sent in the onAnimationFinish callback.

    opened by curiousdustin 0
  • How to locate /images/ for the animation

    How to locate /images/ for the animation

    Description

    How cant I use the local image in JSON file like react-lottie

    I'm using this code for the web with react-lottie it work, but on react native it not work and crash app It's can only use assets image from folder assets of android and ios

    How can I use image from outside native folder and image from url server in p

    Thanks

    import img_0 from './images/img_0.png'
    export default {
      v: '5.2.1',
      fr: 25,
      ip: 1,
      op: 74,
      w: 500,
      h: 500,
      nm: 'pulseloop',
      ddd: 0,
      assets: [
        { id: 'image_0', w: 701, h: 632, u: '', p: img_0, e: 0 },
        {
          id: 'comp_0',
          layers: [
            {
              ddd: 0,
              ind: 1,
              ty: 2,
              nm: img_0,
              cl: 'png',
              refId: 'image_0',
    ....
    

    Versions

    react -native: 0.64 "lottie-ios": "^3.2.3", "lottie-react-native": "^4.1.3",

    opened by taitran2512 0
  • [Android] Cannot include downloaded images in animation

    [Android] Cannot include downloaded images in animation

    Description

    I need to be able to include a downloaded image in an animation.

    On iOS, I can accomplish this by using react-native-fs to save the image to RNFS.MainBundlePath and then modify the JSON animation file to reference the new filename instead of the one that was exported from After Effects.

    I cannot determine a way to accomplish this on Android. Lottie is looking for files in the main/assets directory, but I don't know of a way to store downloaded files here.

    The Lottie docs discuss using setImageAssetDelegate to provide an alternate way of finding the assets, however, I do not see a way to implement this with lottie-react-native.

    Is there a way to accomplish this with lottie-react-native?

    opened by curiousdustin 4
  • Bad animation quality on Android

    Bad animation quality on Android

    Description

    On android quality of animation is very bad.

    Steps to Reproduce

    Just use this lottie and compare both platforms: bottle-vibe.json.zip

    Expected behavior:

    They should be eqaully good.

    Actual behavior:

    On android it looks pretty bad. Screenshot from emulator but on devices it is the same.

    Screenshot 2021-10-07 at 22 11 08

    Versions

    lottie-react-native 4.1.3

    { npm: '6.14.15', ares: '1.17.2', brotli: '1.0.9', cldr: '39.0', icu: '69.1', llhttp: '2.1.3', modules: '83', napi: '8', nghttp2: '1.42.0', node: '14.17.6', openssl: '1.1.1l', tz: '2021a', unicode: '13.0', uv: '1.41.0', v8: '8.4.371.23-node.76', zlib: '1.2.11' }

    opened by Gentlee 0
  • The Swift pod `lottie-react-native` depends upon `React-Core`, which does not define modules. -> Getting pod error after upgrading lottie-ios to version 3.2.3

    The Swift pod `lottie-react-native` depends upon `React-Core`, which does not define modules. -> Getting pod error after upgrading lottie-ios to version 3.2.3

    Description

    Just recently, I got error in compiling Android without touching anything in my package.json. I found this thread and now I got new error in iOS:

    [!] The following Swift pods cannot yet be integrated as static libraries:
    
    The Swift pod `lottie-react-native` depends upon `React-Core`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify `:modular_headers => true` for particular dependencies.
    

    Since I can't specify :modular_headers => true for lottie-react-native because of the Autolinking, I can't see it in my Podfile, which leaves me to put use_modular_headers! at the top of my Podfile. Is this the correct way? If not, can anyone suggest the correct way to fix this?

    If I run pod deintegrate and delete Podfile.lock, I get new error:

    [!] CocoaPods could not find compatible versions for pod "lottie-react-native":
      In Podfile:
        lottie-react-native (from `../node_modules/lottie-react-native`)
    
    Specs satisfying the `lottie-react-native (from `../node_modules/lottie-react-native`)` dependency were found, but they required a higher minimum deployment target.
    

    Is really necessary for me to update my Podfile from platform :ios, '10.0' to platform :ios, '11.0'?

    And even when I update all these things in my Podfile, now I get another compilation error in my Xcode under Folly module:

    Import of module 'glog.glog.log_severity' appears within namespace 'google'
    

    Please advise... It will greatly be appreciated.

    Steps to Reproduce

    Basically I just upgraded to latest versions:

    1. yarn add lottie-react-native from 3.5.0 to 4.1.3
    2. yarn add lottie-ios from 3.1.8 to 3.2.3
    3. pod install

    Expected behavior: To compile Android and iOS successfully.

    Actual behavior: After step 3, I got the pod install error.

    Versions

    "lottie-ios": "3.2.3",
    "lottie-react-native": "^4.1.3",
    "react-native": "0.63.2",
    

    Here's my Podfile:

    require_relative '../node_modules/react-native/scripts/react_native_pods'
    require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    
    platform :ios, '10.0'
    
    abstract_target 'TestApp' do
      config = use_native_modules!
      use_react_native!(:path => config["reactNativePath"])
    
      permissions_path = '../node_modules/react-native-permissions/ios'
      pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
      pod 'react-native-config', :path => '../node_modules/react-native-config'
      pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
      pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics'
      pod 'GoogleIDFASupport', '~> 3.14.0'
    
      target 'TestApp Production' do
        #Production-specific pods    
      end
    
      target 'TestApp Dev' do
        #Development-specific pods
      end
    
      target 'TestApp SIT' do
        #SIT-specific pods
      end
    
      target 'TestApp UAT' do
        #UAT-specific pods
      end
    
      # Enables Flipper.
      #
      # Note that if you have use_frameworks! enabled, Flipper will not work and
      # you should disable these next few lines.
      # use_flipper!
      use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
      post_install do |installer|
        flipper_post_install(installer)
      end
    end
    
    opened by hpelitebook745G2 4
  • The Swift pod `lottie-react-native` depends upon `React-Core`, which does not define modules.

    The Swift pod `lottie-react-native` depends upon `React-Core`, which does not define modules.

    Description

    Just recently, I got error in compiling Android without touching anything in my package.json. I found this thread and now I got new error in iOS:

    The Swift pod lottie-react-native depends upon React-Core, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set use_modular_headers! globally in your Podfile, or specify :modular_headers => true for particular dependencies.

    Since I can't specify :modular_headers => true for lottie-react-native because of the Autolinking, I can't see it in my Podfile, which leaves me to put use_modular_headers! at the top of my Podfile. Is this the correct way? If not, can anyone suggest the correct way to fix this?

    Steps to Reproduce

    Basically I just upgraded to latest versions:

    1. yarn add lottie-react-native from 3.5.0 to 4.1.3
    2. yarn add lottie-ios from 3.1.8 to 3.2.3
    3. pod install

    Expected behavior: To compile Android and iOS successfully.

    Actual behavior: After step 3, I got the pod install error.

    Versions

    "lottie-ios": "3.2.3",
    "lottie-react-native": "^4.1.3",
    "react-native": "0.63.2",
    

    Here's my Podfile:

    require_relative '../node_modules/react-native/scripts/react_native_pods'
    require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    
    platform :ios, '10.0'
    
    abstract_target 'TestApp' do
      config = use_native_modules!
      use_react_native!(:path => config["reactNativePath"])
    
      permissions_path = '../node_modules/react-native-permissions/ios'
      pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
      pod 'react-native-config', :path => '../node_modules/react-native-config'
      pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
      pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics'
      pod 'GoogleIDFASupport', '~> 3.14.0'
    
      target 'TestApp Production' do
        #Production-specific pods    
      end
    
      target 'TestApp Dev' do
        #Development-specific pods
      end
    
      target 'TestApp SIT' do
        #SIT-specific pods
      end
    
      target 'TestApp UAT' do
        #UAT-specific pods
      end
    
      # Enables Flipper.
      #
      # Note that if you have use_frameworks! enabled, Flipper will not work and
      # you should disable these next few lines.
      # use_flipper!
      use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
      post_install do |installer|
        flipper_post_install(installer)
      end
    end
    
    opened by hpelitebook745G2 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • TypeError: undefined is not an object (evaluating 'subscription[nativeEmitterSubscriptionKey]') when using animated spinner

    TypeError: undefined is not an object (evaluating 'subscription[nativeEmitterSubscriptionKey]') when using animated spinner

    I am writing my application using [Expo][1] and React Native. I started using [react-native-animated-loader][2], a wrapper around [lottie-react-native][3], and I am having a strange issue. The thing is that I am occasionally getting some strange error. It's not reproducible all the time, but I am occasionally getting it. It looks like an eventual consistency or race condition issue.

    TypeError: undefined is not an object (evaluating 'subscription[nativeEmitterSubscriptionKey]')
    
    This error is located at:
        in NavigationContainer (at App.js:280)
        in Provider (at App.js:279)
        in Provider (at App.js:278)
        in Provider (at App.js:277)
        in Provider (at App.js:276)
        in Provider (at App.js:275)
        in Provider (at App.js:274)
        in Provider (at App.js:273)
        in RCTView (at View.js:34)
        in View (created by MenuProvider)
        in RCTView (at View.js:34)
        in View (created by MenuProvider)
        in MenuProvider (at App.js:272)
        in Provider (at App.js:271)
        in Provider (at App.js:270)
        in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
        in SafeAreaProvider (at App.js:269)
        in _default (created by ExpoRoot)
        in ExpoRoot (at renderApplication.js:45)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:106)
        in DevAppContainer (at AppContainer.js:121)
        in RCTView (at View.js:34)
        in View (at AppContainer.js:132)
        in AppContainer (at renderApplication.js:39)
    at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
    at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
    at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
    at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
    at [native code]:null in flushedQueue
    at [native code]:null in invokeCallbackAndReturnFlushedQueue
    

    Here's the code I have:

    import React, { useEffect } from 'react';
    import {
        StyleSheet,
        View,
        Text
    } from 'react-native';
    import AnimatedLoader from "react-native-animated-loader";
    
    const Loader = ({ visible }) => {
    
        return (
            <View style={styles.container}>
                <AnimatedLoader
                    visible={visible}
                    overlayColor="rgba(255,255,255,0.75)"
                    source={require("../../assets/loader-strange.json")}
                    animationStyle={styles.lottie}
                    speed={1}
                >
                    {/* <Text>Doing something...</Text> */}
                </AnimatedLoader>
            </View>
        )
    };
    
    const styles = StyleSheet.create({
        lottie: {
            width: 100,
            height: 100
        }
    });
    
    export default Loader;
    

    The same happens if I use native lottie library:

    import React, { useEffect } from 'react';
    import {
        StyleSheet,
        View,
        Animated,
        Easing
    } from 'react-native';
    import LottieView from 'lottie-react-native';
    
    const Loader = ({ visible }) => {
        const progress = new Animated.Value(0);
    
        useEffect(() => {
            Animated.timing(progress, {
                toValue: 1,
                duration: 5000,
                easing: Easing.linear,
            }).start();
        }, [])
    
        return (
            <View style={styles.container}>
                <LottieView
                    source={require('../../assets/loader-strange.json')}
                    progress={progress}
                />
            </View>
        )
    };
    
    const styles = StyleSheet.create({
        lottie: {
            width: 100,
            height: 100
        }
    });
    
    export default Loader;
    

    I am then using it on one of my screens:

    import React, { useEffect, useState, useContext, useRef } from 'react'
    import {
        Text,
        FlatList,
        View,
        StyleSheet,
        RefreshControl
    } from 'react-native';
    ...
    import Loader from '../../components/Loader';
    
    const InteractionsScreen = ({ navigation }) => {
    
        return (
            <View style={styles.container}>
                ...
                <Loader visible={true} />
                ...
            </View>
        );
    }
    
    const styles = StyleSheet.create({
        ...
    });
    
    export default InteractionsScreen;
    

    In order to reproduce it, I have to refresh the app a few times, then I am getting this error. I tried googling this error and couldn't find anything meaningful.

    image

    opened by ivanursul 0
  • Play from start to end if no argument is passed on Android

    Play from start to end if no argument is passed on Android

    Currently on Android only, if no argument is passed to play() function, it uses the previous start and end frames.

    const ref = useRef();
    if (count % 2 === 0) {
      ref.current?.play();
    } else {
      ref.current?.play(1, 0);
    }
    count++;
    

    So above code runs normally only for the first time, and from the second time, it always plays from 1 to 0. This behavior does not align with iOS and and seems not expected, so reseting these values to the default if not specified.

    opened by chuganzy 0
Releases(v5.0.1)
Owner
Lottie - React Native
Lottie - React Native
A React Native wrapper around the Facebook SDKs for Android and iOS. Provides access to Facebook login, sharing, graph requests, app events etc.

React Native FBSDK React Native FBSDK is a wrapper around the iOS Facebook SDK and Android Facebook SDK, allowing for Facebook integration in React Na

Facebook 3k Nov 17, 2021
react-native wrapper for android BottomSheetBehavior

react-native-bottom-sheet-behavior react-native wrapper for android BottomSheetBehavior, supports FloatingActionButton. Demo See the Google Maps gif i

César Augusto 1.1k Nov 29, 2021
[DEPRECATED] A Radio-button like logic wrapper for React Native

react-native-radio-buttons IMPORTANT this package is deprecated and no longer maintained in favor of the official SegmentedControlIOS component. A rea

Arnaud Rinquin 418 Sep 26, 2021
A react-native wrapper for showing tooltips

react-native-tooltip A react-native component from displaying tooltip. Uses UIMenuController. Add it to your project Run npm install react-native-tool

Chirag Jain 277 Nov 4, 2021
react-native wrapper for android CollapsingToolbarLayout

react-native-collapsing-toolbar react-native wrapper for CollapsingToolbarLayout, easy to integrate with Animated.Event and FlatList out the box. See

César Augusto 289 Nov 18, 2021
React Native Wrapper of Google Place Picker for iOS + Android.

react-native-google-place-picker React Native Wrapper of Google Place Picker for iOS + Android. iOS Android Table of contents Install iOS Android Usag

ZHANG Tai 182 Nov 16, 2021
A simple wrapper for Android's Spinner in react-native

react-native-dropdown-android A simple wrapper for Android's Spinner Installation Android npm install --save react-native-dropdown-android In android/

Tu Do 63 Nov 22, 2021
An inline wrapper for calling out React Native components via tooltip

React Native Walkthrough Tooltip React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps. When not visible,

Jason Gaare 378 Nov 15, 2021
📈Powerful React-Native ECharts Wrapper 📊

react-native-echarts-wrapper v2.0.0 Apache ECharts (incubating) wrapper build for React Native/Expo. Screenshots • How To Use • Authors A React Native

Thomas Leiter 153 Nov 25, 2021
react-native wrapper for gravatar-api

react-native-gravatar Install npm install --save react-native-gravatar Use eg. import React, { Component } from 'react'; import {StyleSheet} from 'rea

Layton Whiteley 16 Dec 30, 2019
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Nov 22, 2021
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 117 Aug 30, 2021
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 85 Aug 30, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 411 Nov 24, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.8k Dec 1, 2021
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

YunJiang.Fang 368 Nov 22, 2021
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

Provash Shoumma 401 Nov 17, 2021
A QR Code generator for React Native based on react-native-svg and node-qrcode.

react-native-qrcode-svg A QR Code generator for React Native based on react-native-svg and javascript-qrcode. Discussion: https://discord.gg/RvFM97v F

JerryShen 786 Nov 22, 2021