lottie-react-native: Animation not working on iOS

Description

PinJump animation does not work on iOS, it works fine on Android though

Steps to Reproduce

// @flow
import React from 'react';
import LottieView from 'lottie-react-native';

// eslint-disable-next-line
export default class AnimatedLoading extends React.Component<{}> {
  render(): React.Element {
    return (
      <LottieView
        style={{
          width: 100,
          height: 100,
        }}
        source={require('./PinJump.json')}
        autoPlay
        loop
        enableMergePathsAndroidForKitKatAndAbove
      />
    );
  }
}

captura de pantalla 2018-09-04 a la s 14 50 51

captura de pantalla 2018-09-04 a la s 14 50 33

captura de pantalla 2018-09-04 a la s 14 50 25

captura de pantalla 2018-09-04 a la s 14 50 18

Lottie.framework is missing on npm folder.

captura de pantalla 2018-09-04 a la s 14 52 56

Versions

Environment: OS: macOS High Sierra 10.13.6 Node: 10.1.0 Yarn: 1.6.0 npm: 6.0.1 Watchman: 4.9.0 Xcode: Xcode 9.4.1 Build version 9F2000 Android Studio: 3.1 AI-173.4907809

Packages: (wanted => installed) react: ^16.4.2 => 16.4.2 react-native: ^0.55.4 => 0.55.4

lottie-react-native: 2.5.8

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 23 (2 by maintainers)

Most upvoted comments

I was facing same issue, I did following things and it worked fine on both iOS and Android

First I install pod file in iOS folder by using pod init

Then install npm i --save lottie-react-native

After installing lottie-react-native run link command

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

Go to Xcode and in libraries folder add lottie-ios and lottie-react-native xcode project like attached screenshot from node_modules

Then add Lottie.framework from Lottie products to Embedded Binaries

add libLottieReactNative.a and libLottie.a to Linked frameworks and libraries. That .a file you can find in Libraries product folder. See enclosed screenshot 2 1. screenshot 2019-01-06 at 11 32 46 am 2. screenshot 2019-01-06 at 12 05 32 pm 3. Final Outcome screenshot 2019-01-06 at 12 12 02 pm

+19

kaushal9678 on Jan 6, 2019

@ofri84 I’m sorry for the late response. For the assurance fix.

Remove first your node_modules folder by rm -rf node_modules and npm install again.
(Important) Please make sure you followed clearly the installation for IOS and Android. Please don’t install lottie-ios if you thought that installation command you to link even it’s not yet installed.
Please don’t ignore this phrase after the linking

After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

Open your yourapp.xcodeproj and do this:

Uninstall your app from simulator.
run react-native run-ios, wait until it build. then terminate by ctrl+c.
run react-native start --reset-cache.
Restart your simulator by hitting command+R.

And poof! It should work smoothly. I hope this will help you.

+11

dihanmalik on Nov 21, 2018

Finally! after a lot of reading solutions. I just fixed this by updating my react-native and xcode to latest version and reinstall lottie-react-native from start.

dihanmalik on Oct 18, 2018

Same here. iOS doesn’t work but android works.

lottie-react-native: 2.5.8 react-native: 0.56

{ app: ‘0.1.0’, npm: ‘5.6.0’, ares: ‘1.14.0’, cldr: ‘33.0’, http_parser: ‘2.8.0’, icu: ‘61.1’, modules: ‘64’, napi: ‘3’, nghttp2: ‘1.29.0’, node: ‘10.0.0’, openssl: ‘1.1.0h’, tz: ‘2018c’, unicode: ‘10.0’, uv: ‘1.20.2’, v8: ‘6.6.346.24-node.5’, zlib: ‘1.2.11’ }

HashDot on Sep 18, 2018

Same

njho on Sep 19, 2018

Where can we download Lottie.framework?

ollyde on Aug 7, 2019

@Dihan101 thnks! your solution works great! removing the node_modules and deintegrating pod removing the lottie and installing other pod files. and redoing the process above will make it work! I’ve downgraded the version to @2.3.2 works fine as a test and again turn it to the latest version. No need to pod install when you link packages manually, furthermore, “liblottie.a” doesnt need to be in the binary library just the framework 😃 screen shot 2019-03-01 at 1 55 59 pm

calz10 on Mar 1, 2019

I’m using react-native 0.57.7 now I made it work by adding this to my Podfile (I didn’t added Lottie.framework to Embedded Binaries)

  pod 'yoga', :path => '../../node_modules/react-native/ReactCommon/yoga'
  pod 'React', :path => '../../node_modules/react-native', :subspecs => [
    'Core',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTWebSocket',
    'RCTAnimation',
    'DevSupport',
    # Add any other subspecs you want to use in your project
  ]

  # ....

  pod 'lottie-ios', :path => '../node_modules/lottie-ios'
  pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

Hope it helps

maggialejandro on Jan 21, 2019

I have added all dependences manually without Pods and it works.

lorenc-tomasz on Dec 4, 2018