react-native-gesture-handler 2.7.1 → 2.8.0

package/src/handlers/gestures/GestureDetector.tsx

@@ -18,6 +18,7 @@ import {
   GestureStateChangeEvent,
   HandlerStateChangeEvent,
   scheduleFlushOperations,
+  UserSelect,
 } from '../gestureHandlerCommon';
 import {
   GestureStateManager,
@@ -125,7 +126,7 @@ interface WebEventHandler {
 
 interface AttachHandlersConfig {
   preparedGesture: GestureConfigReference;
-  gestureConfig: ComposedGesture | GestureType | undefined;
+  gestureConfig: ComposedGesture | GestureType;
   gesture: GestureType[];
   viewTag: number;
   webEventHandlersRef: React.RefObject<WebEventHandler>;
@@ -139,7 +140,7 @@ function attachHandlers({
   webEventHandlersRef,
 }: AttachHandlersConfig) {
   if (!preparedGesture.firstExecution) {
-    gestureConfig?.initialize();
+    gestureConfig.initialize();
   } else {
     preparedGesture.firstExecution = false;
   }
@@ -147,7 +148,7 @@ function attachHandlers({
   // use setImmediate to extract handlerTags, because all refs should be initialized
   // when it's ran
   setImmediate(() => {
-    gestureConfig?.prepare();
+    gestureConfig.prepare();
   });
 
   for (const handler of gesture) {
@@ -197,7 +198,9 @@ function attachHandlers({
       : ActionType.JS_FUNCTION_NEW_API;
 
     if (Platform.OS === 'web') {
-      (RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler)(
+      (
+        RNGestureHandlerModule.attachGestureHandler as typeof RNGestureHandlerModuleWeb.attachGestureHandler
+      )(
         gesture.handlerTag,
         viewTag,
         ActionType.JS_FUNCTION_OLD_API, // ignored on web
@@ -215,9 +218,9 @@ function attachHandlers({
   if (preparedGesture.animatedHandlers) {
     const isAnimatedGesture = (g: GestureType) => g.shouldUseReanimated;
 
-    preparedGesture.animatedHandlers.value = (gesture
+    preparedGesture.animatedHandlers.value = gesture
       .filter(isAnimatedGesture)
-      .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+      .map((g) => g.handlers) as unknown as HandlerCallbacks<
       Record<string, unknown>
     >[];
   }
@@ -225,11 +228,11 @@ function attachHandlers({
 
 function updateHandlers(
   preparedGesture: GestureConfigReference,
-  gestureConfig: ComposedGesture | GestureType | undefined,
+  gestureConfig: ComposedGesture | GestureType,
   gesture: GestureType[],
   mountedRef: RefObject<boolean>
 ) {
-  gestureConfig?.prepare();
+  gestureConfig.prepare();
 
   for (let i = 0; i < gesture.length; i++) {
     const handler = preparedGesture.config[i];
@@ -278,9 +281,9 @@ function updateHandlers(
     if (preparedGesture.animatedHandlers) {
       const previousHandlersValue =
         preparedGesture.animatedHandlers.value ?? [];
-      const newHandlersValue = (preparedGesture.config
+      const newHandlersValue = preparedGesture.config
         .filter((g) => g.shouldUseReanimated) // ignore gestures that shouldn't run on UI
-        .map((g) => g.handlers) as unknown) as HandlerCallbacks<
+        .map((g) => g.handlers) as unknown as HandlerCallbacks<
         Record<string, unknown>
       >[];
 
@@ -550,9 +553,11 @@ function validateDetectorChildren(ref: any) {
           ref._reactInternals.elementType
         : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           ref._reactInternalFiber.elementType;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    let instance = RNRenderer.findHostInstance_DEPRECATED(ref)
-      ._internalFiberInstanceHandleDEV;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    let instance =
+      RNRenderer.findHostInstance_DEPRECATED(
+        ref
+      )._internalFiberInstanceHandleDEV;
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     while (instance && instance.elementType !== wrapType) {
@@ -569,13 +574,28 @@ function validateDetectorChildren(ref: any) {
   }
 }
 
+const applyUserSelectProp = (
+  userSelect: UserSelect,
+  gesture: ComposedGesture | GestureType
+): void => {
+  for (const g of gesture.toGestureArray()) {
+    g.config.userSelect = userSelect;
+  }
+};
+
 interface GestureDetectorProps {
-  gesture?: ComposedGesture | GestureType;
+  gesture: ComposedGesture | GestureType;
+  userSelect?: UserSelect;
   children?: React.ReactNode;
 }
 export const GestureDetector = (props: GestureDetectorProps) => {
   const gestureConfig = props.gesture;
-  const gesture = gestureConfig?.toGestureArray?.() ?? [];
+
+  if (props.userSelect) {
+    applyUserSelectProp(props.userSelect, gestureConfig);
+  }
+
+  const gesture = gestureConfig.toGestureArray();
   const useReanimatedHook = gesture.some((g) => g.shouldUseReanimated);
   const viewRef = useRef(null);
   const firstRenderRef = useRef(true);
@@ -613,7 +633,7 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     preparedGesture.firstExecution || needsToReattach(preparedGesture, gesture);
 
   if (preparedGesture.firstExecution) {
-    gestureConfig?.initialize?.();
+    gestureConfig.initialize();
   }
 
   if (useReanimatedHook) {

package/src/handlers/gestures/eventReceiver.ts

@@ -14,7 +14,8 @@ import {
 } from './gestureStateManager';
 
 let gestureHandlerEventSubscription: EmitterSubscription | null = null;
-let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null = null;
+let gestureHandlerStateChangeEventSubscription: EmitterSubscription | null =
+  null;
 
 const gestureStateManagers: Map<number, GestureStateManagerType> = new Map<
   number,

package/src/handlers/gestures/gesture.ts

@@ -202,9 +202,8 @@ export abstract class BaseGesture<
   onTouchesDown(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesDown = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_DOWN] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_DOWN] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -212,9 +211,8 @@ export abstract class BaseGesture<
   onTouchesMove(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesMove = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_MOVE] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_MOVE] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -222,9 +220,8 @@ export abstract class BaseGesture<
   onTouchesUp(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesUp = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_UP] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_UP] =
+      this.isWorklet(callback);
 
     return this;
   }
@@ -232,9 +229,8 @@ export abstract class BaseGesture<
   onTouchesCancelled(callback: TouchEventHandlerType) {
     this.config.needsPointerData = true;
     this.handlers.onTouchesCancelled = callback;
-    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_CANCELLED] = this.isWorklet(
-      callback
-    );
+    this.handlers.isWorklet[CALLBACK_TYPE.TOUCHES_CANCELLED] =
+      this.isWorklet(callback);
 
     return this;
   }

package/src/jestUtils/jestUtils.ts

@@ -464,9 +464,8 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,
   eventList: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[] = []
 ): void {
-  const { emitEvent, handlerType, handlerTag } = getHandlerData(
-    componentOrGesture
-  );
+  const { emitEvent, handlerType, handlerTag } =
+    getHandlerData(componentOrGesture);
 
   let _ = fillMissingStatesTransitions(
     eventList,
@@ -478,7 +477,7 @@ export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   // @ts-ignore TODO
   _ = _.map(wrapWithNativeEvent);
 
-  const events = (_ as unknown) as WrappedGestureHandlerTestEvent[];
+  const events = _ as unknown as WrappedGestureHandlerTestEvent[];
 
   const firstEvent = events.shift()!;
 

package/src/web/detectors/RotationGestureDetector.ts

@@ -8,7 +8,8 @@ export interface RotationGestureListener {
 }
 
 export default class RotationGestureDetector
-  implements RotationGestureListener {
+  implements RotationGestureListener
+{
   onRotationBegin: (detector: RotationGestureDetector) => boolean;
   onRotation: (detector: RotationGestureDetector) => boolean;
   onRotationEnd: (detector: RotationGestureDetector) => void;

package/src/web/handlers/FlingGestureHandler.ts

@@ -30,8 +30,6 @@ export default class FlingGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.direction) {
       this.direction = this.config.direction;
     }
@@ -124,7 +122,8 @@ export default class FlingGestureHandler extends GestureHandler {
       this.tracker.getTrackedPointersCount() >
       this.maxNumberOfPointersSimultaneously
     ) {
-      this.maxNumberOfPointersSimultaneously = this.tracker.getTrackedPointersCount();
+      this.maxNumberOfPointersSimultaneously =
+        this.tracker.getTrackedPointersCount();
     }
   }
 

package/src/web/handlers/GestureHandler.ts

@@ -70,13 +70,18 @@ export default abstract class GestureHandler {
       );
     }
 
-    this.view = (findNodeHandle(this.ref) as unknown) as HTMLElement;
+    this.view = findNodeHandle(this.ref) as unknown as HTMLElement;
     this.view.style['touchAction'] = 'none';
-    this.view.style['webkitUserSelect'] = 'none';
-    this.view.style['userSelect'] = 'none';
-
     //@ts-ignore This one disables default events on Safari
     this.view.style['WebkitTouchCallout'] = 'none';
+
+    if (!this.config.userSelect) {
+      this.view.style['webkitUserSelect'] = 'none';
+      this.view.style['userSelect'] = 'none';
+    } else {
+      this.view.style['webkitUserSelect'] = this.config.userSelect;
+      this.view.style['userSelect'] = this.config.userSelect;
+    }
   }
 
   private addEventManager(manager: EventManager): void {
@@ -322,6 +327,18 @@ export default abstract class GestureHandler {
     }
   }
   protected onPointerOut(event: AdaptedEvent): void {
+    if (this.shouldCancellWhenOutside) {
+      switch (this.currentState) {
+        case State.ACTIVE:
+          this.cancel();
+          break;
+        case State.BEGAN:
+          this.fail();
+          break;
+      }
+      return;
+    }
+
     if (this.config.needsPointerData) {
       this.sendTouchEvent(event);
     }
@@ -360,9 +377,8 @@ export default abstract class GestureHandler {
     const { onGestureHandlerEvent }: PropsRef = this.propsRef
       .current as PropsRef;
 
-    const touchEvent: ResultTouchEvent | undefined = this.transformTouchEvent(
-      event
-    );
+    const touchEvent: ResultTouchEvent | undefined =
+      this.transformTouchEvent(event);
 
     if (touchEvent) {
       invokeNullableMethod(onGestureHandlerEvent, touchEvent);
@@ -374,10 +390,8 @@ export default abstract class GestureHandler {
   //
 
   public sendEvent = (newState: State, oldState: State): void => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange,
-    }: PropsRef = this.propsRef.current as PropsRef;
+    const { onGestureHandlerEvent, onGestureHandlerStateChange }: PropsRef =
+      this.propsRef.current as PropsRef;
 
     const resultEvent: ResultEvent = this.transformEventData(
       newState,
@@ -576,6 +590,11 @@ export default abstract class GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.config = { enabled: enabled, ...props };
     this.enabled = enabled;
+
+    if (this.config.shouldCancelWhenOutside !== undefined) {
+      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
+    }
+
     this.validateHitSlops();
 
     if (this.enabled) {

package/src/web/handlers/LongPressGestureHandler.ts

@@ -42,8 +42,6 @@ export default class LongPressGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.minDurationMs !== undefined) {
       this.minDurationMs = this.config.minDurationMs;
     }

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,4 +1,4 @@
-import { AdaptedEvent } from '../interfaces';
+import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
@@ -6,6 +6,10 @@ export default class ManualGestureHandler extends GestureHandler {
     super.init(ref, propsRef);
   }
 
+  public updateGestureConfig({ enabled = true, ...props }: Config): void {
+    super.updateGestureConfig({ enabled: enabled, ...props });
+  }
+
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
@@ -22,6 +26,11 @@ export default class ManualGestureHandler extends GestureHandler {
     super.onPointerMove(event);
   }
 
+  protected onPointerOutOfBounds(event: AdaptedEvent): void {
+    this.tracker.track(event);
+    super.onPointerOutOfBounds(event);
+  }
+
   protected onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -29,8 +29,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
       this.buttonRole = true;
     } else {
       this.buttonRole = false;
-      this.view.style['webkitUserSelect'] = 'auto';
-      this.view.style['userSelect'] = 'auto';
     }
   }
 

package/src/web/handlers/PanGestureHandler.ts

@@ -65,8 +65,6 @@ export default class PanGestureHandler extends GestureHandler {
     super.updateGestureConfig({ enabled: enabled, ...props });
     this.checkCustomActivationCriteria(this.customActivationProperties);
 
-    this.enabled = enabled;
-
     if (this.config.minDist !== undefined) {
       this.minDistSq = this.config.minDist * this.config.minDist;
     } else if (this.hasCustomActivationCriteria) {
@@ -98,10 +96,6 @@ export default class PanGestureHandler extends GestureHandler {
       this.activateAfterLongPress = this.config.activateAfterLongPress;
     }
 
-    if (this.config.shouldCancelWhenOutside !== undefined) {
-      this.setShouldCancelWhenOutside(this.config.shouldCancelWhenOutside);
-    }
-
     if (this.config.activeOffsetXStart !== undefined) {
       this.activeOffsetXStart = this.config.activeOffsetXStart;
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -57,8 +57,6 @@ export default class PinchGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/RotationGestureHandler.ts

@@ -41,9 +41,8 @@ export default class RotationGestureHandler extends GestureHandler {
     },
   };
 
-  private rotationGestureDetector: RotationGestureDetector = new RotationGestureDetector(
-    this.rotationGestureListener
-  );
+  private rotationGestureDetector: RotationGestureDetector =
+    new RotationGestureDetector(this.rotationGestureListener);
 
   public init(ref: number, propsRef: React.RefObject<unknown>): void {
     super.init(ref, propsRef);
@@ -53,8 +52,6 @@ export default class RotationGestureHandler extends GestureHandler {
 
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
-
-    this.enabled = enabled;
   }
 
   protected transformNativeEvent() {

package/src/web/handlers/TapGestureHandler.ts

@@ -39,8 +39,6 @@ export default class TapGestureHandler extends GestureHandler {
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 
-    this.enabled = enabled;
-
     if (this.config.numberOfTaps !== undefined) {
       this.numberOfTaps = this.config.numberOfTaps;
     }

package/src/web/interfaces.ts

@@ -1,3 +1,4 @@
+import { UserSelect } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 
@@ -20,6 +21,7 @@ type ConfigArgs =
   | number
   | boolean
   | HitSlop
+  | UserSelect
   | Directions
   | Handler[]
   | null
@@ -31,6 +33,7 @@ export interface Config extends Record<string, ConfigArgs> {
   waitFor?: Handler[] | null;
   hitSlop?: HitSlop;
   shouldCancelWhenOutside?: boolean;
+  userSelect?: UserSelect;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;

package/src/web/tools/InteractionManager.ts

@@ -69,9 +69,8 @@ export default class InteractionManager {
     handler: GestureHandler,
     otherHandler: GestureHandler
   ): boolean {
-    const simultaneousHandlers:
-      | number[]
-      | undefined = this.simultaneousRelations.get(handler.getTag());
+    const simultaneousHandlers: number[] | undefined =
+      this.simultaneousRelations.get(handler.getTag());
     if (!simultaneousHandlers) {
       return false;
     }

package/src/web_hammer/GestureHandler.ts

@@ -206,10 +206,8 @@ abstract class GestureHandler {
   }
 
   sendEvent = (nativeEvent: HammerInputExt) => {
-    const {
-      onGestureHandlerEvent,
-      onGestureHandlerStateChange,
-    } = this.propsRef.current;
+    const { onGestureHandlerEvent, onGestureHandlerStateChange } =
+      this.propsRef.current;
 
     const event = this.transformEventData(nativeEvent);
 
@@ -312,7 +310,7 @@ abstract class GestureHandler {
         return;
       }
 
-      this.onRawEvent((ev as unknown) as HammerInputExt);
+      this.onRawEvent(ev as unknown as HammerInputExt);
 
       // TODO: Bacon: Check against something other than null
       // The isFirst value is not called when the first rotation is calculated.
@@ -336,17 +334,17 @@ abstract class GestureHandler {
     // TODO(TS) Hammer types aren't exactly that what we get in runtime
     if (!this.isDiscrete) {
       this.hammer!.on(`${this.name}start`, (event: HammerInput) =>
-        this.onStart((event as unknown) as HammerInputExt)
+        this.onStart(event as unknown as HammerInputExt)
       );
       this.hammer!.on(
         `${this.name}end ${this.name}cancel`,
         (event: HammerInput) => {
-          this.onGestureEnded((event as unknown) as HammerInputExt);
+          this.onGestureEnded(event as unknown as HammerInputExt);
         }
       );
     }
     this.hammer!.on(this.name, (ev: HammerInput) =>
-      this.onGestureActivated((ev as unknown) as HammerInputExt)
+      this.onGestureActivated(ev as unknown as HammerInputExt)
     ); // TODO(TS) remove cast after https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50438 is merged
   }
 

package/src/web_hammer/NodeManager.ts

@@ -7,7 +7,9 @@ const gestures: Record<
 > = {};
 
 export function getHandler(tag: number) {
-  if (tag in gestures) return gestures[tag];
+  if (tag in gestures) {
+    return gestures[tag];
+  }
 
   throw new Error(`No handler for tag ${tag}`);
 }

package/src/web_hammer/PanGestureHandler.ts

@@ -54,23 +54,29 @@ class PanGestureHandler extends DraggingGestureHandler {
       return Hammer.DIRECTION_ALL;
     }
 
-    if (!isnan(activeOffsetXStart))
+    if (!isnan(activeOffsetXStart)) {
       horizontalDirections.push(Hammer.DIRECTION_LEFT);
-    if (!isnan(activeOffsetXEnd))
+    }
+    if (!isnan(activeOffsetXEnd)) {
       horizontalDirections.push(Hammer.DIRECTION_RIGHT);
-    if (horizontalDirections.length === 2)
+    }
+    if (horizontalDirections.length === 2) {
       horizontalDirections = [Hammer.DIRECTION_HORIZONTAL];
+    }
 
     directions = directions.concat(horizontalDirections);
     let verticalDirections = [];
 
-    if (!isnan(activeOffsetYStart))
+    if (!isnan(activeOffsetYStart)) {
       verticalDirections.push(Hammer.DIRECTION_UP);
-    if (!isnan(activeOffsetYEnd))
+    }
+    if (!isnan(activeOffsetYEnd)) {
       verticalDirections.push(Hammer.DIRECTION_DOWN);
+    }
 
-    if (verticalDirections.length === 2)
+    if (verticalDirections.length === 2) {
       verticalDirections = [Hammer.DIRECTION_VERTICAL];
+    }
 
     directions = directions.concat(verticalDirections);
 

package/android/lib/build.gradle

@@ -1,28 +0,0 @@
-apply plugin: 'com.android.library'
-
-repositories {
-    maven { url 'https://repo1.maven.org/maven2' }
-}
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion '25.0.0'
-
-    defaultConfig {
-        minSdkVersion 16
-        targetSdkVersion 23
-        versionCode 1
-        versionName "1.0"
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    testCompile 'junit:junit:4.12'
-    compile 'com.android.support:appcompat-v7:23.4.0'
-}