react-native-gesture-handler 2.16.0 → 2.16.1

package/lib/typescript/handlers/gestures/panGesture.d.ts

@@ -8,18 +8,81 @@ export type PanGestureChangeEventPayload = {
 export declare class PanGesture extends ContinousBaseGesture<PanGestureHandlerEventPayload, PanGestureChangeEventPayload> {
     config: BaseGestureConfig & PanGestureConfig;
     constructor();
-    activeOffsetY(offset: number | number[]): this;
-    activeOffsetX(offset: number | number[]): this;
-    failOffsetY(offset: number | number[]): this;
-    failOffsetX(offset: number | number[]): this;
+    /**
+     * Range along Y axis (in points) where fingers travels without activation of gesture.
+     * @param offset
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetyvalue-number--number
+     */
+    activeOffsetY(offset: number | [activeOffsetYStart: number, activeOffsetYEnd: number]): this;
+    /**
+     * Range along X axis (in points) where fingers travels without activation of gesture.
+     * @param offset
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#activeoffsetxvalue-number--number
+     */
+    activeOffsetX(offset: number | [activeOffsetXStart: number, activeOffsetXEnd: number]): this;
+    /**
+     * When the finger moves outside this range (in points) along Y axis and gesture hasn't yet activated it will fail recognizing the gesture.
+     * @param offset
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetyvalue-number--number
+     */
+    failOffsetY(offset: number | [failOffsetYStart: number, failOffsetYEnd: number]): this;
+    /**
+     * When the finger moves outside this range (in points) along X axis and gesture hasn't yet activated it will fail recognizing the gesture.
+     * @param offset
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture#failoffsetxvalue-number--number
+     */
+    failOffsetX(offset: number | [failOffsetXStart: number, failOffsetXEnd: number]): this;
+    /**
+     * A number of fingers that is required to be placed before gesture can activate. Should be a higher or equal to 0 integer.
+     * @param minPointers
+     */
     minPointers(minPointers: number): this;
+    /**
+     * When the given number of fingers is placed on the screen and gesture hasn't yet activated it will fail recognizing the gesture.
+     * Should be a higher or equal to 0 integer.
+     * @param maxPointers
+     */
     maxPointers(maxPointers: number): this;
+    /**
+     * Minimum distance the finger (or multiple finger) need to travel before the gesture activates.
+     * Expressed in points.
+     * @param distance
+     */
     minDistance(distance: number): this;
+    /**
+     * Minimum velocity the finger has to reach in order to activate handler.
+     * @param velocity
+     */
     minVelocity(velocity: number): this;
+    /**
+     * Minimum velocity along X axis the finger has to reach in order to activate handler.
+     * @param velocity
+     */
     minVelocityX(velocity: number): this;
+    /**
+     * Minimum velocity along Y axis the finger has to reach in order to activate handler.
+     * @param velocity
+     */
     minVelocityY(velocity: number): this;
+    /**
+     * #### Android only
+     * Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen).
+     * This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
+     * @param value
+     */
     averageTouches(value: boolean): this;
+    /**
+     * #### iOS only
+     * Enables two-finger gestures on supported devices, for example iPads with trackpads.
+     * @param value
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#enabletrackpadtwofingergesturevalue-boolean-ios-only
+     */
     enableTrackpadTwoFingerGesture(value: boolean): this;
+    /**
+     * Duration in milliseconds of the LongPress gesture before Pan is allowed to activate.
+     * @param duration
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/pan-gesture/#activateafterlongpressduration-number
+     */
     activateAfterLongPress(duration: number): this;
     onChange(callback: (event: GestureUpdateEvent<PanGestureHandlerEventPayload & PanGestureChangeEventPayload>) => void): this;
 }

package/lib/typescript/handlers/gestures/tapGesture.d.ts

@@ -3,12 +3,47 @@ import { TapGestureConfig, TapGestureHandlerEventPayload } from '../TapGestureHa
 export declare class TapGesture extends BaseGesture<TapGestureHandlerEventPayload> {
     config: BaseGestureConfig & TapGestureConfig;
     constructor();
+    /**
+     * Minimum number of pointers (fingers) required to be placed before the gesture activates.
+     * Should be a positive integer. The default value is 1.
+     * @param minPointers
+     */
     minPointers(minPointers: number): this;
+    /**
+     * Number of tap gestures required to activate the gesture.
+     * The default value is 1.
+     * @param count
+     */
     numberOfTaps(count: number): this;
+    /**
+     * Maximum distance, expressed in points, that defines how far the finger is allowed to travel during a tap gesture.
+     * @param maxDist
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdistancevalue-number
+     */
     maxDistance(maxDist: number): this;
+    /**
+     * Maximum time, expressed in milliseconds, that defines how fast a finger must be released after a touch.
+     * The default value is 500.
+     * @param duration
+     */
     maxDuration(duration: number): this;
+    /**
+     * Maximum time, expressed in milliseconds, that can pass before the next tap — if many taps are required.
+     * The default value is 500.
+     * @param delay
+     */
     maxDelay(delay: number): this;
+    /**
+     * Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the X axis during a tap gesture.
+     * @param delta
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdeltaxvalue-number
+     */
     maxDeltaX(delta: number): this;
+    /**
+     * Maximum distance, expressed in points, that defines how far the finger is allowed to travel along the Y axis during a tap gesture.
+     * @param delta
+     * @see https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture#maxdeltayvalue-number
+     */
     maxDeltaY(delta: number): this;
 }
 export type TapGestureType = InstanceType<typeof TapGesture>;

package/lib/typescript/web/handlers/GestureHandler.d.ts

@@ -9,7 +9,7 @@ import { PointerType } from '../../PointerType';
 export default abstract class GestureHandler implements IGestureHandler {
     private lastSentState;
     protected currentState: State;
-    protected shouldCancellWhenOutside: boolean;
+    protected shouldCancelWhenOutside: boolean;
     protected hasCustomActivationCriteria: boolean;
     protected enabled: boolean;
     private viewRef;
@@ -41,7 +41,7 @@ export default abstract class GestureHandler implements IGestureHandler {
      * @param {boolean} sendIfDisabled - Used when handler becomes disabled. With this flag orchestrator will be forced to send cancel event
      */
     cancel(sendIfDisabled?: boolean): void;
-    activate(_force?: boolean): void;
+    activate(force?: boolean): void;
     end(): void;
     isAwaiting(): boolean;
     setAwaiting(value: boolean): void;

package/lib/typescript/web/handlers/IGestureHandler.d.ts

@@ -16,7 +16,7 @@ export default interface IGestureHandler {
     getTracker: () => PointerTracker;
     getTrackedPointersID: () => number[];
     begin: () => void;
-    activate: () => void;
+    activate: (force: boolean) => void;
     end: () => void;
     fail: () => void;
     cancel: () => void;

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

@@ -28,6 +28,7 @@ export interface Config extends Record<string, ConfigArgs> {
     mouseButton?: MouseButton;
     enableContextMenu?: boolean;
     touchAction?: TouchAction;
+    manualActivation?: boolean;
     activateAfterLongPress?: number;
     failOffsetXStart?: number;
     failOffsetYStart?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.16.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",
@@ -152,5 +152,6 @@
     "android": {
       "javaPackageName": "com.swmansion.gesturehandler"
     }
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }

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/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>;

package/src/components/GestureComponents.tsx

@@ -1,148 +1,41 @@
 import * as React from 'react';
 import {
-  PropsWithChildren,
-  ForwardedRef,
-  RefAttributes,
-  ReactElement,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
-  ScrollViewProps as RNScrollViewProps,
+  FlatList as RNFlatList,
   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,
+  ScrollView as RNScrollView,
+  FlatListProps,
+  View,
 } 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,
+export const ScrollView = createNativeWrapper(RNScrollView, {
+  disallowInterruption: 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, {
+export const Switch = createNativeWrapper(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
+export const TextInput = createNativeWrapper(RNTextInput);
+export const DrawerLayoutAndroid = () => {
+  console.warn('DrawerLayoutAndroid is not supported on web!');
+  return <View />;
+};
+
+// RefreshControl is implemented as a functional component, rendering a View
+// NativeViewGestureHandler needs to set a ref on its child, which cannot be done
+// on functional components
+export const RefreshControl = createNativeWrapper(View);
+
+export const FlatList = React.forwardRef(
+  <ItemT extends any>(props: FlatListProps<ItemT>, ref: any) => (
     <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
-      }
+      {...props}
+      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
     />
-  );
-}) 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>;
+  )
+);

package/src/components/GestureHandlerButton.native.tsx

@@ -0,0 +1,5 @@
+import { HostComponent } from 'react-native';
+import { RawButtonProps } from './GestureButtons';
+import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
+
+export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerButton.tsx

@@ -1,5 +1,6 @@
-import { HostComponent } from 'react-native';
-import { RawButtonProps } from './GestureButtons';
-import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
+import * as React from 'react';
+import { View } from 'react-native';
 
-export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;
+export default React.forwardRef<View>((props, ref) => (
+  <View ref={ref} accessibilityRole="button" {...props} />
+));