Skip to content

Expose animatable refs for v3 touchables#4230

Open
sorinc03 wants to merge 2 commits into
software-mansion:mainfrom
sorinc03:fix/v3-pressable-animated-styles
Open

Expose animatable refs for v3 touchables#4230
sorinc03 wants to merge 2 commits into
software-mansion:mainfrom
sorinc03:fix/v3-pressable-animated-styles

Conversation

@sorinc03

@sorinc03 sorinc03 commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

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 AI review requested due to automatic review settings June 2, 2026 19:58

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

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);
});
@j-piasecki

Copy link
Copy Markdown
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.

@sorinc03 sorinc03 force-pushed the fix/v3-pressable-animated-styles branch from 38e4d00 to ed5cd84 Compare June 4, 2026 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[V3] createAnimatedComponent drops most useAnimatedStyle writes v3 Pressable/Touchable

3 participants