lottie-react-native: Lottie not stable with Expo - Not auto playing, getting stuck - v5.0.1

Description

Lottie getting stuck or not playing at all. Sometimes works with no issues but unstable for no reason.

Steps to Reproduce

Use this package with Expo v44.0.0
Expo forces lottie package version to be v5.0.1 do to compatibility issues.
Use any example of usage on iOS (haven’t tested on Android simulator)

Expected behavior: If auto play is enabled for the lottie to start on mount

Actual behavior: With some lottie json auto play works, sometimes with the same file it doesn’t. Some times only the first frame is shown, but doesn’t play

Versions

lottie package v5.0.1 (forced by expo).

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 19

Most upvoted comments

I fixed it for now by creating my own Animation component. That way, each animation has it’s own ref and I’ve not had any problems since. Here it is, if it helps anyone:

import React, {useEffect, useRef} from 'react';
import AnimatedLottieView from "lottie-react-native";

function Animation({source, style, onAnimationFinish, autoplay = true, loop = true, speed = 1.5}) {
    // temp ios fix begin
    // @see https://github.com/lottie-react-native/lottie-react-native/issues/832
    const lottieRef = useRef(null);
    useEffect(() => {
        lottieRef.current?.reset();
        setTimeout(() => {
            lottieRef.current?.play();
        }, 0)

    }, []);
    // fix end

    return(
        <AnimatedLottieView
            source={source}
            autoPlay={autoplay}
            loop={loop}
            style={style}
            speed={speed}
            onAnimationFinish={onAnimationFinish}
            ref={lottieRef}
        />
    );
}

export default Animation;

delboy1978uk on Nov 21, 2022

I have already tried this and it’s not stable sometimes. Also this is not an actual solution it’s very hacky. Appreciate your help though.

On Sun, Aug 21, 2022 at 6:26 AM Derek Stephen McLean < @.***> wrote:

Yes, you should probably close this issue then. 😃 In the meantime, I just managed to get it working there using this code: #832 (comment) https://github.com/lottie-react-native/lottie-react-native/issues/832#issuecomment-1221526149

— Reply to this email directly, view it on GitHub https://github.com/lottie-react-native/lottie-react-native/issues/925#issuecomment-1221526329, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATI23QKJCF7PSLUXNPKSV53V2IG5DANCNFSM57BAXXCA . You are receiving this because you authored the thread.Message ID: @.***>

jacksonHendric on Aug 21, 2022