react-native-gesture-handler - npm Package Compare versions

Comparing version 1.8.0 to 1.9.0

createHandler.js

@@ -144,2 +144,4 @@ import React from 'react';
       this._config = {};
+      this._propsRef = React.createRef(props);
+
       if (props.id) {
@@ -204,3 +206,14 @@ if (handlerIDToTag[props.id] !== undefined) {
 
-      RNGestureHandlerModule.attachGestureHandler(this._handlerTag, newViewTag);
+      if (Platform.OS === 'web') {
+        RNGestureHandlerModule.attachGestureHandler(
+          this._handlerTag,
+          newViewTag,
+          this._propsRef
+        );
+      } else {
+        RNGestureHandlerModule.attachGestureHandler(
+          this._handlerTag,
+          newViewTag
+        );
+      }
     };
@@ -241,6 +254,10 @@
           transformProps ? transformProps(this.props) : this.props,
-          { ...this.constructor.propTypes, ...customNativeProps },
+          {
+            ...(this.constructor.propTypes || propTypes),
+            ...customNativeProps,
+          },
           config
         )
       );
+
       this._attachGestureHandler(findNodeHandle(this._viewNode));
@@ -260,3 +277,3 @@ }
         transformProps ? transformProps(this.props) : this.props,
-        { ...this.constructor.propTypes, ...customNativeProps },
+        { ...(this.constructor.propTypes || propTypes), ...customNativeProps },
         config
@@ -273,3 +290,3 @@ );
         transformProps ? transformProps(mergedProps) : mergedProps,
-        { ...this.constructor.propTypes, ...customNativeProps },
+        { ...(this.constructor.propTypes || propTypes), ...customNativeProps },
         config
@@ -326,3 +343,9 @@ );
       }
+      const events = {
+        onGestureHandlerEvent: gestureEventHandler,
+        onGestureHandlerStateChange: gestureStateEventHandler,
+      };
 
+      this._propsRef.current = events;
+
       const child = React.Children.only(this.props.children);
@@ -345,2 +368,3 @@ let grandChildren = child.props.children;
       }
+
       return React.cloneElement(
@@ -351,4 +375,3 @@ child,
           collapsable: false,
-          onGestureHandlerEvent: gestureEventHandler,
-          onGestureHandlerStateChange: gestureStateEventHandler,
+          ...events,
         },
@@ -355,0 +378,0 @@ grandChildren

DrawerLayout.js

@@ -53,2 +53,3 @@ // @flow
   onGestureRef?: Function,
+  enableTrackpadTwoFingerGesture?: boolean,
 
@@ -84,2 +85,3 @@ // Properties not yet supported
     drawerLockMode: 'unlocked',
+    enableTrackpadTwoFingerGesture: false,
   };
@@ -513,2 +515,5 @@
         onHandlerStateChange={this._openingHandlerStateChange}
+        enableTrackpadTwoFingerGesture={
+          this.props.enableTrackpadTwoFingerGesture
+        }
         enabled={
@@ -515,0 +520,0 @@ drawerLockMode !== 'locked-closed' && drawerLockMode !== 'locked-open'

Gestures.js

@@ -255,2 +255,3 @@ import PropTypes from 'prop-types';
     avgTouches: PropTypes.bool,
+    enableTrackpadTwoFingerGesture: PropTypes.bool,
   },
@@ -257,0 +258,0 @@ {},

