react-native-gesture-handler 2.2.0 → 2.3.0

package/lib/typescript/handlers/gestureHandlerCommon.d.ts

@@ -9,10 +9,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>;
 }
 export declare 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>;
@@ -48,6 +45,7 @@ export declare type BaseGestureHandlerProps<ExtraEventPayloadT extends Record<st
     id?: string;
     waitFor?: React.Ref<unknown> | React.Ref<unknown>[];
     simultaneousHandlers?: React.Ref<unknown> | React.Ref<unknown>[];
+    testID?: string;
     onBegan?: (event: HandlerStateChangeEvent) => void;
     onFailed?: (event: HandlerStateChangeEvent) => void;
     onCancelled?: (event: HandlerStateChangeEvent) => void;

package/lib/typescript/handlers/gestures/GestureDetector.d.ts

@@ -2,12 +2,15 @@ import React from 'react';
 import { GestureType, HandlerCallbacks } from './gesture';
 import { SharedValue } from './reanimatedWrapper';
 import { ComposedGesture } from './gestureComposition';
+declare global {
+    function isFormsStackingContext(node: unknown): boolean | null;
+}
 export declare type GestureConfigReference = {
     config: GestureType[];
     animatedEventHandler: unknown;
     animatedHandlers: SharedValue<HandlerCallbacks<Record<string, unknown>>[] | null> | null;
     firstExecution: boolean;
-    useAnimated: boolean;
+    useReanimatedHook: boolean;
 };
 interface GestureDetectorProps {
     gesture?: ComposedGesture | GestureType;

package/lib/typescript/handlers/gestures/forceTouchGesture.d.ts

@@ -1,7 +1,7 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { ForceTouchGestureConfig, ForceTouchGestureHandlerEventPayload } from '../ForceTouchGestureHandler';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
-declare type ForceTouchGestureChangeEventPayload = {
+export declare type ForceTouchGestureChangeEventPayload = {
     forceChange: number;
 };
 export declare class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGestureHandlerEventPayload, ForceTouchGestureChangeEventPayload> {
@@ -13,4 +13,3 @@ export declare class ForceTouchGesture extends ContinousBaseGesture<ForceTouchGe
     onChange(callback: (event: GestureUpdateEvent<GestureUpdateEvent<ForceTouchGestureHandlerEventPayload & ForceTouchGestureChangeEventPayload>>) => void): this;
 }
 export declare type ForceTouchGestureType = InstanceType<typeof ForceTouchGesture>;
-export {};

package/lib/typescript/handlers/gestures/gesture.d.ts

@@ -16,6 +16,8 @@ export interface BaseGestureConfig extends CommonGestureConfig, Record<string, u
     simultaneousWith?: GestureRef[];
     needsPointerData?: boolean;
     manualActivation?: boolean;
+    runOnJS?: boolean;
+    testId?: string;
 }
 declare type TouchEventHandlerType = (event: GestureTouchEvent, stateManager: GestureStateManagerType) => void;
 export declare type HandlerCallbacks<EventPayloadT extends Record<string, unknown>> = {
@@ -83,11 +85,14 @@ export declare abstract class BaseGesture<EventPayloadT extends Record<string, u
     enabled(enabled: boolean): this;
     shouldCancelWhenOutside(value: boolean): this;
     hitSlop(hitSlop: HitSlop): this;
+    runOnJS(runOnJS: boolean): this;
     simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]): this;
     requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]): this;
+    withTestId(id: string): this;
     initialize(): void;
     toGestureArray(): GestureType[];
     prepare(): void;
