react-native-gesture-handler 2.1.2 → 2.3.0

package/src/fabric/RNGestureHandlerButtonNativeComponent.js

@@ -0,0 +1,27 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent } from 'react-native';
+import type { ColorValue } from 'react-native/Libraries/StyleSheet';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps, // This is required.
+  exclusive: boolean,
+  foreground: boolean,
+  borderless: boolean,
+  enabled: boolean,
+  rippleColor: ColorValue,
+  rippleRadius: Int32,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNGestureHandlerButton',
+  {}
+): ComponentType);

package/src/fabric/RNGestureHandlerRootViewNativeComponent.js

@@ -0,0 +1,19 @@
+/**
+ * @flow strict-local
+ * @format
+ */
+/* eslint-disable */
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent } from 'react-native';
+import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps, // This is required.
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'RNGestureHandlerRootView',
+  {}
+): ComponentType);

package/src/getShadowNodeFromRef.ts

@@ -0,0 +1,19 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. This implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing. Solved by making .web file.
+let findHostInstance_DEPRECATED = (_ref: any) => null;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  findHostInstance_DEPRECATED = require('react-native/Libraries/Renderer/shims/ReactFabric')
+    .findHostInstance_DEPRECATED;
+} catch (e) {
+  // do nothing
+}
+
+export function getShadowNodeFromRef(ref: any) {
+  // @ts-ignore Fabric
+  return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
+    .node;
+}

package/src/getShadowNodeFromRef.web.ts

@@ -0,0 +1,7 @@
+// Used by GestureDetector (unsupported on web at the moment) to check whether the
+// attached view may get flattened on Fabric. Original implementation causes errors
+// on web due to the static resolution of `require` statements by webpack breaking
+// the conditional importing.
+export function getShadowNodeFromRef(_ref: any) {
+  return null;
+}

package/src/handlers/FlingGestureHandler.ts

@@ -42,13 +42,15 @@ export interface FlingGestureHandlerProps
   extends BaseGestureHandlerProps<FlingGestureHandlerEventPayload>,
     FlingGestureConfig {}
 
