react-native-gesture-handler 1.2.1 → 1.4.1

package/createNativeWrapper.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import NativeViewGestureHandler from './NativeViewGestureHandler';
+
+const NATIVE_WRAPPER_BIND_BLACKLIST = new Set(['replaceState', 'isMounted']);
+
+/*
+ * This array should consist of:
+ *   - All keys in propTypes from NativeGestureHandler
+ *     (and all keys in GestureHandlerPropTypes)
+ *   - 'onGestureHandlerEvent'
+ *   - 'onGestureHandlerStateChange'
+ */
+const NATIVE_WRAPPER_PROPS_FILTER = [
+  'id',
+  'minPointers',
+  'enabled',
+  'waitFor',
+  'simultaneousHandlers',
+  'shouldCancelWhenOutside',
+  'hitSlop',
+  'onGestureEvent',
+  'onHandlerStateChange',
+  'onBegan',
+  'onFailed',
+  'onCancelled',
+  'onActivated',
+  'onEnded',
+  'shouldActivateOnStart',
+  'disallowInterruption',
+  'onGestureHandlerEvent',
+  'onGestureHandlerStateChange',
+];
+
+export default function createNativeWrapper(Component, config = {}) {
+  class ComponentWrapper extends React.Component {
+    static propTypes = {
+      ...Component.propTypes,
+    };
+
+    static displayName = Component.displayName || 'ComponentWrapper';
+
+    _refHandler = node => {
+      // bind native component's methods
+      let source = node;
+      while (source != null) {
+        for (let methodName of Object.getOwnPropertyNames(source)) {
+          if (
+            !methodName.startsWith('_') && // private methods
+            !methodName.startsWith('component') && // lifecycle methods
+            !NATIVE_WRAPPER_BIND_BLACKLIST.has(methodName) && // other
+            typeof source[methodName] === 'function' &&
+            this[methodName] === undefined
+          ) {
+            if (source[methodName].prototype) {
+              // determine if it's not bound already
+              this[methodName] = source[methodName].bind(node);
+            } else {
+              this[methodName] = source[methodName];
+            }
+          }
+        }
+        source = Object.getPrototypeOf(source);
+      }
+    };
+
+    render() {
+      // filter out props that should be passed to gesture handler wrapper
+      const gestureHandlerProps = Object.keys(this.props).reduce(
+        (props, key) => {
+          if (NATIVE_WRAPPER_PROPS_FILTER.indexOf(key) !== -1) {
+            props[key] = this.props[key];
+          }
+          return props;
+        },
+        { ...config } // watch out not to modify config
+      );
+      return (
+        <NativeViewGestureHandler {...gestureHandlerProps}>
+          <Component {...this.props} ref={this._refHandler} />
+        </NativeViewGestureHandler>
+      );
+    }
+  }
+  return ComponentWrapper;
+}

package/ios/RNGestureHandler.xcodeproj/project.pbxproj

@@ -424,7 +424,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -458,7 +458,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -524,7 +524,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -558,7 +558,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "1.2.1",
+  "version": "1.4.1",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
@@ -16,14 +16,20 @@
     "android/lib/build.gradle",
     "android/lib/src/main/java/",
     "ios/",
+    "web/",
     "__mocks__/",
     "touchables/**/*.js",
     "createHandler.js",
-    "createHandler.web.js",
     "Directions.js",
-    "Directions.web.js",
     "DrawerLayout.js",
     "GestureHandler.js",
+    "Gestures.js",
+    "GestureButtons.js",
+    "GestureComponents.js",
+    "GestureComponents.web.js",
+    "createNativeWrapper.js",
+    "GestureHandlerPropTypes.js",
+    "NativeViewGestureHandler.js",
     "GestureHandlerButton.js",
     "GestureHandlerButton.web.js",
     "gestureHandlerRootHOC.android.js",
@@ -35,11 +41,11 @@
     "react-native-gesture-handler.d.ts",
     "README.md",
     "RNGestureHandlerModule.js",
+    "RNGestureHandlerModule.web.js",
     "jestSetup.js",
     "RNGestureHandler.podspec",
     "State.js",
