Conversation
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.
|
|
||
| `PureNativeButton` has been removed. If encountered, inform the user that it has been removed and let them decide how to handle that case. They can achieve similar functionality with other buttons. | ||
|
|
||
| When migrating buttons, you should use `Clickable` component instead. To replace `BaseButton` use `Clickable` with default props, to replace `RectButton` use `Clickable` with `underlayInitialOpacity={0.7}` and to replace `BorderlessButton` use `Clickable` with `activeOpacity={0.3}`. |
There was a problem hiding this comment.
This migration guidance says RectButton should be replaced with Clickable using underlayInitialOpacity={0.7}, but the RectButton effect is an underlay opacity that becomes activeOpacity on press (default 0.105). Also, replacing BaseButton with Clickable “with default props” will disable Android’s default ripple because Clickable sets rippleColor to transparent unless androidRipple is provided; to preserve the legacy default ripple, migration guidance should mention passing androidRipple={{}} (or an explicit color) on Android.
| When migrating buttons, you should use `Clickable` component instead. To replace `BaseButton` use `Clickable` with default props, to replace `RectButton` use `Clickable` with `underlayInitialOpacity={0.7}` and to replace `BorderlessButton` use `Clickable` with `activeOpacity={0.3}`. | |
| When migrating buttons, you should use the `Clickable` component instead. To replace `BaseButton`, use `Clickable` with default props and, on Android, pass `androidRipple={{}}` (or an explicit ripple color) if you want to preserve the legacy default ripple. To replace `RectButton`, use `Clickable` with an `activeOpacity` matching the legacy effect (for example, `activeOpacity={0.105}`) and adjust `underlayInitialOpacity` as needed. To replace `BorderlessButton`, use `Clickable` with `activeOpacity={0.3}`. |
| ### onPressIn | ||
|
|
||
| ```ts | ||
| onPressIn?: (pointerInside: boolean) => void; | ||
| ``` | ||
|
|
||
| Triggered when the button gets pressed (analogous to `onPressIn` in `TouchableHighlight` from RN core). | ||
|
|
||
| ### onPressOut | ||
|
|
||
| ```ts | ||
| onPressOut?: (pointerInside: boolean) => void; | ||
| ``` | ||
|
|
||
| Triggered when the button gets released (analogous to `onPressOut` in `TouchableHighlight` from RN core). |
There was a problem hiding this comment.
The docs list onPressIn/onPressOut as (pointerInside: boolean) => void, but the actual ClickableProps type is (event: GestureEvent<NativeHandlerData>) => void and the implementation calls the callbacks with the event object. Please update the docs to match the shipped API (or, if the intended API is boolean like onPress, then change the prop types + implementation to pass e.pointerInside).
| `Clickable` is a new component introduced in Gesture Handler 3, designed to replace the previous button components. It provides a more flexible and customizable way to create buttons with native touch handling. | ||
|
|
||
| With `Clickable`, you can decide whether to animate whole component, or just the underlay. This allows to easily recreate both `RectButton` and `BorderlessButton` effects with the same component. | ||
|
|
||
| It also provides consistent behavior across platforms, and resolves most of the button-related issues that were present in previous versions. On android, you can decide whether to use native ripple effect, or JS based animation with Animated API |
There was a problem hiding this comment.
Minor doc grammar/capitalization issues: e.g. “On android” should be “On Android”, and a few sentences are missing periods / have awkward phrasing (e.g. “This allows to easily…”). Please proofread the intro paragraphs for readability/consistency with the rest of the docs.
Description
This PR adds docs for
ClickablecomponentTest plan
Read docs 🤓