+export const flingHandlerName = 'FlingGestureHandler';
+
 export type FlingGestureHandler = typeof FlingGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const FlingGestureHandler = createHandler<
   FlingGestureHandlerProps,
   FlingGestureHandlerEventPayload
 >({
-  name: 'FlingGestureHandler',
+  name: flingHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...flingGestureHandlerProps,

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { tagMessage } from '../utils';
 import PlatformConstants from '../PlatformConstants';
 import createHandler from './createHandler';
 import {
@@ -16,7 +17,9 @@ class ForceTouchFallback extends React.Component {
   static forceTouchAvailable = false;
   componentDidMount() {
     console.warn(
-      'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
+      tagMessage(
+        'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
+      )
     );
   }
   render() {
@@ -64,13 +67,16 @@ export interface ForceTouchGestureHandlerProps
 export type ForceTouchGestureHandler = typeof ForceTouchGestureHandler & {
   forceTouchAvailable: boolean;
 };
+
+export const forceTouchHandlerName = 'ForceTouchGestureHandler';
+
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const ForceTouchGestureHandler = PlatformConstants?.forceTouchAvailable
   ? createHandler<
       ForceTouchGestureHandlerProps,
       ForceTouchGestureHandlerEventPayload
     >({
-      name: 'ForceTouchGestureHandler',
+      name: forceTouchHandlerName,
       allowedProps: [
         ...baseGestureHandlerProps,
         ...forceTouchGestureHandlerProps,

package/src/handlers/LongPressGestureHandler.ts

@@ -27,7 +27,7 @@ export type LongPressGestureHandlerEventPayload = {
   /**
    * X coordinate, expressed in points, of the current position of the pointer
    * (finger or a leading pointer when there are multiple fingers placed)
-   * relative to the root view. It is recommended to use `absoluteX` instead of
+   * relative to the window. It is recommended to use `absoluteX` instead of
    * `x` in cases when the view attached to the handler can be transformed as an
    * effect of the gesture.
    */
@@ -36,7 +36,7 @@ export type LongPressGestureHandlerEventPayload = {
   /**
    * Y coordinate, expressed in points, of the current position of the pointer
    * (finger or a leading pointer when there are multiple fingers placed)
-   * relative to the root view. It is recommended to use `absoluteY` instead of
+   * relative to the window. It is recommended to use `absoluteY` instead of
    * `y` in cases when the view attached to the handler can be transformed as an
    * effect of the gesture.
    */
@@ -69,13 +69,15 @@ export interface LongPressGestureHandlerProps
   extends BaseGestureHandlerProps<LongPressGestureHandlerEventPayload>,
     LongPressGestureConfig {}
 
+export const longPressHandlerName = 'LongPressGestureHandler';
+
 export type LongPressGestureHandler = typeof LongPressGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const LongPressGestureHandler = createHandler<
   LongPressGestureHandlerProps,
   LongPressGestureHandlerEventPayload
 >({
-  name: 'LongPressGestureHandler',
+  name: longPressHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...longPressGestureHandlerProps,

package/src/handlers/NativeViewGestureHandler.ts

@@ -41,13 +41,15 @@ export const nativeViewProps = [
   ...nativeViewGestureHandlerProps,
 ] as const;
 
+export const nativeViewHandlerName = 'NativeViewGestureHandler';
+
 export type NativeViewGestureHandler = typeof NativeViewGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const NativeViewGestureHandler = createHandler<
   NativeViewGestureHandlerProps,
   NativeViewGestureHandlerPayload
 >({
-  name: 'NativeViewGestureHandler',
+  name: nativeViewHandlerName,
   allowedProps: nativeViewProps,
   config: {},
 });

package/src/handlers/PanGestureHandler.ts

@@ -47,7 +47,7 @@ export type PanGestureHandlerEventPayload = {
 
   /**
    * X coordinate of the current position of the pointer (finger or a leading
-   * pointer when there are multiple fingers placed) relative to the root view.
+   * pointer when there are multiple fingers placed) relative to the window.
    * The value is expressed in point units. It is recommended to use it instead
    * of `x` in cases when the original view can be transformed as an effect of
    * the gesture.
@@ -56,7 +56,7 @@ export type PanGestureHandlerEventPayload = {
 
   /**
    * Y coordinate of the current position of the pointer (finger or a leading
-   * pointer when there are multiple fingers placed) relative to the root view.
+   * pointer when there are multiple fingers placed) relative to the window.
    * The value is expressed in point units. It is recommended to use it instead
    * of `y` in cases when the original view can be transformed as an
    * effect of the gesture.
@@ -181,13 +181,15 @@ export interface PanGestureHandlerProps
   failOffsetX?: number | number[];
 }
 
+export const panHandlerName = 'PanGestureHandler';
+
 export type PanGestureHandler = typeof PanGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const PanGestureHandler = createHandler<
   PanGestureHandlerProps,
   PanGestureHandlerEventPayload
 >({
-  name: 'PanGestureHandler',
+  name: panHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...panGestureHandlerProps,

package/src/handlers/PinchGestureHandler.ts

@@ -34,13 +34,15 @@ export type PinchGestureHandlerEventPayload = {
 export interface PinchGestureHandlerProps
   extends BaseGestureHandlerProps<PinchGestureHandlerEventPayload> {}
 
+export const pinchHandlerName = 'PinchGestureHandler';
+
 export type PinchGestureHandler = typeof PinchGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const PinchGestureHandler = createHandler<
   PinchGestureHandlerProps,
   PinchGestureHandlerEventPayload
 >({
-  name: 'PinchGestureHandler',
+  name: pinchHandlerName,
   allowedProps: baseGestureHandlerProps,
   config: {},
 });

package/src/handlers/RotationGestureHandler.ts

@@ -34,13 +34,15 @@ export type RotationGestureHandlerEventPayload = {
 export interface RotationGestureHandlerProps
   extends BaseGestureHandlerProps<RotationGestureHandlerEventPayload> {}
 
+export const rotationHandlerName = 'RotationGestureHandler';
+
 export type RotationGestureHandler = typeof RotationGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const RotationGestureHandler = createHandler<
   RotationGestureHandlerProps,
   RotationGestureHandlerEventPayload
 >({
-  name: 'RotationGestureHandler',
+  name: rotationHandlerName,
   allowedProps: baseGestureHandlerProps,
   config: {},
 });

package/src/handlers/TapGestureHandler.ts

@@ -75,13 +75,15 @@ export interface TapGestureHandlerProps
   extends BaseGestureHandlerProps<TapGestureHandlerEventPayload>,
     TapGestureConfig {}
 
+export const tapHandlerName = 'TapGestureHandler';
+
 export type TapGestureHandler = typeof TapGestureHandler;
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; see description on the top of gestureHandlerCommon.ts file
 export const TapGestureHandler = createHandler<
   TapGestureHandlerProps,
   TapGestureHandlerEventPayload
 >({
-  name: 'TapGestureHandler',
+  name: tapHandlerName,
   allowedProps: [
     ...baseGestureHandlerProps,
     ...tapGestureHandlerProps,

package/src/handlers/createHandler.ts

@@ -11,7 +11,11 @@ import deepEqual from 'lodash/isEqual';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
 import type RNGestureHandlerModuleWeb from '../RNGestureHandlerModule.web';
 import { State } from '../State';
-import { handlerIDToTag, getNextHandlerTag } from './handlersRegistry';
+import {
+  handlerIDToTag,
+  getNextHandlerTag,
+  registerOldGestureHandler,
+} from './handlersRegistry';
 
 import {
   BaseGestureHandlerProps,
@@ -21,14 +25,35 @@ import {
   findNodeHandle,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
+import { isFabric, isJestEnv, tagMessage } from '../utils';
+import { ActionType } from '../ActionType';
 
 const UIManagerAny = UIManager as any;
 
+const customGHEventsConfigFabricAndroid = {
+  topOnGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
+  topOnGestureHandlerStateChange: {
+    registrationName: 'onGestureHandlerStateChange',
+  },
+};
+
 const customGHEventsConfig = {
   onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
   onGestureHandlerStateChange: {
     registrationName: 'onGestureHandlerStateChange',
   },
+
+  // When using React Native Gesture Handler for Animated.event with useNativeDriver: true
+  // on Android with Fabric enabled, the native part still sends the native events to JS
+  // but prefixed with "top". We cannot simply rename the events above so they are prefixed
+  // with "top" instead of "on" because in such case Animated.events would not be registered.
+  // That's why we need to register another pair of event names.
+  // The incoming events will be queued but never handled.
+  // Without this piece of code below, you'll get the following JS error:
+  // Unsupported top level event type "topOnGestureHandlerEvent" dispatched
+  ...(isFabric() &&
+    Platform.OS === 'android' &&
+    customGHEventsConfigFabricAndroid),
 };
 
 // Add gesture specific events to genericDirectEventTypes object exported from UIManager
@@ -122,6 +147,18 @@ type InternalEventHandlers = {
   onGestureHandlerStateChange?: (event: any) => void;
 };
 
+let showedRngh2Notice = false;
+function showRngh2NoticeIfNeeded() {
+  if (!showedRngh2Notice) {
+    console.warn(
+      tagMessage(
+        "Seems like you're using an old API with gesture components, check out new Gestures system!"
+      )
+    );
+    showedRngh2Notice = true;
+  }
+}
+
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler<
   T extends BaseGestureHandlerProps<U>,
@@ -162,6 +199,9 @@ export default function createHandler<
         }
         handlerIDToTag[props.id] = this.handlerTag;
       }
+      if (__DEV__ && !isJestEnv()) {
+        showRngh2NoticeIfNeeded();
+      }
     }
 
     componentDidMount() {
@@ -224,7 +264,9 @@ export default function createHandler<
 
     private onGestureHandlerEvent = (event: GestureEvent<U>) => {
       if (event.nativeEvent.handlerTag === this.handlerTag) {
-        this.props.onGestureEvent?.(event);
+        if (typeof this.props.onGestureEvent === 'function') {
+          this.props.onGestureEvent?.(event);
+        }
       } else {
         this.props.onGestureHandlerEvent?.(event);
       }
@@ -235,7 +277,9 @@ export default function createHandler<
       event: HandlerStateChangeEvent<U>
     ) => {
       if (event.nativeEvent.handlerTag === this.handlerTag) {
-        this.props.onHandlerStateChange?.(event);
+        if (typeof this.props.onHandlerStateChange === 'function') {
+          this.props.onHandlerStateChange?.(event);
+        }
 
         const state: ValueOf<typeof State> = event.nativeEvent.state;
         const stateEventName = stateToPropMappings[state];
@@ -283,14 +327,38 @@ export default function createHandler<
         (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
           this.handlerTag,
           newViewTag,
-          false,
+          ActionType.JS_FUNCTION_OLD_API, // ignored on web
           this.propsRef
         );
       } else {
+        registerOldGestureHandler(this.handlerTag, {
+          onGestureEvent: this.onGestureHandlerEvent,
+          onGestureStateChange: this.onGestureHandlerStateChange,
+        });
+
+        const actionType = (() => {
+          if (
+            this.props?.onGestureEvent &&
+            'current' in this.props.onGestureEvent
+          ) {
+            // Reanimated worklet
+            return ActionType.REANIMATED_WORKLET;
+          } else if (
+            this.props?.onGestureEvent &&
+            '__isNative' in this.props.onGestureEvent
+          ) {
+            // Animated.event with useNativeDriver: true
+            return ActionType.NATIVE_ANIMATED_EVENT;
+          } else {
+            // JS callback or Animated.event with useNativeDriver: false
+            return ActionType.JS_FUNCTION_OLD_API;
+          }
+        })();
+
         RNGestureHandlerModule.attachGestureHandler(
           this.handlerTag,
           newViewTag,
-          false
+          actionType
         );
       }
     };
@@ -420,6 +488,13 @@ export default function createHandler<
         {
           ref: this.refHandler,
           collapsable: false,
+          ...(isJestEnv()
+            ? {
+                handlerType: name,
+                handlerTag: this.handlerTag,
+              }
+            : {}),
+          testID: this.props.testID,
           ...events,
         },
         grandChildren

package/src/handlers/createNativeWrapper.tsx

@@ -68,7 +68,13 @@ export default function createNativeWrapper<P>(
     );
   });
 
-  ComponentWrapper.displayName = Component.displayName || 'ComponentWrapper';
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  ComponentWrapper.displayName =
+    Component?.displayName ||
+    // @ts-ignore if render doesn't exist it will return undefined and go further
+    Component?.render?.name ||
+    (typeof Component === 'string' && Component) ||
+    'ComponentWrapper';
 
   return ComponentWrapper;
 }

package/src/handlers/gestureHandlerCommon.ts

@@ -43,11 +43,7 @@ export interface GestureEventPayload {
   numberOfPointers: number;
   state: ValueOf<typeof State>;
 }
-
-export interface HandlerStateChangeEventPayload {
-  handlerTag: number;
-  numberOfPointers: number;
-  state: ValueOf<typeof State>;
+export interface HandlerStateChangeEventPayload extends GestureEventPayload {
   oldState: ValueOf<typeof State>;
 }
 
@@ -114,6 +110,7 @@ export type BaseGestureHandlerProps<
   id?: string;
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
   simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+  testID?: string;
   // TODO(TS) - fix event types
   onBegan?: (event: HandlerStateChangeEvent) => void;
   onFailed?: (event: HandlerStateChangeEvent) => void;