react-native-gesture-handler 1.10.0 → 2.0.0

package/src/handlers/createHandler.ts

@@ -1,31 +1,28 @@
-import React from 'react';
+import * as React from 'react';
 import {
-  findNodeHandle as findNodeHandleRN,
-  NativeModules,
   Platform,
   Touchable,
+  UIManager,
+  DeviceEventEmitter,
+  EmitterSubscription,
 } from 'react-native';
 // @ts-ignore - it isn't typed by TS & don't have definitelyTyped types
-import deepEqual from 'fbjs/lib/areEqual';
+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 {
   BaseGestureHandlerProps,
+  filterConfig,
   GestureEvent,
   HandlerStateChangeEvent,
-} from './gestureHandlers';
+  findNodeHandle,
+} from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
 
-function findNodeHandle(
-  node: null | number | React.Component<any, any> | React.ComponentClass<any>
-): null | number | React.Component<any, any> | React.ComponentClass<any> {
-  if (Platform.OS === 'web') return node;
-  return findNodeHandleRN(node);
-}
-
-const { UIManager = {} } = NativeModules;
+const UIManagerAny = UIManager as any;
 
 const customGHEventsConfig = {
   onGestureHandlerEvent: { registrationName: 'onGestureHandlerEvent' },
@@ -38,16 +35,20 @@ const customGHEventsConfig = {
 // native module.
 // Once new event types are registered with react it is possible to dispatch these
 // events to all kind of native views.
-UIManager.genericDirectEventTypes = {
-  ...UIManager.genericDirectEventTypes,
+UIManagerAny.genericDirectEventTypes = {
+  ...UIManagerAny.genericDirectEventTypes,
   ...customGHEventsConfig,
 };
 // In newer versions of RN the `genericDirectEventTypes` is located in the object
-// returned by UIManager.getConstants(), we need to add it there as well to make
+// returned by UIManager.getViewManagerConfig('getConstants') or in older RN UIManager.getConstants(), we need to add it there as well to make
 // it compatible with RN 61+
-if (UIManager.getConstants) {
-  UIManager.getConstants().genericDirectEventTypes = {
-    ...UIManager.getConstants().genericDirectEventTypes,
+const UIManagerConstants =
+  UIManagerAny.getViewManagerConfig?.('getConstants') ??
+  UIManagerAny.getConstants?.();
+
+if (UIManagerConstants) {
+  UIManagerConstants.genericDirectEventTypes = {
+    ...UIManagerConstants.genericDirectEventTypes,
     ...customGHEventsConfig,
   };
 }
@@ -60,71 +61,24 @@ const {
   clearJSResponder: oldClearJSResponder = () => {
     //no operation
   },
-} = UIManager;
-UIManager.setJSResponder = (tag: number, blockNativeResponder: boolean) => {
+} = UIManagerAny;
+UIManagerAny.setJSResponder = (tag: number, blockNativeResponder: boolean) => {
   RNGestureHandlerModule.handleSetJSResponder(tag, blockNativeResponder);
   oldSetJSResponder(tag, blockNativeResponder);
 };
-UIManager.clearJSResponder = () => {
+UIManagerAny.clearJSResponder = () => {
   RNGestureHandlerModule.handleClearJSResponder();
   oldClearJSResponder();
 };
 
-let handlerTag = 1;
-const handlerIDToTag: Record<string, number> = {};
-
-function isConfigParam(param: unknown, name: string) {
-  // param !== Object(param) returns false if `param` is a function
-  // or an object and returns true if `param` is null
-  return (
-    param !== undefined &&
-    (param !== Object(param) ||
-      !('__isNative' in (param as Record<string, unknown>))) &&
-    name !== 'onHandlerStateChange' &&
-    name !== 'onGestureEvent'
-  );
-}
-
-function filterConfig(
-  props: Record<string, unknown>,
-  validProps: string[],
-  defaults: Record<string, unknown> = {}
-) {
-  const res = { ...defaults };
-  validProps.forEach((key) => {
-    const value = props[key];
-    if (isConfigParam(value, key)) {
-      let value = props[key];
-      if (key === 'simultaneousHandlers' || key === 'waitFor') {
-        value = transformIntoHandlerTags(props[key]);
-      } else if (key === 'hitSlop') {
-        if (typeof value !== 'object') {
-          value = { top: value, left: value, bottom: value, right: value };
-        }
-      }
-      res[key] = value;
-    }
+let allowTouches = true;
+const DEV_ON_ANDROID = __DEV__ && Platform.OS === 'android';
+// Toggled inspector blocks touch events in order to allow inspecting on Android
+// This needs to be a global variable in order to set initial state for `allowTouches` property in Handler component
+if (DEV_ON_ANDROID) {
+  DeviceEventEmitter.addListener('toggleElementInspector', () => {
+    allowTouches = !allowTouches;
   });
-  return res;
-}
-
-function transformIntoHandlerTags(handlerIDs: any) {
-  if (!Array.isArray(handlerIDs)) {
-    handlerIDs = [handlerIDs];
-  }
-
-  if (Platform.OS === 'web') {
-    return handlerIDs
-      .map(({ current }: { current: any }) => current)
-      .filter((handle: any) => handle);
-  }
-  // converts handler string IDs into their numeric tags
-  return handlerIDs
-    .map(
-      (handlerID: any) =>
-        handlerIDToTag[handlerID] || handlerID.current?._handlerTag || -1
-    )
-    .filter((handlerTag: number) => handlerTag > 0);
 }
 
 type HandlerProps<T extends Record<string, unknown>> = Readonly<
@@ -179,7 +133,13 @@ export default function createHandler<
   transformProps,
   customNativeProps = [],
 }: CreateHandlerArgs<T>): React.ComponentType<T & React.RefAttributes<any>> {
-  class Handler extends React.Component<T & InternalEventHandlers> {
+  interface HandlerState {
+    allowTouches: boolean;
+  }
+  class Handler extends React.Component<
+    T & InternalEventHandlers,
+    HandlerState
+  > {
     static displayName = name;
 
     private handlerTag: number;
@@ -188,13 +148,14 @@ export default function createHandler<
     private viewNode: any;
     private viewTag?: number;
     private updateEnqueued: ReturnType<typeof setImmediate> | null = null;
+    private inspectorToggleListener?: EmitterSubscription;
 
     constructor(props: T & InternalEventHandlers) {
       super(props);
-      this.handlerTag = handlerTag++;
+      this.handlerTag = getNextHandlerTag();
       this.config = {};
       this.propsRef = React.createRef();
-
+      this.state = { allowTouches };
       if (props.id) {
         if (handlerIDToTag[props.id] !== undefined) {
           throw new Error(`Handler with ID "${props.id}" already registered`);
@@ -205,11 +166,21 @@ export default function createHandler<
 
     componentDidMount() {
       const props: HandlerProps<U> = this.props;
+
+      if (DEV_ON_ANDROID) {
+        this.inspectorToggleListener = DeviceEventEmitter.addListener(
+          'toggleElementInspector',
+          () => {
+            this.setState((_) => ({ allowTouches }));
+            this.update();
+          }
+        );
+      }
       if (hasUnresolvedRefs(props)) {
         // If there are unresolved refs (e.g. ".current" has not yet been set)
         // passed as `simultaneousHandlers` or `waitFor`, we enqueue a call to
         // _update method that will try to update native handler props using
-        // setImmediate. This makes it so _update function gets called after all
+        // setImmediate. This makes it so update() function gets called after all
         // react components are mounted and we expect the missing ref object to
         // be resolved by then.
         this.updateEnqueued = setImmediate(() => {
@@ -238,6 +209,7 @@ export default function createHandler<
     }
 
     componentWillUnmount() {
+      this.inspectorToggleListener?.remove();
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
       if (this.updateEnqueued) {
         clearImmediate(this.updateEnqueued);
@@ -311,12 +283,14 @@ export default function createHandler<
         (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
           this.handlerTag,
           newViewTag,
+          false,
           this.propsRef
         );
       } else {
         RNGestureHandlerModule.attachGestureHandler(
           this.handlerTag,
-          newViewTag
+          newViewTag,
+          false
         );
       }
     };
@@ -413,8 +387,12 @@ export default function createHandler<
         }
       }
       const events = {
-        onGestureHandlerEvent: gestureEventHandler,
-        onGestureHandlerStateChange: gestureStateEventHandler,
+        onGestureHandlerEvent: this.state.allowTouches
+          ? gestureEventHandler
+          : undefined,
+        onGestureHandlerStateChange: this.state.allowTouches
+          ? gestureStateEventHandler
+          : undefined,
       };
 
       this.propsRef.current = events;

package/src/handlers/createNativeWrapper.tsx

@@ -1,4 +1,5 @@
-import React, { useImperativeHandle, useRef } from 'react';
+import * as React from 'react';
+import { useImperativeHandle, useRef } from 'react';
 
 import {
   NativeViewGestureHandler,
@@ -50,7 +51,7 @@ export default function createNativeWrapper<P>(
         // add handlerTag for relations config
         if (_ref.current && node) {
           // @ts-ignore FIXME(TS) think about createHandler return type
-          _ref.current._handlerTag = node._handlerTag;
+          _ref.current.handlerTag = node.handlerTag;
           return _ref.current;
         }
         return null;

package/src/handlers/gestureHandlerCommon.ts

@@ -0,0 +1,185 @@
+// Previous types exported gesture handlers as classes which creates an interface and variable, both named the same as class.
+// Without those types, we'd introduce breaking change, forcing users to prefix every handler type specification with typeof
+// e.g. React.createRef<TapGestureHandler> -> React.createRef<typeof TapGestureHandler>.
+// See https://www.typescriptlang.org/docs/handbook/classes.html#constructor-functions for reference.
+import * as React from 'react';
+import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
+
+import { State } from '../State';
+import { EventType } from '../EventType';
+import { ValueOf } from '../typeUtils';
+import { handlerIDToTag } from './handlersRegistry';
+import { toArray } from '../utils';
+
+const commonProps = [
+  'id',
+  'enabled',
+  'shouldCancelWhenOutside',
+  'hitSlop',
+] as const;
+
+const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
+
+export const baseGestureHandlerProps = [
+  ...commonProps,
+  ...componentInteractionProps,
+  'onBegan',
+  'onFailed',
+  'onCancelled',
+  'onActivated',
+  'onEnded',
+  'onGestureEvent',
+  'onHandlerStateChange',
+] as const;
+
+export const baseGestureHandlerWithMonitorProps = [
+  ...commonProps,
+  'needsPointerData',
+  'manualActivation',
+];
+
+export interface GestureEventPayload {
+  handlerTag: number;
+  numberOfPointers: number;
+  state: ValueOf<typeof State>;
+}
+
+export interface HandlerStateChangeEventPayload {
+  handlerTag: number;
+  numberOfPointers: number;
+  state: ValueOf<typeof State>;
+  oldState: ValueOf<typeof State>;
+}
+
+export type HitSlop =
+  | number
+  | Partial<
+      Record<
+        'left' | 'right' | 'top' | 'bottom' | 'vertical' | 'horizontal',
+        number
+      >
+    >
+  | Record<'width' | 'left', number>
+  | Record<'width' | 'right', number>
+  | Record<'height' | 'top', number>
+  | Record<'height' | 'bottom', number>;
+
+//TODO(TS) events in handlers
+
+export interface GestureEvent<ExtraEventPayloadT = Record<string, unknown>> {
+  nativeEvent: Readonly<GestureEventPayload & ExtraEventPayloadT>;
+}
+export interface HandlerStateChangeEvent<
+  ExtraEventPayloadT = Record<string, unknown>
+> {
+  nativeEvent: Readonly<HandlerStateChangeEventPayload & ExtraEventPayloadT>;
+}
+
+export type TouchData = {
+  id: number;
+  x: number;
+  y: number;
+  absoluteX: number;
+  absoluteY: number;
+};
+
+export type GestureTouchEvent = {
+  handlerTag: number;
+  numberOfTouches: number;
+  state: ValueOf<typeof State>;
+  eventType: EventType;
+  allTouches: TouchData[];
+  changedTouches: TouchData[];
+};
+
+export type GestureUpdateEvent<
+  GestureEventPayloadT = Record<string, unknown>
+> = GestureEventPayload & GestureEventPayloadT;
+
+export type GestureStateChangeEvent<
+  GestureStateChangeEventPayloadT = Record<string, unknown>
+> = HandlerStateChangeEventPayload & GestureStateChangeEventPayloadT;
+
+export type CommonGestureConfig = {
+  enabled?: boolean;
+  shouldCancelWhenOutside?: boolean;
+  hitSlop?: HitSlop;
+};
+
+// Events payloads are types instead of interfaces due to TS limitation.
+// See https://github.com/microsoft/TypeScript/issues/15300 for more info.
+export type BaseGestureHandlerProps<
+  ExtraEventPayloadT extends Record<string, unknown> = Record<string, unknown>
+> = CommonGestureConfig & {
+  id?: string;
+  waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
+  simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+  // TODO(TS) - fix event types
+  onBegan?: (event: HandlerStateChangeEvent) => void;
+  onFailed?: (event: HandlerStateChangeEvent) => void;
+  onCancelled?: (event: HandlerStateChangeEvent) => void;
+  onActivated?: (event: HandlerStateChangeEvent) => void;
+  onEnded?: (event: HandlerStateChangeEvent) => void;
+
+  //TODO(TS) consider using NativeSyntheticEvent
+  onGestureEvent?: (event: GestureEvent<ExtraEventPayloadT>) => void;
+  onHandlerStateChange?: (
+    event: HandlerStateChangeEvent<ExtraEventPayloadT>
+  ) => void;
+};
+
+function isConfigParam(param: unknown, name: string) {
+  // param !== Object(param) returns false if `param` is a function
+  // or an object and returns true if `param` is null
+  return (
+    param !== undefined &&
+    (param !== Object(param) ||
+      !('__isNative' in (param as Record<string, unknown>))) &&
+    name !== 'onHandlerStateChange' &&
+    name !== 'onGestureEvent'
+  );
+}
+
+export function filterConfig(
+  props: Record<string, unknown>,
+  validProps: string[],
+  defaults: Record<string, unknown> = {}
+) {
+  const filteredConfig = { ...defaults };
+  for (const key of validProps) {
+    let value = props[key];
+    if (isConfigParam(value, key)) {
+      if (key === 'simultaneousHandlers' || key === 'waitFor') {
+        value = transformIntoHandlerTags(props[key]);
+      } else if (key === 'hitSlop' && typeof value !== 'object') {
+        value = { top: value, left: value, bottom: value, right: value };
+      }
+      filteredConfig[key] = value;
+    }
+  }
+  return filteredConfig;
+}
+
+function transformIntoHandlerTags(handlerIDs: any) {
+  handlerIDs = toArray(handlerIDs);
+
+  if (Platform.OS === 'web') {
+    return handlerIDs
+      .map(({ current }: { current: any }) => current)
+      .filter((handle: any) => handle);
+  }
+  // converts handler string IDs into their numeric tags
+  return handlerIDs
+    .map(
+      (handlerID: any) =>
+        handlerIDToTag[handlerID] || handlerID.current?.handlerTag || -1
+    )
+    .filter((handlerTag: number) => handlerTag > 0);
+}
+
+export function findNodeHandle(
+  node: null | number | React.Component<any, any> | React.ComponentClass<any>
+): null | number | React.Component<any, any> | React.ComponentClass<any> {
+  if (Platform.OS === 'web') return node;
+  return findNodeHandleRN(node);
+}

package/src/handlers/gestureHandlerTypesCompat.ts

@@ -5,19 +5,43 @@ import {
   RectButtonProps,
 } from '../components/GestureButtons';
 import {
-  FlingGestureHandlerEventPayload,
-  ForceTouchGestureHandlerEventPayload,
   GestureEvent,
   GestureEventPayload,
   HandlerStateChangeEvent,
   HandlerStateChangeEventPayload,
+} from './gestureHandlerCommon';
+import {
+  FlingGestureHandlerEventPayload,
+  FlingGestureHandlerProps,
+} from './FlingGestureHandler';
+import {
+  ForceTouchGestureHandlerEventPayload,
+  ForceTouchGestureHandlerProps,
+} from './ForceTouchGestureHandler';
+import {
   LongPressGestureHandlerEventPayload,
+  LongPressGestureHandlerProps,
+} from './LongPressGestureHandler';
+import {
   PanGestureHandlerEventPayload,
+  PanGestureHandlerProps,
+} from './PanGestureHandler';
+import {
   PinchGestureHandlerEventPayload,
+  PinchGestureHandlerProps,
+} from './PinchGestureHandler';
+import {
   RotationGestureHandlerEventPayload,
+  RotationGestureHandlerProps,
+} from './RotationGestureHandler';
+import {
   TapGestureHandlerEventPayload,
-} from './gestureHandlers';
-import { NativeViewGestureHandlerPayload } from './NativeViewGestureHandler';
+  TapGestureHandlerProps,
+} from './TapGestureHandler';
+import {
+  NativeViewGestureHandlerPayload,
+  NativeViewGestureHandlerProps,
+} from './NativeViewGestureHandler';
 
 // events
 export type GestureHandlerGestureEventNativeEvent = GestureEventPayload;
@@ -49,6 +73,15 @@ export type RotationGestureHandlerStateChangeEvent = HandlerStateChangeEvent<Rot
 export type FlingGestureHandlerGestureEvent = GestureEvent<FlingGestureHandlerEventPayload>;
 export type FlingGestureHandlerStateChangeEvent = HandlerStateChangeEvent<FlingGestureHandlerEventPayload>;
 
+// handlers properties
+export type NativeViewGestureHandlerProperties = NativeViewGestureHandlerProps;
+export type TapGestureHandlerProperties = TapGestureHandlerProps;
+export type LongPressGestureHandlerProperties = LongPressGestureHandlerProps;
+export type PanGestureHandlerProperties = PanGestureHandlerProps;
+export type PinchGestureHandlerProperties = PinchGestureHandlerProps;
+export type RotationGestureHandlerProperties = RotationGestureHandlerProps;
+export type FlingGestureHandlerProperties = FlingGestureHandlerProps;
+export type ForceTouchGestureHandlerProperties = ForceTouchGestureHandlerProps;
 // button props
 export type RawButtonProperties = RawButtonProps;
 export type BaseButtonProperties = BaseButtonProps;