react-native-gesture-handler 2.4.1 → 2.6.0

package/src/RNGestureHandlerModule.web.ts

@@ -1,27 +1,52 @@
 import { ActionType } from './ActionType';
-import { Direction } from './web/constants';
-import FlingGestureHandler from './web/FlingGestureHandler';
-import LongPressGestureHandler from './web/LongPressGestureHandler';
-import NativeViewGestureHandler from './web/NativeViewGestureHandler';
-import * as NodeManager from './web/NodeManager';
-import PanGestureHandler from './web/PanGestureHandler';
-import PinchGestureHandler from './web/PinchGestureHandler';
-import RotationGestureHandler from './web/RotationGestureHandler';
-import TapGestureHandler from './web/TapGestureHandler';
+
+//GestureHandlers
+import InteractionManager from './web/tools/InteractionManager';
+import NodeManager from './web/tools/NodeManager';
+import PanGestureHandler from './web/handlers/PanGestureHandler';
+import TapGestureHandler from './web/handlers/TapGestureHandler';
+import LongPressGestureHandler from './web/handlers/LongPressGestureHandler';
+import PinchGestureHandler from './web/handlers/PinchGestureHandler';
+import RotationGestureHandler from './web/handlers/RotationGestureHandler';
+import FlingGestureHandler from './web/handlers/FlingGestureHandler';
+import NativeViewGestureHandler from './web/handlers/NativeViewGestureHandler';
+
+//Hammer Handlers
+import * as HammerNodeManager from './web_hammer/NodeManager';
+import HammerNativeViewGestureHandler from './web_hammer/NativeViewGestureHandler';
+import HammerPanGestureHandler from './web_hammer/PanGestureHandler';
+import HammerTapGestureHandler from './web_hammer/TapGestureHandler';
+import HammerLongPressGestureHandler from './web_hammer/LongPressGestureHandler';
+import HammerPinchGestureHandler from './web_hammer/PinchGestureHandler';
+import HammerRotationGestureHandler from './web_hammer/RotationGestureHandler';
+import HammerFlingGestureHandler from './web_hammer/FlingGestureHandler';
+import { Config } from './web/interfaces';
+import { isExperimentalWebImplementationEnabled } from './EnableExperimentalWebImplementation';
 
 export const Gestures = {
+  NativeViewGestureHandler,
   PanGestureHandler,
-  RotationGestureHandler,
-  PinchGestureHandler,
   TapGestureHandler,
-  NativeViewGestureHandler,
   LongPressGestureHandler,
+  PinchGestureHandler,
+  RotationGestureHandler,
   FlingGestureHandler,
-  // ForceTouchGestureHandler,
 };
 
+export const HammerGestures = {
+  NativeViewGestureHandler: HammerNativeViewGestureHandler,
+  PanGestureHandler: HammerPanGestureHandler,
+  TapGestureHandler: HammerTapGestureHandler,
+  LongPressGestureHandler: HammerLongPressGestureHandler,
+  PinchGestureHandler: HammerPinchGestureHandler,
+  RotationGestureHandler: HammerRotationGestureHandler,
+  FlingGestureHandler: HammerFlingGestureHandler,
+};
+
+const interactionManager = new InteractionManager();
+
 export default {
-  Direction,
+  // Direction,
   handleSetJSResponder(tag: number, blockNativeResponder: boolean) {
     console.warn('handleSetJSResponder: ', tag, blockNativeResponder);
   },
@@ -33,14 +58,31 @@ export default {
     handlerTag: number,
     config: T
   ) {
-    //TODO(TS) extends config
-    if (!(handlerName in Gestures))
-      throw new Error(
-        `react-native-gesture-handler: ${handlerName} is not supported on web.`
+    if (isExperimentalWebImplementationEnabled()) {
+      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());
+      interactionManager.configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        (config as unknown) as Config
       );
-    const GestureClass = Gestures[handlerName];
-    NodeManager.createGestureHandler(handlerTag, new GestureClass());
-    this.updateGestureHandler(handlerTag, config);
+    } else {
+      if (!(handlerName in HammerGestures)) {
+        throw new Error(
+          `react-native-gesture-handler: ${handlerName} is not supported on web.`
+        );
+      }
+
+      const GestureClass = HammerGestures[handlerName];
+      HammerNodeManager.createGestureHandler(handlerTag, new GestureClass());
+    }
+
+    this.updateGestureHandler(handlerTag, (config as unknown) as Config);
   },
   attachGestureHandler(
     handlerTag: number,
@@ -48,16 +90,37 @@ export default {
     _actionType: ActionType,
     propsRef: React.RefObject<unknown>
   ) {
-    NodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).init(newView, propsRef);
+    } else {
+      HammerNodeManager.getHandler(handlerTag).setView(newView, propsRef);
+    }
   },
