Debugging an Unexpected Lottie Animation on iOS

TL;DR

• Faced a bug with Lottie animations being too small only on iOS.
• Identified transform styles were applied twice over on iOS.
• Direct use of Lottie component resolved initial animation issues.
• Scaling transforms resolved size issues, exposing a weird behavior.
• Suspect a platform-specific issue with Lottie React Native.
• Considering opening a GitHub issue, but lack time to create a minimal repro.

I’ve spent over an hour delving into a quirky iOS bug with a Lottie React Native component that’s rendering a diamond animation incorrectly. Here’s my process:

Initially, I assumed the diamond’s small size was due to the tooltip container from the React Native Elements UI library. It turned out this was false, as the size was consistent both inside and outside the tooltip—dependent on the presence of a transform style.

Realizing it might be linked to transform styles, I wrapped my Lottie component with an animatable component to ensure consistent interfaces in our composed UI screens. But this didn’t help. I discovered using the Lottie View component directly from the library fixed the animation issue, but not the size problem caused by transforms.

To troubleshoot, I applied a platform-specific check and halved transform degrees and translation on iOS. Oddly, this led the diamond icon to display smaller above the tooltip upon tapping, suggesting the tooltip might redundantly render the icon.

Frustratingly, the tooltip styling options don’t allow easy manipulation of its container’s behavior. A deep dive into the source code confirmed limited modifiability, meaning the remedy wasn’t straightforward.

Upon reloading, the transform oddity resolved when I applied a scale transform. The doubled transformation values seem specific to iOS, indicating a potential Lottie component bug. Despite the fix, it’s a hacky workaround I’m not entirely satisfied with.

Wrapping up, I documented observations in Notion: Lottie View’s transitions, platform discrepancies, and a potential inherent bug. I intended to check for existing GitHub reports but found no matching issues via AI sweeps.

The proper course would involve creating a bare-bones React Native project to construct a repro case for Lottie’s team. Time constraints cut this plan short, so noting it remained the compromise.

Knowing when to shelve a task and redirect efforts is critical; hopefully, revisiting this with more insight or community updates will drive a permanent fix. For now, the diamond’s back on track—only slightly glowing with mystery.