+    get shouldUseReanimated(): boolean;
 }
 export declare abstract class ContinousBaseGesture<EventPayloadT extends Record<string, unknown>, EventChangePayloadT extends Record<string, unknown>> extends BaseGesture<EventPayloadT> {
     onUpdate(callback: (event: GestureUpdateEvent<EventPayloadT>) => void): this;

package/lib/typescript/handlers/gestures/panGesture.d.ts

@@ -1,7 +1,7 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
 import { PanGestureConfig, PanGestureHandlerEventPayload } from '../PanGestureHandler';
-declare type PanGestureChangeEventPayload = {
+export declare type PanGestureChangeEventPayload = {
     changeX: number;
     changeY: number;
 };
@@ -23,4 +23,3 @@ export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEv
     onChange(callback: (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => void): this;
 }
 export declare type PanGestureType = InstanceType<typeof PanGesture>;
-export {};

package/lib/typescript/handlers/gestures/pinchGesture.d.ts

@@ -1,7 +1,7 @@
 import { ContinousBaseGesture } from './gesture';
 import { PinchGestureHandlerEventPayload } from '../PinchGestureHandler';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
-declare type PinchGestureChangeEventPayload = {
+export declare type PinchGestureChangeEventPayload = {
     scaleChange: number;
 };
 export declare class PinchGesture extends ContinousBaseGesture<PinchGestureHandlerEventPayload, PinchGestureChangeEventPayload> {
@@ -9,4 +9,3 @@ export declare class PinchGesture extends ContinousBaseGesture<PinchGestureHandl
     onChange(callback: (event: GestureUpdateEvent<PinchGestureHandlerEventPayload & PinchGestureChangeEventPayload>) => void): this;
 }
 export declare type PinchGestureType = InstanceType<typeof PinchGesture>;
-export {};

package/lib/typescript/handlers/handlersRegistry.d.ts

@@ -1,6 +1,14 @@
 import { GestureType } from './gestures/gesture';
+import { GestureEvent, HandlerStateChangeEvent } from './gestureHandlerCommon';
 export declare const handlerIDToTag: Record<string, number>;
 export declare function getNextHandlerTag(): number;
-export declare function registerHandler(handlerTag: number, handler: GestureType): void;
-export declare function unregisterHandler(handlerTag: number): void;
-export declare function findHandler(handlerTag: number): import("./gestures/gesture").BaseGesture<Record<string, unknown>> | import("./gestures/gesture").BaseGesture<Record<string, never>> | import("./gestures/gesture").BaseGesture<import("./TapGestureHandler").TapGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./PanGestureHandler").PanGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./LongPressGestureHandler").LongPressGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./RotationGestureHandler").RotationGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./PinchGestureHandler").PinchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./FlingGestureHandler").FlingGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./ForceTouchGestureHandler").ForceTouchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./NativeViewGestureHandler").NativeViewGestureHandlerPayload> | undefined;
+export declare function registerHandler(handlerTag: number, handler: GestureType, testID?: string): void;
+export declare function registerOldGestureHandler(handlerTag: number, handler: GestureHandlerCallbacks): void;
+export declare function unregisterHandler(handlerTag: number, testID?: string): void;
+export declare function findHandler(handlerTag: number): GestureType | undefined;
+export declare function findOldGestureHandler(handlerTag: number): GestureHandlerCallbacks | undefined;
+export declare function findHandlerByTestID(testID: string): import("./gestures/gesture").BaseGesture<Record<string, unknown>> | import("./gestures/gesture").BaseGesture<Record<string, never>> | import("./gestures/gesture").BaseGesture<import("./TapGestureHandler").TapGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./PanGestureHandler").PanGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./LongPressGestureHandler").LongPressGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./RotationGestureHandler").RotationGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./PinchGestureHandler").PinchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./ForceTouchGestureHandler").ForceTouchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./NativeViewGestureHandler").NativeViewGestureHandlerPayload> | null;
+export interface GestureHandlerCallbacks {
+    onGestureEvent: (event: GestureEvent<any>) => void;
+    onGestureStateChange: (event: HandlerStateChangeEvent<any>) => void;
+}

package/lib/typescript/index.d.ts

@@ -1,14 +1,18 @@
 export { Directions } from './Directions';
 export { State } from './State';
+export { getByGestureTestId, fireGestureHandler } from './jestUtils';
 export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
 export { default as GestureHandlerRootView } from './GestureHandlerRootView';
 export type { GestureEvent, HandlerStateChangeEvent, GestureEventPayload, HandlerStateChangeEventPayload, GestureTouchEvent, TouchData, GestureUpdateEvent, GestureStateChangeEvent, } from './handlers/gestureHandlerCommon';
 export type { GestureType } from './handlers/gestures/gesture';
 export type { TapGestureHandlerEventPayload, TapGestureHandlerProps, } from './handlers/TapGestureHandler';
 export type { ForceTouchGestureHandlerEventPayload, ForceTouchGestureHandlerProps, } from './handlers/ForceTouchGestureHandler';
+export type { ForceTouchGestureChangeEventPayload } from './handlers/gestures/forceTouchGesture';
 export type { LongPressGestureHandlerEventPayload, LongPressGestureHandlerProps, } from './handlers/LongPressGestureHandler';
 export type { PanGestureHandlerEventPayload, PanGestureHandlerProps, } from './handlers/PanGestureHandler';
