Troubleshooting iOS Animation and Style Bugs in Reanimated

TL;DR

• Debug an iOS-specific issue with Reanimated causing size and angle discrepancies.
• Focus on Lottie animations and custom components as potential culprits.
• Methodically isolate the problem by reviewing animated vs. non-animated code paths.
• Highlighted the importance of testing for consistent style and animation behavior across platforms.

Debugging an iOS-Specific Reanimated Bug

Today, I tackled a perplexing issue after a recent iOS update that affected a Reanimated component displaying inconsistently sized icons at incorrect angles compared to Android. My journey began on the home screen, where these icons serve as badges. Here’s a step-by-step exploration:

Step 1: Identifying the Problem

I noticed the inconsistency after an iOS update where the Lottie-based animated component wrapped in my custom AnimatedIcon became problematic. It rendered smaller and at a different angle than on Android.

Step 2: Investigating the Components Involved

Delved into the custom AnimatedIcon component, which interacts with Lottie through React animated’s createAnimatedComponent function. One critical area to explore was how Lottie source files (in JSON format) were processed.

Step 3: Isolating the Issue

Started by manipulating whether the animation was using an ‘Animated’ Lottie component versus a standard ‘LottieView’. Switching to a standard view without animation initially had no effect on iOS, pointing to deeper styling issues rather than animation logic.

Step 4: Testing Style Properties

Added and adjusted console logs to confirm if iOS processed changes correctly. By hardcoding size attributes, I observed unexpected results, hinting at issues with the style prop passed down from parent components.

Step 5: Tracing Style and Rotation

Removed the style prop including any transformation affecting position or rotation. This step was crucial, revealing the styles were affecting iOS sizing behavior, separating the style issue from the animation concern.

Conclusion

Ultimately, splitting the bugs offered insight into tackling complex UI problems: first address the misalignment in style/size, then resolve the animation discrepancies. Persistent testing and incremental adjustments on both the code and testing on different platforms clarified many hidden assumptions in my setup. The next task will target restoring the expected animation behaviors on iOS. Stay tuned for more debugging narratives!