@react-native-oh-tpl/react-native-gesture-handler 2.12.1-0.0.1

package/lib/typescript/web_hammer/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const isnan: (v: unknown) => boolean;
+export declare const isValidNumber: (v: unknown) => boolean;
+export declare const TEST_MIN_IF_NOT_NAN: (value: number, limit: number) => boolean;
+export declare const VEC_LEN_SQ: ({ x, y }?: {
+    x?: number | undefined;
+    y?: number | undefined;
+}) => number;
+export declare const TEST_MAX_IF_NOT_NAN: (value: number, max: number) => boolean;
+export declare function fireAfterInterval(method: () => void, interval?: number | boolean): number | null;

package/package.json

@@ -0,0 +1,156 @@
+{
+  "name": "@react-native-oh-tpl/react-native-gesture-handler",
+  "version": "2.12.1-0.0.1",
+  "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
+  "scripts": {
+    "prepare": "bob build && husky install",
+    "test": "jest",
+    "build": "yarn tsc -p tsconfig.build.json",
+    "precommit": "lint-staged",
+    "release": "npm login && release-it",
+    "ts-check": "yarn tsc --noEmit",
+    "format:js": "prettier --write --list-different './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "format:android": "node ./scripts/format-android.js",
+    "format:ios": "find ios/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
+    "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src && yarn prettier --check './{src,example,FabricExample}/**/*.{js,jsx,ts,tsx}'",
+    "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'",
+    "lint:android": "./android/gradlew -p android spotlessCheck -q"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "react-native": "src/index.ts",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "android/build.gradle",
+    "android/gradle.properties",
+    "android/src/main/AndroidManifest.xml",
+    "android/src/main/java/",
+    "android/src/main/jni/",
+    "android/fabric/src/main/java",
+    "android/paper/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",
+    "RNGestureHandler.podspec"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-oh-library/react-native-gesture-handler.git"
+  },
+  "author": {
+    "email": "krzys.magiera@gmail.com",
+    "name": "Krzysztof Magiera"
+  },
+  "license": "MIT",
+  "readmeFilename": "README.md",
+  "bugs": {
+    "url": "https://github.com/software-mansion/react-native-gesture-handler/issues"
+  },
+  "homepage": "https://github.com/software-mansion/react-native-gesture-handler#readme",
+  "dependencies": {
+    "@egjs/hammerjs": "^2.0.17",
+    "hoist-non-react-statics": "^3.3.0",
+    "invariant": "^2.2.4",
+    "lodash": "^4.17.21",
+    "prop-types": "^15.7.2"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/runtime": "^7.12.5",
+    "@react-native/babel-preset": "^0.73.18",
+    "@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": "^27.0.3",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "babel-jest": "^26.6.3",
+    "clang-format": "^1.8.0",
+    "eslint": "^7.32.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",
+    "husky": "^8.0.1",
+    "jest": "^26.6.3",
+    "lint-staged": "^12.3.2",
+    "prettier": "^2.7.1",
+    "react": "18.2.0",
+    "react-dom": "^16.12.0",
+    "react-native": "0.73.0-rc.5",
+    "react-native-builder-bob": "^0.17.1",
+    "react-native-reanimated": "^2.3.1",
+    "react-native-web": "^0.11.7",
+    "react-test-renderer": "17.0.2",
+    "release-it": "^13.6.5",
+    "typescript": "5.0.4"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "lint-staged": {
+    "./{src,example,FabricExample}/**/*.{ts,tsx}": "yarn format:js",
+    "android/**/*.kt": "yarn format:android",
+    "ios/**/*.{h,m,mm,cpp}": "yarn format:ios"
+  },
+  "release-it": {
+    "hooks": {
+      "before:git:bump": [
+        "# check if version corresponds to changes in native files  \n if git diff --name-only ${latestVersion} HEAD | egrep \"(android/.*)|(ios/.*)\" -q; then egrep '\\.0$' -q <<< ${version}; else test $? -eq 1; fi"
+      ]
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "src/specs/*NativeComponent.js"
+  ],
+  "codegenConfig": {
+    "name": "rngesturehandler_codegen",
+    "type": "components",
+    "jsSrcsDir": "./src/specs"
+  }
+}

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/Directions.ts

@@ -0,0 +1,9 @@
+export const Directions = {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+} 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 Directions = typeof Directions[keyof typeof Directions];

package/src/EnableNewWebImplementation.ts

@@ -0,0 +1,35 @@
+import { Platform } from 'react-native';
+
+let useNewWebImplementation = true;
+let getWasCalled = false;
+
+export function enableExperimentalWebImplementation(
+  _shouldEnable = true
+): void {
+  // NO-OP since the new implementation is now the default
+}
+
+export function enableLegacyWebImplementation(
+  shouldUseLegacyImplementation = true
+): void {
+  if (
+    Platform.OS !== 'web' ||
+    useNewWebImplementation === !shouldUseLegacyImplementation
+  ) {
+    return;
+  }
+
+  if (getWasCalled) {
+    console.error(
+      'Some parts of this application have already started using the new gesture handler implementation. No changes will be applied. You can try enabling legacy implementation earlier.'
+    );
+    return;
+  }
+
+  useNewWebImplementation = !shouldUseLegacyImplementation;
+}
+
+export function isNewWebImplementationEnabled(): boolean {
+  getWasCalled = true;
+  return useNewWebImplementation;
+}

package/src/GestureHandlerRootViewContext.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext(false);

package/src/PlatformConstants.ts

@@ -0,0 +1,8 @@
+import { NativeModules, Platform } from 'react-native';
+
+type PlatformConstants = {
+  forceTouchAvailable: boolean;
+};
+
+export default (NativeModules?.PlatformConstants ??
+  Platform.constants) as PlatformConstants;

package/src/PlatformConstants.web.ts

@@ -0,0 +1,5 @@
+export default {
+  get forceTouchAvailable() {
+    return false;
+  },
+};

package/src/RNGestureHandlerModule.macos.ts

@@ -0,0 +1,133 @@
+import { ActionType } from './ActionType';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+
+export const Gestures = {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+  TapGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  ManualGestureHandler,
+};
+
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};
+
+export default {
+  handleSetJSResponder(_tag: number, _blockNativeResponder: boolean) {
+    // NO-OP
+  },
+  handleClearJSResponder() {
+    // NO-OP
+  },
+  createGestureHandler<T>(
+    handlerName: keyof typeof Gestures,
+    handlerTag: number,
+    config: T
+  ) {
+    if (isNewWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        config as unknown as Config
+      );
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
+  },
+  attachGestureHandler(
+    handlerTag: number,
+    newView: number,
+    _actionType: ActionType,
+    propsRef: React.RefObject<unknown>
+  ) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
+  },
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
+  },
+  getGestureHandlerNode(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
+  },
+  dropGestureHandler(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
+};

