chore: add onGestureCancel event #1810

piaskowyk · 2023-07-05T16:02:24Z

Description

This PR adds new iOS only event. Event is triggered after canceled swipe back (as on video)

Screen.Recording.2023-07-06.at.14.22.32.mov

kkafar

The code looks fine. I see that Android Fabric CI build has passed.
🟢 from me.

WoLewicki

LGTM 🚀

WoLewicki · 2023-07-10T15:14:17Z

Could you change the name of the PR also? It is not only for internal usage at the end cc @piaskowyk 😅

tboba

🚀

## Summary This pull request introduces a new progress-based shared element transition animation that utilizes the progress value from `react-native-screens`. This value indicates the progress of the screen's transition. ## Changes 1. Now it is possible to use two different types of animation: - standard animation (uses `withTiming` etc.) - progress-based animation (uses transition progress from `react-native-screens`). This is the default type of animation for `SET`, but a user can change the default type. 2. It is possible to define custom standard and progress-based animations. ## Implementation The new implementation is based on event listeners. Events come from `rn-screens`. I added a new event to handle swipe back cancel on iOS - PR here - software-mansion/react-native-screens#1810 The approach assumes that exists one `onTransitionProgress` listener that computes all progress animations and updates all shared views. ## Animation Flow ### Scenario 1: Scenario assumption: The application consists of two screens - `ScreenA` and `ScreenB`, each having a shared element. When the user navigates from `ScreenA` to `ScreenB`, the following steps occur: #### Part 1: JS, JS Thread 1. Creation of the JS component on the JS thread. 2. The `createAnimatedComponent` method is called within which the `SharedTransition.registerTransition()` method is invoked. The `SharedTransition.registerTransition()` method performs the following tasks: * Sends information about the view and animation to the native side (`LayoutAnimationManager.cpp`). * Adds information about the transition progress to `ProgressTransitionManager`. * Registers a listener for the `transitionProgress` event. #### Part 2*: iOS, Native side, UI Thread 1. After mounting `ScreenB`, the `swizzled_viewDidLayoutSubviews` method is invoked, which is a swizzled version of the RNScreen's `viewDidLayoutSubviews` method. * This method is important because it ensures that all views on `ScreenB` have the correct layout, allowing for the creation of snapshots with accurate component styles. What is important, the screen header is attached too! 2. The `swizzled_viewDidLayoutSubviews` method calls the `LayoutAnimationManager.startAnimationForTag` method, which is a JS method that exists on the UI Thread. #### Part 2*: Android, Native side, UI Thread 1. After mounting `ScreenB`, the `SharedTransitionManager.screenDidLayout()` method is invoked. We don't need swizzling technique here like it was on iOS. We can detect when the screen is ready and all components have the proper layout in the `ReanimatedNativeHierarchyManager.updateLayout` method. 2. The `screenDidLayout` method calls the `startAnimationForTag` method, which is a JS method that exists on the UI Thread. #### Part 3: JS, UI Thread 1. The `LayoutAnimationManager[.cpp].startAnimationForTag` method, which is equivalent to `LayoutAnimationsManager[.js].start()`, is called. 2. The `start()` method invokes the `ProgressTransitionManager.onTransitionStart()` method responsible for saving snapshots with target style values. 4. At this point, everything is ready to react for the `RNScreen`'s `transitionProgress` event. #### Part 4: JS, Event Listener, UI Thread 1. Whenever the `transitionProgress` event occurs, the `ProgressTransitionManager.frame()` method is executed. 2. The `frame()` method computes the current styles for each registered shared view and applies those styles using the `_notifyAboutProgress` method. 3. Upon the occurrence of the screen's `onAppear` or `onDisappear` event, the `ProgressTransitionManager.onTransitionEnd()` method is called. This method invokes the native `_notifyAboutEnd` method responsible for cleaning and reparenting views after the shared transition. ### Scenario 2: Assumption: When the user navigates back from `ScreenB` to `ScreenA`, the flow is similar to Scenario 1, with the only difference in Part 2. #### Part 2*: iOS 1. Before removing `ScreenB`, the `swizzled_notifyWillDisappear` method is called, which is a swizzled version of the `RNScreen`'s `notifyWillDisappear` method. This method is invoked always before the screen removal from the top of the stack. Fact that screen is removed from the stack doesn’t mean that this screen is removed from React/Native tree too. It is applicable in three different iOS navigation scenarios: * Calling `navigation.navigate()` invokes `notifyWillDisappear`, pops the screen from the stack, removes it from the React tree, starts the transition, and finally after transition end, removes the screen from the native tree. * Using the header's "go back" button invokes `notifyWillDisappear`, pops the screen from the stack and starts the transition. After transition end removes the screen from the React tree and native tree after. * Interactive swiping back invokes `notifyWillDisappear`, and based on user actions, cancels the swipe and performs no action or completes the swipe to remove the screen. Then, the screen is popped from the stack, removed from the React tree, and finally removed from the native tree. #### Part 2*: Android 1. On removing `ScreenB`, the `SharedTransitionManager[.java].onViewsRemoval()` method is called, followed by starting the transition for the views on this screen. Unlike iOS, Android does not have interactive swiping. The "go back" button in the header works the same like calling `navigation.navigate()`, allowing for a simpler method to determine when to initiate a transition. ### Good to know: * _How is this change coupled with screens implementation and why?_ The change involves registering for the `transitionProgress` event of the screen and then computing and applying new styles to the shared views within the event callback. * _What_ is the role of `ProgressTransitionManager`?_ The `ProgressTransitionManager` is an object that exists on the UI Runtime. Its role is to store snapshots, view tags, and progress callbacks for shared views participating in the current transition. The manager also contains a `frame()` function that is used as an event callback for the `transitionProgress` event. During this event, the `ProgressTransitionManager` iterates over the stored view tags, computes new styles for each of them, and applies these styles to the views using the `_notifyAboutProgress` method. * Clearing configuration from `LayoutAnimationManager.cpp`: The configuration is cleared in two specific cases: 1. After the transition is finished (`finishSharedAnimation`). 2. After the removal of a screen or stack (`onScreenRemoval`). ## Current shared transition configuration API ```js const transition = SharedTransition .duration(3000) .animation((values) => { 'worklet'; return { width: withSpring(values.targetWidth), height: withSpring(values.targetHeight), originX: withSpring(values.targetOriginX), originY: withSpring(values.targetOriginY), }; }) .progressAnimation((values, progress) => { 'worklet'; return { width: progress * (values.targetWidth - values.currentWidth) + values.currentWidth, height: progress * (values.targetHeight - values.currentHeight) + values.currentHeight, originX: progress * (values.targetOriginX - values.currentOriginX) + values.currentOriginX, originY: progress * (values.targetOriginY - values.currentOriginY) + values.currentOriginY, }; }) .defaultTransitionType(SharedTransitionType.ANIMATION); ``` This PR is based on #4278 but I simplified the native part of the code responsible for worklet callback registration: Previous: <img width="145" alt="image" src="https://user-images.githubusercontent.com/36106620/236154156-6e0fb429-4b2b-4be1-b304-ee690157cc1f.png">

