react-native-gesture-handler 2.8.0 → 2.10.0

package/lib/typescript/components/Swipeable.d.ts

@@ -3,6 +3,7 @@ import { Component } from 'react';
 import { Animated, StyleProp, ViewStyle } from 'react-native';
 import { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
 declare type SwipeableExcludes = Exclude<keyof PanGestureHandlerProps, 'onGestureEvent' | 'onHandlerStateChange'>;
+declare type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
 export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
     /**
      * Enables two-finger gestures on supported devices, for example iPads with
@@ -30,6 +31,16 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      * default it's a half of the panel's width.
      */
     rightThreshold?: number;
+    /**
+     * Distance that the panel must be dragged from the left edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromLeftEdge?: number;
+    /**
+     * Distance that the panel must be dragged from the right edge to be considered
+     * a swipe. The default value is 10.
+     */
+    dragOffsetFromRightEdge?: number;
     /**
      * Value indicating if the swipeable panel can be pulled further than the left
      * actions panel's width. It is set to true by default as long as the left
@@ -97,7 +108,7 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      *
      * To support `rtl` flexbox layouts use `flexDirection` styling.
      * */
-    renderLeftActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation) => React.ReactNode;
+    renderLeftActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
     /**
      *
      * This map describes the values to use as inputRange for extra interpolation:
@@ -107,7 +118,7 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      *
      * To support `rtl` flexbox layouts use `flexDirection` styling.
      * */
