[General] Update button's animation duration props#4046
Merged
j-piasecki merged 42 commits intomainfrom Apr 3, 2026
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new minimumAnimationDuration prop to GestureHandlerButton to ensure the “pressed in” visual state remains visible for at least a minimum time (mitigating native touch delays inside scrollables that can cause immediate press-out).
Changes:
- Introduces
minimumAnimationDurationto the button’s codegen spec and TS props. - Implements minimum-duration press-out deferral on Web, iOS, and Android.
- Updates the common-app underlay example to exercise the new prop.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-gesture-handler/src/specs/RNGestureHandlerButtonNativeComponent.ts | Adds minimumAnimationDuration to native component codegen props with a default. |
| packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx | Implements min-duration press-out deferral for web button visuals. |
| packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx | Documents the new prop on the public ButtonProps interface. |
| packages/react-native-gesture-handler/apple/RNGestureHandlerButtonComponentView.mm | Wires the new prop from Fabric props into the native button view. |
| packages/react-native-gesture-handler/apple/RNGestureHandlerButton.mm | Adds iOS minimum-duration handling between press-in and press-out animations. |
| packages/react-native-gesture-handler/apple/RNGestureHandlerButton.h | Exposes minimumAnimationDuration on the native button class. |
| packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt | Adds Android prop setter + min-duration delayed press-out implementation. |
| apps/common-app/src/new_api/components/button_underlay/index.tsx | Updates example props to demonstrate minimumAnimationDuration. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…-animation-duration
j-piasecki
changed the title
minimumAnimationDuration prop to button component
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
j-piasecki
force-pushed
the
@jpiasecki/add-minimum-animation-duration
branch
from
0d51d22 to
8cd97a9
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
m-bert
approved these changes
Apr 3, 2026
m-bert
approved these changes
Apr 3, 2026
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
Native platforms delay touches when the button is inside a ScrollView. This may cause situations where press-out is triggered immediately after press-in, effectively running with no animation.
This PR:
animationDurationtopressAndHoldAnimationDurationtapAnimationDurationpressAndHoldAnimationDurationdefaults totapAnimationDurationwhen unspecified;tapAnimationDurationdefaults to 100ms.Press out handler now has three branches:
pressAndHoldAnimationDuration-> press out animation is started immediately with the duration ofpressAndHoldAnimationDurationtapAnimationDuration,pressAndHoldAnimationDuration] (*2 so there's at least half oftapAnimationDurationfor the remaining animation) -> press out animation is started immediately with the duration of the press so fartapAnimationDuration / 2-> pressIn animation is played fully in the remaining time intapAnimationDuration, and pressOut is scheduled after with the duration oftapAnimationDurationTest plan
Updated the button underlay example