Expose animatable refs for v3 touchables#4230
Open
sorinc03 wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds an “animatable ref” surface to v3 Pressable and Touchable by attaching getAnimatableRef() to the underlying native button ref, and exercises it in the API v3 test suite.
Changes:
- Introduces a shared
setAndForwardAnimatableRefhelper to set a local ref, attachgetAnimatableRef, and forward refs. - Updates
TouchableandPressableto use a callback ref that installsgetAnimatableRef. - Adds tests asserting
Pressable/TouchableexposegetAnimatableRef().
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/react-native-gesture-handler/src/v3/components/animatableRef.ts | New helper for setting+forwarding refs and attaching getAnimatableRef(). |
| packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx | Uses helper to install getAnimatableRef() on the native button ref. |
| packages/react-native-gesture-handler/src/v3/components/Pressable.tsx | Uses helper to install getAnimatableRef() on the native button ref. |
| packages/react-native-gesture-handler/src/tests/api_v3.test.tsx | Adds coverage asserting getAnimatableRef() exists for Pressable/Touchable. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+12
to
+16
| localRef.current = ref; | ||
|
|
||
| if (ref) { | ||
| (ref as AnimatableRef<T>).getAnimatableRef = () => localRef.current; | ||
| } |
Comment on lines
+42
to
+52
| test('Pressable exposes the native button as an animatable ref', () => { | ||
| const ref = createRef<AnimatableViewRef>(); | ||
|
|
||
| render( | ||
| <GestureHandlerRootView> | ||
| <Pressable ref={ref} /> | ||
| </GestureHandlerRootView> | ||
| ); | ||
|
|
||
| expect(ref.current?.getAnimatableRef?.()).toBe(ref.current); | ||
| }); |
Member
|
I think this may be on Reanimated's side. I opened software-mansion/react-native-reanimated#9587 yesterday, and I'd like to wait for a response from the Reanimated team before proceeding. |
38e4d00 to
ed5cd84
Compare
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
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.
Description
Fixes #4225.
When v3
Pressable/Touchableare wrapped with Reanimated'screateAnimatedComponent, Reanimated can resolve the composite to the outer gesture detector instead of the inner native button. That means style writes likewidthandopacitycan land on the detector wrapper while only subtree-affecting transforms visibly survive.This change forwards refs through v3
PressableandTouchableto their inner native button and attachesgetAnimatableRefto that native ref. Reanimated already understands that method and will use it as the host target for animated styles.Test plan
Notes:
lint-jspasses with the repository's existing warnings.apps/common-apptype-checking becausereact-native-pager-viewtypes are missing.