software-mansion / software-mansion/react-native-gesture-handler

Expose native visual pressed state for custom animations inside scroll views

Open
#4,515 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Platform: Android
Dominant language
TypeScript
Stars
6.8k
Forks
1.1k
Avg merge
1d 6h
Merged PRs (30d)
50

Description

Description

Description:

We’re using Gesture Handler’s ScrollView and Touchable with a custom press animation. We want our custom animation to follow the platform’s native touch handling: defer feedback while a touch may become a scroll, and cancel feedback when scrolling takes over.

Observed behavior

On Android, onPressIn can fire before the native view enters its visual pressed state. Starting our custom animation from this callback therefore briefly animates the button when the user intends to scroll, even with delaysChildPressedState enabled.

Desired behavior

We think this is a bug and the native press feedback and a custom animation should start and be canceled in the same way.

Reproduction

Standalone example and instructions

  • Deferral ON, native scale OFF: reproduces the custom-animation mismatch.
  • Both ON: compares against the built-in native animation.

Here is a video: As you can see, the custom animation triggers always when we use a custom animation and not the built-in native animation.

https://github.com/user-attachments/assets/a04d469c-f058-4584-9b7d-3e0d9ef90c7e

Steps to reproduce
  1. Place a Touchable inside Gesture Handler’s ScrollView with delaysChildPressedState enabled.
  2. Drive a custom scale animation through onPressIn and onPressOut.
  3. Start a scroll with your finger initially over the touchable.
  4. Observe that the custom animation can begin before the scroll takes over.
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://gist.github.com/BenedictP/807f9e37b25760be47bae45fba213d6e

Gesture Handler version

3.2.1 & 3.3.0

React Native version

0.87

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked standalone example and reproduce the behavior using Gesture Handler’s ScrollView and Touchable with delaysChildPressedState enabled. Compare onPressIn/onPressOut with the native pressed-state behavior during scrolling; done means custom animation feedback is deferred and canceled in the same situations as the native feedback on Android.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.