[Web] Add hover effects to the Touchable component#4146
Open
j-piasecki wants to merge 5 commits intomainfrom
Open
[Web] Add hover effects to the Touchable component#4146j-piasecki wants to merge 5 commits intomainfrom
Touchable component#4146j-piasecki wants to merge 5 commits intomainfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds web-only hover feedback to the v3 Touchable/GestureHandlerButton implementation, allowing opacity/scale/underlay changes when the pointer is over the component (with active/pressed state taking precedence).
Changes:
- Added
hoverOpacity,hoverScale,hoverUnderlayOpacity, andhoverAnimationDurationprops toGestureHandlerButton/Touchabletypings. - Implemented hover state handling in the web
GestureHandlerButtonviaonPointerEnter/onPointerLeave. - Updated documentation and the common-app touchables example to showcase hover behavior.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx | Implements web hover state and applies hover-driven opacity/scale/underlay transitions. |
| packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx | Extends public button prop typings with new hover* props (documented as web-only). |
| packages/docs-gesture-handler/docs/components/touchable.mdx | Documents the new hover props for the Touchable component on web. |
| apps/common-app/src/new_api/components/touchable/index.tsx | Adds example UI demonstrating hover-only and hover+press combined states. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
m-bert
reviewed
May 6, 2026
m-bert
approved these changes
May 7, 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
Adds
hover*props to the Touchable component, which are currently web-only. Those take effect when the pointer moves over the button without pressing it.activeprops have higher precedence thanhover.Test plan
Updated touchables example