Skip to content

[Web] Add hover effects to the Touchable component#4146

Open
j-piasecki wants to merge 5 commits intomainfrom
@jpiasecki/touchable-hover-effects-web
Open

[Web] Add hover effects to the Touchable component#4146
j-piasecki wants to merge 5 commits intomainfrom
@jpiasecki/touchable-hover-effects-web

Conversation

@j-piasecki
Copy link
Copy Markdown
Member

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. active props have higher precedence than hover.

Test plan

Updated touchables example

Copilot AI review requested due to automatic review settings May 6, 2026 08:10
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

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, and hoverAnimationDuration props to GestureHandlerButton / Touchable typings.
  • Implemented hover state handling in the web GestureHandlerButton via onPointerEnter / 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.

Comment thread packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx Outdated
Comment thread packages/docs-gesture-handler/docs/components/touchable.mdx Outdated
Comment thread apps/common-app/src/new_api/components/touchable/index.tsx
Copy link
Copy Markdown
Collaborator

@m-bert m-bert left a comment

Choose a reason for hiding this comment

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

Love the idea! 🚀

Comment thread packages/docs-gesture-handler/docs/components/touchable.mdx
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.

3 participants