LottieView Works in iOS Simulator, but doesn't work on device -- Expo

user_9185637 0
Viewed 367

I've got a simple splash loading animation for my app -- and it used to work perfect, and still works perfect on my iOS simulator. However, attempting to run the LottieView on my iOS device via LAN shows absolutely nothing, as well as if I publish a build and deploy it to the iOS App Store. Interestingly enough though, if I go ahead and change any of the LottieView properties and then do a fast refresh -- it will begin showing on my device.

I've been searching the forums, but I commonly find issues with LottieView working on Android -- which i know is because of a conflict, but no one has been able to really get this particular issue from what I've seen. Any ideas?

Here's my code:

return (
<View
  style={{
    backgroundColor: "white",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <LottieView
    style={{ width: 150, height: 150 }}
    source={require("../assets/data.json")}
    autoPlay={true}
    loop={true}
    speed={2}
  />
  {Platform.OS === "android" && (
    <Image
      style={{ width: "100%", resizeMode: "contain" }}
      source={require("../assets/splash.png")}
    />
  )}
  {isLoading && Platform.OS === "android" ? (
    <View style={{ position: "absolute", bottom: "32%" }}>
      <Spinner size="giant" />
    </View>
  ) : null}
  {isError ? (
    <Text
      category="label"
      style={{ fontSize: 20, textAlign: "center", color: "grey" }}
    >
      No Internet Connection
    </Text>
  ) : null}
</View>

Here's the package-lock.json I've got:

 "lottie-ios": {
  "version": "3.2.2",
  "resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-3.2.2.tgz",
  "integrity": "sha512-buYj/HbzoTeqiVy+Hpzfd2STdRW7RJnne+09z48nVvBYO+ioG5B5EvRb92pYOoRDNr0stQpfurzK1uFXW4gGCA=="
},
"lottie-react-native": {
  "version": "2.6.1",
  "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-2.6.1.tgz",
  "integrity": "sha512-Z+6lARvWWhB8n8OSmW7/aHkV71ftsmO7hYXFt0D+REy/G40mpkQt1H7Cdy1HqY4cKAp7EYDWVxhu5+fkdD6o4g==",
  "requires": {
    "invariant": "^2.2.2",
    "lottie-ios": "2.5.0",
    "prop-types": "^15.5.10",
    "react-native-safe-module": "^1.1.0"
  },
  "dependencies": {
    "lottie-ios": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-2.5.0.tgz",
      "integrity": "sha1-VcgI54XUppM7DBCzlVMLFwmLBd4="
    }
  }
},

Here's the package.json:

"lottie-ios": "^3.1.8",
"lottie-react-native": "5.0.1",
lottie expo react-native reactjs ios
1 Answers

I can second this.

I am using expo and the Lottie files show fine in the iOS simulator but not at all on iPhone when accessing via the QR code

EDIT I came across this post in the lottie-react-native github issues page - I can confirm it worked for me

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!

user_81170820
Related