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

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

What's wrong with React.ComponentRef<typeof GestureHandlerButton>?

Isn't it redundant? Currently we have:

ref?: React.Ref<T> | undefined;

where T is TRef. So with ComponentRef we have:

ref?: React.Ref<React.ComponentRef<typeof GestureHandlerButton>> | undefined;

react-native-gesture-handler/packages/react-native-gesture-handler/src/v3/types/NativeWrapperType.ts

Line 10 in 5587435

ref?: React.Ref<T> | undefined;

Isn't that the correct type though?

OKay, now I looked at internals and it makes sense (at least with given jsdoc)

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?

I think we can wait, given that the PR is already up

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

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

j-piasecki · 2026-03-26T08:54:00Z

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

+
+        <View style={styles.section}>
+          <Text style={styles.sectionHeader}>Custom animations</Text>
+          <Text>Animated overlay.</Text>


There is no overlay

j-piasecki · 2026-03-26T08:54:08Z

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

+            />
+          </View>
+
+          <Text>Animated component.</Text>


What does it refer to?

j-piasecki · 2026-03-26T08:55:33Z

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

    // Visual properties
    ...restStyle
-  } = flattenedStyle;
+  } = flattenedStyle ?? {};


If it's possible for flattenedStyle to be nullish, can it be moved higher? I.e.

const flattenedStyle = useMemo(() => StyleSheet.flatten(style) ?? {}, [style]);

j-piasecki · 2026-03-26T09:21:56Z

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

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


I think we can wait, given that the PR is already up

j-piasecki · 2026-03-26T10:32:07Z

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

+      if (!isAndroid || !e.pointerInside) {
+        return;
+      }


This shouldn't be needed if we unify the native handler events, right?

j-piasecki · 2026-03-26T10:32:14Z

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

+      if (!isAndroid && e.pointerInside) {
+        onPressIn?.(e);
+        startLongPressTimer();
+      }


j-piasecki · 2026-03-26T10:34:24Z

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

+  const longPressDetected = useRef(false);
+  const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined
+  );


Is there a visible performance impact of creating two refs instead of a single { detected: boolean, timeout: Timeout } one?

j-piasecki · 2026-03-26T10:35:47Z

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

+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,


onPressOut is being called twice on iOS when dragging outside of the button (+ the 100px retention 🤦)

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

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

Merge branch 'main' into @mbert/clickable

7357744

m-bert mentioned this pull request Mar 20, 2026

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

Merged

m-bert added 3 commits March 20, 2026 12:59

Merge branch 'main' into @mbert/clickable

8c23a83

Merge branch 'main' into @mbert/clickable

b6a3861

Simplify Clickable to use new button animations

9772190

j-piasecki reviewed Mar 25, 2026

View reviewed changes

packages/react-native-gesture-handler/src/v3/components/Clickable/Clickable.tsx Outdated Show resolved Hide resolved

m-bert added 2 commits March 25, 2026 10:47

Fix tests

08efb2c

Should cancel when outside

9688fc7

m-bert requested a review from j-piasecki March 25, 2026 11:26

j-piasecki mentioned this pull request Mar 26, 2026

[iOS] Ignore Apple's default retention offset for buttons and rely strictly on hitslop instead #4038

Open

j-piasecki reviewed Mar 26, 2026

View reviewed changes

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!

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!

m-bert Mar 24, 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!

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!

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

m-bert commented Mar 9, 2026 •

edited

Loading

`borderless`

m-bert Mar 24, 2026 •

edited

Loading

j-piasecki Mar 18, 2026 •

edited

Loading