react-native-gesture-handler 2.16.0-rc.0 → 2.16.1

package/lib/typescript/web/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { UserSelect, ActiveCursor } from '../handlers/gestureHandlerCommon';
+import { UserSelect, ActiveCursor, MouseButton, TouchAction } from '../handlers/gestureHandlerCommon';
 import { Directions } from '../Directions';
 import { State } from '../State';
 import { PointerType } from '../PointerType';
@@ -15,7 +15,7 @@ export interface HitSlop {
 export interface Handler {
     handlerTag: number;
 }
-type ConfigArgs = number | boolean | HitSlop | UserSelect | ActiveCursor | Directions | Handler[] | null | undefined;
+type ConfigArgs = number | boolean | HitSlop | UserSelect | TouchAction | ActiveCursor | Directions | Handler[] | null | undefined;
 export interface Config extends Record<string, ConfigArgs> {
     enabled?: boolean;
     simultaneousHandlers?: Handler[] | null;
@@ -27,6 +27,8 @@ export interface Config extends Record<string, ConfigArgs> {
     activeCursor?: ActiveCursor;
     mouseButton?: MouseButton;
     enableContextMenu?: boolean;
+    touchAction?: TouchAction;
+    manualActivation?: boolean;
     activateAfterLongPress?: number;
     failOffsetXStart?: number;
     failOffsetYStart?: number;
@@ -67,6 +69,10 @@ interface NativeEvent extends Record<string, NativeEventArgs> {
     oldState?: State;
     pointerType: PointerType;
 }
+export interface Point {
+    x: number;
+    y: number;
+}
 export interface PointerData {
     id: number;
     x: number;
@@ -109,14 +115,6 @@ export interface AdaptedEvent {
     changedTouches?: TouchList;
     touchEventType?: TouchEventType;
 }
-export declare enum MouseButton {
-    LEFT = 1,
-    RIGHT = 2,
-    MIDDLE = 4,
-    BUTTON_4 = 8,
-    BUTTON_5 = 16,
-    ALL = 31
-}
 export declare enum EventTypes {
     DOWN = 0,
     ADDITIONAL_POINTER_DOWN = 1,

package/lib/typescript/web/tools/EventManager.d.ts

@@ -1,10 +1,12 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+type PointerEventCallback = (event: AdaptedEvent) => void;
 export default abstract class EventManager<T> {
     protected readonly view: T;
     protected pointersInBounds: number[];
     protected activePointersCounter: number;
     constructor(view: T);
-    abstract setListeners(): void;
+    abstract registerListeners(): void;
+    abstract unregisterListeners(): void;
     protected abstract mapEvent(event: Event, eventType: EventTypes, index?: number, touchEventType?: TouchEventType): AdaptedEvent;
     protected onPointerDown(_event: AdaptedEvent): void;
     protected onPointerAdd(_event: AdaptedEvent): void;
@@ -17,18 +19,19 @@ export default abstract class EventManager<T> {
     protected onPointerOutOfBounds(_event: AdaptedEvent): void;
     protected onPointerMoveOver(_event: AdaptedEvent): void;
     protected onPointerMoveOut(_event: AdaptedEvent): void;
-    setOnPointerDown(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerAdd(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerUp(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerRemove(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerMove(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerLeave(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerEnter(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerCancel(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerOutOfBounds(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerMoveOver(callback: (event: AdaptedEvent) => void): void;
-    setOnPointerMoveOut(callback: (event: AdaptedEvent) => void): void;
+    setOnPointerDown(callback: PointerEventCallback): void;
+    setOnPointerAdd(callback: PointerEventCallback): void;
+    setOnPointerUp(callback: PointerEventCallback): void;
+    setOnPointerRemove(callback: PointerEventCallback): void;
+    setOnPointerMove(callback: PointerEventCallback): void;
+    setOnPointerLeave(callback: PointerEventCallback): void;
+    setOnPointerEnter(callback: PointerEventCallback): void;
+    setOnPointerCancel(callback: PointerEventCallback): void;
+    setOnPointerOutOfBounds(callback: PointerEventCallback): void;
+    setOnPointerMoveOver(callback: PointerEventCallback): void;
+    setOnPointerMoveOut(callback: PointerEventCallback): void;
     protected markAsInBounds(pointerId: number): void;
     protected markAsOutOfBounds(pointerId: number): void;
     resetManager(): void;
 }
+export {};

package/lib/typescript/web/tools/GestureHandlerDelegate.d.ts

@@ -1,4 +1,3 @@
-import type GestureHandler from '../handlers/GestureHandler';
 import { Config } from '../interfaces';
 export interface MeasureResult {
     pageX: number;
@@ -6,9 +5,9 @@ export interface MeasureResult {
     width: number;
     height: number;
 }
-export interface GestureHandlerDelegate<T> {
-    getView(): T;
-    init(viewRef: number, handler: GestureHandler): void;
+export interface GestureHandlerDelegate<TComponent, THandler> {
+    getView(): TComponent;
+    init(viewRef: number, handler: THandler): void;
     isPointerInBounds({ x, y }: {
         x: number;
         y: number;

package/lib/typescript/web/tools/GestureHandlerOrchestrator.d.ts

@@ -1,29 +1,31 @@
 import { State } from '../../State';
-import GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
 export default class GestureHandlerOrchestrator {
     private static instance;
     private gestureHandlers;
     private awaitingHandlers;
+    private awaitingHandlersTags;
     private handlingChangeSemaphore;
     private activationIndex;
     private constructor();
     private scheduleFinishedHandlersCleanup;
     private cleanHandler;
-    removeHandlerFromOrchestrator(handler: GestureHandler): void;
+    removeHandlerFromOrchestrator(handler: IGestureHandler): void;
     private cleanupFinishedHandlers;
     private hasOtherHandlerToWaitFor;
+    private shouldBeCancelledByFinishedHandler;
     private tryActivate;
     private shouldActivate;
     private cleanupAwaitingHandlers;
-    onHandlerStateChange(handler: GestureHandler, newState: State, oldState: State, sendIfDisabled?: boolean): void;
+    onHandlerStateChange(handler: IGestureHandler, newState: State, oldState: State, sendIfDisabled?: boolean): void;
     private makeActive;
     private addAwaitingHandler;
-    recordHandlerIfNotPresent(handler: GestureHandler): void;
+    recordHandlerIfNotPresent(handler: IGestureHandler): void;
     private shouldHandlerWaitForOther;
     private canRunSimultaneously;
     private shouldHandlerBeCancelledBy;
     private checkOverlap;
     private isFinished;
-    cancelMouseAndPenGestures(currentHandler: GestureHandler): void;
+    cancelMouseAndPenGestures(currentHandler: IGestureHandler): void;
     static getInstance(): GestureHandlerOrchestrator;
 }

package/lib/typescript/web/tools/GestureHandlerWebDelegate.d.ts

@@ -1,12 +1,12 @@
-import type GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
 import { GestureHandlerDelegate, MeasureResult } from './GestureHandlerDelegate';
 import { Config } from '../interfaces';
-export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement> {
+export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement, IGestureHandler> {
     private view;
     private gestureHandler;
     private eventManagers;
     getView(): HTMLElement;
-    init(viewRef: number, handler: GestureHandler): void;
+    init(viewRef: number, handler: IGestureHandler): void;
     isPointerInBounds({ x, y }: {
         x: number;
         y: number;

package/lib/typescript/web/tools/InteractionManager.d.ts

@@ -1,4 +1,4 @@
-import GestureHandler from '../handlers/GestureHandler';
+import type IGestureHandler from '../handlers/IGestureHandler';
 import { Config } from '../interfaces';
 export default class InteractionManager {
     private static instance;
@@ -6,11 +6,11 @@ export default class InteractionManager {
     private readonly simultaneousRelations;
     private readonly blocksHandlersRelations;
     private constructor();
-    configureInteractions(handler: GestureHandler, config: Config): void;
-    shouldWaitForHandlerFailure(handler: GestureHandler, otherHandler: GestureHandler): boolean;
-    shouldRecognizeSimultaneously(handler: GestureHandler, otherHandler: GestureHandler): boolean;
-    shouldRequireHandlerToWaitForFailure(handler: GestureHandler, otherHandler: GestureHandler): boolean;
-    shouldHandlerBeCancelledBy(_handler: GestureHandler, _otherHandler: GestureHandler): boolean;
+    configureInteractions(handler: IGestureHandler, config: Config): void;
+    shouldWaitForHandlerFailure(handler: IGestureHandler, otherHandler: IGestureHandler): boolean;
+    shouldRecognizeSimultaneously(handler: IGestureHandler, otherHandler: IGestureHandler): boolean;
+    shouldRequireHandlerToWaitForFailure(handler: IGestureHandler, otherHandler: IGestureHandler): boolean;
+    shouldHandlerBeCancelledBy(_handler: IGestureHandler, otherHandler: IGestureHandler): boolean;
     dropRelationsForHandlerWithTag(handlerTag: number): void;
     reset(): void;
     static getInstance(): InteractionManager;

package/lib/typescript/web/tools/NodeManager.d.ts

@@ -1,11 +1,12 @@
 import { ValueOf } from '../../typeUtils';
-import { Gestures } from '../../RNGestureHandlerModule.web';
+import { Gestures } from '../Gestures';
+import type IGestureHandler from '../handlers/IGestureHandler';
 export default abstract class NodeManager {
     private static gestures;
-    static getHandler(tag: number): import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
+    static getHandler(tag: number): IGestureHandler;
     static createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof Gestures>>): void;
     static dropGestureHandler(handlerTag: number): void;
     static getNodes(): {
-        [x: number]: import("../handlers/NativeViewGestureHandler").default | import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
+        [x: number]: import("../handlers/PanGestureHandler").default | import("../handlers/TapGestureHandler").default | import("../handlers/LongPressGestureHandler").default | import("../handlers/PinchGestureHandler").default | import("../handlers/RotationGestureHandler").default | import("../handlers/FlingGestureHandler").default | import("../handlers/NativeViewGestureHandler").default | import("../handlers/ManualGestureHandler").default | import("../handlers/HoverGestureHandler").default;
     };
 }

package/lib/typescript/web/tools/PointerEventManager.d.ts

@@ -1,10 +1,19 @@
-import { AdaptedEvent, EventTypes } from '../interfaces';
 import EventManager from './EventManager';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 export default class PointerEventManager extends EventManager<HTMLElement> {
     private trackedPointers;
     private readonly mouseButtonsMapper;
+    private lastPosition;
     constructor(view: HTMLElement);
-    setListeners(): void;
+    private pointerDownCallback;
+    private pointerUpCallback;
+    private pointerMoveCallback;
+    private pointerCancelCallback;
+    private pointerEnterCallback;
+    private pointerLeaveCallback;
+    private lostPointerCaptureCallback;
+    registerListeners(): void;
+    unregisterListeners(): void;
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
     resetManager(): void;
 }

package/lib/typescript/web/tools/TouchEventManager.d.ts

@@ -1,6 +1,11 @@
 import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
 import EventManager from './EventManager';
 export default class TouchEventManager extends EventManager<HTMLElement> {
-    setListeners(): void;
+    private touchStartCallback;
+    private touchMoveCallback;
+    private touchEndCallback;
+    private touchCancelCallback;
+    registerListeners(): void;
+    unregisterListeners(): void;
     protected mapEvent(event: TouchEvent, eventType: EventTypes, index: number, touchEventType: TouchEventType): AdaptedEvent;
 }

package/lib/typescript/web/tools/Vector.d.ts

@@ -0,0 +1,15 @@
+import { DiagonalDirections, Directions } from '../../Directions';
+import PointerTracker from './PointerTracker';
+export default class Vector {
+    private readonly x;
+    private readonly y;
+    private readonly unitX;
+    private readonly unitY;
+    private readonly _magnitude;
+    constructor(x: number, y: number);
+    static fromDirection(direction: Directions | DiagonalDirections): Vector;
+    static fromVelocity(tracker: PointerTracker, pointerId: number): Vector;
+    get magnitude(): number;
+    computeSimilarity(vector: Vector): number;
+    isSimilar(vector: Vector, threshold: number): boolean;
+}

package/lib/typescript/web/utils.d.ts

@@ -1,6 +1,6 @@
 import { PointerType } from '../PointerType';
-export declare function isPointerInBounds(view: HTMLElement, { x, y }: {
-    x: number;
-    y: number;
-}): boolean;
+import { Point } from './interfaces';
+export declare function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean;
 export declare const PointerTypeMapping: Map<string, PointerType>;
+export declare const degToRad: (degrees: number) => number;
+export declare const coneToDeviation: (degrees: number) => number;

package/lib/typescript/web_hammer/NodeManager.d.ts

@@ -1,5 +1,5 @@
 import { ValueOf } from '../typeUtils';
-import { HammerGestures } from '../RNGestureHandlerModule.web';
+import { HammerGestures } from '../web/Gestures';
 export declare function getHandler(tag: number): import("./NativeViewGestureHandler").default | import("./PanGestureHandler").default | import("./TapGestureHandler").default | import("./LongPressGestureHandler").default | import("./PinchGestureHandler").default | import("./RotationGestureHandler").default | import("./FlingGestureHandler").default;
 export declare function createGestureHandler(handlerTag: number, handler: InstanceType<ValueOf<typeof HammerGestures>>): void;
 export declare function dropGestureHandler(handlerTag: number): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.16.0-rc.0",
+  "version": "2.16.1",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -98,6 +98,7 @@
     "husky": "^8.0.1",
     "jest": "^26.6.3",
     "lint-staged": "^12.3.2",
+    "madge": "^6.1.0",
     "prettier": "^2.7.1",
     "react": "18.2.0",
     "react-dom": "^16.12.0",
@@ -151,5 +152,6 @@
     "android": {
       "javaPackageName": "com.swmansion.gesturehandler"
     }
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }

package/src/Directions.ts

@@ -1,9 +1,26 @@
+const RIGHT = 1;
+const LEFT = 2;
+const UP = 4;
+const DOWN = 8;
+
+// public interface
 export const Directions = {
-  RIGHT: 1,
-  LEFT: 2,
-  UP: 4,
-  DOWN: 8,
+  RIGHT: RIGHT,
+  LEFT: LEFT,
+  UP: UP,
+  DOWN: DOWN,
+} as const;
+
+// internal interface
+export const DiagonalDirections = {
+  UP_RIGHT: UP | RIGHT,
+  DOWN_RIGHT: DOWN | RIGHT,
+  UP_LEFT: UP | LEFT,
+  DOWN_LEFT: DOWN | LEFT,
 } as const;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare -- backward compatibility; it can be used as a type and as a value
 export type Directions = typeof Directions[keyof typeof Directions];
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type DiagonalDirections =
+  typeof DiagonalDirections[keyof typeof DiagonalDirections];

package/src/RNGestureHandlerModule.native.ts

@@ -0,0 +1,5 @@
+// Reexport the native module spec used by codegen. The relevant files are inluded on Android
+// to ensure the compatibility with the old arch, while iOS doesn't require those at all.
+
+import Module from './specs/NativeRNGestureHandlerModule';
+export default Module;

package/src/RNGestureHandlerModule.ts

@@ -1,5 +1,105 @@
-// Reexport the native module spec used by codegen. The relevant files are inluded on Android
-// to ensure the compatibility with the old arch, while iOS doesn't require those at all.
+import React from 'react';
 
-import Module from './specs/NativeRNGestureHandlerModule';
-export default Module;
+import type { ActionType } from './ActionType';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
+import { Gestures, HammerGestures } from './web/Gestures';
+import type { Config } from './web/interfaces';
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import { GestureHandlerWebDelegate } from './web/tools/GestureHandlerWebDelegate';
+
+export default {
+  handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
+    console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
+  },
+  handleClearJSResponder() {
+    console.warn('handleClearJSResponder: ');
+  },
+  createGestureHandler<T>(
+    handlerName: keyof typeof Gestures,
+    handlerTag: number,
+    config: T
+  ) {
+    if (isNewWebImplementationEnabled()) {
+      if (!(handlerName in Gestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = Gestures[handlerName];
+      NodeManager.createGestureHandler(
+        handlerTag,
+        new GestureClass(new GestureHandlerWebDelegate())
+      );
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        config as unknown as Config
+      );
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      // @ts-ignore If it doesn't exist, the error is thrown
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const GestureClass = HammerGestures[handlerName];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, config as unknown as Config);
+  },
+  attachGestureHandler(
+    handlerTag: number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    newView: any,
+    _actionType: ActionType,
+    propsRef: React.RefObject<unknown>
+  ) {
+    if (
+      !(newView instanceof HTMLElement || newView instanceof React.Component)
+    ) {
+      return;
+    }
+
+    if (isNewWebImplementationEnabled()) {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      //@ts-ignore Types should be HTMLElement or React.Component
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
+  },
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      InteractionManager.getInstance().configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
+  },
+  getGestureHandlerNode(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
+  },
+  dropGestureHandler(handlerTag: number) {
+    if (isNewWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  flushOperations() {},
+};

package/src/RNRenderer.native.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative';

package/src/RNRenderer.ts

@@ -1,3 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export { default as RNRenderer } from 'react-native/Libraries/Renderer/shims/ReactNative';
+export const RNRenderer = {
+  findHostInstance_DEPRECATED: (_ref: any) => null,
+};

package/src/components/DrawerLayout.tsx

@@ -28,6 +28,7 @@ import {
   HandlerStateChangeEvent,
   UserSelect,
   ActiveCursor,
+  MouseButton,
 } from '../handlers/gestureHandlerCommon';
 import {
   PanGestureHandler,
@@ -38,7 +39,6 @@ import {
   TapGestureHandlerEventPayload,
 } from '../handlers/TapGestureHandler';
 import { State } from '../State';
-import { MouseButton } from '../web/interfaces';
 
 const DRAG_TOSS = 0.05;
 

package/src/components/GestureComponents.native.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import {
+  PropsWithChildren,
+  ForwardedRef,
+  RefAttributes,
+  ReactElement,
+} from 'react';
+import {
+  ScrollView as RNScrollView,
+  ScrollViewProps as RNScrollViewProps,
+  Switch as RNSwitch,
+  SwitchProps as RNSwitchProps,
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
+  DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
+  FlatList as RNFlatList,
+  FlatListProps as RNFlatListProps,
+  RefreshControl as RNRefreshControl,
+} from 'react-native';
+
+import createNativeWrapper from '../handlers/createNativeWrapper';
+
+import {
+  NativeViewGestureHandlerProps,
+  nativeViewProps,
+} from '../handlers/NativeViewGestureHandler';
+
+import { toArray } from '../utils';
+
+export const RefreshControl = createNativeWrapper(RNRefreshControl, {
+  disallowInterruption: true,
+  shouldCancelWhenOutside: false,
+});
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type RefreshControl = typeof RefreshControl & RNRefreshControl;
+
+const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
+  RNScrollView,
+  {
+    disallowInterruption: true,
+    shouldCancelWhenOutside: false,
+  }
+);
+export const ScrollView = React.forwardRef<
+  RNScrollView,
+  RNScrollViewProps & NativeViewGestureHandlerProps
+>((props, ref) => {
+  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
+  const { refreshControl, waitFor, ...rest } = props;
+
+  return (
+    <GHScrollView
+      {...rest}
+      // @ts-ignore `ref` exists on `GHScrollView`
+      ref={ref}
+      waitFor={[...toArray(waitFor ?? []), refreshControlGestureRef]}
+      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
+      refreshControl={
+        refreshControl
+          ? React.cloneElement(refreshControl, {
+              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+              ref: refreshControlGestureRef,
+            })
+          : undefined
+      }
+    />
+  );
+});
+// backward type compatibility with https://github.com/software-mansion/react-native-gesture-handler/blob/db78d3ca7d48e8ba57482d3fe9b0a15aa79d9932/react-native-gesture-handler.d.ts#L440-L457
+// include methods of wrapped components by creating an intersection type with the RN component instead of duplicating them.
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type ScrollView = typeof GHScrollView & RNScrollView;
+
+export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
+  shouldCancelWhenOutside: false,
+  shouldActivateOnStart: true,
+  disallowInterruption: true,
+});
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type Switch = typeof Switch & RNSwitch;
+
+export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type TextInput = typeof TextInput & RNTextInput;
+
+export const DrawerLayoutAndroid = createNativeWrapper<
+  PropsWithChildren<RNDrawerLayoutAndroidProps>
+>(RNDrawerLayoutAndroid, { disallowInterruption: true });
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid &
+  RNDrawerLayoutAndroid;
+
+export const FlatList = React.forwardRef((props, ref) => {
+  const refreshControlGestureRef = React.useRef<RefreshControl>(null);
+
+  const { waitFor, refreshControl, ...rest } = props;
+
+  const flatListProps = {};
+  const scrollViewProps = {};
+  for (const [propName, value] of Object.entries(rest)) {
+    // https://github.com/microsoft/TypeScript/issues/26255
+    if ((nativeViewProps as readonly string[]).includes(propName)) {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      scrollViewProps[propName] = value;
+    } else {
+      // @ts-ignore - this function cannot have generic type so we have to ignore this error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      flatListProps[propName] = value;
+    }
+  }
+
+  return (
+    // @ts-ignore - this function cannot have generic type so we have to ignore this error
+    <RNFlatList
+      ref={ref}
+      {...flatListProps}
+      renderScrollComponent={(scrollProps) => (
+        <ScrollView
+          {...{
+            ...scrollProps,
+            ...scrollViewProps,
+            waitFor: [...toArray(waitFor ?? []), refreshControlGestureRef],
+          }}
+        />
+      )}
+      // @ts-ignore we don't pass `refreshing` prop as we only want to override the ref
+      refreshControl={
+        refreshControl
+          ? React.cloneElement(refreshControl, {
+              // @ts-ignore for reasons unknown to me, `ref` doesn't exist on the type inferred by TS
+              ref: refreshControlGestureRef,
+            })
+          : undefined
+      }
+    />
+  );
+}) as <ItemT = any>(
+  props: PropsWithChildren<
+    RNFlatListProps<ItemT> &
+      RefAttributes<FlatList<ItemT>> &
+      NativeViewGestureHandlerProps
+  >,
+  ref: ForwardedRef<FlatList<ItemT>>
+) => ReactElement | null;
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;