react-native-gesture-handler 2.18.1 → 2.20.0

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

@@ -6,6 +6,7 @@ export default class LongPressGestureHandler extends GestureHandler {
     private minDurationMs;
     private defaultMaxDistSq;
     private maxDistSq;
+    private numberOfPointers;
     private startX;
     private startY;
     private startTime;
@@ -19,8 +20,10 @@ export default class LongPressGestureHandler extends GestureHandler {
     protected resetConfig(): void;
     protected onStateChange(_newState: State, _oldState: State): void;
     protected onPointerDown(event: AdaptedEvent): void;
+    protected onPointerAdd(event: AdaptedEvent): void;
     protected onPointerMove(event: AdaptedEvent): void;
     protected onPointerUp(event: AdaptedEvent): void;
+    protected onPointerRemove(event: AdaptedEvent): void;
     private tryBegin;
     private tryActivate;
     private checkDistanceFail;

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

@@ -10,6 +10,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     private minDistSq;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
     updateGestureConfig({ enabled, ...props }: Config): void;
+    private restoreViewStyles;
     protected resetConfig(): void;
     protected onPointerDown(event: AdaptedEvent): void;
     protected onPointerAdd(event: AdaptedEvent): void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AdaptedEvent, Config } from '../interfaces';
+import { AdaptedEvent, Config, StylusData } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class PanGestureHandler extends GestureHandler {
     private readonly customActivationProperties;
@@ -25,6 +25,7 @@ export default class PanGestureHandler extends GestureHandler {
     private offsetY;
     private lastX;
     private lastY;
+    private stylusData;
     private activateAfterLongPress;
     private activationTimeout;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
@@ -35,6 +36,7 @@ export default class PanGestureHandler extends GestureHandler {
         translationY: number;
         velocityX: number;
         velocityY: number;
+        stylusData: StylusData | undefined;
     };
     private getTranslationX;
     private getTranslationY;

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

@@ -17,7 +17,7 @@ export interface Handler {
 }
 type ConfigArgs = number | boolean | HitSlop | UserSelect | TouchAction | ActiveCursor | Directions | Handler[] | null | undefined;
 export interface Config extends Record<string, ConfigArgs> {
-    enabled?: boolean;
+    enabled: boolean;
     simultaneousHandlers?: Handler[] | null;
     waitFor?: Handler[] | null;
     blocksHandlers?: Handler[] | null;
@@ -102,6 +102,13 @@ export interface PropsRef {
     onGestureHandlerEvent: () => void;
     onGestureHandlerStateChange: () => void;
 }
+export interface StylusData {
+    tiltX: number;
+    tiltY: number;
+    azimuthAngle: number;
+    altitudeAngle: number;
+    pressure: number;
+}
 export interface AdaptedEvent {
     x: number;
     y: number;
@@ -112,9 +119,7 @@ export interface AdaptedEvent {
     pointerType: PointerType;
     time: number;
     button?: MouseButton;
-    allTouches?: TouchList;
-    changedTouches?: TouchList;
-    touchEventType?: TouchEventType;
+    stylusData?: StylusData;
 }
 export declare enum EventTypes {
     DOWN = 0,

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

@@ -1,4 +1,4 @@
-import { AdaptedEvent, EventTypes, TouchEventType } from '../interfaces';
+import { AdaptedEvent, EventTypes } from '../interfaces';
 type PointerEventCallback = (event: AdaptedEvent) => void;
 export default abstract class EventManager<T> {
     protected readonly view: T;
@@ -7,7 +7,7 @@ export default abstract class EventManager<T> {
     constructor(view: T);
     abstract registerListeners(): void;
     abstract unregisterListeners(): void;
-    protected abstract mapEvent(event: Event, eventType: EventTypes, index?: number, touchEventType?: TouchEventType): AdaptedEvent;
+    protected abstract mapEvent(event: Event, eventType: EventTypes): AdaptedEvent;
     protected onPointerDown(_event: AdaptedEvent): void;
     protected onPointerAdd(_event: AdaptedEvent): void;
     protected onPointerUp(_event: AdaptedEvent): void;

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

@@ -19,5 +19,6 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
     onEnd(): void;
     onCancel(): void;
     onFail(): void;
+    onEnabledChange(enabled: boolean): void;
     destroy(config: Config): void;
 }

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

@@ -2,9 +2,11 @@ import type IGestureHandler from '../handlers/IGestureHandler';
 import { GestureHandlerDelegate, MeasureResult } from './GestureHandlerDelegate';
 import { Config } from '../interfaces';
 export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate<HTMLElement, IGestureHandler> {
+    private isInitialized;
     private view;
     private gestureHandler;
     private eventManagers;
+    private defaultViewStyles;
     getView(): HTMLElement;
     init(viewRef: number, handler: IGestureHandler): void;
     isPointerInBounds({ x, y }: {
@@ -19,6 +21,10 @@ export declare class GestureHandlerWebDelegate implements GestureHandlerDelegate
     private removeContextMenuListeners;
     private disableContextMenu;
     private enableContextMenu;
+    private setUserSelect;
+    private setTouchAction;
+    private setContextMenu;
+    onEnabledChange(enabled: boolean): void;
     onBegin(): void;
     onActivate(): void;
     onEnd(): void;

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

@@ -0,0 +1,13 @@
+import { AdaptedEvent, EventTypes } from '../interfaces';
+import EventManager from './EventManager';
+export default class KeyboardEventManager extends EventManager<HTMLElement> {
+    private activationKeys;
+    private cancelationKeys;
+    private isPressed;
+    private keyDownCallback;
+    private keyUpCallback;
+    private dispatchEvent;
+    registerListeners(): void;
+    unregisterListeners(): void;
+    protected mapEvent(event: KeyboardEvent, eventType: EventTypes): AdaptedEvent;
+}

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

@@ -1,5 +1,5 @@
 import { PointerType } from '../PointerType';
-import { Point } from './interfaces';
+import type { Point, StylusData } 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;
@@ -8,3 +8,4 @@ export declare function calculateViewScale(view: HTMLElement): {
     scaleX: number;
     scaleY: number;
 };
+export declare function tryExtractStylusData(event: PointerEvent): StylusData | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-handler",
-  "version": "2.18.1",
+  "version": "2.20.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",
@@ -11,7 +11,7 @@
     "ts-check": "yarn tsc --noEmit",
     "format:js": "prettier --write --list-different './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'",
     "format:android": "node ./scripts/format-android.js",
-    "format:ios": "find apple/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
+    "format:apple": "find apple/ -iname *.h -o -iname *.m -o -iname *.cpp -o -iname *.mm | xargs clang-format -i",
     "lint:js": "eslint --ext '.js,.ts,.tsx' src/ example/src FabricExample/src MacOSExample/src && yarn prettier --check './{src,example,FabricExample,MacOSExample}/**/*.{js,jsx,ts,tsx}'",
     "lint:js-root": "eslint --ext '.js,.ts,.tsx' src/ && yarn prettier --check './src/**/*.{js,jsx,ts,tsx}'",
     "lint:android": "./android/gradlew -p android spotlessCheck -q",
@@ -114,7 +114,7 @@
   "lint-staged": {
     "./{src,example,FabricExample,MacOSExample}/**/*.{ts,tsx}": "yarn format:js",
     "android/**/*.kt": "yarn format:android",
-    "apple/**/*.{h,m,mm,cpp}": "yarn format:ios",
+    "apple/**/*.{h,m,mm,cpp}": "yarn format:apple",
     "src/specs/*.ts": "yarn sync-architectures"
   },
   "release-it": {

package/src/PointerType.ts

@@ -2,5 +2,6 @@ export enum PointerType {
   TOUCH,
   STYLUS,
   MOUSE,
+  KEY,
   OTHER,
 }

package/src/components/GestureButtons.tsx

@@ -120,12 +120,13 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
   };
 
   render() {
-    const { rippleColor, ...rest } = this.props;
+    const { rippleColor, style, ...rest } = this.props;
 
     return (
       <RawButton
         ref={this.props.innerRef}
         rippleColor={processColor(rippleColor)}
+        style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
         {...rest}
         onGestureEvent={this.onGestureEvent}
         onHandlerStateChange={this.onHandlerStateChange}

package/src/components/GestureComponents.tsx

@@ -138,7 +138,7 @@ export const FlatList = React.forwardRef((props, ref) => {
   );
 }) as <ItemT = any>(
   props: PropsWithChildren<
-    RNFlatListProps<ItemT> &
+    Omit<RNFlatListProps<ItemT>, 'renderScrollComponent'> &
       RefAttributes<FlatList<ItemT>> &
       NativeViewGestureHandlerProps
   >,

package/src/components/Pressable/Pressable.tsx

@@ -9,7 +9,6 @@ import {
   View,
   ViewStyle,
   processColor,
-  StyleSheet,
 } from 'react-native';
 import NativeButton from '../GestureHandlerButton';
 import {
@@ -18,17 +17,37 @@ import {
   isTouchWithinInset,
   gestureTouchToPressableEvent,
   addInsets,
-  splitStyles,
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
+import { INT32_MAX } from '../../utils';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
 
 export default function Pressable(props: PressableProps) {
-  const [pressedState, setPressedState] = useState(
-    props.testOnly_pressed ?? false
-  );
+  const {
+    testOnly_pressed,
+    hitSlop,
+    pressRetentionOffset,
+    delayHoverIn,
+    onHoverIn,
+    delayHoverOut,
+    onHoverOut,
+    delayLongPress,
+    unstable_pressDelay,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    style,
+    children,
+    android_disableSound,
+    android_ripple,
+    disabled,
+    ...remainingProps
+  } = props;
+
+  const [pressedState, setPressedState] = useState(testOnly_pressed ?? false);
 
   const pressableRef = useRef<View>(null);
 
@@ -39,18 +58,16 @@ export default function Pressable(props: PressableProps) {
 
   const normalizedHitSlop: Insets = useMemo(
     () =>
-      typeof props.hitSlop === 'number'
-        ? numberAsInset(props.hitSlop)
-        : props.hitSlop ?? {},
-    [props.hitSlop]
+      typeof hitSlop === 'number' ? numberAsInset(hitSlop) : hitSlop ?? {},
+    [hitSlop]
   );
 
   const normalizedPressRetentionOffset: Insets = useMemo(
     () =>
-      typeof props.pressRetentionOffset === 'number'
-        ? numberAsInset(props.pressRetentionOffset)
-        : props.pressRetentionOffset ?? {},
-    [props.pressRetentionOffset]
+      typeof pressRetentionOffset === 'number'
+        ? numberAsInset(pressRetentionOffset)
+        : pressRetentionOffset ?? {},
+    [pressRetentionOffset]
   );
 
   const hoverInTimeout = useRef<number | null>(null);
@@ -65,29 +82,29 @@ export default function Pressable(props: PressableProps) {
           if (hoverOutTimeout.current) {
             clearTimeout(hoverOutTimeout.current);
           }
-          if (props.delayHoverIn) {
+          if (delayHoverIn) {
             hoverInTimeout.current = setTimeout(
-              () => props.onHoverIn?.(gestureToPressableEvent(event)),
-              props.delayHoverIn
+              () => onHoverIn?.(gestureToPressableEvent(event)),
+              delayHoverIn
             );
             return;
           }
-          props.onHoverIn?.(gestureToPressableEvent(event));
+          onHoverIn?.(gestureToPressableEvent(event));
         })
         .onFinalize((event) => {
           if (hoverInTimeout.current) {
             clearTimeout(hoverInTimeout.current);
           }
-          if (props.delayHoverOut) {
+          if (delayHoverOut) {
             hoverOutTimeout.current = setTimeout(
-              () => props.onHoverOut?.(gestureToPressableEvent(event)),
-              props.delayHoverOut
+              () => onHoverOut?.(gestureToPressableEvent(event)),
+              delayHoverOut
             );
             return;
           }
-          props.onHoverOut?.(gestureToPressableEvent(event));
+          onHoverOut?.(gestureToPressableEvent(event));
         }),
-    [props]
+    [delayHoverIn, delayHoverOut, onHoverIn, onHoverOut]
   );
 
   const pressDelayTimeoutRef = useRef<number | null>(null);
@@ -108,12 +125,12 @@ export default function Pressable(props: PressableProps) {
 
       deferredEventPayload.current = null;
 
-      props.onPressIn?.(event);
+      onPressIn?.(event);
       isPressCallbackEnabled.current = true;
       pressDelayTimeoutRef.current = null;
       setPressedState(true);
     },
-    [props]
+    [onPressIn]
   );
 
   const pressOutHandler = useCallback(
@@ -126,7 +143,7 @@ export default function Pressable(props: PressableProps) {
         return;
       }
 
-      if (props.unstable_pressDelay && pressDelayTimeoutRef.current !== null) {
+      if (unstable_pressDelay && pressDelayTimeoutRef.current !== null) {
         // When delay is preemptively finished by lifting touches,
         // we want to immediately activate it's effects - pressInHandler,
         // even though we are located at the pressOutHandler
@@ -135,14 +152,14 @@ export default function Pressable(props: PressableProps) {
       }
 
       if (deferredEventPayload.current) {
-        props.onPressIn?.(deferredEventPayload.current);
+        onPressIn?.(deferredEventPayload.current);
         deferredEventPayload.current = null;
       }
 
-      props.onPressOut?.(event);
+      onPressOut?.(event);
 
       if (isPressCallbackEnabled.current) {
-        props.onPress?.(event);
+        onPress?.(event);
       }
 
       if (longPressTimeoutRef.current) {
@@ -155,7 +172,7 @@ export default function Pressable(props: PressableProps) {
       isPressCallbackEnabled.current = true;
       setPressedState(false);
     },
-    [pressInHandler, props]
+    [onPress, onPressIn, onPressOut, pressInHandler, unstable_pressDelay]
   );
 
   const handlingOnTouchesDown = useRef<boolean>(false);
@@ -169,7 +186,7 @@ export default function Pressable(props: PressableProps) {
       }
 
       if (hasPassedBoundsChecks.current) {
-        props.onLongPress?.(gestureTouchToPressableEvent(event));
+        onLongPress?.(gestureTouchToPressableEvent(event));
         isPressCallbackEnabled.current = false;
       }
 
@@ -178,19 +195,19 @@ export default function Pressable(props: PressableProps) {
         longPressTimeoutRef.current = null;
       }
     },
-    [props]
+    [onLongPress]
   );
 
   const longPressTimeoutRef = useRef<number | null>(null);
   const longPressMinDuration =
-    (props.delayLongPress ?? DEFAULT_LONG_PRESS_DURATION) +
-    (props.unstable_pressDelay ?? 0);
+    (delayLongPress ?? DEFAULT_LONG_PRESS_DURATION) +
+    (unstable_pressDelay ?? 0);
 
   const pressAndTouchGesture = useMemo(
     () =>
       Gesture.LongPress()
-        .minDuration(Number.MAX_SAFE_INTEGER) // Stops long press from blocking native gesture
-        .maxDistance(Number.MAX_SAFE_INTEGER) // Stops long press from cancelling after set distance
+        .minDuration(INT32_MAX) // Stops long press from blocking native gesture
+        .maxDistance(INT32_MAX) // Stops long press from cancelling after set distance
         .cancelsTouchesInView(false)
         .onTouchesDown((event) => {
           handlingOnTouchesDown.current = true;
@@ -224,10 +241,10 @@ export default function Pressable(props: PressableProps) {
               );
             }
 
-            if (props.unstable_pressDelay) {
+            if (unstable_pressDelay) {
               pressDelayTimeoutRef.current = setTimeout(() => {
                 pressInHandler(gestureTouchToPressableEvent(event));
-              }, props.unstable_pressDelay);
+              }, unstable_pressDelay);
             } else {
               pressInHandler(gestureTouchToPressableEvent(event));
             }
@@ -275,7 +292,7 @@ export default function Pressable(props: PressableProps) {
       normalizedHitSlop,
       pressInHandler,
       pressOutHandler,
-      props.unstable_pressDelay,
+      unstable_pressDelay,
     ]
   );
 
@@ -333,7 +350,7 @@ export default function Pressable(props: PressableProps) {
     normalizedPressRetentionOffset
   );
 
-  const isPressableEnabled = props.disabled !== true;
+  const isPressableEnabled = disabled !== true;
 
   const gestures = [pressAndTouchGesture, hoverGesture, buttonGesture];
 
@@ -353,46 +370,36 @@ export default function Pressable(props: PressableProps) {
 
   const gesture = Gesture.Simultaneous(...gestures);
 
-  const defaultRippleColor = props.android_ripple ? undefined : 'transparent';
+  const defaultRippleColor = android_ripple ? undefined : 'transparent';
 
   // `cursor: 'pointer'` on `RNButton` crashes iOS
   const pointerStyle: StyleProp<ViewStyle> =
     Platform.OS === 'web' ? { cursor: 'pointer' } : {};
 
   const styleProp =
-    typeof props.style === 'function'
-      ? props.style({ pressed: pressedState })
-      : props.style;
+    typeof style === 'function' ? style({ pressed: pressedState }) : style;
 
   const childrenProp =
-    typeof props.children === 'function'
-      ? props.children({ pressed: pressedState })
-      : props.children;
-
-  const flattenedStyles = StyleSheet.flatten(styleProp ?? {});
-
-  const [innerStyles, outerStyles] = splitStyles(flattenedStyles);
+    typeof children === 'function'
+      ? children({ pressed: pressedState })
+      : children;
 
   return (
-    <View style={outerStyles}>
-      <GestureDetector gesture={gesture}>
-        <NativeButton
-          ref={pressableRef}
-          testID={props.testID}
-          hitSlop={appliedHitSlop}
-          enabled={isPressableEnabled}
-          touchSoundDisabled={props.android_disableSound ?? undefined}
-          rippleColor={processColor(
-            props.android_ripple?.color ?? defaultRippleColor
-          )}
-          rippleRadius={props.android_ripple?.radius ?? undefined}
-          style={[StyleSheet.absoluteFill, pointerStyle, innerStyles]}>
-          {childrenProp}
-          {__DEV__ ? (
-            <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
-          ) : null}
-        </NativeButton>
-      </GestureDetector>
-    </View>
+    <GestureDetector gesture={gesture}>
+      <NativeButton
+        {...remainingProps}
+        ref={pressableRef}
+        hitSlop={appliedHitSlop}
+        enabled={isPressableEnabled}
+        touchSoundDisabled={android_disableSound ?? undefined}
+        rippleColor={processColor(android_ripple?.color ?? defaultRippleColor)}
+        rippleRadius={android_ripple?.radius ?? undefined}
+        style={[pointerStyle, styleProp]}>
+        {childrenProp}
+        {__DEV__ ? (
+          <PressabilityDebugView color="red" hitSlop={normalizedHitSlop} />
+        ) : null}
+      </NativeButton>
+    </GestureDetector>
   );
 }

package/src/components/Pressable/index.ts

@@ -1,2 +1,2 @@
-export { PressableProps } from './PressableProps';
+export type { PressableProps } from './PressableProps';
 export { default } from './Pressable';

package/src/components/Pressable/utils.ts

@@ -1,11 +1,13 @@
-import { Insets, ViewStyle } from 'react-native';
-import { LongPressGestureHandlerEventPayload } from '../../handlers/GestureHandlerEventPayload';
+import { Insets } from 'react-native';
+import {
+  HoverGestureHandlerEventPayload,
+  LongPressGestureHandlerEventPayload,
+} from '../../handlers/GestureHandlerEventPayload';
 import {
   TouchData,
   GestureStateChangeEvent,
   GestureTouchEvent,
 } from '../../handlers/gestureHandlerCommon';
-import { HoverGestureHandlerEventPayload } from '../../handlers/gestures/hoverGesture';
 import { InnerPressableEvent, PressableEvent } from './PressableProps';
 
 const numberAsInset = (value: number): Insets => ({
@@ -125,56 +127,10 @@ const gestureTouchToPressableEvent = (
   };
 };
 
-type StylePropKeys = (keyof ViewStyle)[];
-
-// Source:
-// - From ViewStyle extracted FlexStyle sub-interface which contains all of the box-model manipulating props.
-// - From FlexStyle handpicked those styles, which act on the inner part of the box-model.
-const innerStyleKeys = new Set([
-  'alignContent',
-  'alignItems',
-  'flexBasis',
-  'flexDirection',
-  'flexWrap',
-  'rowGap',
-  'gap',
-  'columnGap',
-  'justifyContent',
-  'overflow',
-  'padding',
-  'paddingBottom',
-  'paddingEnd',
-  'paddingHorizontal',
-  'paddingLeft',
-  'paddingRight',
-  'paddingStart',
-  'paddingTop',
-  'paddingVertical',
-  'start',
-  'end',
-  'direction', // iOS only
-] as StylePropKeys);
-
-const splitStyles = (from: ViewStyle): [ViewStyle, ViewStyle] => {
-  const outerStyles: Record<string, unknown> = {};
-  const innerStyles: Record<string, unknown> = {};
-
-  for (const key in from) {
-    if (innerStyleKeys.has(key as keyof ViewStyle)) {
-      innerStyles[key] = from[key as keyof ViewStyle];
-    } else {
-      outerStyles[key] = from[key as keyof ViewStyle];
-    }
-  }
-
-  return [innerStyles, outerStyles];
-};
-
 export {
   numberAsInset,
   addInsets,
   isTouchWithinInset,
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
-  splitStyles,
 };