Clickable component

[m-bert]

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.

[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.