New Arch: Previous Lottie Animation Flashing on New Animation

[aman003malhotra]

Description

the previous animation briefly appears before the new animation renders in IOS.

Steps to reproduce

Behaviour There is one lottie that coming before the actual lottie is loaded, the lottie that comes is previously there on the screen. Below i have attached the video where the gift box lottie comes which is not supposed to come but only the eventual lottie

https://drive.google.com/file/d/1ewtfzEbWVlMQryTZ0EGC0Ovs_cDHL2-_/view?usp=sharing

Snack or a link to a repository

Lottie React Native version

7.3.3

React Native version

0.78.3

Platforms

iOS

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

None

Device

Real device

Acknowledgements

Yes

[aman003malhotra]

@matinzd can you help Note: We have our private repo of our org, let us know if you need a sample repro, or otherwise if it is a known issue, please let us know .

[matinzd]

Can you please provide a sample repo?

[aman003malhotra]

@matinzd Below is the link to of the repo also please go through readme.md for clarity on the issue https://github.com/aman003malhotra/lottie-ios-issue

[samarthskadam-lokal]

Can you please provide support for this?

[rustyzone]

Also seeing this issue

[aman003malhotra]

@matinzd I have opened a PR to fix the issue https://github.com/lottie-react-native/lottie-react-native/pull/1385

can you please check

[TupiC]

+1

[Phecda]

On iOS new arch, every view is recycled by default. So we should do some cleaning work in - (void)prepareForRecycle of the LottieAnimationViewComponentView. My idea is:

1. set the 4 sourceXXX to null in prepareForRecycle, and reset any other props;
2. in ContainerView.swift, if the parameter of setSourceXXX is null, invoke removeCurrentAnimationView.

[aman003malhotra]

I have added a fix, if @matinzd can review and you guys can also check

[Papa-het]

+1

[kizarrd]

+1