Trigger rerender on animation complete #37836
Closed
Conversation
This file contains 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: D46655246 |
genkikondo
force-pushed
the
export-D46655246
branch
from
c472321
to
0a2d2bc
Compare
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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 Differential Revision: D46655246 fbshipit-source-id: 7e4cfc1be6b54efd24a51a68f2a3b95ba444ee66
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 7d67f4f9eef3c2f37019c1ba7d70fac2b9905e5d
genkikondo
force-pushed
the
export-D46655246
branch
from
0a2d2bc
to
83e7f98
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 1d4e7006d5e02fa730da22e784c9bb80a49809a9
genkikondo
force-pushed
the
export-D46655246
branch
from
83e7f98
to
9e3f30c
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 41e1301fe5e7709388d08655bc158c57d54e38d9
genkikondo
force-pushed
the
export-D46655246
branch
from
9e3f30c
to
f18647a
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: cf60e55859ce67750ad156e90003c952e4f73953
genkikondo
force-pushed
the
export-D46655246
branch
from
f18647a
to
8e0936b
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 64ee82b027eb4cccacb993e0f3aec7bc9e939e1a
genkikondo
force-pushed
the
export-D46655246
branch
from
8e0936b
to
daed8b2
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 44462a5f868fdba1d9b09202a46ecefc23bc2082
genkikondo
force-pushed
the
export-D46655246
branch
from
daed8b2
to
17f90a2
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
genkikondo
added a commit
to genkikondo/react-native
that referenced
this pull request
Jun 13, 2023
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: 06a679e1e17177168da70e3852d4b3484010efee
genkikondo
force-pushed
the
export-D46655246
branch
from
17f90a2
to
a63f2b8
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
Summary: Pull Request resolved: facebook#37836 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: javache Differential Revision: D46655246 fbshipit-source-id: b19054ef10f4e0f3c8ca9c50ec6652a3de555bc3
genkikondo
force-pushed
the
export-D46655246
branch
from
a63f2b8
to
acc12f8
Compare
|
This pull request was exported from Phabricator. Differential Revision: D46655246 |
|
This pull request has been merged in c870a52. |
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.
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) 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
Differential Revision: D46655246