HomePhabricator
Diffusion Comm fcb364eaee1a

[native] Modify overlay context to handle reanimated 2 components

Description

[native] Modify overlay context to handle reanimated 2 components

Summary:
issue: ENG-8914

Overlay context used to provide for each screen their own position - a reaniamted 1 value that was supposed to be used for animating views. It was provided by the context, so that animations could be still run when the user decided to leave the context. The idea was that afre the navigation goBackOnce function was called, Overaly navigator would start the exit animation and keep rendering the screen as long as the animation was running. Once the animation was done, the Overlay navigator would add a listener to the screen's listeners array, which would cause Animated.Code to be rendered, and the screen would get unmounted by the listener.

In reanimated 2 we take a very different approach to how we animate things, and how we handle rendering the screen as long as we need for the animation to run:

  1. Instead of animating by using a Value and interpolating it, we will be using entering and exiting animations. I consulted the reanimated team a lot in trying to figure out how to refactor our logic, and this is the approach they strongly recommended.
  2. The exiting animation can be passed a callback, that will be called once the animation is called. This is where we will call the function that unmouts the screen

So unmounting the screen for components that use reanimated 2 will be handled in a callback to an animation. This is why I have to make sure we don't render the Animated.Code with the listener that unmounts the screen. I took the approach where we have a list of components that use reanimated 2, and for them we never set position. Based on position existance or non-existance, we then either render the Animated.Code or not.

Because the logic in this component is so complex, I wanted to avoid copying it. Especially that the reanimaed 1 logic will be removed at some point. So this code will gett a bit cleaner. Meanwhile maintaing two of such complicated components sounds like more trouble.

Test Plan: After refactoring nux tips overlay I renderd a nux tip. The animations work as expected, they don't get cancelled by the reaniamted 1 code.

Reviewers: tomek, will

Reviewed By: tomek

Subscribers: ashoat

Differential Revision: https://phab.comm.dev/D13064

Details

Provenance
inkaAuthored on Aug 12 2024, 9:53 AM
Reviewer
tomek
Differential Revision
D13064: [native] Modify overlay context to handle reanimated 2 components
Parents
rCOMMd024104db519: [native] Simplify name
Branches
Unknown
Tags
Unknown