react-native-gesture-handler 2.3.0 → 2.4.0

package/lib/typescript/{jestUtils.d.ts → jestUtils/jestUtils.d.ts}

@@ -1,22 +1,22 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { FlingGestureHandler } from './handlers/FlingGestureHandler';
-import { ForceTouchGestureHandler, ForceTouchGestureHandlerEventPayload } from './handlers/ForceTouchGestureHandler';
-import { BaseGestureHandlerProps, GestureEvent, HandlerStateChangeEvent } from './handlers/gestureHandlerCommon';
-import { FlingGesture } from './handlers/gestures/flingGesture';
-import { ForceTouchGesture } from './handlers/gestures/forceTouchGesture';
-import { BaseGesture, GestureType } from './handlers/gestures/gesture';
-import { LongPressGesture } from './handlers/gestures/longPressGesture';
-import { NativeGesture } from './handlers/gestures/nativeGesture';
-import { PanGesture } from './handlers/gestures/panGesture';
-import { PinchGesture } from './handlers/gestures/pinchGesture';
-import { RotationGesture } from './handlers/gestures/rotationGesture';
-import { TapGesture } from './handlers/gestures/tapGesture';
-import { LongPressGestureHandler, LongPressGestureHandlerEventPayload } from './handlers/LongPressGestureHandler';
-import { NativeViewGestureHandler, NativeViewGestureHandlerPayload } from './handlers/NativeViewGestureHandler';
-import { PanGestureHandler, PanGestureHandlerEventPayload } from './handlers/PanGestureHandler';
-import { PinchGestureHandler, PinchGestureHandlerEventPayload } from './handlers/PinchGestureHandler';
-import { RotationGestureHandler, RotationGestureHandlerEventPayload } from './handlers/RotationGestureHandler';
-import { TapGestureHandler, TapGestureHandlerEventPayload } from './handlers/TapGestureHandler';
+import { FlingGestureHandler } from '../handlers/FlingGestureHandler';
+import { ForceTouchGestureHandler, ForceTouchGestureHandlerEventPayload } from '../handlers/ForceTouchGestureHandler';
+import { BaseGestureHandlerProps, GestureEvent, HandlerStateChangeEvent } from '../handlers/gestureHandlerCommon';
+import { FlingGesture } from '../handlers/gestures/flingGesture';
+import { ForceTouchGesture } from '../handlers/gestures/forceTouchGesture';
+import { BaseGesture, GestureType } from '../handlers/gestures/gesture';
+import { LongPressGesture } from '../handlers/gestures/longPressGesture';
+import { NativeGesture } from '../handlers/gestures/nativeGesture';
+import { PanGesture } from '../handlers/gestures/panGesture';
+import { PinchGesture } from '../handlers/gestures/pinchGesture';
+import { RotationGesture } from '../handlers/gestures/rotationGesture';
+import { TapGesture } from '../handlers/gestures/tapGesture';
+import { LongPressGestureHandler, LongPressGestureHandlerEventPayload } from '../handlers/LongPressGestureHandler';
+import { NativeViewGestureHandler, NativeViewGestureHandlerPayload } from '../handlers/NativeViewGestureHandler';
+import { PanGestureHandler, PanGestureHandlerEventPayload } from '../handlers/PanGestureHandler';
+import { PinchGestureHandler, PinchGestureHandlerEventPayload } from '../handlers/PinchGestureHandler';
+import { RotationGestureHandler, RotationGestureHandlerEventPayload } from '../handlers/RotationGestureHandler';
+import { TapGestureHandler, TapGestureHandlerEventPayload } from '../handlers/TapGestureHandler';
 declare type GestureHandlerTestEvent<TEventPayload extends Record<string, unknown> = Record<string, unknown>> = (GestureEvent<TEventPayload> | HandlerStateChangeEvent<TEventPayload>)['nativeEvent'];
 declare type AllGestures = TapGesture | PanGesture | LongPressGesture | RotationGesture | PinchGesture | FlingGesture | ForceTouchGesture | NativeGesture;
 declare type AllHandlers = TapGestureHandler | PanGestureHandler | LongPressGestureHandler | RotationGestureHandler | PinchGestureHandler | FlingGestureHandler | ForceTouchGestureHandler | NativeViewGestureHandler;