+export type { PanGestureChangeEventPayload } from './handlers/gestures/panGesture';
 export type { PinchGestureHandlerEventPayload, PinchGestureHandlerProps, } from './handlers/PinchGestureHandler';
+export type { PinchGestureChangeEventPayload } from './handlers/gestures/pinchGesture';
 export type { RotationGestureHandlerEventPayload, RotationGestureHandlerProps, } from './handlers/RotationGestureHandler';
 export type { FlingGestureHandlerEventPayload, FlingGestureHandlerProps, } from './handlers/FlingGestureHandler';
 export { TapGestureHandler } from './handlers/TapGestureHandler';

package/lib/typescript/jestUtils.d.ts

@@ -0,0 +1,28 @@
+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';
+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;
+declare type ClassComponentConstructor<P> = new (props: P) => React.Component<P, any, any>;
+declare type ExtractPayloadFromProps<T> = T extends BaseGestureHandlerProps<infer TPayload> ? TPayload : never;
+declare type ExtractConfig<T> = T extends BaseGesture<infer TGesturePayload> ? TGesturePayload : T extends ClassComponentConstructor<infer THandlerProps> ? ExtractPayloadFromProps<THandlerProps> : Record<string, unknown>;
+export declare function fireGestureHandler<THandler extends AllGestures | AllHandlers>(componentOrGesture: ReactTestInstance | GestureType, eventList?: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[]): void;
+export declare function getByGestureTestId(testID: string): BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload>;
+export {};

package/lib/typescript/utils.d.ts

@@ -1 +1,7 @@
 export declare function toArray<T>(object: T | T[]): T[];
+export declare type withPrevAndCurrentMapFn<T, Transformed> = (previous: Transformed | null, current: T) => Transformed;
+export declare function withPrevAndCurrent<T, Transformed>(array: T[], mapFn: withPrevAndCurrentMapFn<T, Transformed>): Transformed[];
+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;

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

@@ -1,4 +1,3 @@
-import Hammer from '@egjs/hammerjs';
 export declare const CONTENT_TOUCHES_DELAY = 240;
 export declare const CONTENT_TOUCHES_QUICK_TAP_END_DELAY = 50;
 export declare const MULTI_FINGER_PAN_MAX_PINCH_THRESHOLD = 0.1;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build",
     "test": "jest",
-    "build": "yarn tsc",
+    "build": "yarn tsc -p tsconfig.build.json",
     "precommit": "lint-staged",
     "release": "npm login && release-it",
     "ts-check": "yarn tsc --noEmit",
@@ -25,6 +25,9 @@
     "android/gradle.properties",
     "android/src/main/AndroidManifest.xml",
     "android/src/main/java/",
+    "android/src/main/jni/",
+    "android/src/fabric/java",
+    "android/src/paper/java",
     "android/lib/build.gradle",
     "android/lib/src/main/java/",
     "android/common/src/main/java/",
@@ -57,7 +60,7 @@
     "prop-types": "^15.7.2"
   },
   "jest": {
-    "preset": "jest-react-native",
+    "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/lib/"
     ]
@@ -68,36 +71,41 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@testing-library/jest-native": "^4.0.4",
+    "@testing-library/react-native": "^9.0.0",
     "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^27.0.3",
     "@types/react": "^17.0.0",
     "@types/react-native": "^0.64.2",
     "@types/react-test-renderer": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.10.0",
-    "@typescript-eslint/parser": "^4.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
     "babel-jest": "^26.6.3",
     "eslint": "^7.15.0",
     "eslint-config-satya164": "^3.1.8",
     "eslint-import-resolver-babel-module": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^26.0.0",
     "expo": "^35.0.1",
-    "flow-bin": "^0.98.0",
     "husky": "^0.14.3",
-    "jest": "^24.7.1",
-    "jest-react-native": "16.0.0",
-    "lint-staged": "^10.2.11",
+    "jest": "^26.6.3",
+    "lint-staged": "^12.3.2",
     "metro-react-native-babel-preset": "^0.64.0",
     "prettier": "^2.2.1",
     "react": "^16.8.6",
     "react-dom": "^16.12.0",
     "react-native": "^0.64.0",
     "react-native-builder-bob": "^0.17.1",
-    "react-native-reanimated": "^2.0.0",
+    "react-native-reanimated": "^2.3.1",
     "react-native-web": "^0.11.7",
