When animating using native driver, trigger rerender on animation completion #37786
Conversation
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
facebook-github-bot
added
CLA Signed
|
This pull request was exported from Phabricator. Differential Revision: D46574511 |
Base commit: 51cea49 |
|
This pull request was exported from Phabricator. Differential Revision: D46574511 |
genkikondo
force-pushed
the
export-D46574511
branch
from
5680b38 to
ff511fc
Compare
…pletion (#37786) Summary: Pull Request resolved: #37786 When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the Pressability responder region/tap target is incorrect. Prior diffs ensure that upon completion of natively driven animations, the final values are synced to the JS side AnimatedValue nodes. In this diff, on completion of a natively driven animation, AnimatedProps.update() is called, which in turn calls the value update callback on AnimatedProps, which [triggers a rerender (via setState)](https://www.internalfb.com/code/fbsource/[566daad5db45807260a8af1f85385ca86aebf894]/xplat/js/react-native-github/packages/react-native/Libraries/Animated/useAnimatedProps.js?lines=80) which has the effect of pushing the latest animated values to Fabric. Alternative considered was using setNativeProps, but that approach was dropped as setNativeProps was only introduced to make migration easier and should not be used for new code, as per sammy-SC. Changelog: [General][Fixed] - When animating using native driver, trigger rerender on animation completion in order to update Pressability responder regions Reviewed By: rshest Differential Revision: D46574511 fbshipit-source-id: d30e1c67bcfcc106d1e83324b62d38a9270c0bdd
genkikondo
force-pushed
the
export-D46574511
branch
from
ff511fc to
78af270
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46574511 |
|
This pull request has been merged in 03f70bf. |
|
This pull request has been reverted by 48cdc60. |
ryanstout
pushed a commit
to ryanstout/react-native
that referenced
this pull request
Nov 24, 2023
…pletion (facebook#37786) Summary: Pull Request resolved: facebook#37786 When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the Pressability responder region/tap target is incorrect. Prior diffs ensure that upon completion of natively driven animations, the final values are synced to the JS side AnimatedValue nodes. In this diff, on completion of a natively driven animation, AnimatedProps.update() is called, which in turn calls the value update callback on AnimatedProps, which [triggers a rerender (via setState)](https://www.internalfb.com/code/fbsource/[566daad5db45807260a8af1f85385ca86aebf894]/xplat/js/react-native-github/packages/react-native/Libraries/Animated/useAnimatedProps.js?lines=80) which has the effect of pushing the latest animated values to Fabric. Alternative considered was using setNativeProps, but that approach was dropped as setNativeProps was only introduced to make migration easier and should not be used for new code, as per sammy-SC. Changelog: [General][Fixed] - When animating using native driver, trigger rerender on animation completion in order to update Pressability responder regions Reviewed By: rshest Differential Revision: D46574511 fbshipit-source-id: 185471b28f5f7e3ba9d62d2ac196e9b65b07a86e
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the Pressability responder region/tap target is incorrect.
In this diff, on completion of a natively driven animation, AnimatedProps.update() is called, which in turn calls the value update callback on AnimatedProps, which triggers a rerender (via setState).
Alternative considered was using setNativeProps, but that approach was dropped as setNativeProps was only introduced to make migration easier and should not be used for new code, as per sammy-SC.
Changelog:
[General][Fixed] - When animating using native driver, trigger rerender on animation completion in order to update Pressability responder regions
Differential Revision: D46574511