package/lib/typescript/utils.d.ts

@@ -5,3 +5,5 @@ export declare function hasProperty(object: object, key: string): boolean;
 export declare function isJestEnv(): boolean;
 export declare function tagMessage(msg: string): string;
 export declare function isFabric(): boolean;
+export declare function shouldUseCodegenNativeComponent(): boolean;
+export declare function isRemoteDebuggingEnabled(): boolean;

package/lib/typescript/web/GestureHandler.d.ts

@@ -109,7 +109,7 @@ declare abstract class GestureHandler {
         nativeEvent: {
             handlerTag: any;
             target: any;
-            oldState: State;
+            oldState: State | undefined;
             numberOfPointers: number;
             state: State;
             pointerInside: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",
@@ -31,8 +31,11 @@
     "android/lib/build.gradle",
     "android/lib/src/main/java/",
     "android/common/src/main/java/",
+    "android/reanimated/src/main/java/",
+    "android/noreanimated/src/main/java/",
     "ios/",
     "Swipeable/",
+    "jest-utils/",
     "DrawerLayout/",
     "README.md",
     "jestSetup.js",
@@ -108,7 +111,7 @@
     "react-native": "*"
   },
   "lint-staged": {
-    "*.{ts,tsx}": [
+    "./src/*.{ts,tsx}": [
       "prettier --write"
     ]
   },

package/src/GestureHandlerRootView.android.tsx

@@ -2,9 +2,10 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { requireNativeComponent, ViewProps } from 'react-native';
-import { isFabric } from './utils';
+import { maybeInitializeFabric } from './init';
+import { shouldUseCodegenNativeComponent } from './utils';
 
-const GestureHandlerRootViewNativeComponent = isFabric()
+const GestureHandlerRootViewNativeComponent = shouldUseCodegenNativeComponent()
   ? require('./fabric/RNGestureHandlerRootViewNativeComponent').default
   : requireNativeComponent('RNGestureHandlerRootView');
 
@@ -14,5 +15,10 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
   return <GestureHandlerRootViewNativeComponent {...props} />;
 }

package/src/GestureHandlerRootView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import { maybeInitializeFabric } from './init';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -8,5 +9,10 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
   return <View {...props} />;
 }

package/src/GestureHandlerRootView.web.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { View, ViewProps } from 'react-native';
+
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  return <View {...props} />;
+}

package/src/RNGestureHandlerModule.ts

@@ -16,6 +16,12 @@ if (RNGestureHandlerModule == null) {
   );
 }
 
+if (RNGestureHandlerModule.flushOperations === undefined) {
+  RNGestureHandlerModule.flushOperations = () => {
+    // NO-OP if not defined
+  };
+}
+
 export type RNGestureHandlerModuleProps = {
   handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
   handleClearJSResponder: () => void;
@@ -35,6 +41,7 @@ export type RNGestureHandlerModuleProps = {
   ) => void;
   dropGestureHandler: (handlerTag: number) => void;
   install: () => void;
+  flushOperations: () => void;
 };
 
 export default RNGestureHandlerModule as RNGestureHandlerModuleProps;

package/src/RNGestureHandlerModule.web.ts

@@ -59,4 +59,6 @@ export default {
   dropGestureHandler(handlerTag: number) {
     NodeManager.dropGestureHandler(handlerTag);
   },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
 };

package/src/{EventType.ts → TouchEventType.ts}

