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

Comparing version 2.2.0 to 2.2.1

lib/commonjs/handlers/createHandler.js

@@ -110,12 +110,4 @@ "use strict";
 };
-let showedRngh2Notice = false;
 
-function showRngh2NoticeIfNeeded() {
-  if (!showedRngh2Notice) {
-    console.warn("[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!");
-    showedRngh2Notice = true;
-  }
-} // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
-
-
+// TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 function createHandler({
@@ -231,6 +223,2 @@ name,
       }
-
-      if (__DEV__) {
-        showRngh2NoticeIfNeeded();
-      }
     }
@@ -237,0 +225,0 @@

lib/commonjs/handlers/gestures/eventReceiver.js

@@ -6,2 +6,3 @@ "use strict";
 });
+exports.onGestureHandlerEvent = onGestureHandlerEvent;
 exports.startListening = startListening;
@@ -8,0 +9,0 @@ exports.stopListening = stopListening;

lib/commonjs/handlers/gestures/GestureDetector.js

@@ -36,2 +36,6 @@ "use strict";
 
+var _reactNative = require("react-native");
+
+var _eventReceiver = require("./eventReceiver");
+
 var _Reanimated$default$c, _Reanimated$default;
@@ -80,3 +84,4 @@
   viewTag,
-  useAnimated
+  useAnimated,
+  webEventHandlersRef
 }) {
@@ -124,4 +129,9 @@ if (!preparedGesture.firstExecution) {
   for (const gesture of preparedGesture.config) {
-    _RNGestureHandlerModule.default.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated // send direct events when using animatedGesture, device events otherwise
-    );
+    if (_reactNative.Platform.OS === 'web') {
+      _RNGestureHandlerModule.default.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated, // send direct events when using animatedGesture, device events otherwise
+      webEventHandlersRef);
+    } else {
+      _RNGestureHandlerModule.default.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated // send direct events when using animatedGesture, device events otherwise
+      );
+    }
   }
@@ -138,5 +148,9 @@
   for (let i = 0; i < gesture.length; i++) {
-    const handler = preparedGesture.config[i];
-    gesture[i].handlerTag = handler.handlerTag;
-    gesture[i].handlers.handlerTag = handler.handlerTag;
+    const handler = preparedGesture.config[i]; // only update handlerTag when it's actually different, it may be the same
+    // if gesture config object is wrapped with useMemo
+
+    if (gesture[i].handlerTag !== handler.handlerTag) {
+      gesture[i].handlerTag = handler.handlerTag;
+      gesture[i].handlers.handlerTag = handler.handlerTag;
+    }
   } // use setImmediate to extract handlerTags, because when it's ran, all refs should be updated
@@ -152,3 +166,2 @@ // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
       handler.handlers = gesture[i].handlers;
-      handler.handlers.handlerTag = handler.handlerTag;
       const requireToFail = extractValidHandlerTags(handler.config.requireToFail);
@@ -185,3 +198,3 @@ const simultaneousWith = extractValidHandlerTags(handler.config.simultaneousWith);
 
-function useAnimatedGesture(preparedGesture) {
+function useAnimatedGesture(preparedGesture, needsRebuild) {
   if (!_reanimatedWrapper.Reanimated) {
@@ -339,3 +352,3 @@ return;
 
-  const event = _reanimatedWrapper.Reanimated.useEvent(callback, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], true);
+  const event = _reanimatedWrapper.Reanimated.useEvent(callback, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], needsRebuild);
 
@@ -354,2 +367,7 @@ preparedGesture.animatedEventHandler = event;
   const firstRenderRef = (0, _react.useRef)(true);
+  const webEventHandlersRef = (0, _react.useRef)({
+    onGestureHandlerEvent: e => {
+      (0, _eventReceiver.onGestureHandlerEvent)(e.nativeEvent);
+    }
+  });
 
@@ -366,4 +384,8 @@ const preparedGesture = _react.default.useRef({
     throw new Error('You cannot change whether you are using gesture or animatedGesture while the app is running');
-  }
+  } // Reanimated event should be rebuilt only when gestures are reattached, otherwise
+  // config update will be enough as all necessary items are stored in shared values anyway
 
+
+  const needsToRebuildReanimatedEvent = preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
+
   if (preparedGesture.firstExecution) {
@@ -379,3 +401,3 @@ var _gestureConfig$initia;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useAnimatedGesture(preparedGesture);
+    useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
   }
@@ -391,3 +413,4 @@
       viewTag,
-      useAnimated
+      useAnimated,
+      webEventHandlersRef
     });
