react-native-gesture-handler 1.10.1 → 2.1.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "1.10.1",
+  "version": "2.1.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
-    "prepare": "rm -r dist/ ; yarn build",
+    "prepare": "bob build",
     "test": "jest",
     "build": "yarn tsc",
     "precommit": "lint-staged",
@@ -11,19 +11,24 @@
     "ts-check": "yarn tsc --noEmit",
     "lint-check": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check src/"
   },
-  "react-native": "index",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "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/lib/build.gradle",
     "android/lib/src/main/java/",
+    "android/common/src/main/java/",
     "ios/",
-    "src/",
-    "dist/",
-    "index.ts",
     "Swipeable/",
     "DrawerLayout/",
     "README.md",
@@ -46,14 +51,16 @@
   "homepage": "https://github.com/software-mansion/react-native-gesture-handler#readme",
   "dependencies": {
     "@egjs/hammerjs": "^2.0.17",
-    "@types/hammerjs": "^2.0.38",
-    "fbjs": "^3.0.0",
     "hoist-non-react-statics": "^3.3.0",
     "invariant": "^2.2.4",
+    "lodash": "^4.17.21",
     "prop-types": "^15.7.2"
   },
   "jest": {
-    "preset": "jest-react-native"
+    "preset": "jest-react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -61,10 +68,11 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/runtime": "^7.12.5",
+    "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^26.0.19",
     "@types/react": "^17.0.0",
-    "@types/react-native": "^0.63.44",
+    "@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",
@@ -83,14 +91,16 @@
     "prettier": "^2.2.1",
     "react": "^16.8.6",
     "react-dom": "^16.12.0",
-    "react-native": "^0.63.4",
+    "react-native": "^0.64.0",
+    "react-native-builder-bob": "^0.17.1",
+    "react-native-reanimated": "^2.0.0",
     "react-native-web": "^0.11.7",
     "react-test-renderer": "16.8.6",
     "release-it": "^13.6.5",
     "typescript": "^4.1.2"
   },
   "lint-staged": {
-    "*.js": [
+    "*.{ts,tsx}": [
       "prettier --write"
     ]
   },
@@ -100,5 +110,18 @@
         "# 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"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ]
 }

package/src/Directions.ts

@@ -1,3 +1,9 @@
-import RNGestureHandlerModule from './RNGestureHandlerModule';
+export const Directions = {
+  RIGHT: 1,
+  LEFT: 2,
+  UP: 4,
+  DOWN: 8,
+} as const;
 
-export default RNGestureHandlerModule.Direction;
+// 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/EventType.ts

