ryer.io

Solving Unexpected Icon Behavior in Lottie After Library Upgrade

#lottie #animation #react-native #bugfix #ios

TL;DR

  • Identified that Lottie library upgrade caused icon size issues on iOS due to transform properties.
  • Tested multiple transformations to isolate rotation as the root cause.
  • Explored and confirmed a double application issue with rotation on iOS.
  • Worked through custom component configuration to realign property application priorities.
  • Investigated Lottie’s internal sizing logic through resizeMode properties.

I’ve been troubleshooting a peculiar problem with Lottie animations after a recent library upgrade. Our animated icons were misbehaving, particularly shrinking in size on iOS when rotating them. This was not occurring with the older library version nor on Android.

Problem Breakdown

Initial suspicion was that an update in the Lottie library is the cause since some other dependent library underwent upgrades. To pinpoint the issue without downgrading (which would involve time-consuming recompilation), here’s the path I took:

  1. Investigation by Elimination: I began by toggling between styling properties to check their influence. Removing the style prop didn’t affect sizing, whereas changes in the transform were influential, highlighting the rotation transformation as the likely culprit on iOS.

  2. Narrowing Down: Applying a 24-degree rotation led to visible size changes, unlike other transformations like scaling. Experimented with various rotation angles (24°, 90°, 180°) and noted a consistent over-rotation effect exclusive to iOS. The angle seemed to double on iOS, whereas it remained consistent on Android.

  3. Component Deep Dive: Delved into the animated icon component, tweaking property application by rearranging style props. Despite reloading the app to overcome potential caching, the behavior persisted.

  4. Style Overriding Strategy: By changing the load order of style definitions, I ensured height and width prop application precedence, ultimately revealing that internal Lottie settings were at play.

Resolution

Explored Lottie’s resizeMode property within its source and discovered that variations (contain, cover, center) directly impacted the icon’s display size. Setting it to ‘cover’ revealed a correct sizing behavior but only fixed part of the issue.

In the end, my key understanding is the Lottie’s native handling of transforms and its application peculiarities on iOS, possibly doubled rotations due to how styles are layered or state managed internally.

Though this doesn’t fully solve the visual issue, isolating the root cause allows better discussion with the Lottie community or further digging into the internals for a permanent fix. Until a stable patch is introduced, setting a sensible rotation and mitigating through resizeMode offers immediate relief.