-    "Swipeable.js",
-    "Swipeable.web.js"
+    "Swipeable.js"
   ],
   "repository": {
     "type": "git",
@@ -56,31 +62,28 @@
   },
   "homepage": "https://github.com/kmagiera/react-native-gesture-handler#readme",
   "dependencies": {
+    "hammerjs": "^2.0.8",
     "hoist-non-react-statics": "^2.3.1",
-    "invariant": "^2.2.2",
-    "prop-types": "^15.5.10"
-  },
-  "peerDependencies": {
-    "react": ">= 16.3.2",
-    "react-native": ">= 0.58.2"
+    "invariant": "^2.2.4",
+    "prop-types": "^15.7.2"
   },
   "jest": {
     "preset": "jest-react-native"
   },
   "devDependencies": {
-    "@types/react": "^16.0.31",
-    "@types/react-native": "^0.51.3",
+    "@types/react": "^16.8.6",
+    "@types/react-native": "^0.60.0",
     "babel-jest": "16.0.0",
     "babel-preset-react-native": "1.9.0",
     "flow-bin": "^0.56.0",
     "husky": "^0.14.3",
-    "jest": "16.0.2",
+    "jest": "^24.7.1",
     "jest-react-native": "16.0.0",
     "lint-staged": "^8.0.0-beta.1",
     "prettier": "^1.13.7",
-    "react": "^16.3",
-    "react-native": "^0.50.1",
-    "react-test-renderer": "15.3.2"
+    "react": "^16.8.6",
+    "react-native": "^0.60.0",
+    "react-test-renderer": "16.8.6"
   },
   "lint-staged": {
     "*.js": [

package/react-native-gesture-handler.d.ts

@@ -225,6 +225,22 @@ declare module 'react-native-gesture-handler' {
           bottom?: number;
           vertical?: number;
           horizontal?: number;
+        }
+      | {
+          width: number;
+          left: number;
+        }
+      | {
+          width: number;
+          right: number;
+        }
+      | {
+          height: number;
+          top: number;
+        }
+      | {
+          height: number;
+          bottom: number;
         };
   }
 
@@ -362,6 +378,7 @@ declare module 'react-native-gesture-handler' {
     onPress?: (pointerInside: boolean) => void;
     onActiveStateChange?: (active: boolean) => void;
     style?: StyleProp<ViewStyle>;
+    rippleColor?: string;
   }
 
   export interface RectButtonProperties extends BaseButtonProperties {
@@ -426,8 +443,8 @@ declare module 'react-native-gesture-handler' {
 
   /* OTHER */
 
-  export class FlatList extends React.Component<
-    NativeViewGestureHandlerProperties & FlatListProperties<any>
+  export class FlatList<ItemT> extends React.Component<
+    NativeViewGestureHandlerProperties & FlatListProperties<ItemT>
   > {}
 
   export function gestureHandlerRootHOC(
@@ -442,7 +459,7 @@ declare module 'react-native-gesture-handler' {
 }
 
 declare module 'react-native-gesture-handler/Swipeable' {
-  import { Animated } from 'react-native';
+  import { Animated, StyleProp, ViewStyle } from 'react-native';
 
   interface SwipeableProperties {
     friction?: number;
@@ -468,6 +485,8 @@ declare module 'react-native-gesture-handler/Swipeable' {
       dragAnimatedValue: Animated.AnimatedInterpolation
     ) => React.ReactNode;
     useNativeAnimations?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+    childrenContainerStyle?: StyleProp<ViewStyle>;
   }
 
   export default class Swipeable extends React.Component<SwipeableProperties> {
@@ -486,6 +505,8 @@ declare module 'react-native-gesture-handler/DrawerLayout' {
 
   export type DrawerType = 'front' | 'back' | 'slide';
 
+  export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
+
   export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
   export interface DrawerLayoutProperties {
@@ -495,6 +516,7 @@ declare module 'react-native-gesture-handler/DrawerLayout' {
     drawerPosition?: DrawerPosition;
     drawerWidth?: number;
     drawerBackgroundColor?: string;
+    drawerLockMode?: DrawerLockMode;
     keyboardDismissMode?: DrawerKeyboardDismissMode;
     onDrawerClose?: () => void;
     onDrawerOpen?: () => void;

package/touchables/GenericTouchable.js

@@ -256,7 +256,9 @@ export default class GenericTouchable extends Component {
 
     return (
       <BaseButton
-        onHandlerStateChange={this.props.disabled ? null : this.onHandlerStateChange}
+        onHandlerStateChange={
+          this.props.disabled ? null : this.onHandlerStateChange
+        }
         onGestureEvent={this.onGestureEvent}
         hitSlop={this.props.hitSlop}
         {...this.props.extraButtonProps}>

package/touchables/TouchableHighlight.js

@@ -27,9 +27,7 @@ export default class TouchableHighlight extends Component {
     super(props);
     this.state = {
       extraChildStyle: null,
-      extraUnderlayStyle: {
-        backgroundColor: props.underlayColor,
-      },
+      extraUnderlayStyle: null,
     };
   }
 

package/touchables/TouchableOpacity.web.js

@@ -0,0 +1,2 @@
+import { TouchableOpacity } from 'react-native';
+export default TouchableOpacity;

package/touchables/TouchableWithoutFeedback.js

@@ -1,7 +1,9 @@
-import GenericTouchable from './GenericTouchable';
 import React from 'react';
+import GenericTouchable from './GenericTouchable';
 
-const TouchableWithoutFeedback = props => <GenericTouchable {...props} />;
+const TouchableWithoutFeedback = React.forwardRef((props, ref) => (
+  <GenericTouchable ref={ref} {...props} />
+));
 
 TouchableWithoutFeedback.defaultProps = GenericTouchable.defaultProps;
 

package/web/DiscreteGestureHandler.js

@@ -0,0 +1,66 @@
+import GestureHandler from './GestureHandler';
+import { TEST_MAX_IF_NOT_NAN } from './utils';
+
+class DiscreteGestureHandler extends GestureHandler {
+  get isDiscrete() {
+    return true;
+  }
+
+  get shouldEnableGestureOnSetup() {
+    return true;
+  }
+
+  shouldFailUnderCustomCriteria(
+    { x, y, deltaX, deltaY },
+    { maxDeltaX, maxDeltaY, maxDistSq, shouldCancelWhenOutside }
+  ) {
+    if (shouldCancelWhenOutside) {
+      if (!this.isPointInView({ x, y })) {
+        return true;
+      }
+    }
+    return (
+      TEST_MAX_IF_NOT_NAN(Math.abs(deltaX), maxDeltaX) ||
+      TEST_MAX_IF_NOT_NAN(Math.abs(deltaY), maxDeltaY) ||
+      TEST_MAX_IF_NOT_NAN(Math.abs(deltaY * deltaY + deltaX * deltaX), maxDistSq)
+    );
+  }
+
+  transformNativeEvent({ x, y }) {
+    return {
+      absoluteX: x,
+      absoluteY: y,
+      x,
+      y,
+    };
+  }
+
+  isGestureEnabledForEvent(
+    { minPointers, maxPointers, maxDist, maxDeltaX, maxDeltaY, maxDistSq, shouldCancelWhenOutside },
+    recognizer,
+    { maxPointers: pointerLength, center, deltaX, deltaY, ...props }
+  ) {
+    const validPointerCount = pointerLength >= minPointers && pointerLength <= maxPointers;
+
+    if (
+      this.shouldFailUnderCustomCriteria(
+        { ...center, deltaX, deltaY },
+        {
+          maxDeltaX,
+          maxDeltaY,
+          maxDistSq,
+          shouldCancelWhenOutside,
+        }
+      ) ||
+      // A user probably won't land a multi-pointer tap on the first tick (so we cannot just cancel each time)
+      // but if the gesture is running and the user adds or subtracts another pointer then it should fail.
+      (!validPointerCount && this.isGestureRunning)
+    ) {
+      return { failed: true };
+    }
+
+    return { success: validPointerCount };
+  }
+}
+
+export default DiscreteGestureHandler;

package/web/DraggingGestureHandler.js

@@ -0,0 +1,22 @@
+import GestureHandler from './GestureHandler';
+
+class DraggingGestureHandler extends GestureHandler {
+  get shouldEnableGestureOnSetup() {
+    return true;
+  }
+
+  transformNativeEvent({ deltaX, deltaY, velocityX, velocityY, center: { x, y } }) {
+    return {
+      translationX: deltaX - (this.__initialX || 0),
+      translationY: deltaY - (this.__initialY || 0),
+      absoluteX: x,
+      absoluteY: y,
+      velocityX,
+      velocityY,
+      x,
+      y,
+    };
+  }
+}
+
+export default DraggingGestureHandler;

package/web/Errors.js

@@ -0,0 +1,5 @@
+export class GesturePropError extends Error {
+  constructor(name, value, expectedType) {
+    super(`Invalid property \`${name}: ${value}\` expected \`${expectedType}\``);
+  }
+}

package/web/FlingGestureHandler.js

@@ -0,0 +1,137 @@
+import Hammer from 'hammerjs';
+
+import { Direction } from './constants';
+import { GesturePropError } from './Errors';
+import DraggingGestureHandler from './DraggingGestureHandler';
+import { isnan } from './utils';
+
+class FlingGestureHandler extends DraggingGestureHandler {
+  get name() {
+    return 'swipe';
+  }
+
+  get NativeGestureClass() {
+    return Hammer.Swipe;
+  }
+
+  onGestureActivated(event) {
+    this.sendEvent({
+      ...event,
+      eventType: Hammer.INPUT_MOVE,
+      isFinal: false,
+      isFirst: true,
+    });
+    this.isGestureRunning = false;
+    this.hasGestureFailed = false;
+    this.sendEvent({
+      ...event,
+      eventType: Hammer.INPUT_END,
+      isFinal: true,
+    });
+  }
+
+  onRawEvent(ev) {
+    super.onRawEvent(ev);
+    if (this.hasGestureFailed) {
+      return;
+    }
+    // Hammer doesn't send a `cancel` event for taps.
+    // Manually fail the event.
+    if (ev.isFinal) {
+      setTimeout(() => {
+        if (this.isGestureRunning) {
+          this.cancelEvent(ev);
+        }
+      });
+    } else if (!this.hasGestureFailed && !this.isGestureRunning) {
+      // Tap Gesture start event
+      const gesture = this.hammer.get(this.name);
+      if (gesture.options.enable(gesture, ev)) {
+        this.onStart(ev);
+        this.sendEvent(ev);
+      }
+    }
+  }
+
+  getHammerConfig() {
+    return {
+      pointers: this.config.numberOfPointers,
+      direction: this.getDirection(),
+    };
+  }
+
+  getTargetDirections(direction) {
+    const directions = [];
+    if (direction & Direction.RIGHT) {
+      directions.push(Hammer.DIRECTION_RIGHT);
+    }
+    if (direction & Direction.LEFT) {
+      directions.push(Hammer.DIRECTION_LEFT);
+    }
+    if (direction & Direction.UP) {
+      directions.push(Hammer.DIRECTION_UP);
+    }
+    if (direction & Direction.DOWN) {
+      directions.push(Hammer.DIRECTION_DOWN);
+    }
+    // const hammerDirection = directions.reduce((a, b) => a | b, 0);
+    return directions;
+  }
+
+  getDirection() {
+    const { direction } = this.getConfig();
+
+    let directions = [];
+    if (direction & Direction.RIGHT) {
+      directions.push(Hammer.DIRECTION_HORIZONTAL);
+    }
+    if (direction & Direction.LEFT) {
+      directions.push(Hammer.DIRECTION_HORIZONTAL);
+    }
+    if (direction & Direction.UP) {
+      directions.push(Hammer.DIRECTION_VERTICAL);
+    }
+    if (direction & Direction.DOWN) {
+      directions.push(Hammer.DIRECTION_VERTICAL);
+    }
+    directions = [...new Set(directions)];
+
+    if (directions.length === 0) return Hammer.DIRECTION_NONE;
+    if (directions.length === 1) return directions[0];
+    return Hammer.DIRECTION_ALL;
+  }
+
+  isGestureEnabledForEvent(
+    {
+      minPointers,
+      maxPointers,
+      numberOfPointers,
+      maxDist,
+      maxDeltaX,
+      maxDeltaY,
+      maxDistSq,
+      shouldCancelWhenOutside,
+    },
+    recognizer,
+    { maxPointers: pointerLength, deltaX: dx, deltaY: dy, ...props }
+  ) {
+    const validPointerCount = pointerLength === numberOfPointers;
+    if (!validPointerCount && this.isGestureRunning) {
+      return { failed: true };
+    }
+    return { success: validPointerCount };
+  }
+
+  updateGestureConfig({ numberOfPointers = 1, direction, ...props }) {
+    if (isnan(direction) || typeof direction !== 'number') {
+      throw new GesturePropError('direction', direction, 'number');
+    }
+    return super.updateGestureConfig({
+      numberOfPointers,
+      direction,
+      ...props,
+    });
+  }
+}
+
+export default FlingGestureHandler;