PureNativeButton

Author: m-bert

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
   <img src={useBaseUrl('gifs/androidmail.gif')} width="280" />
   <img src={useBaseUrl('gifs/iosmail.gif')} width="280" />
 </GifGallery>
-
-### 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 <AnimatedRawButton onHandlerStateChange={this._onGestureEvent} />;
-  }
-}
-```

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.
 
 <details>
 <summary>Legacy buttons</summary>
@@ -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*    |
 
 </details>
 

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

@@ -35,13 +35,15 @@ 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`
 
 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,13 +88,15 @@ 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()`
 
 #### 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