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

[RyanMitchellWilson]

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?

[sfratini]

Having the same issue. I don't remember why I upgraded in the first place. In my case some animations play and some don't. I am downgrading and testing. I'll post feedback.

[sfratini]

Ok, I can't use 1.2.0 due to this: #169

I have checked the code and there has veen a major change in 2.2.5 where the JSON is loaded in a different way. I am testing 2.2.0 right now, which handled RN 0.47 but does not change the way the animation is loaded.

Edit: 2.2.0 shows the animation directly at 100%, on the last frame. This is very annoying.

[RyanMitchellWilson]

1.2 was the last working version from what I can see but I cannot use it because I've upgraded my react-native to .50 which 1.2 is not supported in that version of react-native. The 2.2 versions don't animate my animations in some cases even though I am using the exact same component for every single animation that I have, which is very weird, and 2.3 doesn't render the animation at all.

[sfratini]

If 1.2.0 works for you, the only issue I know about is the override. I just solved it adding a postinstall script in the package.json, that executes this (place it in a folder called 'scripts'):

var fs = require('fs')
let filename = './node_modules/lottie-react-native/lib/android/src/main/java/com/airbnb/android/react/lottie/LottiePackage.java';
fs.readFile(filename, 'utf8', function(err, data)
{
    if (err)
    {
        // check and handle err
    } else {
        if (data.split('\n')[17].indexOf('createJSModules') > -1 && data.split('\n')[17].indexOf('@Override') > -1){
            let aux = data.split('\n');
            aux[17] = aux[17].substr(11);
            fs.writeFile(filename, aux.join('\n'));    
        }
        
    }
});

Is ugly code but what it does is to remove the Override decorator that brings issues with RN because I don't want to do it manually.

In my case, I just installed 2.2.7 again, made a clean build again and my animations are working again. I have no idea. Maybe the gradle cache has something to do with it. I don't plan on touching anything else.

[gpeal]

@RyanMitchellWilson Can you post your component that uses Lottie with its styles?

[RyanMitchellWilson]

@gpeal Sure here is my component.

import * as React from 'react'
import {StyleSheet, View} from 'react-native'
import Animation from 'lottie-react-native'

export default class extends React.Component {
  componentDidMount() {
    this.props = {
      containerStyle: this.props.containerStyle || {},
      size: this.props.size || 75
    }

    this.animation.play()
  }

  render() {
    const {
      containerStyle = {},
      size = 75
    } = this.props
    const animationSize = {
      height: size,
      width: size
    }
    return (
      <View
        ref={ref => this.ref = ref}
        style={StyleSheet.flatten([styles.container, containerStyle])}>
        <View>
          <Animation
            loop={true}
            ref={ref => this.animation = ref}
            style={animationSize}
            source={require('../../../resources/animations/runningMan.json')}/>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center'
  }
})

This component used to work perfectly in 1.2, but in the 2.2 update this doesn't animate in a few places but does in most places in the app and 2.3 doesn't even appear on the screen, all using this code.

[ErkanSensei]

I've tried every combo of RN and RNLottie, nothing loads ever for me

[gpeal]

@RyanMitchellWilson I just pasted your sample component into the sample app in this repo and it worked on Android as well as iOS. I'd love to fix this if I can repro it.

[gpeal]

@ErkanSensei If you attach a sample project that repros this, I can take a look.

[RyanMitchellWilson]

@gpeal Ya that is the weird part, it works in almost every case I use it in except for a couple places. And that only started happening after I upgraded from lottie-react-native 1.2. I think it could be related to trying to call play on the reference when it could be trying to render.

Is there a way to just tell the component to always play instead of calling play() on a reference to the component? If I can just tell it that I always want it animating instead of trying to trigger the animation from a ref that might be enough to stop the problem. Cause I have switched to the default activity Indicator from react native in the same places that lottie didn't work and it animates just fine. And that component allows you to specify that you always want it playing.

[kelset]

Same issue here, weirdly it's only happening on iOS.
I noticed it first when upgrading RN to 51, to this config:

    "lottie-react-native": "2.3.1",
    "react-native": "0.51.0",

So I tried to do the classic link/unlink/reinstall XCode dance, didn't work.

So I rolled back to:

    "lottie-react-native": "2.3.0",
    "react-native": "0.50.4",

But, much to my surprise, it still happens. So I can't really pinpoint where or how - it used to work just fine until today.

Only other change that happened was XCode 9.1 -> XCode 9.2, but I can't rollback that.

---

Here's my animation:

