lottie-react-native: Lottie animation not showing on iOS

As of Expo SDK V44 (React Native V0.64.3), lottie-react-native V5.0.1 and lottie-ios V3.2.3. What I have found that works is to call the .play() method on the ref from the LottieView, on mount of the component. I referenced this from the official Expo Lottie documentation: https://docs.expo.dev/versions/latest/sdk/lottie/.

const animationRef = useRef<LottieView | null>(); // The <> is for TypeScript, but can be removed for JavaScript

  useEffect(() => {
    animationRef.current?.play();
  }, []);

  return (
    <LottieView
      ref={(animation) => {
        animationRef.current = animation;
      }}
      source={require("../path_to_animation_folder)}
      autoPlay
      loop
      style={{ width, height }}
    />
  );

Hope I managed to help someone!

My animations didn’t play either after updating RN + Lottie to the latest versions. I am accessing the lottie-files from my asset bundle. To get it working again, I somehow needed to delete the .json-suffix from the asset path:

        <LottieView
-            source={'Path/to/file.json'}
+            source={'Path/to/file'}
        ...

Hope it helps someone.

Hi, also happening in:

“react-native”: “0.61.2” “lottie-ios”: “3.1.3”, “lottie-react-native”: “3.2.1”,

In my case the asset I’m using works in Android and worked in IOS with previous* versions of react-native and lottie.

Other animations are working without problems.

• The animation works with: “react-native”: “0.61.2”, “lottie-ios”: “2.5.0”, “lottie-react-native”: “2.6.1”,

Great! this way worked for me! thanks my bro

I resolved this issue by updating the versions and Podfile.

"react": "16.9.0",
"react-native": "0.61.2",
"lottie-react-native": "^3.2.1",
"lottie-ios": "^3.1.3",

and i added use_frameworks! to Podfile in ios folder

For anyone (like me) coming across this thread later, I found the underlying problem caused by the switch to using Swift. The JSON for the animations is being decoded in Swift and throws an error if it encounters a value it does not expect. For me this was: “bm”: 16 (blend mode 16), the library only supports blend modes 0-15 and “tp”: “op” - shape type Offset Path. The Swift JSON decoder throws an error when encountering these values. You can fix it by modifying the animation either by code or manually to remove the offending entries. There may be others I haven’t found that also trip it up.

I have written a JS function that makes the animations I’ve tried work (and they look fine):

import React from 'react'
import LottieView from 'lottie-react-native'

export function clean(item) {
    for (let [key, value] of Object.entries(item)) {
        if (key === 'bm' && value > 15) {
            item.bm = 0
        } else if (Array.isArray(value)) {
            let remove = []
            for (let subItem of value) {
                if (subItem?.ty === 'op') {
                    remove.push(subItem)
                    continue
                }
                clean(subItem)
            }
            for (let del of remove) {
                value.splice(value.indexOf(del), 1)
            }
        } else if (typeof value === 'object' && value) {
            clean(value)
        }
    }
    return item
}

export function Lottie({ source, ...props }) {
    return <LottieView source={clean(source)} {...props} />
}

This also includes a component that wraps LottieView and does it on the source automatically.

If you are having problems and want to see why Lottie can’t load a JSON file on IOS then you could go to the file node_modules/lottie-react-native/src/ios/LottieReactNative/ContainerView.swift and add replace @objc func setSourceJson to this - which will at least show the JSON parse error:

@objc func setSourceJson(_ newSourceJson: String) {
        sourceJson = newSourceJson
        let odata = sourceJson.data(using: String.Encoding.utf8)
        do {
            try JSONDecoder().decode(Animation.self, from: odata!)
        } catch {
            print(error)
        }
        guard let data = sourceJson.data(using: String.Encoding.utf8),
        let animation = try? JSONDecoder().decode(Animation.self, from: data) else {
            if (RCT_DEV == 1) {
                print("Unable to create the lottie animation object from the JSON source")
            }
            return
        }

        let starAnimationView = AnimationView()
        starAnimationView.animation = animation
        replaceAnimationView(next: starAnimationView)
    }

Same here

Also looking for a solution. Reinstalling didn’t work for me. On RN 60.4 With the recommended package versions for lottie-react-native and lottie-ios.

Hi, also happening in:

“react-native”: “0.61.2” “lottie-ios”: “3.1.3”, “lottie-react-native”: “3.2.1”,

In my case the asset I’m using works in Android and worked in IOS with previous* versions of react-native and lottie.

Other animations are working without problems.

* The animation works with: “react-native”: “0.61.2”, “lottie-ios”: “2.5.0”, “lottie-react-native”: “2.6.1”,

@a-j-douglass it sounds like you’re using expo which I’m not as familiar with. See if this section helps at all.

These logs typically show on xcode on a bare (non expo) react native build, but I’d be surprised if expo doesn’t provide some way of viewing these.

@henrykaasik , thanks a lot. It’s working for me. I have used this with react-native-animated-loader from here

"react": "16.9.0",
"react-native": "0.61.5",
"lottie-react-native": "^3.3.2",
"lottie-ios": "^3.1.3",
"react-native-animated-loader": "^0.0.8"

Added use_frameworks! into Podfile in IOS folder as well.(This actually has solved my issue).

I have the same issue. Any news about this or is there a workaround?