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)

44

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",

[asdelatoile]

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

[logicman]

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?