[Docs] `Clickable` by m-bert · Pull Request #4022 · software-mansion/react-native-gesture-handler

m-bert · 2026-03-12T15:42:19Z

Description

This PR adds docs for Clickable component

Test plan

Read docs 🤓

…Opacity`

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…native-gesture-handler into @mbert/clickable

…lickable component

…ent details

Copilot

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.

packages/docs-gesture-handler/docs/components/clickable.mdx

m-bert · 2026-03-16T14:02:50Z

packages/docs-gesture-handler/docs/components/buttons.mdx

 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.


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)

I'm not sure there's a need for that. Isn't it basically a Clickable without predefined event handlers (so no onPress and onLongPress)?

packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx

## 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>

j-piasecki · 2026-04-03T10:07:10Z

packages/docs-gesture-handler/docs/components/buttons.mdx

 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.


I'm not sure there's a need for that. Isn't it basically a Clickable without predefined event handlers (so no onPress and onLongPress)?

j-piasecki · 2026-04-03T10:09:33Z

skills/gesture-handler-3-migration/SKILL.md


 `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 `underlayActiveOpacity={0.105}` and to replace `BorderlessButton` use `Clickable` with `activeOpacity={0.3}`.


It may also be worth adding how to replace deprecated Touchables with the new component.

j-piasecki · 2026-04-03T10:11:15Z

packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx

+
+To help you migrate, here is the current state of our button components:
+
+- [`Clickable`](/docs/components/clickable) - The recommended component.


It may be useful to mention the relevant configurations on how to replace other buttons/touchables. I'm sure there will be at least a dozen people reading this instead of asking an LLM.

j-piasecki · 2026-04-03T10:12:40Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+
+import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
+
+`Clickable` is a versatile new component introduced in Gesture Handler 3 to succeed previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.


Suggested change

`Clickable` is a versatile new component introduced in Gesture Handler 3 to succeed previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.

`Clickable` is a versatile new component introduced in Gesture Handler 3 to supersede previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.

j-piasecki · 2026-04-03T10:21:40Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+
+`Clickable` is a versatile new component introduced in Gesture Handler 3 to succeed previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.
+
+With `Clickable`, you have more control over animations. It is possible to choose between animating the entire component or just the underlay, along with specifying desired `opacity` values. This allows you to effortlessly replicate both `RectButton` and `BorderlessButton` effects using a single unified component. Furthermore, it resolves many legacy issues found in earlier versions. On Android, you can opt for the native ripple effect or leverage JS-based animations via the [Animated API](https://reactnative.dev/docs/animated).


Suggested change

With `Clickable`, you have more control over animations. It is possible to choose between animating the entire component or just the underlay, along with specifying desired `opacity` values. This allows you to effortlessly replicate both `RectButton` and `BorderlessButton` effects using a single unified component. Furthermore, it resolves many legacy issues found in earlier versions. On Android, you can opt for the native ripple effect or leverage JS-based animations via the [Animated API](https://reactnative.dev/docs/animated).

`Clickable` provides a simple interface for the common animations like opacity, underlay, and scale, implemented entirely on the platform. On Android, it also exposes the native ripple effect on press (turned off by default).

If the provided animations are not sufficient, it's possible to use `Clickable` to create fully custom interactions using either [Reanimated](https://docs.swmansion.com/react-native-reanimated/) or [Animated API](https://reactnative.dev/docs/animated).

j-piasecki · 2026-04-03T10:25:52Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+}
+`}/>
+
+Triggered when the button gets released (analogous to `onPressOut` in `TouchableHighlight` from RN core).


Suggested change

Triggered when the button gets released (analogous to `onPressOut` in `TouchableHighlight` from RN core).

Triggered when the button gets released or the pointer moves outside of the button area (analogous to `onPressOut` in `Pressable` from RN core).

j-piasecki · 2026-04-03T10:26:57Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+onPress?: (pointerInside: boolean) => void;
+```
+
+Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core).


Suggested change

Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core).

Triggered when the button gets pressed (analogous to `onPress` in `Pressable` from RN core).

j-piasecki · 2026-04-03T10:28:15Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+underlayColor?: string;
+```
+
+Background color of underlay. This only takes effect when `activeUnderlayOpacity` is set.


Suggested change

Background color of underlay. This only takes effect when `activeUnderlayOpacity` is set.

Background color of the underlay. This only takes effect when `activeUnderlayOpacity` or `defaultUnderlayOpacity` is set.

j-piasecki · 2026-04-03T10:28:46Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+activeUnderlayOpacity?: number;
+```
+
+Defines the opacity of underlay when the button is active. If not set, underlay won't be rendered.


Suggested change

Defines the opacity of underlay when the button is active. If not set, underlay won't be rendered.

Defines the opacity of the underlay when the button is active. By default set to `0`.

j-piasecki · 2026-04-03T10:29:40Z

packages/docs-gesture-handler/docs/components/clickable.mdx

