react-native-gesture-handler 2.21.1 → 2.22.0-rc.1

package/src/handlers/gestures/GestureDetector/index.tsx

@@ -23,6 +23,7 @@ import { useWebEventHandlers } from './utils';
 import { Wrap, AnimatedWrap } from './Wrap';
 import { useDetectorUpdater } from './useDetectorUpdater';
 import { useViewRefHandler } from './useViewRefHandler';
+import { useMountReactions } from './useMountReactions';
 
 function propagateDetectorConfig(
   props: GestureDetectorProps,
@@ -174,6 +175,8 @@ export const GestureDetector = (props: GestureDetectorProps) => {
     }
   }, [props]);
 
+  useMountReactions(updateAttachedGestures, preparedGesture);
+
   if (shouldUseReanimated) {
     return (
       <AnimatedWrap

package/src/handlers/gestures/GestureDetector/useMountReactions.ts

@@ -0,0 +1,51 @@
+import { transformIntoHandlerTags } from '../../utils';
+import { MountRegistry } from '../../../mountRegistry';
+import { AttachedGestureState } from './types';
+import { useEffect } from 'react';
+import { GestureRef } from '../gesture';
+
+function shouldUpdateDetector(
+  relation: GestureRef[] | undefined,
+  gesture: { handlerTag: number }
+) {
+  if (relation === undefined) {
+    return false;
+  }
+
+  for (const tag of transformIntoHandlerTags(relation)) {
+    if (tag === gesture.handlerTag) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+export function useMountReactions(
+  updateDetector: () => void,
+  state: AttachedGestureState
+) {
+  useEffect(() => {
+    return MountRegistry.addMountListener((gesture) => {
+      // At this point the ref in the gesture config should be updated, so we can check if one of the gestures
+      // set in a relation with the gesture got mounted. If so, we need to update the detector to propagate
+      // the changes to the native side.
+      for (const attachedGesture of state.attachedGestures) {
+        const blocksHandlers = attachedGesture.config.blocksHandlers;
+        const requireToFail = attachedGesture.config.requireToFail;
+        const simultaneousWith = attachedGesture.config.simultaneousWith;
+
+        if (
+          shouldUpdateDetector(blocksHandlers, gesture) ||
+          shouldUpdateDetector(requireToFail, gesture) ||
+          shouldUpdateDetector(simultaneousWith, gesture)
+        ) {
+          updateDetector();
+
+          // We can safely return here, if any other gestures should be updated, they will be by the above call
+          return;
+        }
+      }
+    });
+  }, [updateDetector, state]);
+}

package/src/handlers/gestures/gesture.ts

@@ -101,7 +101,7 @@ export const CALLBACK_TYPE = {
 
 // Allow using CALLBACK_TYPE as object and type
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type CALLBACK_TYPE = typeof CALLBACK_TYPE[keyof typeof CALLBACK_TYPE];
+export type CALLBACK_TYPE = (typeof CALLBACK_TYPE)[keyof typeof CALLBACK_TYPE];
 
 export abstract class Gesture {
   /**
@@ -125,7 +125,7 @@ export abstract class Gesture {
 
 let nextGestureId = 0;
 export abstract class BaseGesture<
-  EventPayloadT extends Record<string, unknown>
+  EventPayloadT extends Record<string, unknown>,
 > extends Gesture {
   private gestureId = -1;
   public handlerTag = -1;
@@ -433,7 +433,7 @@ export abstract class BaseGesture<
 
 export abstract class ContinousBaseGesture<
   EventPayloadT extends Record<string, unknown>,
-  EventChangePayloadT extends Record<string, unknown>
+  EventChangePayloadT extends Record<string, unknown>,
 > extends BaseGesture<EventPayloadT> {
   /**
    * Set the callback that is being called every time the gesture receives an update while it's active.

package/src/handlers/utils.ts

@@ -36,7 +36,8 @@ export function filterConfig(
   }
   return filteredConfig;
 }
-function transformIntoHandlerTags(handlerIDs: any) {
+
+export function transformIntoHandlerTags(handlerIDs: any) {
   handlerIDs = toArray(handlerIDs);
 
   if (Platform.OS === 'web') {

package/src/index.ts

@@ -102,6 +102,7 @@ export {
   FlatList,
   RefreshControl,
 } from './components/GestureComponents';
+export { Text } from './components/Text';
 export { HoverEffect } from './handlers/gestures/hoverGesture';
 export type {
   // Events

package/src/jestUtils/jestUtils.ts

@@ -78,7 +78,7 @@ try {
 }
 
 type GestureHandlerTestEvent<
-  TEventPayload extends Record<string, unknown> = Record<string, unknown>
+  TEventPayload extends Record<string, unknown> = Record<string, unknown>,
 > = (
   | GestureEvent<TEventPayload>
   | HandlerStateChangeEvent<TEventPayload>
@@ -454,17 +454,15 @@ type AllHandlers =
 // prettier-ignore
 type ClassComponentConstructor<P> = new (props: P) => React.Component<P, any, any>;
 
-type ExtractPayloadFromProps<T> = T extends BaseGestureHandlerProps<
-  infer TPayload
->
-  ? TPayload
-  : never;
-
-type ExtractConfig<T> = T extends BaseGesture<infer TGesturePayload>
-  ? TGesturePayload
-  : T extends ClassComponentConstructor<infer THandlerProps>
-  ? ExtractPayloadFromProps<THandlerProps>
-  : Record<string, unknown>;
+type ExtractPayloadFromProps<T> =
+  T extends BaseGestureHandlerProps<infer TPayload> ? TPayload : never;
+
+type ExtractConfig<T> =
+  T extends BaseGesture<infer TGesturePayload>
+    ? TGesturePayload
+    : T extends ClassComponentConstructor<infer THandlerProps>
+      ? ExtractPayloadFromProps<THandlerProps>
+      : Record<string, unknown>;
 
 export function fireGestureHandler<THandler extends AllGestures | AllHandlers>(
   componentOrGesture: ReactTestInstance | GestureType,

package/src/mountRegistry.ts

@@ -0,0 +1,51 @@
+import { GestureType } from './handlers/gestures/gesture';
+
+interface ReactComponentWithHandlerTag extends React.Component {
+  handlerTag: number;
+}
+
+export type GestureMountListener = (
+  gesture: GestureType | ReactComponentWithHandlerTag
+) => void;
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class MountRegistry {
+  private static mountListeners = new Set<GestureMountListener>();
+  private static unmountListeners = new Set<GestureMountListener>();
+
+  static addMountListener(listener: GestureMountListener): () => void {
+    this.mountListeners.add(listener);
+
+    return () => {
+      this.mountListeners.delete(listener);
+    };
+  }
+
+  static addUnmountListener(listener: GestureMountListener): () => void {
+    this.unmountListeners.add(listener);
+
+    return () => {
+      this.unmountListeners.delete(listener);
+    };
+  }
+
+  static gestureHandlerWillMount(handler: React.Component) {
+    this.mountListeners.forEach((listener) =>
+      listener(handler as ReactComponentWithHandlerTag)
+    );
+  }
+
+  static gestureHandlerWillUnmount(handler: React.Component) {
+    this.unmountListeners.forEach((listener) =>
+      listener(handler as ReactComponentWithHandlerTag)
+    );
+  }
+
+  static gestureWillMount(gesture: GestureType) {
+    this.mountListeners.forEach((listener) => listener(gesture));
+  }
+
+  static gestureWillUnmount(gesture: GestureType) {
+    this.unmountListeners.forEach((listener) => listener(gesture));
+  }
+}

package/src/web/detectors/ScaleGestureDetector.ts

@@ -29,7 +29,7 @@ export default class ScaleGestureDetector implements ScaleGestureListener {
   private spanSlop: number;
   private minSpan: number;
 
-  public constructor(callbacks: ScaleGestureListener) {
+  constructor(callbacks: ScaleGestureListener) {
     this.onScaleBegin = callbacks.onScaleBegin;
     this.onScale = callbacks.onScale;
     this.onScaleEnd = callbacks.onScaleEnd;

package/src/web/handlers/FlingGestureHandler.ts

@@ -26,10 +26,6 @@ export default class FlingGestureHandler extends GestureHandler {
   private maxNumberOfPointersSimultaneously = 0;
   private keyPointer = NaN;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
-  }
-
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 

package/src/web/handlers/GestureHandler.ts

@@ -43,9 +43,7 @@ export default abstract class GestureHandler implements IGestureHandler {
 
   protected delegate: GestureHandlerDelegate<unknown, IGestureHandler>;
 
-  public constructor(
-    delegate: GestureHandlerDelegate<unknown, IGestureHandler>
-  ) {
+  constructor(delegate: GestureHandlerDelegate<unknown, IGestureHandler>) {
     this.delegate = delegate;
   }
 

package/src/web/handlers/HoverGestureHandler.ts

@@ -1,15 +1,11 @@
 import { State } from '../../State';
-import { AdaptedEvent, Config, StylusData } from '../interfaces';
+import { AdaptedEvent, StylusData } from '../interfaces';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
   private stylusData: StylusData | undefined;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
-    super.init(ref, propsRef);
-  }
-
   protected transformNativeEvent(): Record<string, unknown> {
     return {
       ...super.transformNativeEvent(),
@@ -17,10 +13,6 @@ export default class HoverGestureHandler extends GestureHandler {
     };
   }
 
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
-  }
-
   protected onPointerMoveOver(event: AdaptedEvent): void {
     GestureHandlerOrchestrator.getInstance().recordHandlerIfNotPresent(this);
 

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,15 +1,7 @@
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 import GestureHandler from './GestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
-  public init(ref: number, propsRef: React.RefObject<unknown>) {
-    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);

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -55,10 +55,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     view.style['WebkitTouchCallout'] = 'auto';
   }
 
-  protected resetConfig(): void {
-    super.resetConfig();
-  }
-
   protected onPointerDown(event: AdaptedEvent): void {
     this.tracker.addToTracker(event);
     super.onPointerDown(event);
@@ -83,7 +79,11 @@ export default class NativeViewGestureHandler extends GestureHandler {
     }
 
     this.begin();
-    if (this.buttonRole) {
+
+    const view = this.delegate.getView() as HTMLElement;
+    const isRNGHText = view.hasAttribute('rnghtext');
+
+    if (this.buttonRole || isRNGHText) {
       this.activate();
     }
   }

package/src/web/handlers/PanGestureHandler.ts

@@ -61,10 +61,6 @@ export default class PanGestureHandler extends GestureHandler {
   private endWheelTimeout = 0;
   private wheelDevice = WheelDevice.UNDETERMINED;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
-  }
-
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     this.resetConfig();
 

package/src/web/handlers/PinchGestureHandler.ts

@@ -1,6 +1,6 @@
 import { State } from '../../State';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import ScaleGestureDetector, {
@@ -55,10 +55,6 @@ export default class PinchGestureHandler extends GestureHandler {
     this.setShouldCancelWhenOutside(false);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
-  }
-
   protected transformNativeEvent() {
     return {
       focalX: this.scaleGestureDetector.getFocusX(),

package/src/web/handlers/RotationGestureHandler.ts

@@ -1,5 +1,5 @@
 import { State } from '../../State';
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent } from '../interfaces';
 
 import GestureHandler from './GestureHandler';
 import RotationGestureDetector, {
@@ -50,10 +50,6 @@ export default class RotationGestureHandler extends GestureHandler {
     this.setShouldCancelWhenOutside(false);
   }
 
-  public updateGestureConfig({ enabled = true, ...props }: Config): void {
-    super.updateGestureConfig({ enabled: enabled, ...props });
-  }
-
   protected transformNativeEvent() {
     return {
       rotation: this.rotation ? this.rotation : 0,
@@ -158,10 +154,6 @@ export default class RotationGestureHandler extends GestureHandler {
     this.begin();
   }
 
-  public activate(_force?: boolean): void {
-    super.activate();
-  }
-
   protected onReset(): void {
     if (this.currentState === State.ACTIVE) {
       return;

package/src/web/handlers/TapGestureHandler.ts

@@ -31,10 +31,6 @@ export default class TapGestureHandler extends GestureHandler {
 
   private tapsSoFar = 0;
 
-  public init(ref: number, propsRef: React.RefObject<unknown>): void {
-    super.init(ref, propsRef);
-  }
-
   public updateGestureConfig({ enabled = true, ...props }: Config): void {
     super.updateGestureConfig({ enabled: enabled, ...props });
 

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -135,11 +135,11 @@ export class GestureHandlerWebDelegate
     const { userSelect } = this.gestureHandler.getConfig();
 
     this.view.style['userSelect'] = isHandlerEnabled
-      ? userSelect ?? 'none'
+      ? (userSelect ?? 'none')
       : this.defaultViewStyles.userSelect;
 
     this.view.style['webkitUserSelect'] = isHandlerEnabled
-      ? userSelect ?? 'none'
+      ? (userSelect ?? 'none')
       : this.defaultViewStyles.userSelect;
   }
 
@@ -147,12 +147,12 @@ export class GestureHandlerWebDelegate
     const { touchAction } = this.gestureHandler.getConfig();
 
     this.view.style['touchAction'] = isHandlerEnabled
-      ? touchAction ?? 'none'
+      ? (touchAction ?? 'none')
       : this.defaultViewStyles.touchAction;
 
     // @ts-ignore This one disables default events on Safari
     this.view.style['WebkitTouchCallout'] = isHandlerEnabled
-      ? touchAction ?? 'none'
+      ? (touchAction ?? 'none')
       : this.defaultViewStyles.touchAction;
   }
 

package/src/web_hammer/GestureHandler.ts

@@ -538,7 +538,7 @@ abstract class GestureHandler {
       'activeOffsetYStart',
       'activeOffsetYEnd',
     ] as const;
-    configProps.forEach((prop: typeof configProps[number]) => {
+    configProps.forEach((prop: (typeof configProps)[number]) => {
       if (typeof props[prop] === 'undefined') {
         props[prop] = Number.NaN;
       }

package/src/web_hammer/PressGestureHandler.ts

@@ -87,10 +87,13 @@ class PressGestureHandler extends DiscreteGestureHandler {
     this.isGestureRunning = true;
     clearTimeout(this.visualFeedbackTimer);
     this.initialEvent = ev;
-    this.visualFeedbackTimer = fireAfterInterval(() => {
-      this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
-      this.initialEvent = null;
-    }, this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY);
+    this.visualFeedbackTimer = fireAfterInterval(
+      () => {
+        this.sendGestureStartedEvent(this.initialEvent as HammerInputExt);
+        this.initialEvent = null;
+      },
+      this.shouldDelayTouchForEvent(ev) && CONTENT_TOUCHES_DELAY
+    );
   }
 
   sendGestureStartedEvent(ev: HammerInputExt) {

package/android/src/main/java/com/swmansion/gesturehandler/RNGestureHandlerPackage.kt

@@ -1,86 +0,0 @@
-package com.swmansion.gesturehandler
-
-import com.facebook.react.TurboReactPackage
-import com.facebook.react.ViewManagerOnDemandReactPackage
-import com.facebook.react.bridge.ModuleSpec
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.module.annotations.ReactModule
-import com.facebook.react.module.annotations.ReactModuleList
-import com.facebook.react.module.model.ReactModuleInfo
-import com.facebook.react.module.model.ReactModuleInfoProvider
-import com.facebook.react.uimanager.ViewManager
-import com.swmansion.gesturehandler.react.RNGestureHandlerButtonViewManager
-import com.swmansion.gesturehandler.react.RNGestureHandlerModule
-import com.swmansion.gesturehandler.react.RNGestureHandlerRootViewManager
-
-@ReactModuleList(
-  nativeModules = [
-    RNGestureHandlerModule::class
-  ]
-)
-class RNGestureHandlerPackage : TurboReactPackage(), ViewManagerOnDemandReactPackage {
-  private val viewManagers: Map<String, ModuleSpec> by lazy {
-    mapOf(
-      RNGestureHandlerRootViewManager.REACT_CLASS to ModuleSpec.viewManagerSpec {
-        RNGestureHandlerRootViewManager()
-      },
-      RNGestureHandlerButtonViewManager.REACT_CLASS to ModuleSpec.viewManagerSpec {
-        RNGestureHandlerButtonViewManager()
-      }
-    )
-  }
-
-  override fun createViewManagers(reactContext: ReactApplicationContext) =
-    listOf<ViewManager<*, *>>(
-      RNGestureHandlerRootViewManager(),
-      RNGestureHandlerButtonViewManager()
-    )
-
-  override fun getViewManagerNames(reactContext: ReactApplicationContext?) =
-    viewManagers.keys.toList()
-
-  override fun getViewManagers(reactContext: ReactApplicationContext?): MutableList<ModuleSpec> =
-    viewManagers.values.toMutableList()
-
-  override fun createViewManager(
-    reactContext: ReactApplicationContext?,
-    viewManagerName: String?
-  ) = viewManagers[viewManagerName]?.provider?.get() as? ViewManager<*, *>
-
-  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
-    return if (name == RNGestureHandlerModule.NAME) {
-      RNGestureHandlerModule(reactContext)
-    } else {
-      null
-    }
-  }
-
-  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
-    try {
-      val reactModuleInfoProviderClass =
-        Class.forName("com.swmansion.gesturehandler.RNGestureHandlerPackage$\$ReactModuleInfoProvider")
-      return reactModuleInfoProviderClass.getDeclaredConstructor().newInstance() as ReactModuleInfoProvider
-    } catch (e: ClassNotFoundException) {
-      return ReactModuleInfoProvider {
-        val reactModule: ReactModule = RNGestureHandlerModule::class.java.getAnnotation(ReactModule::class.java)!!
-
-        mutableMapOf(
-          RNGestureHandlerModule.NAME to ReactModuleInfo(
-            reactModule.name,
-            RNGestureHandlerModule::class.java.name,
-            reactModule.canOverrideExistingModule,
-            reactModule.needsEagerInit,
-            true, // Has constants is hardcoded to return true, so replacing it with `true` changes nothing.
-            reactModule.isCxxModule,
-            true
-          )
-        )
-      }
-    } catch (e: InstantiationException) {
-      throw RuntimeException("No ReactModuleInfoProvider for RNGestureHandlerPackage$\$ReactModuleInfoProvider", e)
-    } catch (e: IllegalAccessException) {
-      throw RuntimeException("No ReactModuleInfoProvider for RNGestureHandlerPackage$\$ReactModuleInfoProvider", e)
-    }
-  }
-}