Expose animatable refs for v3 touchables

[sorinc03]

Description

Fixes #4225.

When v3 Pressable/Touchable are wrapped with Reanimated's createAnimatedComponent, Reanimated can resolve the composite to the outer gesture detector instead of the inner native button. That means style writes like width and opacity can land on the detector wrapper while only subtree-affecting transforms visibly survive.

This change forwards refs through v3 Pressable and Touchable to their inner native button and attaches getAnimatableRef to that native ref. Reanimated already understands that method and will use it as the host target for animated styles.

Test plan

yarn workspace react-native-gesture-handler test api_v3.test.tsx --runInBand
yarn workspace react-native-gesture-handler eslint --ext '.ts,.tsx' src/__tests__/api_v3.test.tsx src/v3/components/Pressable.tsx src/v3/components/Touchable/Touchable.tsx src/v3/components/animatableRef.ts
yarn workspace react-native-gesture-handler prettier --check src/__tests__/api_v3.test.tsx src/v3/components/Pressable.tsx src/v3/components/Touchable/Touchable.tsx src/v3/components/animatableRef.ts
yarn workspace react-native-gesture-handler ts-check
yarn workspace react-native-gesture-handler lint-js
git diff --check

Notes:

• lint-js passes with the repository's existing warnings.
• The pre-commit hook's staged-file lint/prettier step passed, then the hook failed in unrelated apps/common-app type-checking because react-native-pager-view types are missing.

[Copilot]

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 setAndForwardAnimatableRef helper to set a local ref, attach getAnimatableRef, and forward refs.
• Updates Touchable and Pressable to use a callback ref that installs getAnimatableRef.
• Adds tests asserting Pressable/Touchable expose getAnimatableRef().

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.

[j-piasecki]

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.

[efstathiosntonas]

Hey guys, issue #9587 is now resolved on reanimated@4.5.0, is this still an issue or it's fixed?