package.json

 {
   "name": "react-native-gesture-handler",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
@@ -27,2 +27,3 @@ "scripts": {
     "DrawerLayout.js",
+    "DrawerLayout.d.ts",
     "GestureHandler.js",
@@ -48,2 +49,3 @@ "Gestures.js",
     "react-native-gesture-handler.d.ts",
+    "Swipeable.d.ts",
     "README.md",
@@ -73,2 +75,3 @@ "RNGestureHandlerModule.js",
     "@egjs/hammerjs": "^2.0.17",
+    "fbjs": "^3.0.0",
     "hoist-non-react-statics": "^3.3.0",
@@ -75,0 +78,0 @@ "invariant": "^2.2.4",

react-native-gesture-handler.d.ts

@@ -25,18 +25,22 @@ // Project: https://github.com/software-mansion/react-native-gesture-handler
 
-  export enum Directions {
-    RIGHT = 1,
-    LEFT = 2,
-    UP = 4,
-    DOWN = 8,
+  export const Directions: {
+    readonly RIGHT: 1
+    readonly LEFT: 2
+    readonly UP: 4
+    readonly DOWN: 8
   }
 
-  export enum State {
-    UNDETERMINED = 0,
-    FAILED,
-    BEGAN,
-    CANCELLED,
-    ACTIVE,
-    END,
+  export type Directions = typeof Directions[keyof typeof Directions]
+
+  export const State: {
+    readonly UNDETERMINED: 0
+    readonly FAILED: 1
+    readonly BEGAN: 2
+    readonly CANCELLED: 3
+    readonly ACTIVE: 4
+    readonly END: 5
   }
 
+  export type State = typeof State[keyof typeof State]
+
   /* STATE CHANGE EVENTS */
@@ -316,2 +320,3 @@
     avgTouches?: boolean;
+    enableTrackpadTwoFingerGesture?: boolean;
     onGestureEvent?: (event: PanGestureHandlerGestureEvent) => void;
@@ -479,110 +484,1 @@ onHandlerStateChange?: (event: PanGestureHandlerStateChangeEvent) => void;
 }
-
-declare module 'react-native-gesture-handler/Swipeable' {
-  import { Animated, StyleProp, ViewStyle } from 'react-native';
-  import { PanGestureHandlerProperties } from 'react-native-gesture-handler'
-  type SwipeableExcludes = Exclude<keyof PanGestureHandlerProperties, 'onGestureEvent' | 'onHandlerStateChange'>
-
-  interface SwipeableProperties extends Pick<PanGestureHandlerProperties, SwipeableExcludes> {
-    friction?: number;
-    leftThreshold?: number;
-    rightThreshold?: number;
-    overshootLeft?: boolean;
-    overshootRight?: boolean;
-    overshootFriction?: number,
-    onSwipeableLeftOpen?: () => void;
-    onSwipeableRightOpen?: () => void;
-    onSwipeableOpen?: () => void;
-    onSwipeableClose?: () => void;
-    onSwipeableLeftWillOpen?: () => void;
-    onSwipeableRightWillOpen?: () => void;
-    onSwipeableWillOpen?: () => void;
-    onSwipeableWillClose?: () => void;
-    /**
-     *
-     * This map describes the values to use as inputRange for extra interpolation:
-     * AnimatedValue: [startValue, endValue]
-     *
-     * progressAnimatedValue: [0, 1]
-     * dragAnimatedValue: [0, +]
-     *
-     * To support `rtl` flexbox layouts use `flexDirection` styling.
-     * */
-    renderLeftActions?: (
-      progressAnimatedValue: Animated.AnimatedInterpolation,
-      dragAnimatedValue: Animated.AnimatedInterpolation
-    ) => React.ReactNode;
-    /**
-     *
-     * This map describes the values to use as inputRange for extra interpolation:
-     * AnimatedValue: [startValue, endValue]
-     *
-     * progressAnimatedValue: [0, 1]
-     * dragAnimatedValue: [0, -]
-     *
-     * To support `rtl` flexbox layouts use `flexDirection` styling.
-     * */
-    renderRightActions?: (
-      progressAnimatedValue: Animated.AnimatedInterpolation,
-      dragAnimatedValue: Animated.AnimatedInterpolation
-    ) => React.ReactNode;
-    useNativeAnimations?: boolean;
-    containerStyle?: StyleProp<ViewStyle>;
-    childrenContainerStyle?: StyleProp<ViewStyle>;
-  }
-
-  export default class Swipeable extends React.Component<SwipeableProperties> {
-    close: () => void;
-    openLeft: () => void;
-    openRight: () => void;
-  }
-}
-
-declare module 'react-native-gesture-handler/DrawerLayout' {
-  import { Animated, StatusBarAnimation, StyleProp, ViewStyle } from 'react-native';
-
-  export type DrawerPosition = 'left' | 'right';
-
-  export type DrawerState = 'Idle' | 'Dragging' | 'Settling';
-
-  export type DrawerType = 'front' | 'back' | 'slide';
-
-  export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
-
-  export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
-
-  export interface DrawerLayoutProperties {
-    renderNavigationView: (
-      progressAnimatedValue: Animated.Value
-    ) => React.ReactNode;
-    drawerPosition?: DrawerPosition;
-    drawerWidth?: number;
-    drawerBackgroundColor?: string;
-    drawerLockMode?: DrawerLockMode;
-    keyboardDismissMode?: DrawerKeyboardDismissMode;
-    onDrawerClose?: () => void;
-    onDrawerOpen?: () => void;
-    onDrawerStateChanged?: (
-      newState: DrawerState,
-      drawerWillShow: boolean
-    ) => void;
-    useNativeAnimations?: boolean;
-
-    drawerType?: DrawerType;
-    edgeWidth?: number;
-    minSwipeDistance?: number;
-    hideStatusBar?: boolean;
-    statusBarAnimation?: StatusBarAnimation;
-    overlayColor?: string;
-    contentContainerStyle?: StyleProp<ViewStyle>;
-  }
-
-  interface DrawerMovementOptionType {
-    velocity?: number;
-  }
-
-  export default class DrawerLayout extends React.Component<DrawerLayoutProperties> {
-    openDrawer: (options?: DrawerMovementOptionType) => void;
-    closeDrawer: (options?: DrawerMovementOptionType) => void;
-  }
-}

RNGestureHandlerModule.web.js

@@ -32,3 +32,5 @@ import { Direction } from './web/constants';
     if (!(handlerName in Gestures))
-      throw new Error(`react-native-gesture-handler: ${handlerName} is not supported on web.`);
+      throw new Error(
+        `react-native-gesture-handler: ${handlerName} is not supported on web.`
+      );
     const GestureClass = Gestures[handlerName];
@@ -38,4 +40,4 @@ NodeManager.createGestureHandler(handlerTag, new GestureClass());
   },
-  attachGestureHandler(handlerTag, newView) {
-    NodeManager.getHandler(handlerTag).setView(newView);
+  attachGestureHandler(handlerTag, newView, propsRef) {
+    NodeManager.getHandler(handlerTag).setView(newView, propsRef);
   },
@@ -42,0 +44,0 @@ updateGestureHandler(handlerTag, newConfig) {

web/GestureHandler.js

@@ -151,12 +151,16 @@ import Hammer from '@egjs/hammerjs';
     const {
-      onGestureHandlerStateChange: onHandlerStateChange,
-      onGestureHandlerEvent: onGestureEvent,
-    } = this.ref.props;
+      onGestureHandlerEvent,
+      onGestureHandlerStateChange,
+    } = this.propsRef.current;
 
     const event = this.transformEventData(nativeEvent);
 
-    invokeNullableMethod('onGestureEvent', onGestureEvent, event);
+    invokeNullableMethod('onGestureEvent', onGestureHandlerEvent, event);
     if (this.lastSentState !== event.nativeEvent.state) {
       this.lastSentState = event.nativeEvent.state;
-      invokeNullableMethod('onHandlerStateChange', onHandlerStateChange, event);
+      invokeNullableMethod(
+        'onHandlerStateChange',
+        onGestureHandlerStateChange,
+        event
+      );
     }
@@ -210,3 +214,3 @@ };
 
-  setView(ref) {
+  setView(ref, propsRef) {
     if (ref == null) {
@@ -218,2 +222,3 @@ this.destroy();
 
+    this.propsRef = propsRef;
     this.ref = ref;
@@ -220,0 +225,0 @@

web/PressGestureHandler.js

@@ -107,20 +107,28 @@ import Hammer from '@egjs/hammerjs';
     super.onRawEvent(ev);
-    if (ev.isFinal && this.isGestureRunning) {
-      let timeout;
-      if (this.visualFeedbackTimer) {
-        // Aesthetic timing for a quick tap.
-        // We haven't activated the tap right away to emulate iOS `delaysContentTouches`
-        // Now we must send the initial activation event and wait a set amount of time before firing the end event.
-        timeout = CONTENT_TOUCHES_QUICK_TAP_END_DELAY;
-        this.sendGestureStartedEvent(this.initialEvent);
-        this.initialEvent = null;
-      }
-      fireAfterInterval(() => {
+    if (this.isGestureRunning) {
+      if (ev.isFinal) {
+        let timeout;
+        if (this.visualFeedbackTimer) {
+          // Aesthetic timing for a quick tap.
+          // We haven't activated the tap right away to emulate iOS `delaysContentTouches`
+          // Now we must send the initial activation event and wait a set amount of time before firing the end event.
+          timeout = CONTENT_TOUCHES_QUICK_TAP_END_DELAY;
+          this.sendGestureStartedEvent(this.initialEvent);
+          this.initialEvent = null;
+        }
+        fireAfterInterval(() => {
+          this.sendEvent({
+            ...ev,
+            eventType: Hammer.INPUT_END,
+            isFinal: true,
+          });
+          this.onGestureEnded();
+        }, timeout);
+      } else {
         this.sendEvent({
           ...ev,
-          eventType: Hammer.INPUT_END,
-          isFinal: true,
+          eventType: Hammer.INPUT_MOVE,
+          isFinal: false,
         });
-        this.onGestureEnded();
-      }, timeout);
+      }
     }
@@ -127,0 +135,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

405979

increased by0.87%

Number of package files

125

increased by1.63%

Lines of code

4258

increased by1.12%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedfbjs@^3.0.0

• + Addedasap@2.0.6(transitive)

• + Addedcross-fetch@3.2.0(transitive)

• + Addedfbjs@3.0.5(transitive)

• + Addedfbjs-css-vars@1.0.2(transitive)

• + Addednode-fetch@2.7.0(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedtr46@0.0.3(transitive)

• + Addedua-parser-js@1.0.40(transitive)

• + Addedwebidl-conversions@3.0.1(transitive)

• + Addedwhatwg-url@5.0.0(transitive)