-  updateGestureHandler(handlerTag: number, newConfig: any) {
-    NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+  updateGestureHandler(handlerTag: number, newConfig: Config) {
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+
+      interactionManager.configureInteractions(
+        NodeManager.getHandler(handlerTag),
+        newConfig
+      );
+    } else {
+      HammerNodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
+    }
   },
   getGestureHandlerNode(handlerTag: number) {
-    return NodeManager.getHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      return NodeManager.getHandler(handlerTag);
+    } else {
+      return HammerNodeManager.getHandler(handlerTag);
+    }
   },
   dropGestureHandler(handlerTag: number) {
-    NodeManager.dropGestureHandler(handlerTag);
+    if (isExperimentalWebImplementationEnabled()) {
+      NodeManager.dropGestureHandler(handlerTag);
+    } else {
+      HammerNodeManager.dropGestureHandler(handlerTag);
+    }
   },
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   flushOperations() {},

package/src/RNRenderer.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.web.ts

@@ -0,0 +1,3 @@
+export const RNRenderer = {
+  findHostInstance_DEPRECATED: (_ref: any) => null,
+};

package/src/components/DrawerLayout.tsx

@@ -148,6 +148,11 @@ export interface DrawerLayoutProps {
   onDrawerSlide?: (position: number) => void;
 
   onGestureRef?: (ref: PanGestureHandler) => void;
+
+  // implicit `children` prop has been removed in @types/react^18.0.0
+  children?:
+    | React.ReactNode
+    | ((openValue?: Animated.AnimatedInterpolation) => React.ReactNode);
 }
 
 export type DrawerLayoutState = {
@@ -155,6 +160,8 @@ export type DrawerLayoutState = {
   touchX: Animated.Value;
   drawerTranslation: Animated.Value;
   containerWidth: number;
+  drawerState: DrawerState;
+  drawerOpened: boolean;
 };
 
 export type DrawerMovementOption = {
@@ -189,15 +196,14 @@ export default class DrawerLayout extends Component<
       touchX,
       drawerTranslation,
       containerWidth: 0,
+      drawerState: IDLE,
+      drawerOpened: false,
     };
 
     this.updateAnimatedEvent(props, this.state);
   }
 
-  UNSAFE_componentWillUpdate(
-    props: DrawerLayoutProps,
-    state: DrawerLayoutState
-  ) {
+  shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState) {
     if (
       this.props.drawerPosition !== props.drawerPosition ||
       this.props.drawerWidth !== props.drawerWidth ||
@@ -206,6 +212,8 @@ export default class DrawerLayout extends Component<
     ) {
       this.updateAnimatedEvent(props, state);
     }
+
+    return true;
   }
 
   private openValue?: Animated.AnimatedInterpolation;
