Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR documents the new Clickable component in the Gesture Handler 3 docs and updates migration guidance to position Clickable as the unified replacement for legacy/standard button components.
Changes:
- Added a new docs page for
Clickableand updated the upgrading guide/buttons docs to recommend it. - Marked
BaseButton,RectButton, andBorderlessButtonas deprecated in code comments. - Extended
ClickablewithonPressIn/onPressOutcallbacks and wired them into the gesture lifecycle; updated the common app example to log them.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| skills/gesture-handler-3-migration/SKILL.md | Updates migration instructions to recommend Clickable for button migrations. |
| packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx | Adds @deprecated annotations for standard button components. |
| packages/react-native-gesture-handler/src/v3/components/Clickable/ClickableProps.ts | Adds onPressIn / onPressOut to Clickable’s public props. |
| packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx | Implements onPressIn / onPressOut handling in Clickable. |
| packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx | Updates upgrade guide “Buttons” section to introduce/recommend Clickable. |
| packages/docs-gesture-handler/docs/components/clickable.mdx | Adds a full Clickable docs page with migration examples and props listing. |
| packages/docs-gesture-handler/docs/components/buttons.mdx | Adds a deprecation warning pointing readers to Clickable. |
| apps/common-app/src/new_api/components/clickable/index.tsx | Updates example usage to include onPressIn / onPressOut. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Merged
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…native-gesture-handler into @mbert/clickable
…lickable component
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import HeaderWithBadges from '@site/src/components/HeaderWithBadges'; | ||
|
|
||
| :::danger | ||
| Button components described in this section are deprecated and will be removed in the future. Please use [`Clickable`](/docs/components/clickable) instead. |
Contributor
Author
There was a problem hiding this comment.
Actually, maybe we would like to keep RawButton? This would keep more flexibility for advanced users. But that's just a thought, not strong opinion - I'm not sure if we want to do that (cc @j-piasecki, @akwasniewski)
m-bert
added a commit
that referenced
this pull request
Apr 1, 2026
## Description This PR introduces new `Clickable` component, which is meant to be a replacement for buttons. > [!NOTE] > Docs for `Clickable` will be added in #4022, as I don't want to release them right away after merging this PR. ### `borderless` For now, `borderless` doesn't work. I've tested clickable with some changes that allow `borderless` ripple to be visible, however we don't want to introduce them here because it would break other things. Also it should be generl fix, not in the PR with new component. ## Stress test Render list with 2000 buttons 25 times (50ms delay between renders), drop 3 best and 3 worst results. Then calculate average. Stress test example is available in this PR. #### Android | | $t_{Button}$ | $t_{Clickable}$ | $\Delta{t}$ | |------------------|--------------|-----------------|--------------| | `BaseButton` | 1196,18 | 1292,3 | 96,12 | | `RectButton` | 1672,6 | 1275,68 | -396,92 | | `BorderlessButton` | 1451,34 | 1290,74 | -160,6 | #### iOS | | $t_{Button}$ | $t_{Clickable}$ | $\Delta{t}$ | |------------------|--------------|-----------------|--------------| | `BaseButton` | 1101,37 | 1154,6 | 53,23 | | `RectButton` | 1528,07 | 1160,07 | -368 | | `BorderlessButton` | 1330,24 | 1172,69 | -157,55 | #### Web | | $t_{Button}$ | $t_{Clickable}$ | $\Delta{t}$ | |------------------|--------------|-----------------|--------------| | `BaseButton` | 64,18 | 95,57 | 31,39 | | `RectButton` | 104,58 | 97,95 | -6,63 | | `BorderlessButton` | 81,11 | 98,64 | 17,53 | ## Test plan New examples --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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
This PR adds docs for
ClickablecomponentTest plan
Read docs 🤓