[iOS] [Animated] Fix Animated-driven transform state when deleting views from view hierarchy #22839
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is an implementation of proposal #17475.
I haven't been using ReactNative since original evaluation about a year ago, upon revisiting I see this issue is still around.
Issue:
When deleting a view which UI state (like transform) has been connected to AnimatedProps, said state is reset to defaults before running deleting animation (fade to transparent using opacity, by default). This makes it impossible to implement nice swipe-to-delete experience (when swipe is driven by native driver)
Proposal
To iterate what I described in #17475: instead of disconnected animated component from native view when component is unmounted, keep that connection at native side around until native view is fully purged from the hierarchy.
Concerns:
I'm not 100% sure this is a correct approach. May there be legitimate use cases when AnimatedProps has to be disconnected from native view while latter has to remain in the hierarchy? If anyone has broader context around this mechanism I'd like to discuss.
Changelog:
[iOS] [Changed] - AnimatedProps isn't disconnected from native view (by calling
__disconnectAnimatedView
) when component is unmounted on js side. Instead, runtime on native side is keeping track of such connections and disconnects when native view is fully removed from hierarchy.Test Plan:
As a proof-of-concept please see gif provided in #17475.
I wanted to provide a proper integration test but couldn't wrap my head around how to best do it. Any help or hint on direction would much appreciated.