@@ -409,3 +432,4 @@ return () => {
           viewTag,
-          useAnimated
+          useAnimated,
+          webEventHandlersRef
         });
@@ -412,0 +436,0 @@ } else {

lib/commonjs/web/GestureHandler.js

@@ -289,3 +289,6 @@ "use strict";
         target: this.ref,
-        oldState: this.oldState
+        // send oldState only when the state was changed, or is different than ACTIVE
+        // GestureDetector relies on the presence of `oldState` to differentiate between
+        // update events and state change events
+        oldState: state !== this.previousState || state != 4 ? this.oldState : undefined
       },
@@ -292,0 +295,0 @@ timeStamp: Date.now()

lib/module/handlers/createHandler.js

@@ -89,12 +89,3 @@ var _UIManagerAny$getView, _UIManagerAny$getView2, _UIManagerAny$getCons;
 };
-let showedRngh2Notice = false;
-
-function showRngh2NoticeIfNeeded() {
-  if (!showedRngh2Notice) {
-    console.warn("[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!");
-    showedRngh2Notice = true;
-  }
-} // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
-
-
+// TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
 export default function createHandler({
@@ -208,6 +199,2 @@ name,
       }
-
-      if (__DEV__) {
-        showRngh2NoticeIfNeeded();
-      }
     }
@@ -214,0 +201,0 @@

lib/module/handlers/gestures/eventReceiver.js

@@ -32,3 +32,3 @@ import { DeviceEventEmitter } from 'react-native';
 
-function onGestureHandlerEvent(event) {
+export function onGestureHandlerEvent(event) {
   var _handler$handlers7, _handler$handlers7$on, _handler$handlers8, _handler$handlers8$on, _handler$handlers9, _handler$handlers9$on, _handler$handlers10, _handler$handlers10$o;
@@ -104,3 +104,2 @@
 }
-
 export function startListening() {
@@ -107,0 +106,0 @@ stopListening();

lib/module/handlers/gestures/GestureDetector.js

@@ -17,2 +17,4 @@ var _Reanimated$default$c, _Reanimated$default;
 import { EventType } from '../../EventType';
+import { Platform } from 'react-native';
+import { onGestureHandlerEvent } from './eventReceiver';
 const ALLOWED_PROPS = [...baseGestureHandlerWithMonitorProps, ...tapGestureHandlerProps, ...panGestureHandlerProps, ...panGestureHandlerCustomNativeProps, ...longPressGestureHandlerProps, ...forceTouchGestureHandlerProps, ...flingGestureHandlerProps];
@@ -52,3 +54,4 @@
   viewTag,
-  useAnimated
+  useAnimated,
+  webEventHandlersRef
 }) {
@@ -95,4 +98,9 @@ if (!preparedGesture.firstExecution) {
   for (const gesture of preparedGesture.config) {
-    RNGestureHandlerModule.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated // send direct events when using animatedGesture, device events otherwise
-    );
+    if (Platform.OS === 'web') {
+      RNGestureHandlerModule.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated, // send direct events when using animatedGesture, device events otherwise
+      webEventHandlersRef);
+    } else {
+      RNGestureHandlerModule.attachGestureHandler(gesture.handlerTag, viewTag, !useAnimated // send direct events when using animatedGesture, device events otherwise
+      );
+    }
   }
@@ -109,5 +117,9 @@
   for (let i = 0; i < gesture.length; i++) {
-    const handler = preparedGesture.config[i];
-    gesture[i].handlerTag = handler.handlerTag;
-    gesture[i].handlers.handlerTag = handler.handlerTag;
+    const handler = preparedGesture.config[i]; // only update handlerTag when it's actually different, it may be the same
+    // if gesture config object is wrapped with useMemo
+
+    if (gesture[i].handlerTag !== handler.handlerTag) {
+      gesture[i].handlerTag = handler.handlerTag;
+      gesture[i].handlers.handlerTag = handler.handlerTag;
+    }
   } // use setImmediate to extract handlerTags, because when it's ran, all refs should be updated
@@ -123,3 +135,2 @@ // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
       handler.handlers = gesture[i].handlers;
-      handler.handlers.handlerTag = handler.handlerTag;
       const requireToFail = extractValidHandlerTags(handler.config.requireToFail);
@@ -154,3 +165,3 @@ const simultaneousWith = extractValidHandlerTags(handler.config.simultaneousWith);
 
