Debugging an iOS Lottie Component Styling Anomaly

TL;DR

• Experimented with blank style objects, revealing issues weren’t there; emphasized careful testing with library upgrades.
• Explored alternatives such as downgrading libraries or platform-specific tweaks to uncover bug roots.
• Removed intermediary components to test core behavior directly, uncovering that direct Lottie usage resolved some issues.
• Lessons learned about stripping down to core components for more straightforward debugging.

Diving back into a persistent issue with the styling of a Lottie Vue component on iOS, I found myself tangled in its source code trying to identify why the icon rendered as a minuscule graphic. The component styling seemed fine until it behaved oddly after a library update. Reflecting on this, I concluded upgrades should be incremental, coupled with thorough testing at each step. This isn’t something you want to overlook if you aim for stability.

Initially, I tried stripping the styling object down to its bare essentials, an approach that made zero difference. I suspected the react-native-reanimated wrapper around the Lottie component might be the culprit. Removing it? No effect. But exploring different properties—transform, rotation—revealed the transforms were applying redundantly. Odd behavior when dealing with iOS.

Considered chucking the problem to ChatGPT for ideas like if styles were doubling somehow. But opted for a straightforward test: rewriting with basic Lottie integration and avoiding the animation wrapper. Voila, some issues resolved—at least it played as expected, despite the transformation redundancy.

As a quicker, albeit temporary fix, a platform-specific modification was tempting—detect iOS and apply hacky visual corrections. Then came the realization: maybe backtracking to a previous library state or combing through the changelog could offer solutions too. But those could soak up precious time due to build and pod reinstall processes.

Designing my own animated icon was much about encapsulating logic—play, stop, etc. Abandoning my custom component for direct Lottie calls curbed some bugs swiftly, illustrating that trudging through overly abstracted layers isn’t always the way to go.

Although solving the animation portion of my problem, I discovered the real challenge was a styling glitch: transforms duplicated in execution. Guess it’s a half-win—I’ll take it, as both a learning experience and reminder of when to go back to basics when hunting bugs.