Lottie-react-native: Lottie animation won't play on iOS

[snydercreative]

Description

Lottie animation plays on https://www.lottiefiles.com/preview, but not in iOS React Native app. Animation is 0.5 seconds long, at 60 fps.

Steps to Reproduce

1. yarn add lottie-react-native
2. react-native link lottie-ios
3. react-native link lottie-react-native
4. Added lottie.framework to "Embedded Binaries"
5. Implemented as:

import React, { Component } from 'react'
import LottieView from 'lottie-react-native'
import { View } from 'react-native'

import { colors } from '../constants'
import splashLogo from '../../assets/splash-logo.json'

class SplashScreen extends Component {
    static navigationOptions = {
        header: null,
    }

    componentDidMount() {
        this.animation.play(1, 30)
    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: colors.blueDark, justifyContent: 'center', alignItems: 'center' }}>
                <LottieView 
                    source={splashLogo}
                    ref={animation => this.animation = animation}
                    style={{ width: '75%' }}
                    resizeMode='contain'
                />          
            </View>
        )       
    }
}

export { SplashScreen }

Expected behavior:

Animation plays on SplashScreen component.

Actual behavior:

Nothing happens.

Versions

"lottie-react-native": "^2.5.9",
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.3",

Output from npm version:

myapp: '0.0.1',
npm: '6.4.1',
ares: '1.10.1-DEV',
cldr: '32.0',
http_parser: '2.8.0',
icu: '60.1',
modules: '57',
napi: '3',
nghttp2: '1.32.0',
node: '8.12.0',
openssl: '1.0.2p',
tz: '2017c',
unicode: '10.0',
uv: '1.19.2',
v8: '6.2.414.66',
zlib: '1.2.11'

[snydercreative]

And I've also verified that the ../../assets/splash-logo.json path is correct.

[rodrigoelp]

Hi, have you tried checking the animation with the lottie preview app? it might be the case is not your code (looks fine to me).

BTW, you can auto play without having to call the componentDidMount

[krishnazden]

faced same issue.. for me issue was with Lottie file..
I suggest to download any lottie viewer in ios device, upload your lottie file , scan and test it..

i have done the same.

[snydercreative]

The animation itself was the issue -- I was using fonts instead of outlines. I'm all set now. Thanks!