-function useAnimatedGesture(preparedGesture) {
+function useAnimatedGesture(preparedGesture, needsRebuild) {
   if (!Reanimated) {
@@ -306,3 +317,3 @@ return;
 
-  const event = Reanimated.useEvent(callback, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], true);
+  const event = Reanimated.useEvent(callback, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'], needsRebuild);
   preparedGesture.animatedEventHandler = event;
@@ -320,2 +331,7 @@ preparedGesture.animatedHandlers = sharedHandlersCallbacks;
   const firstRenderRef = useRef(true);
+  const webEventHandlersRef = useRef({
+    onGestureHandlerEvent: e => {
+      onGestureHandlerEvent(e.nativeEvent);
+    }
+  });
   const preparedGesture = React.useRef({
@@ -331,4 +347,8 @@ config: gesture,
     throw new Error('You cannot change whether you are using gesture or animatedGesture while the app is running');
-  }
+  } // Reanimated event should be rebuilt only when gestures are reattached, otherwise
+  // config update will be enough as all necessary items are stored in shared values anyway
 
+
+  const needsToRebuildReanimatedEvent = preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
+
   if (preparedGesture.firstExecution) {
@@ -344,3 +364,3 @@ var _gestureConfig$initia;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useAnimatedGesture(preparedGesture);
+    useAnimatedGesture(preparedGesture, needsToRebuildReanimatedEvent);
   }
@@ -356,3 +376,4 @@
       viewTag,
-      useAnimated
+      useAnimated,
+      webEventHandlersRef
     });
@@ -374,3 +395,4 @@ return () => {
           viewTag,
-          useAnimated
+          useAnimated,
+          webEventHandlersRef
         });
@@ -377,0 +399,0 @@ } else {

lib/module/web/GestureHandler.js

@@ -275,3 +275,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
         target: this.ref,
-        oldState: this.oldState
+        // send oldState only when the state was changed, or is different than ACTIVE
+        // GestureDetector relies on the presence of `oldState` to differentiate between
+        // update events and state change events
+        oldState: state !== this.previousState || state != 4 ? this.oldState : undefined
       },
@@ -278,0 +281,0 @@ timeStamp: Date.now()

lib/typescript/handlers/gestures/eventReceiver.d.ts

@@ -0,2 +1,4 @@
+import { GestureTouchEvent, GestureUpdateEvent, GestureStateChangeEvent } from '../gestureHandlerCommon';
+export declare function onGestureHandlerEvent(event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent): void;
 export declare function startListening(): void;
 export declare function stopListening(): void;

lib/typescript/web/GestureHandler.d.ts

@@ -112,3 +112,3 @@ import { findNodeHandle } from 'react-native';
             target: any;
-            oldState: State;
+            oldState: 0 | 1 | 2 | 4 | 3 | 5 | undefined;
             numberOfPointers: number;
@@ -115,0 +115,0 @@ state: State;

package.json

 {
   "name": "react-native-gesture-handler",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
@@ -5,0 +5,0 @@ "scripts": {

src/handlers/createHandler.ts

@@ -125,12 +125,2 @@ import * as React from 'react';
 
-let showedRngh2Notice = false;
-function showRngh2NoticeIfNeeded() {
-  if (!showedRngh2Notice) {
-    console.warn(
-      "[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!"
-    );
-    showedRngh2Notice = true;
-  }
-}
-
 // TODO(TS) - make sure that BaseGestureHandlerProps doesn't need other generic parameter to work with custom properties.
@@ -176,5 +166,2 @@ export default function createHandler<
       }
-      if (__DEV__) {
-        showRngh2NoticeIfNeeded();
-      }
     }
@@ -181,0 +168,0 @@

src/handlers/gestures/eventReceiver.ts

@@ -54,3 +54,3 @@ import { DeviceEventEmitter, EmitterSubscription } from 'react-native';
 
-function onGestureHandlerEvent(
+export function onGestureHandlerEvent(
   event: GestureUpdateEvent | GestureStateChangeEvent | GestureTouchEvent
@@ -57,0 +57,0 @@ ) {

src/web/GestureHandler.ts

@@ -185,3 +185,9 @@ /* eslint-disable eslint-comments/no-unlimited-disable */
         target: this.ref,
-        oldState: this.oldState,
+        // send oldState only when the state was changed, or is different than ACTIVE
+        // GestureDetector relies on the presence of `oldState` to differentiate between
+        // update events and state change events
+        oldState:
+          state !== this.previousState || state != 4
+            ? this.oldState
+            : undefined,
       },
@@ -188,0 +194,0 @@ timeStamp: Date.now(),

No alert changes

Improved metrics

Total package byte prevSize

1869202

increased by0.27%

Lines of code

18909

increased by0.31%

No dependency changes