@@ -349,6 +357,7 @@ export default class DrawerLayout extends Component<
       this.handleRelease({ nativeEvent });
     } else if (nativeEvent.state === State.ACTIVE) {
       this.emitStateChanged(DRAGGING, false);
+      this.setState({ drawerState: DRAGGING });
       if (this.props.keyboardDismissMode === 'on-drag') {
         Keyboard.dismiss();
       }
@@ -464,6 +473,7 @@ export default class DrawerLayout extends Component<
     const willShow = toValue !== 0;
     this.updateShowing(willShow);
     this.emitStateChanged(SETTLING, willShow);
+    this.setState({ drawerState: SETTLING });
     if (this.props.hideStatusBar) {
       StatusBar.setHidden(willShow, this.props.statusBarAnimation || 'slide');
     }
@@ -476,6 +486,12 @@ export default class DrawerLayout extends Component<
     }).start(({ finished }) => {
       if (finished) {
         this.emitStateChanged(IDLE, willShow);
+        this.setState({ drawerOpened: willShow });
+        if (this.state.drawerState !== DRAGGING) {
+          // it's possilbe that user started drag while the drawer
+          // was settling, don't override state in this case
+          this.setState({ drawerState: IDLE });
+        }
         if (willShow) {
           this.props.onDrawerOpen?.();
         } else {
@@ -516,11 +532,14 @@ export default class DrawerLayout extends Component<
   private renderOverlay = () => {
     /* Overlay styles */
     invariant(this.openValue, 'should be set');
-    const overlayOpacity = this.openValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 1],
-      extrapolate: 'clamp',
-    });
+    let overlayOpacity;
+
+    if (this.state.drawerState !== IDLE) {
+      overlayOpacity = this.openValue;
+    } else {
+      overlayOpacity = this.state.drawerOpened ? 1 : 0;
+    }
+
     const dynamicOverlayStyles = {
       opacity: overlayOpacity,
       backgroundColor: this.props.overlayColor,
@@ -579,11 +598,15 @@ export default class DrawerLayout extends Component<
     let drawerTranslateX: number | Animated.AnimatedInterpolation = 0;
     if (drawerSlide) {
       const closedDrawerOffset = fromLeft ? -drawerWidth! : drawerWidth!;
-      drawerTranslateX = openValue.interpolate({
-        inputRange: [0, 1],
-        outputRange: [closedDrawerOffset, 0],
-        extrapolate: 'clamp',
-      });
+      if (this.state.drawerState !== IDLE) {
+        drawerTranslateX = openValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [closedDrawerOffset, 0],
+          extrapolate: 'clamp',
+        });
+      } else {
+        drawerTranslateX = this.state.drawerOpened ? 0 : closedDrawerOffset;
+      }
     }
     const drawerStyles: {
       transform: { translateX: number | Animated.AnimatedInterpolation }[];

package/src/components/GestureButtons.tsx

@@ -56,6 +56,13 @@ export interface RawButtonProps extends NativeViewGestureHandlerProps {
    * Defines whether the ripple animation should be drawn on the foreground of the view.
    */
   foreground?: boolean;
+
+  /**
+   * Android only.
+   *
+   * Set this to true if you don't want the system to play sound when the button is pressed.
+   */
+  touchSoundDisabled?: boolean;
 }
 
 export interface BaseButtonProps extends RawButtonProps {
@@ -65,6 +72,12 @@ export interface BaseButtonProps extends RawButtonProps {
    */
   onPress?: (pointerInside: boolean) => void;
 
+  /**
+   * Called when the button gets pressed and is held for `delayLongPress`
+   * milliseconds.
+   */
+  onLongPress?: () => void;
+
   /**
    * Called when button changes from inactive to active and vice versa. It
    * passes active state as a boolean variable as a first parameter for that
@@ -73,6 +86,12 @@ export interface BaseButtonProps extends RawButtonProps {
   onActiveStateChange?: (active: boolean) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+
+  /**
+   * Delay, in milliseconds, after which the `onLongPress` callback gets called.
+   * Defaults to 600.
+   */
+  delayLongPress?: number;
 }
 
 export interface RectButtonProps extends BaseButtonProps {
@@ -104,11 +123,18 @@ export const RawButton = createNativeWrapper(GestureHandlerButton, {
 });
 
 export class BaseButton extends React.Component<BaseButtonProps> {
+  static defaultProps = {
+    delayLongPress: 600,
+  };
+
   private lastActive: boolean;
+  private longPressTimeout: ReturnType<typeof setTimeout> | undefined;
+  private longPressDetected: boolean;
 
   constructor(props: BaseButtonProps) {
     super(props);
     this.lastActive = false;
+    this.longPressDetected = false;
   }
 
   private handleEvent = ({
@@ -122,6 +148,7 @@ export class BaseButton extends React.Component<BaseButtonProps> {
     }
 
     if (
+      !this.longPressDetected &&
       oldState === State.ACTIVE &&
       state !== State.CANCELLED &&
       this.lastActive &&
@@ -130,9 +157,46 @@ export class BaseButton extends React.Component<BaseButtonProps> {
       this.props.onPress(active);
     }
 
+    if (
+      !this.lastActive &&
+      // NativeViewGestureHandler sends different events based on platform
+      state === (Platform.OS !== 'android' ? State.ACTIVE : State.BEGAN) &&
+      pointerInside
+    ) {
+      this.longPressDetected = false;
+      if (this.props.onLongPress) {
+        this.longPressTimeout = setTimeout(
+          this.onLongPress,
+          this.props.delayLongPress
+        );
+      }
+    } else if (
+      // cancel longpress timeout if it's set and the finger moved out of the view
+      state === State.ACTIVE &&
+      !pointerInside &&
+      this.longPressTimeout !== undefined
+    ) {
+      clearTimeout(this.longPressTimeout);
+      this.longPressTimeout = undefined;
+    } else if (
+      // cancel longpress timeout if it's set and the gesture has finished
+      this.longPressTimeout !== undefined &&
+      (state === State.END ||
+        state === State.CANCELLED ||
+        state === State.FAILED)
+    ) {
+      clearTimeout(this.longPressTimeout);
+      this.longPressTimeout = undefined;
+    }
+
     this.lastActive = active;
   };
 
+  private onLongPress = () => {
+    this.longPressDetected = true;
+    this.props.onLongPress?.();
+  };
+
   // Normally, the parent would execute it's handler first, then forward the
   // event to listeners. However, here our handler is virtually only forwarding
   // events to listeners, so we reverse the order to keep the proper order of

package/src/components/GestureComponents.tsx

@@ -16,6 +16,7 @@ import {
   DrawerLayoutAndroidProps as RNDrawerLayoutAndroidProps,
   FlatList as RNFlatList,
   FlatListProps as RNFlatListProps,
+  RefreshControl as RNRefreshControl,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -25,16 +26,53 @@ import {
   nativeViewProps,
 } from '../handlers/NativeViewGestureHandler';
 
-export const ScrollView = createNativeWrapper<
-  PropsWithChildren<RNScrollViewProps>
->(RNScrollView, {
+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 ? (
+          <RefreshControl
+            {...refreshControl.props}
+            ref={refreshControlGestureRef}
+          />
+        ) : (
+          refreshControl
+        )
+      }
+    />
+  );
+});
 // 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 ScrollView & RNScrollView;
+export type ScrollView = typeof GHScrollView & RNScrollView;
 
 export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
@@ -56,9 +94,13 @@ 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(props)) {
+  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
@@ -70,14 +112,32 @@ export const FlatList = React.forwardRef((props, ref) => {
       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 }} />
+        <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 ? (
+          <RefreshControl
+            {...refreshControl.props}
+            ref={refreshControlGestureRef}
+          />
+        ) : (
+          refreshControl
+        )
+      }
     />
   );
 }) as <ItemT = any>(

package/src/components/GestureComponents.web.tsx

@@ -6,6 +6,7 @@ import {
   TextInput as RNTextInput,
   ScrollView as RNScrollView,
   FlatListProps,
+  View,
 } from 'react-native';
 
 import createNativeWrapper from '../handlers/createNativeWrapper';
@@ -25,6 +26,10 @@ export const DrawerLayoutAndroid = createNativeWrapper(RNDrawerLayoutAndroid, {
 });
 // @ts-ignore -- TODO(TS) to investigate if it's needed
 DrawerLayoutAndroid.positions = RNDrawerLayoutAndroid.positions;
+// 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) => (

package/src/components/Swipeable.tsx

@@ -219,7 +219,7 @@ export default class Swipeable extends Component<
     );
   }
 
-  UNSAFE_componentWillUpdate(props: SwipeableProps, state: SwipeableState) {
+  shouldComponentUpdate(props: SwipeableProps, state: SwipeableState) {
     if (
       this.props.friction !== props.friction ||
       this.props.overshootLeft !== props.overshootLeft ||
@@ -231,6 +231,8 @@ export default class Swipeable extends Component<
     ) {
       this.updateAnimatedEvent(props, state);
     }
+
+    return true;
   }
 
   private onGestureEvent?: (

package/src/components/touchables/GenericTouchable.tsx

@@ -277,6 +277,8 @@ export default class GenericTouchable extends Component<
         shouldActivateOnStart={this.props.shouldActivateOnStart}
         disallowInterruption={this.props.disallowInterruption}
         testID={this.props.testID}
+        touchSoundDisabled={this.props.touchSoundDisabled ?? false}
+        enabled={!this.props.disabled}
         {...this.props.extraButtonProps}>
         <Animated.View {...coreProps} style={this.props.style}>
           {this.props.children}

package/src/fabric/RNGestureHandlerButtonNativeComponent.ts

@@ -22,6 +22,7 @@ interface NativeProps extends ViewProps {
   enabled?: WithDefault<boolean, true>;
   rippleColor?: ColorValue;
   rippleRadius?: Int32;
+  touchSoundDisabled?: WithDefault<boolean, false>;
 }
 
 export default codegenNativeComponent<NativeProps>('RNGestureHandlerButton');

package/src/handlers/ForceTouchGestureHandler.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { tagMessage } from '../utils';
 import PlatformConstants from '../PlatformConstants';
 import createHandler from './createHandler';
@@ -13,7 +13,8 @@ export const forceTouchGestureHandlerProps = [
   'feedbackOnActivation',
 ] as const;
 
-class ForceTouchFallback extends React.Component {
+// implicit `children` prop has been removed in @types/react^18.0.0
+class ForceTouchFallback extends React.Component<PropsWithChildren<unknown>> {
   static forceTouchAvailable = false;
   componentDidMount() {
     console.warn(

package/src/handlers/PanGestureHandler.ts

@@ -17,6 +17,7 @@ export const panGestureHandlerProps = [
   'maxPointers',
   'avgTouches',
   'enableTrackpadTwoFingerGesture',
+  'activateAfterLongPress',
 ] as const;
 
 export const panGestureHandlerCustomNativeProps = [
@@ -124,6 +125,7 @@ interface CommonPanProperties {
   minVelocity?: number;
   minVelocityX?: number;
   minVelocityY?: number;
+  activateAfterLongPress?: number;
 }
 
 export interface PanGestureConfig extends CommonPanProperties {

package/src/handlers/PressabilityDebugView.tsx

@@ -0,0 +1,2 @@
+// @ts-ignore it's not exported so we need to import it from path
+export { PressabilityDebugView } from 'react-native/Libraries/Pressability/PressabilityDebug';

package/src/handlers/PressabilityDebugView.web.tsx

@@ -0,0 +1,4 @@
+// PressabilityDebugView is not implemented in react-native-web
+export function PressabilityDebugView() {
+  return null;
+}