export default class LoadingView extends React.PureComponent {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <View style={styles.container}>
        <Animation
          ref={(animation) => {
            this.animation = animation;
          }}
          style={styles.animation}
          source={animationLoading}
          imageAssetsFolder={'lottie/images'}
          loop
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.sunsetGlow,
    alignItems: 'center',
    justifyContent: 'center',
  },
  animation: {
    width: Device.width, // 1500
    height: Device.height, // 2668
    transform: [{ scale: 0.5 }],
  },
});

[hosnik]

Has anyone found a workaround for this issue? We have one animation that won't play, but everything else works fine...

"react-native": "0.50.3",
"lottie-ios": "^2.1.3",
"lottie-react-native": "^2.2.7",

[gpeal]

Since I can't repro this, I'd appreciate any assistance in reproing/fixing this by the way. If you can figure out a solution, I can merge and publish it asap.

[kelset]

Hey @gpeal did something change lately (native/ios side) on how the assets must be imported in XCode? 🤔

[gpeal]

@kelset I send the json as a string rather than a serialized dictionary. This improved serialization perf ~10x.

[gpeal]

That just affects how it's send over the js bridge in rn though

[ghost]

Still nothing ? I have an 200x200 square with nothing (it's supposed to be my lottie). It stopped working after upgrading react-native to 0.51.0 and lottie-react-native to 2.3.1...

[gpeal]

@Yalaouf I can't repro it on my devices. If you can help debug and potentially even put up a PR, that would be great. Is it iOS only, Android, or both?

[kelset]

@kelset I send the json as a string rather than a serialized dictionary. This improved serialization perf ~10x.

Ok, do you have a test json I can use to check the difference with mine? I feel it may be related to that 🤔

[jeffsteinmetz]

This may be related to
#248
There is additional debug output available there.
Let us know if there is any other information that would be helpful.

We are able to reproduce this as well.
Our JSON "does" work when we include it in the lottie sample, but not in our existing app that had been working pre 2.3.x.

[oNaiPs]

@jeffsteinmetz I was having the same problem and found the reason. Looks like the location of the xcodeproj of lottie-react-native has changed, and although the project still builds, the lottie-rn source files won't get built, resulting in the error in #248.

You can notice the problem by checking your Libraries in the project navigator and see if LottieReactNative.xcodeproj is either red or grayed out. Fix the location by clicking on the small folder icon below:

If still doesn't work, make sure the library is being included in the project Build Phases -> Link Binary with Libraries

[kelset]

Hey @oNaiPs, you were correct, I had the same issue (actually, the RNLottie lib wasn't linked at all!).

So prob there's some underlying issue with the react-native link command? 🤔

---

EDIT: Ok, looks like it's really react-native link not adding either library (LottieIOS nor LottieRN) to the XCode project. The weird part is that if you link them manually (drag 'n' drop) and then you run react-native unlinkfor both it works.

So, yeah, @gpeal it's 99.9% the react-native link command / configuration not doing anything on iOS side.

---

EDIT2: oook thanks to the mighty power of lottie+XCode not getting configured properly (this issue still happens way too frequently) now it doesn't work again.

If anyone can provide a full example repo working with both platforms in 2.3.1 please link it here.

[brianhiss]

@kelset For what it's worth, I saw the same issues with the react-native link command as @oNaiPs, but those aren't resolving animations disappearing with an upgrade to react-native 0.51.0 and lottie-react-native 2.3.1.

[jeffsteinmetz]

@oNaiPs
thank you, that was the issue.
This also applies to Android
The library in the react native settings.gradle needs to be updated from
'../node_modules/lottie-react-native/lib/android')
to
'../node_modules/lottie-react-native/src/android')

[sfratini]

I reported that before but that change is breaking the builds. #241

I don't think this is related, otherwise not even the build could be able to compile.

[colinterface]

I found that a thorough reinstall of Lottie fixed it for me.

Had the same issue after upgrading to RN 51 and lottie-react-native@2.3.1

Here's what I did:
(my project is only iOS for now. not sure if all steps are strictly necessary)

In Xcode, remove Lottie.framework from Embedded Binaries

react-native unlink lottie-react-native

react-native unlink lottie-ios

yarn remove lottie-react-native

yarn add lottie-react-native

react-native link lottie-ios

react-native link lottie-react-native

Then in Xcode re-add Lottie.framework to Embedded Binaries

After these steps libLottieReactNative.a re-appeared in Recovered References and the animations started working again

[gianpaj]

excuse the stupid question but where can I find Lottie.framework? I can't find it in the
node_modules/lottie-ios or
node_modules/lottie-react-native folders.

I tried the steps above to install lottie-react-native for the first time on iOS but nothing is working.
Strangely no build errors or run-time RN errors, not even an error message when I use <LottieView ...> in a component.

I'm using the HamburgerArrow.json animation from the example folder :/

