Skip to content

[General] Change Touchable default underlay props - #4164

Merged
j-piasecki merged 8 commits into
mainfrom
@jpiasecki/touchable-default-underlay-transparent
May 11, 2026
Merged

[General] Change Touchable default underlay props#4164
j-piasecki merged 8 commits into
mainfrom
@jpiasecki/touchable-default-underlay-transparent

Conversation

@j-piasecki

Copy link
Copy Markdown
Member

Description

Changes the default props of Touchable component:

  • underlayColor: black -> transparent
  • activeUnderlayOpacity: undefined -> 0.105 (matching RectButton)

This way, in order to replicate the RectButton, the usage is:

<Touchable underlayColor="black" />

instead of

<Touchable activeUnderlayOpacity={0.105} />

which seems more intuitive.

Test plan

Updated Touchable example

Copilot AI review requested due to automatic review settings May 11, 2026 07:34

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

This PR changes the default underlay behavior of the v3 Touchable component to make “RectButton-like” usage more intuitive, and updates migration/docs/examples accordingly.

Changes:

  • Updates Touchable defaults (underlayColor to transparent, activeUnderlayOpacity to 0.105) and forwards activeUnderlayOpacity to the native button.
  • Updates migration guidance and docs to recommend underlayColor="black" for RectButton-like behavior.
  • Updates the common-app Touchable example to reflect the new recommended usage.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File Description
skills/gesture-handler-3-migration/SKILL.md Updates button migration guidance to use underlayColor="black" for RectButton replacement.
packages/react-native-gesture-handler/src/v3/components/Touchable/Touchable.tsx Adjusts default underlay props and passes activeUnderlayOpacity through to GestureHandlerButton.
packages/docs-gesture-handler/docs/components/touchable.mdx Updates RectButton migration snippet to use underlayColor="black".
apps/common-app/src/new_api/components/touchable/index.tsx Updates the example usage to match the new recommended props.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/docs-gesture-handler/docs/components/touchable.mdx
Comment thread skills/gesture-handler-3-migration/SKILL.md Outdated

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

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Comment thread packages/react-native-gesture-handler/src/components/GestureHandlerButton.web.tsx Outdated
@j-piasecki
j-piasecki requested a review from m-bert May 11, 2026 08:02

@m-bert m-bert left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I've mixed feelings about it, currently it's like having animation, but not really since it is transparent. But on the other hand I guess the same can be said about default underlayColor.

Comment thread packages/docs-gesture-handler/docs/components/touchable.mdx Outdated
@j-piasecki
j-piasecki merged commit 8c3893a into main May 11, 2026
6 checks passed
@j-piasecki
j-piasecki deleted the @jpiasecki/touchable-default-underlay-transparent branch May 11, 2026 10:16
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