I made a series of lottie animations for my developers to implement in our react native app. 7 of them work perfectly and then I have 1 that won’t play at all. It’s just a blank screen with a background color that’s the same as the animation but none of the actual animating content shows up.
These are all full screen animations that play as a transition from one screen to the next. They were all made using After Effects and exported with the LottieFiles extension. They play perfectly fine when previewed on the Lottie website and there are no issues found when I export them.
Has anyone experienced this problem or have any advice?
Check the Lottie File Path:
Ensure that the path to your Lottie animation file (e.g., check.json) is correct. Double-check the file location within your project.
LottieView Styling:
Make sure you set the style property for your LottieView. It’s essential to specify the dimensions (e.g., flex: 1) to ensure the animation displays correctly.
Frame Rate and Op Section:
Sometimes, issues arise due to incorrect values in the Lottie JSON file. Verify that the frame rate and the “op” section (opacity) are correctly defined in your exported JSON file.
Test Elsewhere:
Confirm that the animation works as expected on platforms like lottie.cloud or other Lottie preview tools. This step helps isolate whether the issue lies within your React Native environment.
Expo Upgrade Considerations:
If you recently upgraded Expo, check if there are any known issues related to Lottie animations after the upgrade. Sometimes, specific versions may cause unexpected behavior.
iOS Specific Issue:
There have been reports of Lottie animations not displaying correctly on iOS due to frame rendering issues. While the root cause isn’t entirely clear, it’s essential to keep an eye on community discussions and updates.