-    renderRightActions?: (progressAnimatedValue: Animated.AnimatedInterpolation, dragAnimatedValue: Animated.AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
+    renderRightActions?: (progressAnimatedValue: AnimatedInterpolation, dragAnimatedValue: AnimatedInterpolation, swipeable: Swipeable) => React.ReactNode;
     useNativeAnimations?: boolean;
     animationOptions?: Record<string, unknown>;
     /**
@@ -153,6 +164,7 @@ export default class Swipeable extends Component<SwipeableProps, SwipeableState>
     close: () => void;
     openLeft: () => void;
     openRight: () => void;
+    reset: () => void;
     render(): JSX.Element;
 }
 export {};

package/lib/typescript/components/gestureHandlerRootHOC.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export default function gestureHandlerRootHOC<P extends Record<string, unknown>>(Component: React.ComponentType<P>, containerStyles?: StyleProp<ViewStyle>): React.ComponentType<P>;

package/lib/typescript/index.d.ts

@@ -1,7 +1,7 @@
 export { Directions } from './Directions';
 export { State } from './State';
-export { default as gestureHandlerRootHOC } from './gestureHandlerRootHOC';
-export { default as GestureHandlerRootView } from './GestureHandlerRootView';
+export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
+export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
 export type { GestureEvent, HandlerStateChangeEvent, GestureEventPayload, HandlerStateChangeEventPayload, GestureTouchEvent, TouchData, GestureUpdateEvent, GestureStateChangeEvent, } from './handlers/gestureHandlerCommon';
 export type { GestureType } from './handlers/gestures/gesture';
 export type { TapGestureHandlerEventPayload, TapGestureHandlerProps, } from './handlers/TapGestureHandler';
@@ -38,11 +38,11 @@ export type { ComposedGestureType as ComposedGesture, RaceGestureType as RaceGes
 export type { GestureStateManagerType as GestureStateManager } from './handlers/gestures/gestureStateManager';
 export { NativeViewGestureHandler } from './handlers/NativeViewGestureHandler';
 export type { RawButtonProps, BaseButtonProps, RectButtonProps, BorderlessButtonProps, } from './components/GestureButtons';
-export { RawButton, BaseButton, RectButton, BorderlessButton, } from './components/GestureButtons';
+export { RawButton, BaseButton, RectButton, BorderlessButton, PureNativeButton, } from './components/GestureButtons';
 export { TouchableHighlight, TouchableNativeFeedback, TouchableOpacity, TouchableWithoutFeedback, } from './components/touchables';
 export { ScrollView, Switch, TextInput, DrawerLayoutAndroid, FlatList, RefreshControl, } from './components/GestureComponents';
 export type { GestureHandlerGestureEvent, GestureHandlerStateChangeEvent, GestureHandlerGestureEventNativeEvent, GestureHandlerStateChangeNativeEvent, NativeViewGestureHandlerGestureEvent, NativeViewGestureHandlerStateChangeEvent, TapGestureHandlerGestureEvent, TapGestureHandlerStateChangeEvent, ForceTouchGestureHandlerGestureEvent, ForceTouchGestureHandlerStateChangeEvent, LongPressGestureHandlerGestureEvent, LongPressGestureHandlerStateChangeEvent, PanGestureHandlerGestureEvent, PanGestureHandlerStateChangeEvent, PinchGestureHandlerGestureEvent, PinchGestureHandlerStateChangeEvent, RotationGestureHandlerGestureEvent, RotationGestureHandlerStateChangeEvent, FlingGestureHandlerGestureEvent, FlingGestureHandlerStateChangeEvent, NativeViewGestureHandlerProperties, TapGestureHandlerProperties, LongPressGestureHandlerProperties, PanGestureHandlerProperties, PinchGestureHandlerProperties, RotationGestureHandlerProperties, FlingGestureHandlerProperties, ForceTouchGestureHandlerProperties, RawButtonProperties, BaseButtonProperties, RectButtonProperties, BorderlessButtonProperties, } from './handlers/gestureHandlerTypesCompat';
 export { default as Swipeable } from './components/Swipeable';
 export type { DrawerLayoutProps, DrawerPosition, DrawerState, DrawerType, DrawerLockMode, DrawerKeyboardDismissMode, } from './components/DrawerLayout';
 export { default as DrawerLayout } from './components/DrawerLayout';
-export { enableExperimentalWebImplementation } from './EnableExperimentalWebImplementation';
+export { enableExperimentalWebImplementation, enableLegacyWebImplementation, } from './EnableNewWebImplementation';

package/lib/typescript/{fabric → specs}/RNGestureHandlerButtonNativeComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react-native/codegen" />
+/// <reference types="react-native/types/modules/codegen" />
 import type { Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
 import type { ViewProps, ColorValue } from 'react-native';
 interface NativeProps extends ViewProps {

package/lib/typescript/{fabric → specs}/RNGestureHandlerRootViewNativeComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react-native/codegen" />
+/// <reference types="react-native/types/modules/codegen" />
 import type { ViewProps } from 'react-native';
 interface NativeProps extends ViewProps {
 }

package/lib/typescript/utils.d.ts

@@ -9,5 +9,4 @@ export declare function hasProperty(object: object, key: string): boolean;
 export declare function isJestEnv(): boolean;
 export declare function tagMessage(msg: string): string;
 export declare function isFabric(): boolean;
-export declare function shouldUseCodegenNativeComponent(): boolean;
 export declare function isRemoteDebuggingEnabled(): boolean;

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

@@ -28,7 +28,6 @@ export default class FlingGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     private onUp;
-    protected onPointerCancel(event: AdaptedEvent): void;
     activate(force?: boolean): void;
     protected resetConfig(): void;
 }

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

@@ -9,5 +9,4 @@ export default class ManualGestureHandler extends GestureHandler {
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
 }

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

@@ -18,7 +18,6 @@ export default class NativeViewGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     private onUp;
-    protected onPointerCancel(event: AdaptedEvent): void;
     shouldRecognizeSimultaneously(handler: GestureHandler): boolean;
     shouldBeCancelledByOther(_handler: GestureHandler): boolean;
     disallowsInterruption(): boolean;

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

@@ -47,7 +47,6 @@ export default class PanGestureHandler extends GestureHandler {
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     private shouldActivate;
     private shouldFail;

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

@@ -21,7 +21,6 @@ export default class PinchGestureHandler extends GestureHandler {
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     private tryBegin;
     activate(force?: boolean): void;
     protected onReset(): void;

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

@@ -23,7 +23,6 @@ export default class RotationGestureHandler extends GestureHandler {
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
     protected onPointerRemove(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     protected tryBegin(): void;
     activate(_force?: boolean): void;
     protected onReset(): void;

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

@@ -36,7 +36,6 @@ export default class TapGestureHandler extends GestureHandler {
     protected onPointerRemove(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerOutOfBounds(event: AdaptedEvent): void;
-    protected onPointerCancel(event: AdaptedEvent): void;
     private updateState;
     private trySettingPosition;
     private shouldFail;

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

@@ -0,0 +1,11 @@
+export default class CircularBuffer<T> {
+    private bufferSize;
+    private buffer;
+    private index;
+    private actualSize;
+    constructor(size: number);
+    get size(): number;
+    push(element: T): void;
+    get(at: number): T;
+    clear(): void;
+}

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

@@ -0,0 +1,12 @@
+declare class PolynomialFit {
+    coefficients: number[];
+    constructor(degree: number);
+}
+export default class LeastSquareSolver {
+    private x;
+    private y;
+    private w;
+    constructor(x: number[], y: number[], w: number[]);
+    solve(degree: number): PolynomialFit | null;
+}
+export {};

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

@@ -1,6 +1,8 @@
 import { AdaptedEvent, EventTypes } from '../interfaces';
 import EventManager from './EventManager';
 export default class PointerEventManager extends EventManager {
+    private trackedPointers;
     setListeners(): void;
     protected mapEvent(event: PointerEvent, eventType: EventTypes): AdaptedEvent;
+    resetManager(): void;
 }

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

@@ -7,6 +7,7 @@ export interface TrackerElement {
     velocityY: number;
 }
 export default class PointerTracker {
+    private velocityTracker;
     private trackedPointers;
     private touchEventsIds;
     private lastMovedPointerId;

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

@@ -0,0 +1,13 @@
+import { AdaptedEvent } from '../interfaces';
+export default class VelocityTracker {
+    private assumePointerMoveStoppedMilliseconds;
+    private historySize;
+    private horizonMilliseconds;
+    private minSampleSize;
+    private samples;
+    constructor();
+    add(event: AdaptedEvent): void;
+    private getVelocityEstimate;
+    getVelocity(): [number, number];
+    reset(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -82,8 +82,7 @@
     "@types/hammerjs": "^2.0.38",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.0",
-    "@types/react-native": "^0.69.6",
+    "@types/react": "^18.0.24",
     "@types/react-test-renderer": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -100,9 +99,9 @@
     "lint-staged": "^12.3.2",
     "metro-react-native-babel-preset": "^0.64.0",
     "prettier": "^2.7.1",
-    "react": "^16.8.6",
+    "react": "18.2.0",
     "react-dom": "^16.12.0",
-    "react-native": "^0.64.0",
+    "react-native": "0.71.0",
     "react-native-builder-bob": "^0.17.1",
     "react-native-reanimated": "^2.3.1",
     "react-native-web": "^0.11.7",
@@ -143,11 +142,11 @@
   "eslintIgnore": [
     "node_modules/",
     "lib/",
-    "src/fabric/*NativeComponent.js"
+    "src/specs/*NativeComponent.js"
   ],
   "codegenConfig": {
     "name": "rngesturehandler_codegen",
     "type": "components",
-    "jsSrcsDir": "./src/fabric"
+    "jsSrcsDir": "./src/specs"
   }
 }

package/src/EnableNewWebImplementation.ts

@@ -0,0 +1,35 @@
+import { Platform } from 'react-native';
+
+let useNewWebImplementation = true;
+let getWasCalled = false;
+
+export function enableExperimentalWebImplementation(
+  _shouldEnable = true
+): void {
+  // NO-OP since the new implementation is now the default
+}
+
+export function enableLegacyWebImplementation(
+  shouldUseLegacyImplementation = true
+): void {
+  if (
+    Platform.OS !== 'web' ||
+    useNewWebImplementation === !shouldUseLegacyImplementation
+  ) {
+    return;
+  }
+
+  if (getWasCalled) {
+    console.error(
+      'Some parts of this application have already started using the new gesture handler implementation. No changes will be applied. You can try enabling legacy implementation earlier.'
+    );
+    return;
+  }
+
+  useNewWebImplementation = !shouldUseLegacyImplementation;
+}
+
+export function isNewWebImplementationEnabled(): boolean {
+  getWasCalled = true;
+  return useNewWebImplementation;
+}

package/src/GestureHandlerRootViewContext.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext(false);

package/src/RNGestureHandlerModule.macos.ts

@@ -1,5 +1,5 @@
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -57,7 +57,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -92,14 +92,14 @@ export default {
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
       HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -111,14 +111,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/RNGestureHandlerModule.web.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -59,7 +59,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -101,7 +101,7 @@ export default {
       return;
     }
 
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
@@ -110,7 +110,7 @@ export default {
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -122,14 +122,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/RNGestureHandlerModule.windows.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ActionType } from './ActionType';
-import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
+import { isNewWebImplementationEnabled } from './EnableNewWebImplementation';
 
 //GestureHandlers
 import InteractionManager from './web/tools/InteractionManager';
@@ -59,7 +59,7 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       if (!(handlerName in Gestures)) {
         throw new Error(
           `react-native-gesture-handler: ${handlerName} is not supported on web.`
@@ -101,7 +101,7 @@ export default {
       return;
     }
 
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       //@ts-ignore Types should be HTMLElement or React.Component
       NodeManager.getHandler(handlerTag).init(newView, propsRef);
     } else {
@@ -110,7 +110,7 @@ export default {
     }
   },
   updateGestureHandler(handlerTag: number, newConfig: Config) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
 
       InteractionManager.getInstance().configureInteractions(
@@ -122,14 +122,14 @@ export default {
     }
   },
   getGestureHandlerNode(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       return NodeManager.getHandler(handlerTag);
     } else {
       return HammerNodeManager.getHandler(handlerTag);
     }
   },
   dropGestureHandler(handlerTag: number) {
-    if (isExperimentalWebImplementationEnabled()) {
+    if (isNewWebImplementationEnabled()) {
       NodeManager.dropGestureHandler(handlerTag);
     } else {
       HammerNodeManager.dropGestureHandler(handlerTag);

package/src/components/DrawerLayout.tsx

@@ -54,6 +54,10 @@ export type DrawerLockMode = 'unlocked' | 'locked-closed' | 'locked-open';
 
 export type DrawerKeyboardDismissMode = 'none' | 'on-drag';
 
+// Animated.AnimatedInterpolation has been converted to a generic type
+// in @types/react-native 0.70. This way we can maintain compatibility
+// with all versions of @types/react-native`
+type AnimatedInterpolation = ReturnType<Animated.Value['interpolate']>;
 export interface DrawerLayoutProps {
   /**
    * This attribute is present in the standard implementation already and is one
@@ -153,7 +157,7 @@ export interface DrawerLayoutProps {
   // implicit `children` prop has been removed in @types/react^18.0.0
   children?:
     | React.ReactNode
-    | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
+    | ((openValue?: AnimatedInterpolation) => React.ReactNode);
 
   /**
    * @default 'none'
@@ -224,7 +228,7 @@ export default class DrawerLayout extends Component<
     return true;
   }
 
-  private openValue?: Animated.AnimatedInterpolation;
+  private openValue?: AnimatedInterpolation;
   private onGestureEvent?: (
     event: GestureEvent<PanGestureHandlerEventPayload>
   ) => void;
@@ -603,7 +607,7 @@ export default class DrawerLayout extends Component<
       };
     }
 
-    let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;
+    let drawerTranslateX: number | AnimatedInterpolation = 0;
     if (drawerSlide) {
       const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;
       if (this.state.drawerState !== IDLE) {
@@ -617,7 +621,7 @@ export default class DrawerLayout extends Component<
       }
     }
     const drawerStyles: {
-      transform: { translateX: number | Animated.AnimatedInterpolation }[];
+      transform: { translateX: number | AnimatedInterpolation }[];
       flexDirection: 'row-reverse' | 'row';
     } = {
       transform: [{ translateX: drawerTranslateX }],

package/src/components/GestureComponents.web.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  DrawerLayoutAndroid as RNDrawerLayoutAndroid,
   FlatList as RNFlatList,
   Switch as RNSwitch,
   TextInput as RNTextInput,
@@ -21,11 +20,11 @@ export const Switch = createNativeWrapper(RNSwitch, {
   disallowInterruption: true,
 });
 export const TextInput = createNativeWrapper(RNTextInput);
-export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
-  disallowInterruption: true,
-});
-// @ts-ignore -- TODO(TS) to investigate if it's needed
-DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
+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

package/src/components/GestureHandlerButton.tsx

@@ -1,10 +1,5 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { HostComponent, requireNativeComponent } from 'react-native';
+import { HostComponent } from 'react-native';
 import { RawButtonProps } from './GestureButtons';
-import { shouldUseCodegenNativeComponent } from '../utils';
-
-const RNGestureHandlerButtonNativeComponent = shouldUseCodegenNativeComponent()
-  ? require('../fabric/RNGestureHandlerButtonNativeComponent').default
-  : requireNativeComponent('RNGestureHandlerButton');
+import RNGestureHandlerButtonNativeComponent from '../specs/RNGestureHandlerButtonNativeComponent';
 
 export default RNGestureHandlerButtonNativeComponent as HostComponent<RawButtonProps>;

package/src/components/GestureHandlerRootView.android.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ViewProps } from 'react-native';
+import { maybeInitializeFabric } from '../init';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
+import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
+
+export interface GestureHandlerRootViewProps
+  extends PropsWithChildren<ViewProps> {}
+
+export default function GestureHandlerRootView(
+  props: GestureHandlerRootViewProps
+) {
+  // try initialize fabric on the first render, at this point we can
+  // reliably check if fabric is enabled (the function contains a flag
+  // to make sure it's called only once)
+  maybeInitializeFabric();
+
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <GestureHandlerRootViewNativeComponent {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
+}

package/src/{GestureHandlerRootView.tsx → components/GestureHandlerRootView.tsx}

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
-import { maybeInitializeFabric } from './init';
+import { maybeInitializeFabric } from '../init';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -14,5 +15,9 @@ export default function GestureHandlerRootView(
   // to make sure it's called only once)
   maybeInitializeFabric();
 
-  return <View {...props} />;
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <View {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
 }

package/src/{GestureHandlerRootView.web.tsx → components/GestureHandlerRootView.web.tsx}

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { View, ViewProps } from 'react-native';
+import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
@@ -8,5 +9,9 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
-  return <View {...props} />;
+  return (
+    <GestureHandlerRootViewContext.Provider value>
+      <View {...props} />
+    </GestureHandlerRootViewContext.Provider>
+  );
 }