-    "react-test-renderer": "16.8.6",
+    "react-test-renderer": "17.0.2",
     "release-it": "^13.6.5",
-    "typescript": "^4.1.2"
+    "typescript": "^4.5.5"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -117,11 +125,26 @@
     "targets": [
       "commonjs",
       "module",
-      "typescript"
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
     ]
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/"
-  ]
+    "lib/",
+    "src/fabric/*NativeComponent.js"
+  ],
+  "codegenConfig": {
+    "libraries": [
+      {
+        "name": "rngesturehandler",
+        "type": "components",
+        "jsSrcsDir": "./src/fabric"
+      }
+    ]
+  }
 }

package/src/ActionType.ts

@@ -0,0 +1,9 @@
+export const ActionType = {
+  REANIMATED_WORKLET: 1,
+  NATIVE_ANIMATED_EVENT: 2,
+  JS_FUNCTION_OLD_API: 3,
+  JS_FUNCTION_NEW_API: 4,
+} 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 ActionType = typeof ActionType[keyof typeof ActionType];

package/src/GestureHandlerRootView.android.tsx

@@ -1,18 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import * as React from 'react';
-import { requireNativeComponent } from 'react-native';
-import { GestureHandlerRootViewProps } from './GestureHandlerRootView';
+import { PropsWithChildren } from 'react';
+import { requireNativeComponent, ViewProps } from 'react-native';
+import { isFabric } from './utils';
 
-const GestureHandlerRootViewNative = requireNativeComponent(
-  'GestureHandlerRootView'
-);
+const GestureHandlerRootViewNativeComponent = isFabric()
+  ? require('./fabric/RNGestureHandlerRootViewNativeComponent').default
+  : requireNativeComponent('RNGestureHandlerRootView');
 
-export default function GestureHandlerRootView({
-  children,
-  ...rest
-}: GestureHandlerRootViewProps) {
-  return (
-    <GestureHandlerRootViewNative {...rest}>
-      {children}
-    </GestureHandlerRootViewNative>
-  );
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  return <GestureHandlerRootViewNativeComponent {...props} />;
 }

package/src/GestureHandlerRootView.tsx

@@ -5,8 +5,8 @@ import { View, ViewProps } from 'react-native';
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView({
-  ...rest
-}: GestureHandlerRootViewProps) {
-  return <View {...rest} />;
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  return <View {...props} />;
 }

package/src/RNGestureHandlerModule.ts

@@ -1,14 +1,18 @@
 import { NativeModules } from 'react-native';
+import { ActionType } from './ActionType';
+import { tagMessage } from './utils';
 const { RNGestureHandlerModule } = NativeModules;
 
 if (RNGestureHandlerModule == null) {
   console.error(
-    `react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
+    tagMessage(
+      `react-native-gesture-handler module was not found. Make sure you're running your app on the native platform and your code is linked properly (cd ios && pod install && cd ..).
 
-    For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation`
-      .split('\n')
-      .map((line) => line.trim())
-      .join('\n')
+      For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation`
+        .split('\n')
+        .map((line) => line.trim())
+        .join('\n')
+    )
   );
 }
 
@@ -23,13 +27,14 @@ export type RNGestureHandlerModuleProps = {
   attachGestureHandler: (
     handlerTag: number,
     newView: number,
-    usingDeviceEvents: boolean
+    actionType: ActionType
   ) => void;
   updateGestureHandler: (
     handlerTag: number,
     newConfig: Readonly<Record<string, unknown>>
   ) => void;
   dropGestureHandler: (handlerTag: number) => void;
+  install: () => void;
 };
 
 export default RNGestureHandlerModule as RNGestureHandlerModuleProps;

package/src/RNGestureHandlerModule.web.ts

@@ -1,3 +1,4 @@
+import { ActionType } from './ActionType';
 import { Direction } from './web/constants';
 import FlingGestureHandler from './web/FlingGestureHandler';
 import LongPressGestureHandler from './web/LongPressGestureHandler';
