React to onUserDrivenAnimationEnded event in JS#45414
Closed
cipolleschi wants to merge 4 commits into
Closed
Conversation
facebook-github-bot
added
CLA Signed
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D59681428 |
…#45413) Summary: Pull Request resolved: facebook#45413 ## Changes Add an example in RNTester to test that pressability with NativeDrivers works properly. ## Context The pressability handling is a bit peculiar. We have to handle 3 main behaviors: * `PressIn` -> `PressOut` => triggers the `onPress` * `PressIn` -> move inside the rectangle -> `PressOut` => triggers the `onPress` * `PressIn` -> move outside the rectangle -> `PressOut` => cancel `onPress`. For the first case, we detect whether the press happens inside a component in the Native layer only. And everything works. When a move is involved, we: 1. Detect the initial press in the Native layer 2. We move the coursor and we delegate the detection of whether we are inside of a rect or not to the JS layer 3. The JS layer asks the C++ layer about the layout and decide whether we are in case 2 (move but still inside the rect) or in case 3 (move but outside the rect). The problem is that with `nativeDriver` and animations, the C++ layer doesn't know about where the receiver view actually is. This results in issues like the one shown by [facebook#36504](facebook#36504), where the onMove is not handled correctly. ## Solution The solution is to keep detecting whether we are in the receiver view or not in the Native layer and pass the receiver view position and size back to JS so that the JS layer don't have to jump to C++ to make this decision. We decided to pass the frame information because the JS layer is adding some padding and configurations to the final rectangle and we don't want to lose those configurations. ## Changelog [General][Added] - Add example in RNTester to show that pressability works properly with NativeDrivers Differential Revision: D58182480 Reviewed By: sammy-SC
Summary: Pull Request resolved: facebook#45382 This change is the first step to tr and solve the pressability's `onTouchMove` issue with animation driven natively in the New Architecture. The idea is to trigger a special event from native to let JS know that a scroll event has ended (`scrollViewDidEndDragging` or `scrollViewdidEndDecelerating`). When this happens, we need to send an event to JS to let him know that it has to sync the Native Tree with the Shadow Tree. Step 2 is to connect Native with JS ## Changelog: [iOS][Added] - Send onScrollEnded event to NativeTurboAnimatedModule Differential Revision: D59459989 Reviewed By: sammy-SC
Summary: Pull Request resolved: facebook#45383 This is the second step required to fix the onTouchMove event in the new architecture. In this change, we are retrieving the list of nodes that are connected by the animation, and we are sending an event to the nodes so that we can trigger the commit. ## Changelog [iOS][Added] - retrieve the tags of the nodes connected by the animation and send them to JS Differential Revision: D59524617
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D59681428 |
cipolleschi
force-pushed
the
export-D59681428
branch
from
d696fdf to
d0adb8a
Compare
Summary: Pull Request resolved: facebook#45414 This change completes the fix for broken pressable when animations were applied to components with native driven animations. When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the `update` function. Then, when observing the props lifecycle, it register a listener to the new `OnUserAnimationEnded` event, fired by the NativeAnimation module. When the `OnUserAnimationEnded` event is fired, the AnimatedProps will update the props that depends on the user driven animation. ## Changelog [General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app. Differential Revision: D59681428
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D59681428 |
cipolleschi
force-pushed
the
export-D59681428
branch
from
d0adb8a to
78a5050
Compare
Base commit: c7fab53 |
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Jul 26, 2024
Summary: Pull Request resolved: facebook#45414 This change completes the fix for broken pressable when animations were applied to components with native driven animations. When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the `update` function. Then, when observing the props lifecycle, it register a listener to the new `OnUserAnimationEnded` event, fired by the NativeAnimation module. When the `OnUserAnimationEnded` event is fired, the AnimatedProps will update the props that depends on the user driven animation. ## Changelog [General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app. Differential Revision: D59681428
Contributor
|
This pull request has been merged in afa887b. |
Collaborator
|
This pull request was successfully merged by @cipolleschi in afa887b When will my fix make it into a release? | How to file a pick request? |
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Jul 31, 2024
Summary: Pull Request resolved: facebook#45838 Some Internal tests in the old architecture were failing after landing [facebook#45414](facebook#45414) because the `RCTNativeAnimatedModule` in the old architecture was not declaring the event. This change fixes it by declaring the event that is never fired in the Old Architecture as it is not needed. ## Changelog [iOS][Added] - Declare the `onUserDrivenAnimationEnded` in the old Architecture Reviewed By: sammy-SC Differential Revision: D60507812
facebook-github-bot
pushed a commit
that referenced
this pull request
Jul 31, 2024
Summary: Pull Request resolved: #45838 Some Internal tests in the old architecture were failing after landing [#45414](#45414) because the `RCTNativeAnimatedModule` in the old architecture was not declaring the event. This change fixes it by declaring the event that is never fired in the Old Architecture as it is not needed. ## Changelog [iOS][Added] - Declare the `onUserDrivenAnimationEnded` in the old Architecture Reviewed By: sammy-SC Differential Revision: D60507812 fbshipit-source-id: eb12563c6551204bcf98f3a2001e1efcf84ef05e
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Aug 12, 2024
Summary: Pull Request resolved: facebook#45839 Pull Request resolved: facebook#45414 This change completes the fix for broken pressable when animations were applied to components with native driven animations. When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the `update` function. Then, when observing the props lifecycle, it register a listener to the new `OnUserAnimationEnded` event, fired by the NativeAnimation module. When the `OnUserAnimationEnded` event is fired, the AnimatedProps will update the props that depends on the user driven animation. ## Changelog [General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app. Reviewed By: sammy-SC Differential Revision: D60499583
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Aug 12, 2024
Summary: Pull Request resolved: facebook#45414 This change completes the fix for broken pressable when animations were applied to components with native driven animations. When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the `update` function. Then, when observing the props lifecycle, it register a listener to the new `OnUserAnimationEnded` event, fired by the NativeAnimation module. When the `OnUserAnimationEnded` event is fired, the AnimatedProps will update the props that depends on the user driven animation. ## Changelog [General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app. Reviewed By: sammy-SC Differential Revision: D60499583
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Aug 12, 2024
Summary: Pull Request resolved: facebook#45837 Some Internal tests in the old architecture were failing after landing [facebook#45414](facebook#45414) because the `RCTNativeAnimatedModule` in the old architecture was not declaring the event. This change fixes it by declaring the event that is never fired in the Old Architecture as it is not needed. ## Changelog [iOS][Added] - Declare the `onUserDrivenAnimationEnded` in the old Architecture Reviewed By: sammy-SC Differential Revision: D60499584
facebook-github-bot
pushed a commit
that referenced
this pull request
Aug 12, 2024
Summary: Pull Request resolved: #45839 Pull Request resolved: #45414 This change completes the fix for broken pressable when animations were applied to components with native driven animations. When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the `update` function. Then, when observing the props lifecycle, it register a listener to the new `OnUserAnimationEnded` event, fired by the NativeAnimation module. When the `OnUserAnimationEnded` event is fired, the AnimatedProps will update the props that depends on the user driven animation. ## Changelog [General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app. Reviewed By: sammy-SC Differential Revision: D60499583 fbshipit-source-id: 02d25e7ca31b91f4d6e4ec1654350e2d84117eda
facebook-github-bot
pushed a commit
that referenced
this pull request
Aug 12, 2024
Summary: Pull Request resolved: #45837 Some Internal tests in the old architecture were failing after landing [#45414](#45414) because the `RCTNativeAnimatedModule` in the old architecture was not declaring the event. This change fixes it by declaring the event that is never fired in the Old Architecture as it is not needed. ## Changelog [iOS][Added] - Declare the `onUserDrivenAnimationEnded` in the old Architecture Reviewed By: sammy-SC Differential Revision: D60499584 fbshipit-source-id: 581a30a88dbd6d8d67078a11699157c55ed19e58
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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.
Summary:
This change completes the fix for broken pressable when animations were applied to components with native driven animations.
When creating the AnimatedProps, if they are natively drive animation, we look for the AnimatedValue involved and we register a listener. This is needed to make sure that the NativeModule will send te updated value upon calling the
updatefunction.Then, when observing the props lifecycle, it register a listener to the new
OnUserAnimationEndedevent, fired by the NativeAnimation module.When the
OnUserAnimationEndedevent is fired, the AnimatedProps will update the props that depends on the user driven animation.Changelog
[General][Fixed] - reallign the shadow tree and the native tree when the user finishes interacting with the app.
Differential Revision: D59681428