@@ -1,4 +1,4 @@
-export const EventType = {
+export const TouchEventType = {
   UNDETERMINED: 0,
   TOUCHES_DOWN: 1,
   TOUCHES_MOVE: 2,
@@ -7,4 +7,4 @@ export const EventType = {
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
-export type EventType = typeof EventType[keyof typeof EventType];
+export type TouchEventType = typeof TouchEventType[keyof typeof TouchEventType];

package/src/components/GestureButtons.tsx

@@ -35,6 +35,27 @@ export interface RawButtonProps extends NativeViewGestureHandlerProps {
    * Defines color of native ripple animation used since API level 21.
    */
   rippleColor?: any; // it was present in BaseButtonProps before but is used here in code
+
+  /**
+   * Android only.
+   *
+   * Defines radius of native ripple animation used since API level 21.
+   */
+  rippleRadius?: number | null;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you want the ripple animation to render outside the view bounds.
+   */
+  borderless?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Defines whether the ripple animation should be drawn on the foreground of the view.
+   */
+  foreground?: boolean;
 }
 
 export interface BaseButtonProps extends RawButtonProps {
@@ -69,13 +90,6 @@ export interface RectButtonProps extends BaseButtonProps {
 }
 
 export interface BorderlessButtonProps extends BaseButtonProps {
-  /**
-   * Android only.
-   *
-   * Set this to false if you want the ripple animation to render only within view bounds.
-   */
-  borderless?: boolean;
-
   /**
    * iOS only.
    *

package/src/components/GestureHandlerButton.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { HostComponent, requireNativeComponent } from 'react-native';
 import { RawButtonProps } from './GestureButtons';
-import { isFabric } from '../utils';
+import { shouldUseCodegenNativeComponent } from '../utils';
 
-const RNGestureHandlerButtonNativeComponent = isFabric()
+const RNGestureHandlerButtonNativeComponent = shouldUseCodegenNativeComponent()
   ? require('../fabric/RNGestureHandlerButtonNativeComponent').default
   : requireNativeComponent('RNGestureHandlerButton');
 

package/src/components/touchables/GenericTouchable.tsx

@@ -258,6 +258,8 @@ export default class GenericTouchable extends Component<
       // TODO: check if changed to no 's' correctly, also removed 2 props that are no longer available: `accessibilityComponentType` and `accessibilityTraits`,
       // would be good to check if it is ok for sure, see: https://github.com/facebook/react-native/issues/24016
       accessibilityState: this.props.accessibilityState,
+      accessibilityActions: this.props.accessibilityActions,
+      onAccessibilityAction: this.props.onAccessibilityAction,
       nativeID: this.props.nativeID,
       onLayout: this.props.onLayout,
       hitSlop: this.props.hitSlop,

package/src/components/touchables/TouchableOpacity.tsx

@@ -12,11 +12,15 @@ import GenericTouchable, {
 import * as React from 'react';
 import { Component } from 'react';
 
+interface GHTouchableOpacityProps {
+  useNativeAnimations?: boolean;
+}
+
 /**
  * TouchableOpacity bases on timing animation which has been used in RN's core
  */
 export default class TouchableOpacity extends Component<
-  TouchableOpacityProps & GenericTouchableProps
+  TouchableOpacityProps & GenericTouchableProps & GHTouchableOpacityProps
 > {
   static defaultProps = {
     ...GenericTouchable.defaultProps,
@@ -36,7 +40,7 @@ export default class TouchableOpacity extends Component<
       toValue: value,
       duration: duration,
       easing: Easing.inOut(Easing.quad),
-      useNativeDriver: false,
+      useNativeDriver: this.props.useNativeAnimations ?? true,
     }).start();
   };
 

package/src/fabric/RNGestureHandlerButtonNativeComponent.ts

@@ -0,0 +1,27 @@
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import type {
+  Int32,
+  WithDefault,
+  // @ts-ignore TODO: remove once there is a .d.ts file with definitions
+} from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps, HostComponent } from 'react-native';
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import type { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
+  name: string
+) => HostComponent<T>;
+
+interface NativeProps extends ViewProps {
+  exclusive?: WithDefault<boolean, true>;
+  foreground?: boolean;
+  borderless?: boolean;
+  enabled?: WithDefault<boolean, true>;
+  rippleColor?: ColorValue;
+  rippleRadius?: Int32;
+}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/fabric/RNGestureHandlerRootViewNativeComponent.ts

@@ -0,0 +1,12 @@
+// @ts-ignore TODO: remove once there is a .d.ts file with definitions
+import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, HostComponent } from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const codegenNativeComponent = codegenNativeComponentUntyped as <T extends {}>(
+  name: string
+) => HostComponent<T>;
+
+interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNGestureHandlerRootView');

package/src/getShadowNodeFromRef.ts

@@ -2,17 +2,20 @@
 // 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
-}
+let findHostInstance_DEPRECATED: (ref: any) => void;
 
 export function getShadowNodeFromRef(ref: any) {
+  // load findHostInstance_DEPRECATED lazily because it may not be available before render
+  if (findHostInstance_DEPRECATED === undefined) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      findHostInstance_DEPRECATED = require('react-native/Libraries/Renderer/shims/ReactFabric')
+        .findHostInstance_DEPRECATED;
+    } catch (e) {
+      findHostInstance_DEPRECATED = (_ref: any) => null;
+    }
+  }
+
   // @ts-ignore Fabric
   return findHostInstance_DEPRECATED(ref)._internalInstanceHandle.stateNode
     .node;

package/src/handlers/createHandler.ts

@@ -23,9 +23,10 @@ import {
   GestureEvent,
   HandlerStateChangeEvent,
   findNodeHandle,
+  scheduleFlushOperations,
 } from './gestureHandlerCommon';
 import { ValueOf } from '../typeUtils';
-import { isFabric, isJestEnv, tagMessage } from '../utils';
+import { isFabric, isJestEnv } from '../utils';
 import { ActionType } from '../ActionType';
 
 const UIManagerAny = UIManager as any;
@@ -147,18 +148,6 @@ 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>,
@@ -199,9 +188,6 @@ export default function createHandler<
         }
         handlerIDToTag[props.id] = this.handlerTag;
       }
-      if (__DEV__ && !isJestEnv()) {
-        showRngh2NoticeIfNeeded();
-      }
     }
 
     componentDidMount() {
@@ -251,6 +237,7 @@ export default function createHandler<
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
+      scheduleFlushOperations();
       if (this.updateEnqueued) {
         clearImmediate(this.updateEnqueued);
       }
@@ -361,6 +348,8 @@ export default function createHandler<
           actionType
         );
       }
+
+      scheduleFlushOperations();
     };
 
     private updateGestureHandler = (
@@ -369,6 +358,7 @@ export default function createHandler<
       this.config = newConfig;
 
       RNGestureHandlerModule.updateGestureHandler(this.handlerTag, newConfig);
+      scheduleFlushOperations();
     };
 
     private update() {
@@ -494,7 +484,7 @@ export default function createHandler<
                 handlerTag: this.handlerTag,
               }
             : {}),
-          testID: this.props.testID,
+          testID: this.props.testID ?? child.props.testID,
           ...events,
         },
         grandChildren

package/src/handlers/gestureHandlerCommon.ts

@@ -6,16 +6,18 @@ import * as React from 'react';
 import { Platform, findNodeHandle as findNodeHandleRN } from 'react-native';
 
 import { State } from '../State';
-import { EventType } from '../EventType';
+import { TouchEventType } from '../TouchEventType';
 import { ValueOf } from '../typeUtils';
 import { handlerIDToTag } from './handlersRegistry';
 import { toArray } from '../utils';
+import RNGestureHandlerModule from '../RNGestureHandlerModule';
 
 const commonProps = [
   'id',
   'enabled',
   'shouldCancelWhenOutside',
   'hitSlop',
+  'cancelsTouchesInView',
 ] as const;
 
 const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
@@ -83,7 +85,7 @@ export type GestureTouchEvent = {
   handlerTag: number;
   numberOfTouches: number;
   state: ValueOf<typeof State>;
-  eventType: EventType;
+  eventType: TouchEventType;
   allTouches: TouchData[];
   changedTouches: TouchData[];
 };
@@ -111,6 +113,7 @@ export type BaseGestureHandlerProps<
   waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
   simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
   testID?: string;
+  cancelsTouchesInView?: boolean;
   // TODO(TS) - fix event types
   onBegan?: (event: HandlerStateChangeEvent) => void;
   onFailed?: (event: HandlerStateChangeEvent) => void;
@@ -180,3 +183,17 @@ export function findNodeHandle(
   if (Platform.OS === 'web') return node;
   return findNodeHandleRN(node);
 }
+
+let scheduledFlushOperationsId: ReturnType<
+  typeof requestAnimationFrame
+> | null = null;
+
+export function scheduleFlushOperations() {
+  if (scheduledFlushOperationsId === null) {
+    scheduledFlushOperationsId = requestAnimationFrame(() => {
+      RNGestureHandlerModule.flushOperations();
+
+      scheduledFlushOperationsId = null;
+    });
+  }
+}