+activeOpacity?: number;
+```
+
+Defines the opacity of the whole component when the button is active.


Suggested change

Defines the opacity of the whole component when the button is active.

Defines the opacity of the whole component when the button is active. By default set to `1`.

m-bert added 30 commits March 6, 2026 10:36

Base implementation

9fb1120

Merge branch 'main' into @mbert/clickable

093630b

Do not use animated button if not necessary

f1134cb

Use props

9461ecc

Types

ab6ced1

Additional props

27b3d0c

Working component

c0d4960

Small refactor

25ed517

Add example

5e4262b

Looks good

5646775

Unified, without ripple

202a999

Rippleeeee

dd2c3bf

clear activeState also in onFinalize

2cf923b

Fix borderless

8059e40

Default ripple color

6b043a9

Rename file

1eb680e

Fix index

b2f7e05

Split component and types

44bbcc6

Add presets

f4d895e

Update gitignore

491c27a

Renames

e404f8a

Remove preset

583e864

Ripple

769adb4

Example

e4bb348

Rename in example

96c016b

Opacity fix

fe9f47f

JSDocs

aca162b

Vibe stress test

c6f27e7

First refactor

4200868

Second optimization

beb6710

m-bert and others added 16 commits March 13, 2026 12:12

Revert changes in button

c9aba4d

Merge branch 'main' into @mbert/clickable

f2b3bb9

Merge branch '@mbert/clickable' into @mbert/clickable-docs

a9688b5

update SKILL

78d4273

Fix deprecation message for RectButton to reference `underlayActive…

050f122

…Opacity`

Call onPressIn when e.pointerInsideis true

270b111

Stress test example timeout cleanup

77d411d

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Merge branch '@mbert/clickable' of github.com:software-mansion/react-…

08e5e2e

…native-gesture-handler into @mbert/clickable

Colooooooors

d80e5cf

Update underlayColor description to require underlayActiveOpacity

95a887f

Add default values for underlayInitialOpacity and initialOpacity in C…

25126cf

…lickable component

Remove unnecessary border styles

45ffb2f

Merge branch '@mbert/clickable' into @mbert/clickable-docs

6888721

Minor adjustments

a3b2c87

Update onPressIn and onPressOut type definitions to include GestureEv…

90197cf

…ent details

rephrase

bce2aa5

m-bert requested a review from Copilot March 16, 2026 13:46

Copilot started reviewing on behalf of m-bert March 16, 2026 13:46 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Copilot review

cad279b

Base automatically changed from @mbert/clickable to main April 1, 2026 15:11

m-bert added 5 commits April 3, 2026 11:58

Merge branch 'main' into @mbert/clickable-docs

4fb5ab2

Update props names

c21dfd3

Merge branch 'main' into @mbert/clickable-docs

bafbc07

Change props order

0f3528a

Grammar

8ef412f

m-bert requested a review from j-piasecki April 3, 2026 10:19

Correct prop in SKILL

20f82bb

j-piasecki reviewed Apr 3, 2026

View reviewed changes


		`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 `underlayActiveOpacity={0.105}` and to replace `BorderlessButton` use `Clickable` with `activeOpacity={0.3}`.


		To help you migrate, here is the current state of our button components:

		- [`Clickable`](/docs/components/clickable) - The recommended component.


		import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

		`Clickable` is a versatile new component introduced in Gesture Handler 3 to succeed previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.


		`Clickable` is a versatile new component introduced in Gesture Handler 3 to succeed previous button implementations. Designed for maximum flexibility, it provides a highly customizable interface for native touch handling while ensuring consistent behavior across platforms.

		With `Clickable`, you have more control over animations. It is possible to choose between animating the entire component or just the underlay, along with specifying desired `opacity` values. This allows you to effortlessly replicate both `RectButton` and `BorderlessButton` effects using a single unified component. Furthermore, it resolves many legacy issues found in earlier versions. On Android, you can opt for the native ripple effect or leverage JS-based animations via the [Animated API](https://reactnative.dev/docs/animated).

-With `Clickable`, you have more control over animations. It is possible to choose between animating the entire component or just the underlay, along with specifying desired `opacity` values. This allows you to effortlessly replicate both `RectButton` and `BorderlessButton` effects using a single unified component. Furthermore, it resolves many legacy issues found in earlier versions. On Android, you can opt for the native ripple effect or leverage JS-based animations via the [Animated API](https://reactnative.dev/docs/animated).
+`Clickable` provides a simple interface for the common animations like opacity, underlay, and scale, implemented entirely on the platform. On Android, it also exposes the native ripple effect on press (turned off by default).
+If the provided animations are not sufficient, it's possible to use `Clickable` to create fully custom interactions using either [Reanimated](https://docs.swmansion.com/react-native-reanimated/) or [Animated API](https://reactnative.dev/docs/animated).

	Triggered when the button gets released (analogous to `onPressOut` in `TouchableHighlight` from RN core).
	Triggered when the button gets released or the pointer moves outside of the button area (analogous to `onPressOut` in `Pressable` from RN core).

	Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core).
	Triggered when the button gets pressed (analogous to `onPress` in `Pressable` from RN core).

	Background color of underlay. This only takes effect when `activeUnderlayOpacity` is set.
	Background color of the underlay. This only takes effect when `activeUnderlayOpacity` or `defaultUnderlayOpacity` is set.

	Defines the opacity of underlay when the button is active. If not set, underlay won't be rendered.
	Defines the opacity of the underlay when the button is active. By default set to `0`.

	Defines the opacity of the whole component when the button is active.
	Defines the opacity of the whole component when the button is active. By default set to `1`.

Uh oh!

Conversation

m-bert commented Mar 12, 2026

Description

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants