`Clickable` component by m-bert · Pull Request #4018 · software-mansion/react-native-gesture-handler

m-bert · 2026-03-09T16:12:20Z

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 50 times (50ms delay between renders), drop 5 best and 5 worst results. Then calculate average.

On android tests were limited to 25 repetitions with dropout of 3 best and worst results. This is because of OOM error.

Stress test example is available in this PR.

Android

	$t_{Button}$	$t_{Clickable}$	$\Delta{t}$
`BaseButton`	1112.44	1194.20	+81.76
`RectButton`	1517.90	1718.42	+200.52
`BorderlessButton`	1362.34	1418.16	+55.82

iOS

	$t_{Button}$	$t_{Clickable}$	$\Delta{t}$
`BaseButton`	1114.27	1100.80	-13.47
`RectButton`	1463.40	1612.50	+149.10
`BorderlessButton`	1206.60	1272.34	+65.74

Web

	$t_{Button}$	$t_{Clickable}$	$\Delta{t}$
`BaseButton`	53.67	57.99	+4.32
`RectButton`	93.43	102.40	+8.97
`BorderlessButton`	99.80	75.06	-24.74

Test plan

New examples

Copilot

Pull request overview

This PR introduces a new Clickable component in the react-native-gesture-handler library, intended to serve as a unified replacement for BaseButton, RectButton, and BorderlessButton. The component supports configurable visual feedback (underlay or whole-component opacity changes) and native Android ripple effects. Supporting changes include extracting visual style properties (background color, border radius, etc.) through to the native button in GestureHandlerButton, type improvements to RawButton and BorderlessButton, and a new example screen.

Changes:

New Clickable component with configurable animation feedback (feedbackTarget, feedbackType, activeOpacity, underlayColor) and long-press support
GestureHandlerButton now passes visual style properties (backgroundColor, borderRadius, border styles) to the native ButtonComponent, and RawButton gets proper type generics
Example screen demonstrating Clickable in various configurations (base, rect-like, borderless-like, custom)

Reviewed changes

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

Show a summary per file

File	Description
`src/v3/components/Clickable.tsx`	New `Clickable` component with animation, long-press, and ripple support
`src/v3/components/index.ts`	Exports `Clickable` and `ClickableProps` (from incorrect path)
`src/v3/index.ts`	Re-exports `Clickable` from components
`src/components/GestureHandlerButton.tsx`	Extracts visual properties (backgroundColor, border*) into `buttonStyle` passed to native button
`src/v3/components/GestureButtons.tsx`	Adds type generics to `RawButton`, extracts `ref` in `BorderlessButton`
`src/v3/types/NativeWrapperType.ts`	Adds `
`apps/common-app/src/new_api/components/clickable/index.tsx`	Example screen showcasing `Clickable` configurations

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

packages/react-native-gesture-handler/src/v3/components/index.ts

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

packages/react-native-gesture-handler/src/v3/index.ts

Copilot

Pull request overview

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

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

apps/common-app/src/new_api/components/clickable/index.tsx

packages/react-native-gesture-handler/src/v3/components/Clickable/ClickableProps.ts

packages/react-native-gesture-handler/src/v3/index.ts

packages/react-native-gesture-handler/src/components/GestureHandlerButton.tsx

Copilot

Pull request overview

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

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

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

apps/common-app/src/new_api/components/clickable_stress/index.tsx

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

Copilot

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 5 comments.

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

m-bert · 2026-03-16T10:11:20Z

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx


-export const RawButton = createNativeWrapper(GestureHandlerButton, {
+export const RawButton = createNativeWrapper<
+  ReturnType<typeof GestureHandlerButton>,


I don't think it makes sense to change this to unknown (cc @j-piasecki).

No it doesn't, but the comment itself is valid. Why ReturnType<typeof GestureHandlerButton> instead of the actual ref type?

Okay, it might be confusing, but TRef is what is actually wrapped with ref, not ref itself.

Ok, but ReturnType of GestureHandlerButton will be something like ReactNode, no?

As far as I can see it is resolved to JSX.Element

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

m-bert · 2026-03-16T10:48:24Z

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

+      onPressOut?.(e);
+
+      if (longPressTimeout.current !== undefined) {
+        clearTimeout(longPressTimeout.current);
+        longPressTimeout.current = undefined;
+      }


I have mixed feelings. I don't like adding more hooks to track onPressIn. Maybe we could call onPressOut after checking e.pointerInside. WDYT @j-piasecki?

Isn't pointerInside change triggering onUpdate? If so, then yes.

On Android onUpdate is triggered on each move. On iOS it seems that something is blocking it from being sent as in Android (I'm getting it kinda randomly while panning).

Do we wait with Clickable until we resolve this, or do we merge (and possibly ship) this component while looking for a solution?

apps/common-app/src/new_api/components/clickable_stress/index.tsx

apps/common-app/src/new_api/components/clickable/index.tsx

akwasniewski · 2026-03-13T12:56:58Z

apps/common-app/src/new_api/components/clickable/index.tsx

+  KINDA_BLUE: '#5f97c8',
+  ANDROID: '#34a853',
+  WEB: '#1067c4',
+};


Please use the common colours, if needed add new colours there.

apps/common-app/src/new_api/index.tsx

apps/common-app/src/new_api/components/clickable/index.tsx

packages/react-native-gesture-handler/src/v3/components/GestureButtons.tsx

packages/react-native-gesture-handler/src/v3/components/Clickable/ClickableProps.ts

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx

…Opacity`

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

…native-gesture-handler into @mbert/clickable

…lickable component

m-bert added 16 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

Copilot AI review requested due to automatic review settings March 9, 2026 16:12

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

Fix index

b2f7e05

Copilot AI reviewed Mar 9, 2026

View reviewed changes

Split component and types

44bbcc6

m-bert requested a review from Copilot March 9, 2026 16:29

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

Copilot AI reviewed Mar 9, 2026

View reviewed changes

m-bert added 6 commits March 10, 2026 12:39

Add presets

f4d895e

Update gitignore

491c27a

Renames

e404f8a

Remove preset

583e864

Ripple

769adb4

Example

e4bb348

Merge branch 'main' into @mbert/clickable

ef24b2f

m-bert requested a review from Copilot March 11, 2026 15:34

Copilot started reviewing on behalf of m-bert March 11, 2026 15:35 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

m-bert added 6 commits March 12, 2026 13:00

Tests

d6113c6

Reset longpress outside of if

ac02b27

Easier stress test

8864e89

Deprecate old buttons

b74ce61

Add onPressIn and onPressOut

822ba83

Revert changes in button

c9aba4d

m-bert marked this pull request as ready for review March 13, 2026 11:16

m-bert requested review from akwasniewski, Copilot and j-piasecki March 13, 2026 11:16

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

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Merge branch 'main' into @mbert/clickable

f2b3bb9

akwasniewski reviewed Mar 13, 2026

View reviewed changes

j-piasecki reviewed Mar 13, 2026

View reviewed changes

m-bert and others added 8 commits March 16, 2026 11:15

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

m-bert requested review from akwasniewski and j-piasecki March 16, 2026 11:30

m-bert mentioned this pull request Mar 20, 2026

[General] Implement basic button interactions using native primitives #4032

Open

Uh oh!

Conversation

m-bert commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

borderless

Stress test

Android

iOS

Web

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

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!

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

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!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

j-piasecki Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

m-bert commented Mar 9, 2026 •

edited

Loading

`borderless`

j-piasecki Mar 18, 2026 •

edited

Loading