@@ -44,7 +45,7 @@ export default {
   attachGestureHandler(
     handlerTag: number,
     newView: number,
-    _usingDeviceEvents: boolean,
+    _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
     NodeManager.getHandler(handlerTag).setView(newView, propsRef);

package/src/components/DrawerLayout.tsx

@@ -490,7 +490,8 @@ export default class DrawerLayout extends Component<
       // TODO: decide if it should be null or undefined is the proper value
       undefined,
       this.props.drawerWidth!,
-      options.velocity ? options.velocity : 0
+      options.velocity ? options.velocity : 0,
+      options.speed
     );
 
     // We need to force the update, otherwise the overlay is not rerendered and
@@ -500,7 +501,12 @@ export default class DrawerLayout extends Component<
 
   closeDrawer = (options: DrawerMovementOption = {}) => {
     // TODO: decide if it should be null or undefined is the proper value
-    this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
+    this.animateDrawer(
+      undefined,
+      0,
+      options.velocity ? options.velocity : 0,
+      options.speed
+    );
 
     // We need to force the update, otherwise the overlay is not rerendered and
     // it would be still clickable

package/src/components/GestureHandlerButton.tsx

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

package/src/components/Swipeable.tsx

@@ -90,11 +90,15 @@ export interface SwipeableProps
   overshootFriction?: number;
 
   /**
+   * @deprecated Use `direction` argument of onSwipeableOpen()
+   *
    * Called when left action panel gets open.
    */
   onSwipeableLeftOpen?: () => void;
 
   /**
+   * @deprecated Use `direction` argument of onSwipeableOpen()
+   *
    * Called when right action panel gets open.
    */
   onSwipeableRightOpen?: () => void;
@@ -102,19 +106,23 @@ export interface SwipeableProps
   /**
    * Called when action panel gets open (either right or left).
    */
-  onSwipeableOpen?: () => void;
+  onSwipeableOpen?: (direction: 'left' | 'right') => void;
 
   /**
    * Called when action panel is closed.
    */
-  onSwipeableClose?: () => void;
+  onSwipeableClose?: (direction: 'left' | 'right') => void;
 
   /**
+   * @deprecated Use `direction` argument of onSwipeableWillOpen()
+   *
    * Called when left action panel starts animating on open.
    */
   onSwipeableLeftWillOpen?: () => void;
 
   /**
+   * @deprecated Use `direction` argument of onSwipeableWillOpen()
+   *
    * Called when right action panel starts animating on open.
    */
   onSwipeableRightWillOpen?: () => void;
@@ -122,12 +130,12 @@ export interface SwipeableProps
   /**
    * Called when action panel starts animating on open (either right or left).
    */
-  onSwipeableWillOpen?: () => void;
+  onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
 
   /**
    * Called when action panel starts animating on close.
    */
-  onSwipeableWillClose?: () => void;
+  onSwipeableWillClose?: (direction: 'left' | 'right') => void;
 
   /**
    *
@@ -369,29 +377,27 @@ export default class Swipeable extends Component<
       ...this.props.animationOptions,
     }).start(({ finished }) => {
       if (finished) {
-        if (toValue > 0 && this.props.onSwipeableLeftOpen) {
-          this.props.onSwipeableLeftOpen();
-        } else if (toValue < 0 && this.props.onSwipeableRightOpen) {
-          this.props.onSwipeableRightOpen();
-        }
-
-        if (toValue === 0) {
-          this.props.onSwipeableClose?.();
+        if (toValue > 0) {
+          this.props.onSwipeableLeftOpen?.();
+          this.props.onSwipeableOpen?.('left');
+        } else if (toValue < 0) {
+          this.props.onSwipeableRightOpen?.();
+          this.props.onSwipeableOpen?.('right');
         } else {
-          this.props.onSwipeableOpen?.();
+          const closingDirection = fromValue > 0 ? 'left' : 'right';
+          this.props.onSwipeableClose?.(closingDirection);
         }
       }
     });
-    if (toValue > 0 && this.props.onSwipeableLeftWillOpen) {
-      this.props.onSwipeableLeftWillOpen();
-    } else if (toValue < 0 && this.props.onSwipeableRightWillOpen) {
-      this.props.onSwipeableRightWillOpen();
-    }
-
-    if (toValue === 0) {
-      this.props.onSwipeableWillClose?.();
+    if (toValue > 0) {
+      this.props.onSwipeableLeftWillOpen?.();
+      this.props.onSwipeableWillOpen?.('left');
+    } else if (toValue < 0) {
+      this.props.onSwipeableRightWillOpen?.();
+      this.props.onSwipeableWillOpen?.('right');
     } else {
-      this.props.onSwipeableWillOpen?.();
+      const closingDirection = fromValue > 0 ? 'left' : 'right';
+      this.props.onSwipeableWillClose?.(closingDirection);
     }
   };
 

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;
+}