expo: Lottie autoplay is not working with Expo SDK 44

Summary

When using Lottie with default setup I am unable to play animation using autoplay attribute, it shows only a first frame and animation doesn’t start. When I am using the same project without Expo it is working properly.

Managed or bare workflow? If you have `ios/` or `android/` directories in your project, the answer is bare!

bare

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

Environment

expo-env-info 1.0.2 environment info:
    System:
      OS: macOS 12.2
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Managers:
      CocoaPods: 1.11.2 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    IDEs:
      Xcode: 13.3/13E113 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~44.0.0 => 44.0.6 
      react: 17.0.1 => 17.0.1 
      react-dom: 17.0.1 => 17.0.1 
      react-native: 0.64.3 => 0.64.3 
      react-native-web: 0.17.1 => 0.17.1 
    npmGlobalPackages:
      expo-cli: 5.3.0
    Expo Workflow: managed

Reproducible demo

My code:

<View>
          <LottieView
              source={require('../assets/success-lottie.json')}
              style={{width: 300, height: 300}}
              autoPlay={true}
              loop={false}
          />
          <Text
              category="h1"
              style={{textAlign: 'center', color: theme['color-primary-500']}}>
            Email sent
          </Text>
</View>

Lottie versions installed via: expo install lottie-react-native:

"lottie-ios": "3.2.3",
"lottie-react-native": "5.0.1",

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 17 (3 by maintainers)

Most upvoted comments

I use the event “onLayout” for autoplay (SDK 46) <LottieView ref={lottieViewRef} onLayout={() => {lottieViewRef.current?.play()}} source={loadingAnimation} loop />

+13

asdelatoile on Sep 6, 2022

Same issue here: worked around it like this.

Not working:

const ref = useRef<AnimatedLottieView>(null);

    useEffect(() => {
        ref.current?.play();

        return () => {
            ref.current?.reset();
        }
    }, []);

Working workaround:

const ref = useRef<AnimatedLottieView>(null);

    useEffect(() => {
        setTimeout(() => ref.current?.play());

        return () => {
            ref.current?.reset();
        }
    }, []);

Thanks. This works sometimes…if I save and see the simulator it shows me a static lottie image. However, then when I goto the editor, make an error, save and then fix the error and save and come back to the simulator…it “sometimes” shows me the animation. I am also using React Native Debugger and simulating a slow connection.

Seems extremely strange! Any idea what might be going on?

logicman on Apr 30, 2022

I encountered this issue when using version ^6.3.1 of the lottie-react-native library. However, when I switched to version “5.1.6,” the problem was resolved. It’s important to ensure that you include the autoPlay property in your configuration.

I confirmed this solution while testing it on a managed workflow in the Android emulator. Here’s the updated snippet with the working version:

"lottie-react-native": "5.1.6"

By using version 5.1.6 and including the autoPlay property, you should be able to resolve the issue successfully.

denisfelic on Oct 2, 2023

I use the event “onLayout” for autoplay (SDK 46) <LottieView ref={lottieViewRef} onLayout={() => {lottieViewRef.current?.play()}} source={loadingAnimation} loop />

worked for me

jossai1 on Jun 23, 2023

if someone can demonstrate that this is an issue in our usage of lottie i’m happy to investigate, but as far as i know this is just an upstream lottie issue in the particular version that we use in sdk 44 https://github.com/lottie-react-native/lottie-react-native/issues/832

brentvatne on May 4, 2022