From 4b63fcbfa2b42233aaeb8c543cbf4edbeaf23be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 9 Feb 2026 12:08:31 +0100 Subject: [PATCH 1/6] Part 1 --- .../docs/components/buttons.mdx | 141 +++++++++++------- 1 file changed, 85 insertions(+), 56 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index bd3f360c0c..2b647c9c0e 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -11,87 +11,94 @@ import GifGallery from '@site/components/GifGallery'; -Gesture handler library provides native components that can act as buttons. These can be treated as a replacement to `TouchableHighlight` or `TouchableOpacity` from RN core. Gesture handler's buttons recognize touches in native which makes the recognition process deterministic, allows for rendering ripples on Android in highly performant way (`TouchableNativeFeedback` requires that touch event does a roundtrip to JS before we can update ripple effect, which makes ripples lag a bit on older phones), and provides native and platform default interaction for buttons that are placed in a scrollable container (in which case the interaction is slightly delayed to prevent button from highlighting when you fling). +The Gesture Handler library offers native components that function as buttons, serving as alternatives to `TouchableHighlight` or `TouchableOpacity` from the core React Native framework. These buttons process touch recognition natively, which ensures a deterministic response. This capability significantly enhances performance; for example, it allows for immediate ripple effects on Android, unlike `TouchableNativeFeedback`, which requires a touch event roundtrip to JavaScript that can cause delays, especially noticeable on older devices. Additionally, these components handle default platform interactions natively, particularly in scrollable containers where interactions are smartly delayed to prevent unintended highlighting during a fling. -Currently Gesture handler library exposes three components that render native touchable elements under the hood: +Currently Gesture Handler library exposes three components that render native touchable elements under the hood: -- [`BaseButton`](/docs/components/buttons/#basebutton) -- [`RectButton`](/docs/components/buttons/#rectbutton) -- [`BorderlessButton`](/docs/components/buttons/#borderlessbutton) +- [`BaseButton`](#basebutton) +- [`RectButton`](#rectbutton) +- [`BorderlessButton`](#borderlessbutton) -On top of that all the buttons are wrapped with `NativeViewGestureHandler` and therefore allow for all the [common gesture handler properties](/docs/gestures/use-native-gesture#properties-common-to-all-gestures) and `NativeViewGestureHandler`'s [extra properties](/docs/gestures/use-native-gesture#properties-specific-to-nativegesture) to be applied to them. +On top of that all the buttons are wrapped with [`Native`](/docs/gestures/use-native-gesture) gesture and therefore allow for all its [properties](/docs/gestures/use-native-gesture#config) to be applied to them. -**IMPORTANT**: In order to make buttons accessible, you have to wrap your children in a `View` with `accessible` and `accessibilityRole="button"` props. -Example: +## BaseButton -```javascript -// Not accessible: -const NotAccessibleButton = () => ( - - Foo - -); -// Accessible: -const AccessibleButton = () => ( - - - Bar - - -); +Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. + +### onPress + +```ts +onPress?: (pointerInside: boolean) => void; ``` -It is applicable for both iOS and Android platform. On iOS, you won't be able to even select the button, on Android you won't be able to click it in accessibility mode. +Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core). -## `BaseButton` -Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. +### onLongPress + +```ts +onLongPress?: () => void; +``` -Below is a list of properties specific to `BaseButton` component: +Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds. -### `onActiveStateChange` -function that gets triggered when button changes from inactive to active and vice versa. It passes active state as a boolean variable as a first parameter for that method. +### onActiveStateChange -### `onPress` +```ts +onActiveStateChange?: (active: boolean) => void; +``` -function that gets triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core). +Triggered when the button transitions between active and inactive states. It passes the current active state as a boolean variable to the method as the first parameter. -### `onLongPress` -function that gets triggered when the button gets pressed for at least `delayLongPress` milliseconds. +### rippleColor (**Android only**) -### `rippleColor` (**Android only**) +```ts +rippleColor?: number | ColorValue | null; +``` -defines color of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation used since API level 21. +Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. -### `exclusive` +### exclusive -defines if more than one button could be pressed simultaneously. By default set `true`. +```ts +exclusive?: boolean; +``` -### `delayLongPress` +Defines if more than one button could be pressed simultaneously. By default set to `true`. -defines the delay, in milliseconds, after which the `onLongPress` callback gets called. By default set to 600. +### delayLongPress -## `RectButton` +```ts +delayLongPress?: number; +``` -This type of button component should be used when you deal with rectangular elements or blocks of content that can be pressed, for example table rows or buttons with text and icons. This component provides a platform specific interaction, rendering a rectangular ripple on Android or highlighting the background on iOS and on older versions of Android. In addition to the props of [`BaseButton`](/docs/components/buttons#basebutton), it accepts the following: +Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress) callback gets called. By default set to `600`. -Below is a list of properties specific to `RectButton` component: +## RectButton -### `underlayColor` +This type of button component is ideal for use with rectangular elements or content blocks that can be pressed, such as table rows or buttons featuring text and icons. It ensures platform-specific interactions, such as rendering a rectangular ripple on Android or highlighting the background on iOS and older Android versions. In addition to the props offered by [`BaseButton`](#basebutton), it accepts the following: -this is the background color that will be dimmed when button is in active state. +### underlayColor -### `activeOpacity` (**iOS only**) +```ts +underlayColor?: string; +``` -opacity applied to the underlay when button is in active state. +Background color that will be dimmed when button is in active state. -## `BorderlessButton` +### activeOpacity (**iOS only**) -This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](/docs/components/buttons#basebutton), it accepts the following: +```ts +activeOpacity?: number; +``` + +Opacity applied to the underlay when button is in active state. -Below is a list of properties specific to `BorderlessButton` component: +## BorderlessButton + +This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](/docs/components/buttons#basebutton), it accepts the following: ### `borderless` (**Android only**) @@ -101,21 +108,43 @@ set this to `false` if you want the ripple animation to render only within view opacity applied to the button when it is in an active state. +## Accessibility + +To guarantee that buttons are fully accessible, you must wrap your children in a `View` marked as `accessible` and include the `accessibilityRole="button"` prop. This requirement applies to both iOS and Android platforms. Without these adjustments, the button won't be selectable on iOS, and on Android, it won't be clickable in accessibility mode. + +```tsx +// Not accessible: +const NotAccessibleButton = () => ( + + Foo + +); + +// Accessible: +const AccessibleButton = () => ( + + + Bar + + +); +``` + ## Design patterns -Components listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration their's design concepts. +Components listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration theirs design concepts. If you wish to get specific information about platforms design patterns, visit [official Apple docs](https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons) and [Material.io guideline](https://material.io/components/buttons#text-button), which widely describe how to implement coherent design. This library allows to use native components with native feedback in adequate situations. -If you do not wish to implement custom design approach, `RectButton` and `BorderlessButton` seem to be absolutely enough and there's no need to use anything else. In all the remaining cases you can always rely on `BaseButton` which is a superclass for the other button classes and can be used as a generic `Touchable` replacement that can be customized to your needs. +If you do not wish to implement custom design approach, [`RectButton`](#rectbutton) and [`BorderlessButton`](#borderlessbutton) seem to be absolutely enough and there's no need to use anything else. In all the remaining cases you can always rely on [`BaseButton`](#basebutton) which is a superclass for the other button classes and can be used as a generic `Touchable` replacement that can be customized to your needs. Below we list some of the common usecases for button components to be used along with the type of button that should be used according to the platform specific design guidelines. ### Lists and action buttons -If you have a list with clickable items or have an action button that need to display as a separate UI block (vs being inlined in a text) you should use `RectButton`. It changes opacity on click and additionally supports a ripple effect on Android. +If you have a list with clickable items or have an action button that need to display as a separate UI block (vs being inlined in a text) you should use [`RectButton`](#rectbutton). It changes opacity on click and additionally supports a [ripple effect](#ripplecolor-android-only) on Android. @@ -139,12 +168,12 @@ It should be used if you wish to handle non-crucial actions and supportive behav -### `PureNativeButton` +### PureNativeButton -Use a `PureNativeButton` for accessing the native Component used for build more complex buttons listed above. -It's normally is not recommended to use, but it might be useful if we want to wrap it using Animated or Reanimated. +Use a `PureNativeButton` for accessing the host component used for build more complex buttons listed above. +Normally it is not recommended to use, but it might be useful if you want to wrap it using [Animated](https://reactnative.dev/docs/animated) or [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/). -```javascript +```tsx import { createNativeWrapper, PureNativeButton, From 38219bf161b189f9f94081af514befdacb0ae114 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 9 Feb 2026 12:30:58 +0100 Subject: [PATCH 2/6] Part 2 --- .../docs/components/buttons.mdx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 2b647c9c0e..f58cbb1de1 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -76,6 +76,14 @@ delayLongPress?: number; Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress) callback gets called. By default set to `600`. +### borderless (**Android only**) + +```ts +borderless?: boolean; +``` + +set this to `false` if you want the ripple animation to render only within view bounds. + ## RectButton This type of button component is ideal for use with rectangular elements or content blocks that can be pressed, such as table rows or buttons featuring text and icons. It ensures platform-specific interactions, such as rendering a rectangular ripple on Android or highlighting the background on iOS and older Android versions. In addition to the props offered by [`BaseButton`](#basebutton), it accepts the following: @@ -100,13 +108,13 @@ Opacity applied to the underlay when button is in active state. This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](/docs/components/buttons#basebutton), it accepts the following: -### `borderless` (**Android only**) - -set this to `false` if you want the ripple animation to render only within view bounds. +### activeOpacity (**iOS only**) -### `activeOpacity` (**iOS only**) +```ts +activeOpacity?: number; +``` -opacity applied to the button when it is in an active state. +Opacity applied to the button when it is in an active state. ## Accessibility From 4e99364b6ffd7aea748f3c146fa44575d1a2d67c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 9 Feb 2026 14:17:29 +0100 Subject: [PATCH 3/6] PureNativeButton --- .../docs/components/buttons.mdx | 45 +++---------------- .../docs/guides/upgrading-to-3.mdx | 3 +- skills/gesture-handler-3-migration/SKILL.md | 9 ++++ 3 files changed, 17 insertions(+), 40 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index f58cbb1de1..9ddeda42c5 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -13,14 +13,19 @@ import GifGallery from '@site/components/GifGallery'; The Gesture Handler library offers native components that function as buttons, serving as alternatives to `TouchableHighlight` or `TouchableOpacity` from the core React Native framework. These buttons process touch recognition natively, which ensures a deterministic response. This capability significantly enhances performance; for example, it allows for immediate ripple effects on Android, unlike `TouchableNativeFeedback`, which requires a touch event roundtrip to JavaScript that can cause delays, especially noticeable on older devices. Additionally, these components handle default platform interactions natively, particularly in scrollable containers where interactions are smartly delayed to prevent unintended highlighting during a fling. -Currently Gesture Handler library exposes three components that render native touchable elements under the hood: +Gesture Handler library exposes components that render native touchable elements under the hood: +- [`RawButton`](#rawbutton) - [`BaseButton`](#basebutton) - [`RectButton`](#rectbutton) - [`BorderlessButton`](#borderlessbutton) On top of that all the buttons are wrapped with [`Native`](/docs/gestures/use-native-gesture) gesture and therefore allow for all its [properties](/docs/gestures/use-native-gesture#config) to be applied to them. +## RawButton + +The most basic button component does not provide any feedback and lacks props such as `onPress`. It serves as a foundation for other button components and is ideal if you wish to implement your own custom interactions for when the button is pressed. + ## BaseButton Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. @@ -175,41 +180,3 @@ It should be used if you wish to handle non-crucial actions and supportive behav - -### PureNativeButton - -Use a `PureNativeButton` for accessing the host component used for build more complex buttons listed above. -Normally it is not recommended to use, but it might be useful if you want to wrap it using [Animated](https://reactnative.dev/docs/animated) or [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/). - -```tsx -import { - createNativeWrapper, - PureNativeButton, -} from 'react-native-gesture-handler'; -import Animated from 'react-native-reanimated'; -const { event, Value, createAnimatedComponent } = Animated; - -const AnimatedRawButton = createNativeWrapper( - createAnimatedComponent(PureNativeButton), - { - shouldCancelWhenOutside: false, - shouldActivateOnStart: false, - } -); - -export default class App extends React.Component { - constructor(props) { - super(props); - const state = new Value(); - this._onGestureEvent = event([ - { - nativeEvent: { state }, - }, - ]); - } - - render() { - return ; - } -} -``` diff --git a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx index d8515f3727..132354d963 100644 --- a/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx +++ b/packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx @@ -248,7 +248,7 @@ code2={ The implementation of buttons has been updated, resolving most button-related issues. They have also been internally rewritten to utilize the new hook API. The original button components are still accessible but have been renamed with the prefix `Legacy`, e.g., `RectButton` is now available as `LegacyRectButton`. -Although the legacy JS implementation of the buttons is still available, they also use the new host component internally. +Although the legacy JS implementation of the buttons is still available, they also use the new host component internally. Because of that, `PureNativeButton` is no longer available in Gesture Handler 3.
Legacy buttons @@ -259,6 +259,7 @@ Although the legacy JS implementation of the buttons is still available, they al | `BaseButton` | `LegacyBaseButton` | | `RectButton` | `LegacyRectButton` | | `BorderlessButton` | `LegacyBorderlessButton` | +| `PureNativeButton` | *Not available in Gesture Handler 3* |
diff --git a/skills/gesture-handler-3-migration/SKILL.md b/skills/gesture-handler-3-migration/SKILL.md index 6749d47e10..c77b13d6de 100644 --- a/skills/gesture-handler-3-migration/SKILL.md +++ b/skills/gesture-handler-3-migration/SKILL.md @@ -35,6 +35,7 @@ The exception to thait is `Gesture.ForceTouch` which DOES NOT have a counterpart #### Callback changes In Gesture Handler 3 some of the callbacks were renamed, namely: + - `onStart` -> `onActivate` - `onEnd` -> `onDeactivate` - `onTouchesCancelled` -> `onTouchesCancel` @@ -42,6 +43,7 @@ In Gesture Handler 3 some of the callbacks were renamed, namely: In the hooks API `onChange` is no longer available. Instead the `*change*` properties were moved to the event available inside `onUpdate`. All callbacks of a gesture are now using the same type: + - `usePanGesture()` -> `PanGestureEvent` - `useTapGesture()` -> `TapGestureEvent` - `useLongPressGesture()` -> `LongPressGestureEvent` @@ -53,6 +55,7 @@ All callbacks of a gesture are now using the same type: - `useManualGesture()` -> `ManualGestureEvent` The exception to this is touch events: + - `onTouchesDown` - `onTouchesUp` - `onTouchesMove` @@ -65,12 +68,14 @@ Where each callback receives `GestureTouchEvent` regardless of the hook used. In Gesture Handler 3, `stateManager` is no longer passed to `TouchEvent` callbacks. Instead, you should use the global `GestureStateManager`. `GestureStateManager` provides methods for imperative state management: + - .begin(handlerTag: number) - .activate(handlerTag: number) - .deactivate(handlerTag: number) (.end() in the old API) - .fail(handlerTag: number) `handlerTag` can be obtained in two ways: + 1. From the gesture object returned by the hook (`gesture.handlerTag`) 2. From the event inside callback (`event.handlerTag`) @@ -83,6 +88,7 @@ Callback definitions CANNOT reference the gesture that's being defined. In this `Gesture.Simultaneous(gesture1, gesture2);` becomes `useSimultaneousGestures(pan1, pan2);` All relations from the old API and their counterparts in the new one: + - `Gesture.Race()` -> `useCompetingGestures()` - `Gesture.Simultaneous()` -> `useSimultaneousGestures()` - `Gesture.Exclusive()` -> `useExclusiveGestures()` @@ -90,6 +96,7 @@ All relations from the old API and their counterparts in the new one: #### Cross components relations properties Properties used to define cross-components interactions were renamed: + - `.simultaneousWithExternalGesture` -> `simultaneousWith:` - `.requireExternalGestureToFail` -> `requireToFail:` - `.blocksExternalGesture` -> `block:` @@ -160,6 +167,8 @@ Don't suggest replacing buttons from Gesture Handler with components from React The implementation of buttons has been updated, resolving most button-related issues. They have also been internally rewritten to utilize the new hook API. The legacy JS implementations of button components are still accessible but have been renamed with the prefix `Legacy`, e.g., `RectButton` is now available as `LegacyRectButton`. Those still use the new native component under the hood. +`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 funcionality with other buttons. + Other components have also been internally rewritten using the new hook API but are exported under their original names, so no changes are necessary on your part. However, if you need to use the previous implementation for any reason, the legacy components are also available and are prefixed with `Legacy`, e.g., `ScrollView` is now available as `LegacyScrollView`. ### Replaced types From 4de1cff11d04c0cea743d0cd3d288ce7d49c2ad7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Mon, 9 Feb 2026 14:43:26 +0100 Subject: [PATCH 4/6] Add RawButton --- .../docs/components/buttons.mdx | 71 +++++++++++++------ 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 9ddeda42c5..46c0ba3fb8 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -26,68 +26,93 @@ On top of that all the buttons are wrapped with [`Native`](/docs/gestures/use-na The most basic button component does not provide any feedback and lacks props such as `onPress`. It serves as a foundation for other button components and is ideal if you wish to implement your own custom interactions for when the button is pressed. -## BaseButton +`RawButton` accepts all [`Native` gesture props](/docs/gestures/use-native-gesture#config), [accessibility props](https://reactnative.dev/docs/accessibility#accessibility-properties), along with the following additional properties: -Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. +### exclusive -### onPress +```ts +exclusive?: boolean; +``` + +Defines if more than one button could be pressed simultaneously. By default set to `true`. + +### rippleColor (**Android only**) ```ts -onPress?: (pointerInside: boolean) => void; +rippleColor?: number | ColorValue | null; ``` -Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core). +Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. +### rippleRadius (**Android only**) -### onLongPress +```ts +rippleRadius?: number | null; +``` + +Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. + +### borderless (**Android only**) ```ts -onLongPress?: () => void; +borderless?: boolean; ``` -Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds. +If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds. +### foreground (**Android only**) -### onActiveStateChange +```ts +foreground?: boolean; +``` + +Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view. + +### touchSoundDisabled (**Android only**) ```ts -onActiveStateChange?: (active: boolean) => void; +touchSoundDisabled?: boolean; ``` -Triggered when the button transitions between active and inactive states. It passes the current active state as a boolean variable to the method as the first parameter. +If set to `true`, the system will not play a sound when the button is pressed. +## BaseButton -### rippleColor (**Android only**) +Can be used as a base class if you'd like to implement some custom interaction for when the button is pressed. It has all the props of [`RawButton`](#rawbutton) and in addition to that it also provides the following props: + +### onPress ```ts -rippleColor?: number | ColorValue | null; +onPress?: (pointerInside: boolean) => void; ``` -Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation. +Triggered when the button gets pressed (analogous to `onPress` in `TouchableHighlight` from RN core). -### exclusive + +### onLongPress ```ts -exclusive?: boolean; +onLongPress?: () => void; ``` -Defines if more than one button could be pressed simultaneously. By default set to `true`. +Triggered when the button gets pressed for at least [`delayLongPress`](#delaylongpress) milliseconds. -### delayLongPress + +### onActiveStateChange ```ts -delayLongPress?: number; +onActiveStateChange?: (active: boolean) => void; ``` -Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress) callback gets called. By default set to `600`. +Triggered when the button transitions between active and inactive states. It passes the current active state as a boolean variable to the method as the first parameter. -### borderless (**Android only**) +### delayLongPress ```ts -borderless?: boolean; +delayLongPress?: number; ``` -set this to `false` if you want the ripple animation to render only within view bounds. +Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress) callback gets called. By default set to `600`. ## RectButton From 241820604e492b18dacce09c0babfa337c27a875 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 12 Feb 2026 12:06:00 +0100 Subject: [PATCH 5/6] Native gesture --- packages/docs-gesture-handler/docs/components/buttons.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index 46c0ba3fb8..ca99ebd5a8 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -20,13 +20,14 @@ Gesture Handler library exposes components that render native touchable elements - [`RectButton`](#rectbutton) - [`BorderlessButton`](#borderlessbutton) -On top of that all the buttons are wrapped with [`Native`](/docs/gestures/use-native-gesture) gesture and therefore allow for all its [properties](/docs/gestures/use-native-gesture#config) to be applied to them. +On top of that all the buttons are wrapped with [`Native gesture`](/docs/gestures/use-native-gesture) and therefore allow for all its [properties](/docs/gestures/use-native-gesture#config) to be applied to them. + ## RawButton The most basic button component does not provide any feedback and lacks props such as `onPress`. It serves as a foundation for other button components and is ideal if you wish to implement your own custom interactions for when the button is pressed. -`RawButton` accepts all [`Native` gesture props](/docs/gestures/use-native-gesture#config), [accessibility props](https://reactnative.dev/docs/accessibility#accessibility-properties), along with the following additional properties: +`RawButton` accepts all [`Native gesture` props](/docs/gestures/use-native-gesture#config), [accessibility props](https://reactnative.dev/docs/accessibility#accessibility-properties), along with the following additional properties: ### exclusive From 698a100cbd6579db9a62c1943f744e3898c75f9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 12 Feb 2026 12:14:20 +0100 Subject: [PATCH 6/6] Copilot review --- packages/docs-gesture-handler/docs/components/buttons.mdx | 4 ++-- skills/gesture-handler-3-migration/SKILL.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docs-gesture-handler/docs/components/buttons.mdx b/packages/docs-gesture-handler/docs/components/buttons.mdx index ca99ebd5a8..2a70d68208 100644 --- a/packages/docs-gesture-handler/docs/components/buttons.mdx +++ b/packages/docs-gesture-handler/docs/components/buttons.mdx @@ -137,7 +137,7 @@ Opacity applied to the underlay when button is in active state. ## BorderlessButton -This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](/docs/components/buttons#basebutton), it accepts the following: +This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following: ### activeOpacity (**iOS only**) @@ -171,7 +171,7 @@ const AccessibleButton = () => ( ## Design patterns -Components listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration theirs design concepts. +Components listed here were not designed to behave and look in the same way on both platforms but rather to be used for handling similar behaviour on iOS and Android taking into consideration their design concepts. If you wish to get specific information about platforms design patterns, visit [official Apple docs](https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons) and [Material.io guideline](https://material.io/components/buttons#text-button), which widely describe how to implement coherent design. diff --git a/skills/gesture-handler-3-migration/SKILL.md b/skills/gesture-handler-3-migration/SKILL.md index c77b13d6de..32726aa4ec 100644 --- a/skills/gesture-handler-3-migration/SKILL.md +++ b/skills/gesture-handler-3-migration/SKILL.md @@ -167,7 +167,7 @@ Don't suggest replacing buttons from Gesture Handler with components from React The implementation of buttons has been updated, resolving most button-related issues. They have also been internally rewritten to utilize the new hook API. The legacy JS implementations of button components are still accessible but have been renamed with the prefix `Legacy`, e.g., `RectButton` is now available as `LegacyRectButton`. Those still use the new native component under the hood. -`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 funcionality with other buttons. +`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. Other components have also been internally rewritten using the new hook API but are exported under their original names, so no changes are necessary on your part. However, if you need to use the previous implementation for any reason, the legacy components are also available and are prefixed with `Legacy`, e.g., `ScrollView` is now available as `LegacyScrollView`.