$ yarn list --depth=0 | grep 'lottie\| react-native@'
├─ lottie-ios@2.1.5
├─ lottie-react-native@2.3.2
├─ react-native@0.51.0

[odesey]

I ran into this problem as well, after upgrading from version 2.2.7 to 2.3.1 all my animations in iOS disappeared. This is how I fixed it:

react-native unlink lottie-react-native -- this may give you an error
react-native unlink lottie-ios -- this may give you an error as well
yarn remove lottie-react-native

rm -rf ios/build
rm -rf ~/.rncache

In Xcode under your project Libraries folder, make sure there is NOTHING with Lottie there, if there is delete it and select Remove reference

Now do the following:

yarn add lottie-react-native

DO NOT RUN THE react-native link commands (this is what caused the problems for me)

Now if you've upgraded RN from a previous version now is a good time to to a git add . followed by a git commit -am "just in case things go south"

Then run:
react-native-git-upgrade 0.51.0 replace 0.51.0 with whatever version you upgraded to

Now back to Lottie:
Open finder and drag Lottie.xcodeproj from project_directory/node_modules/lottie-ios into the Libraries folder within Xcode select copy file if needed option

Open finder and drag LottieReactNative.xcodeproj from project_directory/node_modules/lottie-reactnative/src/ios into the Libraries folder within Xcode select copy file if needed option

In XCode select your project in the left pane and on the right pane select your project under TARGETS
Select Build Settings on the top and search for header search paths

Double click the search paths and add the following:
$(SRCROOT)/../node_modules/react-native-navigation/ios
$(SRCROOT)/../node_modules/lottie-react-native/src/ios
Mines are both set to recursive (not sure if that's right but its working)

On the General Tab, scroll down to Embedded Binaries, click on the + and add Lottie.framework iOS ( I don't have this step done and my app compiles both for the simulator and physical phone, FYI)

In XCode do a Product --> clean then Product --> run
or
react-native run-ios at the terminal to use the simulator

This worked for me and Lottie 2.3.1 is working again.

The cocoa pods installation method is where all my pain began...

[D-or]

It works, thanks! When I added these files, it plays.

[gianpaj]

After spending another 2/3 hours I finally managed to add this library but I did not need to add Lottie.framework to the Embedded Binaries section in Xcode.

This is how my Xcode looks like:

package.json (react-native init project)

  "dependencies": {
    "lottie-react-native": "^2.3.2",

$ yarn list --depth=0 | grep lott
├─ lottie-ios@2.5.0
├─ lottie-react-native@2.3.2

$ react-native info
Environment:
  OS: macOS Sierra 10.12.6
  Node: 8.9.0
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.52.1 => 0.52.1

[JulianKingman]

I'm having this problem on Android, but only in the simulator. To complicate further, it's using expo, so there's no linking issues going on, maybe it's a separate problem...

[ghost]

ANDROID FIX!!!
Hey guys, check when you are triggering the animation events

// works IOS not Android
componentDidMount() {
this.animation.play();
}

// Works on both Android and IOS
onSnapToItem = (index) => {
this.animation.play()
}

ANDROID
componentDidMount
does not work with lottie for some reason :/
But at least I can work around it

// Workaround
// android lottie fix
onLottieLoad = () => {
console.log('play lottie');
this.animation.play();
}

<Lottie
onLayout={this.onLottieLoad}
ref={(animation) => {
this.animation = animation;
}}
style={{
width: 80,
height: 80,
}}
source={lottie.PLAY_BUTTON}
/>

[galechus]

Hi,
I still have a problem with no appear animation. I did as @odesey suggested. In Xcode, I checked and I have got libLottieReactNative.a and libLottie.a added to Linked Framerworks and Libraries. On Android, it works properly and animation is appear.

"react": "16.2.0",
"react-native": "0.52.1",
"lottie-react-native": "^2.3.2",

Have you any other suggestions?

[JulianKingman]

For me the issue ended up being that scaling in Android is tricky. TLDR; android doesn't scale, but it can be transformed to change the size (but only to make it bigger, doesn't work to make smaller, will clip).

[llanginger]

A combination of @odesey and @gianpaj is what eventually did it for me.

"lottie-react-native": "^2.3.2",
"react": "16.0.0-beta.5",
"react-native": "0.49.1",

(Yes, I probably should update those react packages!)

[arash-hacker]

if using android dont forget to use this items
ardwareAccelerationAndroid={true}
renderToHardwareTextureAndroid={true}
also build #203 , #256 may help you

[emilioicai]

closing due to inactivity

[ErickMaeda]

It works, thanks! When I added these files, it plays.

#242 (comment)
It's strange that react-native linkshould add the linked frameworks, but didn't.

Thank's that solved my problem!