@@ -0,0 +1,10 @@
+export const EventType = {
+  UNDETERMINED: 0,
+  TOUCHES_DOWN: 1,
+  TOUCHES_MOVE: 2,
+  TOUCHES_UP: 3,
+  TOUCHES_CANCELLED: 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 EventType = typeof EventType[keyof typeof EventType];

package/src/GestureHandlerRootView.android.tsx

@@ -1,34 +1,18 @@
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { View, requireNativeComponent } from 'react-native';
+import { requireNativeComponent } from 'react-native';
+import { GestureHandlerRootViewProps } from './GestureHandlerRootView';
 
 const GestureHandlerRootViewNative = requireNativeComponent(
   'GestureHandlerRootView'
 );
 
-const GestureHandlerRootViewContext = React.createContext(false);
-
-type Props = PropsWithChildren<Record<string, unknown>>;
-
-export default function GestureHandlerRootView({ children, ...rest }: Props) {
+export default function GestureHandlerRootView({
+  children,
+  ...rest
+}: GestureHandlerRootViewProps) {
   return (
-    <GestureHandlerRootViewContext.Consumer>
-      {(available) => {
-        if (available) {
-          // If we already have a parent wrapped in the gesture handler root view,
-          // We don't need to wrap it again in root view
-          // We still wrap it in a normal view so our styling stays the same
-          return <View {...rest}>{children}</View>;
-        }
-
-        return (
-          <GestureHandlerRootViewContext.Provider value>
-            <GestureHandlerRootViewNative {...rest}>
-              {children}
-            </GestureHandlerRootViewNative>
-          </GestureHandlerRootViewContext.Provider>
-        );
-      }}
-    </GestureHandlerRootViewContext.Consumer>
+    <GestureHandlerRootViewNative {...rest}>
+      {children}
+    </GestureHandlerRootViewNative>
   );
 }

package/src/GestureHandlerRootView.tsx

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

package/src/PlatformConstants.ts

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

package/src/RNGestureHandlerModule.ts

@@ -1,16 +1,18 @@
 import { NativeModules } from 'react-native';
-
 const { RNGestureHandlerModule } = NativeModules;
 
-type Directions = Readonly<{
-  RIGHT: 1;
-  LEFT: 2;
-  UP: 4;
-  DOWN: 8;
-}>;
+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 ..).
+
+    For installation instructions, please refer to https://docs.swmansion.com/react-native-gesture-handler/docs/#installation`
+      .split('\n')
+      .map((line) => line.trim())
+      .join('\n')
+  );
+}
 
 export type RNGestureHandlerModuleProps = {
-  Direction: Directions;
   handleSetJSResponder: (tag: number, blockNativeResponder: boolean) => void;
   handleClearJSResponder: () => void;
   createGestureHandler: (
@@ -18,7 +20,11 @@ export type RNGestureHandlerModuleProps = {
     handlerTag: number,
     config: Readonly<Record<string, unknown>>
   ) => void;
-  attachGestureHandler: (handlerTag: number, newView: number) => void;
+  attachGestureHandler: (
+    handlerTag: number,
+    newView: number,
+    usingDeviceEvents: boolean
+  ) => void;
   updateGestureHandler: (
     handlerTag: number,
     newConfig: Readonly<Record<string, unknown>>

package/src/RNGestureHandlerModule.web.ts

@@ -44,6 +44,7 @@ export default {
   attachGestureHandler(
     handlerTag: number,
     newView: number,
+    _usingDeviceEvents: boolean,
     propsRef: React.RefObject<unknown>
   ) {
     NodeManager.getHandler(handlerTag).setView(newView, propsRef);

package/src/components/DrawerLayout.tsx

@@ -1,10 +1,10 @@
 // This component is based on RN's DrawerLayoutAndroid API
 //
-// It perhaps deserves to be put in a separate repo, but since it relies
-// on react-native-gesture-handler library which isn't very popular at the
-// moment I decided to keep it here for the time being. It will allow us
-// to move faster and fix issues that may arise in gesture handler library
-// that could be found when using the drawer component
+// It perhaps deserves to be put in a separate repo, but since it relies on
+// react-native-gesture-handler library which isn't very popular at the moment I
+// decided to keep it here for the time being. It will allow us to move faster
+// and fix issues that may arise in gesture handler library that could be found
+// when using the drawer component
 
 import * as React from 'react';
 import { Component } from 'react';
@@ -25,12 +25,16 @@ import {
 
 import {
   GestureEvent,
+  HandlerStateChangeEvent,
+} from '../handlers/gestureHandlerCommon';
+import {
   PanGestureHandler,
   PanGestureHandlerEventPayload,
+} from '../handlers/PanGestureHandler';
+import {
   TapGestureHandler,
-  HandlerStateChangeEvent,
   TapGestureHandlerEventPayload,
-} from '../handlers/gestureHandlers';
+} from '../handlers/TapGestureHandler';
 import { State } from '../State';
 
 const DRAG_TOSS = 0.05;
@@ -50,16 +54,42 @@ export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
 export interface DrawerLayoutProps {
+  /**
+   * This attribute is present in the standard implementation already and is one
+   * of the required params. Gesture handler version of DrawerLayout make it
+   * possible for the function passed as `renderNavigationView` to take an
+   * Animated value as a parameter that indicates the progress of drawer
+   * opening/closing animation (progress value is 0 when closed and 1 when
+   * opened). This can be used by the drawer component to animated its children
+   * while the drawer is opening or closing.
+   */
   renderNavigationView: (
     progressAnimatedValue: Animated.Value
   ) => React.ReactNode;
+
   drawerPosition?: DrawerPosition;
+
   drawerWidth?: number;
+
   drawerBackgroundColor?: string;
+
   drawerLockMode?: DrawerLockMode;
+
   keyboardDismissMode?: DrawerKeyboardDismissMode;
+
+  /**
+   * Called when the drawer is closed.
+   */
   onDrawerClose?: () => void;
+
+  /**
+   * Called when the drawer is opened.
+   */
   onDrawerOpen?: () => void;
+
+  /**
+   * Called when the status of the drawer changes.
+   */
   onDrawerStateChanged?: (
     newState: DrawerState,
     drawerWillShow: boolean
@@ -67,15 +97,56 @@ export interface DrawerLayoutProps {
   useNativeAnimations?: boolean;
 
   drawerType?: DrawerType;
+
+  /**
+   * Defines how far from the edge of the content view the gesture should
+   * activate.
+   */
   edgeWidth?: number;
+
   minSwipeDistance?: number;
+
+  /**
+   * When set to true Drawer component will use
+   * {@link https://reactnative.dev/docs/statusbar StatusBar} API to hide the OS
+   * status bar whenever the drawer is pulled or when its in an "open" state.
+   */
   hideStatusBar?: boolean;
+
+  /**
+   * @default 'slide'
+   *
+   * Can be used when hideStatusBar is set to true and will select the animation
+   * used for hiding/showing the status bar. See
+   * {@link https://reactnative.dev/docs/statusbar StatusBar} documentation for
+   * more details
+   */
   statusBarAnimation?: StatusBarAnimation;
+
+  /**
+   * @default black
+   *
+   * Color of a semi-transparent overlay to be displayed on top of the content
+   * view when drawer gets open. A solid color should be used as the opacity is
+   * added by the Drawer itself and the opacity of the overlay is animated (from
+   * 0% to 70%).
+   */
   overlayColor?: string;
+
   contentContainerStyle?: StyleProp<ViewStyle>;
+
   drawerContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Enables two-finger gestures on supported devices, for example iPads with
+   * trackpads. If not enabled the gesture will require click + drag, with
+   * `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger
+   * the gesture.
+   */
   enableTrackpadTwoFingerGesture?: boolean;
+
   onDrawerSlide?: (position: number) => void;
+
   onGestureRef?: (ref: PanGestureHandler) => void;
 }
 
@@ -168,13 +239,12 @@ export default class DrawerLayout extends Component<
     let touchX = touchXValue;
 
     if (drawerPosition !== 'left') {
-      // Most of the code is written in a way to handle left-side drawer.
-      // In order to handle right-side drawer the only thing we need to
-      // do is to reverse events coming from gesture handler in a way they
-      // emulate left-side drawer gestures. E.g. dragX is simply -dragX, and
-      // touchX is calulcated by subtracing real touchX from the width of the
-      // container (such that when touch happens at the right edge the value
-      // is simply 0)
+      // Most of the code is written in a way to handle left-side drawer. In
+      // order to handle right-side drawer the only thing we need to do is to
+      // reverse events coming from gesture handler in a way they emulate
+      // left-side drawer gestures. E.g. dragX is simply -dragX, and touchX is
+      // calulcated by subtracing real touchX from the width of the container
+      // (such that when touch happens at the right edge the value is simply 0)
       dragX = Animated.multiply(
         new Animated.Value(-1),
         dragXValue
@@ -204,11 +274,12 @@ export default class DrawerLayout extends Component<
     //    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXXXXX|......|    |XXXXX|.........|
     //    +---------------+    +---------------+    +---------------+    +---------------+
     //
-    // For the above to work properly we define animated value that will keep start position
-    // of the gesture. Then we use that value to calculate how much we need to subtract from
-    // the dragX. If the gesture started on the greyed out area we take the distance from the
-    // edge of the drawer to the start position. Otherwise we don't subtract at all and the
-    // drawer be pulled back as soon as you start the pan.
+    // For the above to work properly we define animated value that will keep
+    // start position of the gesture. Then we use that value to calculate how
+    // much we need to subtract from the dragX. If the gesture started on the
+    // greyed out area we take the distance from the edge of the drawer to the
+    // start position. Otherwise we don't subtract at all and the drawer be
+    // pulled back as soon as you start the pan.
     //
     // This is used only when drawerType is "front"
     //
@@ -345,14 +416,14 @@ export default class DrawerLayout extends Component<
     });
     const { drawerPosition, minSwipeDistance, edgeWidth } = this.props;
     const fromLeft = drawerPosition === 'left';
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: showing ? undefined : edgeWidth }
       : { right: 0, width: showing ? undefined : edgeWidth };
@@ -377,10 +448,10 @@ export default class DrawerLayout extends Component<
     if (fromValue != null) {
       let nextFramePosition = fromValue;
       if (this.props.useNativeAnimations) {
-        // When using native driver, we predict the next position of the animation
-        // because it takes one frame of a roundtrip to pass RELEASE event from
-        // native driver to JS before we can start animating. Without it, it is more
-        // noticable that the frame is dropped.
+        // When using native driver, we predict the next position of the
+        // animation because it takes one frame of a roundtrip to pass RELEASE
+        // event from native driver to JS before we can start animating. Without
+        // it, it is more noticable that the frame is dropped.
         if (fromValue < toValue && velocity > 0) {
           nextFramePosition = Math.min(fromValue + velocity / 60.0, toValue);
         } else if (fromValue > toValue && velocity < 0) {
@@ -422,7 +493,8 @@ export default class DrawerLayout extends Component<
       options.velocity ? options.velocity : 0
     );
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would not be clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would not be clickable
     this.forceUpdate();
   };
 
@@ -430,7 +502,8 @@ export default class DrawerLayout extends Component<
     // TODO: decide if it should be null or undefined is the proper value
     this.animateDrawer(undefined, 0, options.velocity ? options.velocity : 0);
 
-    // We need to force the update, otherwise the overlay is not rerendered and it would be still clickable
+    // We need to force the update, otherwise the overlay is not rerendered and
+    // it would be still clickable
     this.forceUpdate();
   };
 
@@ -474,8 +547,8 @@ export default class DrawerLayout extends Component<
 
     // we rely on row and row-reverse flex directions to position the drawer
     // properly. Apparently for RTL these are flipped which requires us to use
-    // the opposite setting for the drawer to appear from left or right according
-    // to the drawerPosition prop
+    // the opposite setting for the drawer to appear from left or right
+    // according to the drawerPosition prop
     const reverseContentDirection = I18nManager.isRTL ? fromLeft : !fromLeft;
 
     const dynamicDrawerStyles = {
@@ -546,8 +619,8 @@ export default class DrawerLayout extends Component<
   };
 
   private setPanGestureRef = (ref: PanGestureHandler) => {
-    // TODO(TS): make sure it is OK
-    // taken from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
+    // TODO(TS): make sure it is OK taken from
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065#issuecomment-596081842
     (this
       .panGestureHandler as React.MutableRefObject<PanGestureHandler>).current = ref;
     this.props.onGestureRef?.(ref);
@@ -563,15 +636,15 @@ export default class DrawerLayout extends Component<
 
     const fromLeft = drawerPosition === 'left';
 
-    // gestureOrientation is 1 if the expected gesture is from left to right and -1 otherwise
-    // e.g. when drawer is on the left and is closed we expect left to right gesture, thus
-    // orientation will be 1.
+    // gestureOrientation is 1 if the expected gesture is from left to right and
+    // -1 otherwise e.g. when drawer is on the left and is closed we expect left
+    // to right gesture, thus orientation will be 1.
     const gestureOrientation =
       (fromLeft ? 1 : -1) * (this.drawerShown ? -1 : 1);
 
-    // When drawer is closed we want the hitSlop to be horizontally shorter
-    // than the container size by the value of SLOP. This will make it only
-    // activate when gesture happens not further than SLOP away from the edge
+    // When drawer is closed we want the hitSlop to be horizontally shorter than
+    // the container size by the value of SLOP. This will make it only activate
+    // when gesture happens not further than SLOP away from the edge
     const hitSlop = fromLeft
       ? { left: 0, width: this.drawerShown ? undefined : edgeWidth }
       : { right: 0, width: this.drawerShown ? undefined : edgeWidth };

package/src/components/GestureButtons.tsx

@@ -15,32 +15,72 @@ import { State } from '../State';
 import {
   GestureEvent,
   HandlerStateChangeEvent,
-} from '../handlers/gestureHandlers';
+} from '../handlers/gestureHandlerCommon';
 import {
   NativeViewGestureHandlerPayload,
   NativeViewGestureHandlerProps,
 } from '../handlers/NativeViewGestureHandler';
 
 export interface RawButtonProps extends NativeViewGestureHandlerProps {
+  /**
+   * Defines if more than one button could be pressed simultaneously. By default
+   * set true.
+   */
   exclusive?: boolean;
   // TODO: we should transform props in `createNativeWrapper`
+
+  /**
+   * Android only.
+   *
+   * 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
 }
 
 export interface BaseButtonProps extends RawButtonProps {
+  /**
+   * Called when the button gets pressed (analogous to `onPress` in
+   * `TouchableHighlight` from RN core).
+   */
   onPress?: (pointerInside: boolean) => void;
+
+  /**
+   * Called when button changes from inactive to active and vice versa. It
+   * passes active state as a boolean variable as a first parameter for that
+   * method.
+   */
   onActiveStateChange?: (active: boolean) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
 export interface RectButtonProps extends BaseButtonProps {
+  /**
+   * Background color that will be dimmed when button is in active state.
+   */
   underlayColor?: string;
+
+  /**
+   * iOS only.
+   *
+   * Opacity applied to the underlay when button is in active state.
+   */
   activeOpacity?: number;
 }
 
 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.
+   *
+   * Opacity applied to the button when it is in an active state.
+   */
   activeOpacity?: number;
 }
 
@@ -79,10 +119,10 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     this.lastActive = active;
   };
 
-  // Normally, the parent would execute it's handler first,
-  // then forward the event to listeners. However, here our handler
-  // is virtually only forwarding events to listeners, so we reverse the order
-  // to keep the proper order of the callbacks (from "raw" ones to "processed").
+  // Normally, the parent would execute it's handler first, then forward the
+  // event to listeners. However, here our handler is virtually only forwarding
+  // events to listeners, so we reverse the order to keep the proper order of
+  // the callbacks (from "raw" ones to "processed").
   private onHandlerStateChange = (
     e: HandlerStateChangeEvent<NativeViewGestureHandlerPayload>
   ) => {