package/src/RNGestureHandlerModule.ts

@@ -0,0 +1,50 @@
+import { NativeModules } from 'react-native';
+import { ActionType } from './ActionType';
+import { tagMessage } from './utils';
+const { RNGestureHandlerModule } = NativeModules;
+
+if (RNGestureHandlerModule == null) {
+  console.error(
+    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')
+    )
+  );
+}
+
+if (
+  RNGestureHandlerModule &&
+  RNGestureHandlerModule.flushOperations === undefined
+) {
+  RNGestureHandlerModule.flushOperations = () => {
+    // NO-OP if not defined
+  };
+}
+
+export type RNGestureHandlerModuleProps = {
+  handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
+  handleClearJSResponder: () => void;
+  createGestureHandler: (
+    handlerName: string,
+    handlerTag: number,
+    config: Readonly<Record<string, unknown>>
+  ) => void;
+  attachGestureHandler: (
+    handlerTag: number,
+    newView: number,
+    actionType: ActionType
+  ) => void;
+  updateGestureHandler: (
+    handlerTag: number,
+    newConfig: Readonly<Record<string, unknown>>
+  ) => void;
+  dropGestureHandler: (handlerTag: number) => void;
+  install: () => void;
+  flushOperations: () => void;
+};
+
+export default RNGestureHandlerModule as RNGestureHandlerModuleProps;

package/src/RNGestureHandlerModule.web.ts

@@ -0,0 +1,146 @@
+import React from 'react';
+
+import { ActionType } from './ActionType';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+import ManualGestureHandler from './web/handlers/ManualGestureHandler';
+import HoverGestureHandler from './web/handlers/HoverGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web/interfaces';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+
+export const Gestures = {
+  NativeViewGestureHandler,
+  PanGestureHandler,
+  TapGestureHandler,
+  LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
+  FlingGestureHandler,
+  ManualGestureHandler,
+  HoverGestureHandler,
+};
+
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};
+
+export default {
+  handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
+  },
+  handleClearJSResponder() {
+    console.warn('handleClearJSResponder: ');
+  },
+  createGestureHandler<T>(
+    handlerName: keyof typeof Gestures,
+    handlerTag: number,
+    config: T
+  ) {
+    if (isNewWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        config as unknown as Config
+      );
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
+  },
+  attachGestureHandler(
+    handlerTag: number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    newView: any,
+    _actionType: ActionType,
+    propsRef: React.RefObject<unknown>
+  ) {
+    if (
+      !(newView instanceof HTMLElement || newView instanceof React.Component)
+    ) {
+      return;
+    }
+
+    if (isNewWebImplementationEnabled()) {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
+  },
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
+  },
+  getGestureHandlerNode(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
+  },
+  dropGestureHandler(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
+};