Lottieアニメーションがモバイルで表示されない問題を修正した方法
The First Attempt: SimpleThe Fix: Getting Hands-On with Animation ProgressUpdated Animation ComponentWhy This WorkedLessons Learned
Sometimes, as developers, we think we’ve nailed an implementation—until we test it on a different platform, and boom, it doesn’t work. That’s exactly what happened to me recently when I added a loading animation using Lottie to our React Native app. It looked great on the web, but when I tested it on mobile, the animation just didn’t show up. Here’s the story of how I fixed it and what I learned along the way.
The First Attempt: Simple
To keep things straightforward, I used the library to add the loading animation. Here’s the initial code:
I then used this component with a wrapper to display the animation while fetching data:
On the web, everything was smooth—animation played as expected. But on mobile? Nothing.
The animation was just invisible.
Digging into the Problem
I double-checked the setup, ensuring the library and file were correctly linked. They were. So, what went wrong?
Turns out, while and work fine on the web, mobile has its quirks. Specifically, mobile platforms handle animations differently, and the playback wasn’t being properly triggered.
The Fix: Getting Hands-On with Animation Progress
To make sure the animation worked on both web and mobile, I decided to manage its progress explicitly using . Here’s what the new implementation looks like:
Updated Animation Component
Styles for the Animation
Why This Worked
Here’s why the new approach succeeded:
- Explicit Progress Control: By using and linking it to , I made sure the animation played consistently on mobile.
- Custom Looping: The method ensured the animation looped seamlessly across platforms.
- Performance Optimization: While was set to for compatibility, managing playback directly improved reliability.
Lessons Learned
- Test Early and Often: What works on one platform may not work on another. Test animations and other features on both web and mobile as soon as possible.
- Understand Tools: Libraries like simplify animation, but understanding how they work under the hood can save you hours of debugging.