lottie-react-native: Don't see any animation

Hello, react-native-cli: 2.0.1 react-native: 0.42.0 lottie v1.0.6

I try build app with simple code from basic usage:

import React from 'react';
import Animation from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <Animation
        ref={animation => { this.animation = animation; }}
        style={{
          width: 200,
          height: 200,
        }}
        source={require('./HamburgerArrow.json')}
      />
    );
  }
}

I took HamburgerArrow.json from example. All ok it build success, but I don’t see any animation. Any ideas?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16

Most upvoted comments

To add to g3r4n’s answer: Go to your app project very at the top > Targets > [Your App Name] > Build Phases. Then under Target Dependencies there needs to be Lottie_iOS (Lottie) included. Under Link Binary With Libraries there needs to be libLottieReactNative.a & Lottie.framework, included but remove the LibLottie.a

+16

maakle on Nov 17, 2017

@AdityaAgg

Figured this out for my proj. I’ll post a short how-to then update sometime tomorrow with more details.

Removing LibLottie.a from linked iOS dependencies did not working for me. Here’s what I did:

Follow this repo’s guide on installing (react-native link etc)
Make your Link Binary With Libraries in xcode look like this (only lottie things are relevant): http://i.imgur.com/83VPlEs.png
Make your Embedded Binaries look like this (only lottie things are relevant): http://i.imgur.com/SV7iyei.png
Build!

More details coming tomorrow.

mini-eggs on Apr 2, 2017

You have to remove LibLottie.a from linked iOS dependencies and rebuild the project. See an example running here : https://github.com/g3r4n/react-native-lottie-example

g3r4n on Mar 4, 2017

@g3r4n thanks for the example, appreciate it v much

mini-eggs on Mar 26, 2017