## Summary Since software-mansion/react-native-screens#1810 got merged and included in `3.23.0` release we can use the npm published pack again. ## Test plan Yes

piaskowyk added 3 commits July 5, 2023 17:58

Add Paper implementation

6720651

Name update

f031416

Update spec

499cecc

piaskowyk changed the title ~~Add Paper implementation~~ Add SwipeCanceled event Jul 6, 2023

Update event name

f71d70a

piaskowyk marked this pull request as ready for review July 6, 2023 12:23

piaskowyk mentioned this pull request Jul 6, 2023

[Shared Element Transition] Progress animation v2 software-mansion/react-native-reanimated#4421

Merged

piaskowyk requested review from kkafar, WoLewicki and kacperkapusciak July 6, 2023 13:16

kkafar approved these changes Jul 6, 2023

View reviewed changes

kkafar changed the title ~~Add SwipeCanceled event~~ chore: add SwipeCanceled event for internal usage Jul 7, 2023

WoLewicki approved these changes Jul 7, 2023

View reviewed changes

tboba changed the title ~~chore: add SwipeCanceled event for internal usage~~ chore: add onGestureCancel event Jul 10, 2023

tboba approved these changes Jul 10, 2023

View reviewed changes

piaskowyk merged commit 990e6ef into main Jul 12, 2023

piaskowyk deleted the @piaskowyk/swipe-canceled-event branch July 12, 2023 10:58

tjzel mentioned this pull request Aug 1, 2023

Bump react-native-screens software-mansion/react-native-reanimated#4862

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: add onGestureCancel event #1810

chore: add onGestureCancel event #1810

piaskowyk commented Jul 5, 2023 •

edited

Loading

kkafar left a comment

WoLewicki left a comment

WoLewicki commented Jul 10, 2023

tboba left a comment

chore: add onGestureCancel event #1810

chore: add onGestureCancel event #1810

Conversation

piaskowyk commented Jul 5, 2023 • edited Loading

Description

kkafar left a comment

Choose a reason for hiding this comment

WoLewicki left a comment

Choose a reason for hiding this comment

WoLewicki commented Jul 10, 2023

tboba left a comment

Choose a reason for hiding this comment

piaskowyk commented Jul 5, 2023 •

edited

Loading