react-native-gesture-handler 2.19.0 → 2.20.0

package/lib/module/web/utils.js

@@ -39,4 +39,174 @@ export function calculateViewScale(view) {
 
   return resultScales;
 }
+export function tryExtractStylusData(event) {
+  const pointerType = PointerTypeMapping.get(event.pointerType);
+
+  if (pointerType !== PointerType.STYLUS) {
+    return;
+  } // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+
+
+  const eventAzimuthAngle = event.azimuthAngle; // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)
+
+  const eventAltitudeAngle = event.altitudeAngle;
+
+  if (event.tiltX === 0 && event.tiltY === 0) {
+    // If we are in this branch, it means that either tilt properties are not supported and we have to calculate them from altitude and azimuth angles,
+    // or stylus is perpendicular to the screen and we can use altitude / azimuth instead of tilt
+    // If azimuth and altitude are undefined in this branch, it means that we are either perpendicular to the screen,
+    // or that none of the position sets is supported. In that case, we can treat stylus as perpendicular
+    if (eventAzimuthAngle === undefined || eventAltitudeAngle === undefined) {
+      return {
+        tiltX: 0,
+        tiltY: 0,
+        azimuthAngle: Math.PI / 2,
+        altitudeAngle: Math.PI / 2,
+        pressure: event.pressure
+      };
+    }
+
+    const {
+      tiltX,
+      tiltY
+    } = spherical2tilt(eventAltitudeAngle, eventAzimuthAngle);
+    return {
+      tiltX,
+      tiltY,
+      azimuthAngle: eventAzimuthAngle,
+      altitudeAngle: eventAltitudeAngle,
+      pressure: event.pressure
+    };
+  }
+
+  const {
+    altitudeAngle,
+    azimuthAngle
+  } = tilt2spherical(event.tiltX, event.tiltY);
+  return {
+    tiltX: event.tiltX,
+    tiltY: event.tiltY,
+    azimuthAngle,
+    altitudeAngle,
+    pressure: event.pressure
+  };
+} // `altitudeAngle` and `azimuthAngle` are experimental properties, which are not supported on Firefox and Safari.
+// Given that, we use `tilt` properties and algorithm that converts one value to another.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+
+function tilt2spherical(tiltX, tiltY) {
+  const tiltXrad = tiltX * Math.PI / 180;
+  const tiltYrad = tiltY * Math.PI / 180; // calculate azimuth angle
+
+  let azimuthAngle = 0;
+
+  if (tiltX === 0) {
+    if (tiltY > 0) {
+      azimuthAngle = Math.PI / 2;
+    } else if (tiltY < 0) {
+      azimuthAngle = 3 * Math.PI / 2;
+    }
+  } else if (tiltY === 0) {
+    if (tiltX < 0) {
+      azimuthAngle = Math.PI;
+    }
+  } else if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    // not enough information to calculate azimuth
+    azimuthAngle = 0;
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    const tanX = Math.tan(tiltXrad);
+    const tanY = Math.tan(tiltYrad);
+    azimuthAngle = Math.atan2(tanY, tanX);
+
+    if (azimuthAngle < 0) {
+      azimuthAngle += 2 * Math.PI;
+    }
+  } // calculate altitude angle
+
+
+  let altitudeAngle = 0;
+
+  if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {
+    altitudeAngle = 0;
+  } else if (tiltX === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltYrad);
+  } else if (tiltY === 0) {
+    altitudeAngle = Math.PI / 2 - Math.abs(tiltXrad);
+  } else {
+    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90
+    altitudeAngle = Math.atan(1.0 / Math.sqrt(Math.pow(Math.tan(tiltXrad), 2) + Math.pow(Math.tan(tiltYrad), 2)));
+  }
+
+  return {
+    altitudeAngle: altitudeAngle,
+    azimuthAngle: azimuthAngle
+  };
+} // If we are on a platform that doesn't support `tiltX` and `tiltY`, we have to calculate them from `altitude` and `azimuth` angles.
+//
+// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle
+
+
+function spherical2tilt(altitudeAngle, azimuthAngle) {
+  const radToDeg = 180 / Math.PI;
+  let tiltXrad = 0;
+  let tiltYrad = 0;
+
+  if (altitudeAngle === 0) {
+    // the pen is in the X-Y plane
+    if (azimuthAngle === 0 || azimuthAngle === 2 * Math.PI) {
+      // pen is on positive X axis
+      tiltXrad = Math.PI / 2;
+    }
+
+    if (azimuthAngle === Math.PI / 2) {
+      // pen is on positive Y axis
+      tiltYrad = Math.PI / 2;
+    }
+
+    if (azimuthAngle === Math.PI) {
+      // pen is on negative X axis
+      tiltXrad = -Math.PI / 2;
+    }
+
+    if (azimuthAngle === 3 * Math.PI / 2) {
+      // pen is on negative Y axis
+      tiltYrad = -Math.PI / 2;
+    }
+
+    if (azimuthAngle > 0 && azimuthAngle < Math.PI / 2) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+
+    if (azimuthAngle > Math.PI / 2 && azimuthAngle < Math.PI) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = Math.PI / 2;
+    }
+
+    if (azimuthAngle > Math.PI && azimuthAngle < 3 * Math.PI / 2) {
+      tiltXrad = -Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+
+    if (azimuthAngle > 3 * Math.PI / 2 && azimuthAngle < 2 * Math.PI) {
+      tiltXrad = Math.PI / 2;
+      tiltYrad = -Math.PI / 2;
+    }
+  }
+
+  if (altitudeAngle !== 0) {
+    const tanAlt = Math.tan(altitudeAngle);
+    tiltXrad = Math.atan(Math.cos(azimuthAngle) / tanAlt);
+    tiltYrad = Math.atan(Math.sin(azimuthAngle) / tanAlt);
+  }
+
+  const tiltX = Math.round(tiltXrad * radToDeg);
+  const tiltY = Math.round(tiltYrad * radToDeg);
+  return {
+    tiltX,
+    tiltY
+  };
+}
 //# sourceMappingURL=utils.js.map

package/lib/module/web/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils.ts"],"names":["PointerType","isPointerInBounds","view","x","y","rect","getBoundingClientRect","left","right","top","bottom","PointerTypeMapping","Map","MOUSE","TOUCH","STYLUS","OTHER","degToRad","degrees","Math","PI","coneToDeviation","cos","calculateViewScale","styles","getComputedStyle","resultScales","scaleX","scaleY","scale","undefined","scales","split","parseFloat","matrixElements","RegExp","exec","transform","matrixElementsArray"],"mappings":"AAAA,SAASA,WAAT,QAA4B,gBAA5B;AAGA,OAAO,SAASC,iBAAT,CAA2BC,IAA3B,EAA8C;AAAEC,EAAAA,CAAF;AAAKC,EAAAA;AAAL,CAA9C,EAAwE;AAC7E,QAAMC,IAAa,GAAGH,IAAI,CAACI,qBAAL,EAAtB;AAEA,SAAOH,CAAC,IAAIE,IAAI,CAACE,IAAV,IAAkBJ,CAAC,IAAIE,IAAI,CAACG,KAA5B,IAAqCJ,CAAC,IAAIC,IAAI,CAACI,GAA/C,IAAsDL,CAAC,IAAIC,IAAI,CAACK,MAAvE;AACD;AAED,OAAO,MAAMC,kBAAkB,GAAG,IAAIC,GAAJ,CAA6B,CAC7D,CAAC,OAAD,EAAUZ,WAAW,CAACa,KAAtB,CAD6D,EAE7D,CAAC,OAAD,EAAUb,WAAW,CAACc,KAAtB,CAF6D,EAG7D,CAAC,KAAD,EAAQd,WAAW,CAACe,MAApB,CAH6D,EAI7D,CAAC,MAAD,EAASf,WAAW,CAACgB,KAArB,CAJ6D,CAA7B,CAA3B;AAOP,OAAO,MAAMC,QAAQ,GAAIC,OAAD,IAAsBA,OAAO,GAAGC,IAAI,CAACC,EAAhB,GAAsB,GAA5D;AAEP,OAAO,MAAMC,eAAe,GAAIH,OAAD,IAC7BC,IAAI,CAACG,GAAL,CAASL,QAAQ,CAACC,OAAO,GAAG,CAAX,CAAjB,CADK;AAGP,OAAO,SAASK,kBAAT,CAA4BrB,IAA5B,EAA+C;AAAA;;AACpD,QAAMsB,MAAM,GAAGC,gBAAgB,CAACvB,IAAD,CAA/B;AAEA,QAAMwB,YAAY,GAAG;AACnBC,IAAAA,MAAM,EAAE,CADW;AAEnBC,IAAAA,MAAM,EAAE;AAFW,GAArB,CAHoD,CAQpD;;AACA,MAAIJ,MAAM,CAACK,KAAP,KAAiBC,SAAjB,IAA8BN,MAAM,CAACK,KAAP,KAAiB,MAAnD,EAA2D;AACzD,UAAME,MAAM,GAAGP,MAAM,CAACK,KAAP,CAAaG,KAAb,CAAmB,GAAnB,CAAf;;AAEA,QAAID,MAAM,CAAC,CAAD,CAAV,EAAe;AACbL,MAAAA,YAAY,CAACC,MAAb,GAAsBM,UAAU,CAACF,MAAM,CAAC,CAAD,CAAP,CAAhC;AACD;;AAEDL,IAAAA,YAAY,CAACE,MAAb,GAAsBG,MAAM,CAAC,CAAD,CAAN,GAClBE,UAAU,CAACF,MAAM,CAAC,CAAD,CAAP,CADQ,GAElBE,UAAU,CAACF,MAAM,CAAC,CAAD,CAAP,CAFd;AAGD,GAnBmD,CAqBpD;;;AACA,QAAMG,cAAc,mBAAG,IAAIC,MAAJ,CAAW,gBAAX,EAA6BC,IAA7B,CACrBZ,MAAM,CAACa,SADc,CAAH,iDAAG,aAEnB,CAFmB,CAAvB;;AAIA,MAAIH,cAAJ,EAAoB;AAClB,UAAMI,mBAAmB,GAAGJ,cAAc,CAACF,KAAf,CAAqB,IAArB,CAA5B;AAEAN,IAAAA,YAAY,CAACC,MAAb,IAAuBM,UAAU,CAACK,mBAAmB,CAAC,CAAD,CAApB,CAAjC;AACAZ,IAAAA,YAAY,CAACE,MAAb,IAAuBK,UAAU,CAACK,mBAAmB,CAAC,CAAD,CAApB,CAAjC;AACD;;AAED,SAAOZ,YAAP;AACD","sourcesContent":["import { PointerType } from '../PointerType';\nimport { Point } from './interfaces';\n\nexport function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {\n  const rect: DOMRect = view.getBoundingClientRect();\n\n  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;\n}\n\nexport const PointerTypeMapping = new Map<string, PointerType>([\n  ['mouse', PointerType.MOUSE],\n  ['touch', PointerType.TOUCH],\n  ['pen', PointerType.STYLUS],\n  ['none', PointerType.OTHER],\n]);\n\nexport const degToRad = (degrees: number) => (degrees * Math.PI) / 180;\n\nexport const coneToDeviation = (degrees: number) =>\n  Math.cos(degToRad(degrees / 2));\n\nexport function calculateViewScale(view: HTMLElement) {\n  const styles = getComputedStyle(view);\n\n  const resultScales = {\n    scaleX: 1,\n    scaleY: 1,\n  };\n\n  // Get scales from scale property\n  if (styles.scale !== undefined && styles.scale !== 'none') {\n    const scales = styles.scale.split(' ');\n\n    if (scales[0]) {\n      resultScales.scaleX = parseFloat(scales[0]);\n    }\n\n    resultScales.scaleY = scales[1]\n      ? parseFloat(scales[1])\n      : parseFloat(scales[0]);\n  }\n\n  // Get scales from transform property\n  const matrixElements = new RegExp(/matrix\\((.+)\\)/).exec(\n    styles.transform\n  )?.[1];\n\n  if (matrixElements) {\n    const matrixElementsArray = matrixElements.split(', ');\n\n    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);\n    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);\n  }\n\n  return resultScales;\n}\n"]}
+{"version":3,"sources":["utils.ts"],"names":["PointerType","isPointerInBounds","view","x","y","rect","getBoundingClientRect","left","right","top","bottom","PointerTypeMapping","Map","MOUSE","TOUCH","STYLUS","OTHER","degToRad","degrees","Math","PI","coneToDeviation","cos","calculateViewScale","styles","getComputedStyle","resultScales","scaleX","scaleY","scale","undefined","scales","split","parseFloat","matrixElements","RegExp","exec","transform","matrixElementsArray","tryExtractStylusData","event","pointerType","get","eventAzimuthAngle","azimuthAngle","eventAltitudeAngle","altitudeAngle","tiltX","tiltY","pressure","spherical2tilt","tilt2spherical","tiltXrad","tiltYrad","abs","tanX","tan","tanY","atan2","atan","sqrt","pow","radToDeg","tanAlt","sin","round"],"mappings":"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","sourcesContent":["import { PointerType } from '../PointerType';\nimport type { Point, StylusData } from './interfaces';\n\nexport function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {\n  const rect: DOMRect = view.getBoundingClientRect();\n\n  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;\n}\n\nexport const PointerTypeMapping = new Map<string, PointerType>([\n  ['mouse', PointerType.MOUSE],\n  ['touch', PointerType.TOUCH],\n  ['pen', PointerType.STYLUS],\n  ['none', PointerType.OTHER],\n]);\n\nexport const degToRad = (degrees: number) => (degrees * Math.PI) / 180;\n\nexport const coneToDeviation = (degrees: number) =>\n  Math.cos(degToRad(degrees / 2));\n\nexport function calculateViewScale(view: HTMLElement) {\n  const styles = getComputedStyle(view);\n\n  const resultScales = {\n    scaleX: 1,\n    scaleY: 1,\n  };\n\n  // Get scales from scale property\n  if (styles.scale !== undefined && styles.scale !== 'none') {\n    const scales = styles.scale.split(' ');\n\n    if (scales[0]) {\n      resultScales.scaleX = parseFloat(scales[0]);\n    }\n\n    resultScales.scaleY = scales[1]\n      ? parseFloat(scales[1])\n      : parseFloat(scales[0]);\n  }\n\n  // Get scales from transform property\n  const matrixElements = new RegExp(/matrix\\((.+)\\)/).exec(\n    styles.transform\n  )?.[1];\n\n  if (matrixElements) {\n    const matrixElementsArray = matrixElements.split(', ');\n\n    resultScales.scaleX *= parseFloat(matrixElementsArray[0]);\n    resultScales.scaleY *= parseFloat(matrixElementsArray[3]);\n  }\n\n  return resultScales;\n}\n\nexport function tryExtractStylusData(\n  event: PointerEvent\n): StylusData | undefined {\n  const pointerType = PointerTypeMapping.get(event.pointerType);\n\n  if (pointerType !== PointerType.STYLUS) {\n    return;\n  }\n\n  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)\n  const eventAzimuthAngle: number | undefined = event.azimuthAngle;\n  // @ts-ignore This property exists (https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent#instance_properties)\n  const eventAltitudeAngle: number | undefined = event.altitudeAngle;\n\n  if (event.tiltX === 0 && event.tiltY === 0) {\n    // If we are in this branch, it means that either tilt properties are not supported and we have to calculate them from altitude and azimuth angles,\n    // or stylus is perpendicular to the screen and we can use altitude / azimuth instead of tilt\n\n    // If azimuth and altitude are undefined in this branch, it means that we are either perpendicular to the screen,\n    // or that none of the position sets is supported. In that case, we can treat stylus as perpendicular\n    if (eventAzimuthAngle === undefined || eventAltitudeAngle === undefined) {\n      return {\n        tiltX: 0,\n        tiltY: 0,\n        azimuthAngle: Math.PI / 2,\n        altitudeAngle: Math.PI / 2,\n        pressure: event.pressure,\n      };\n    }\n\n    const { tiltX, tiltY } = spherical2tilt(\n      eventAltitudeAngle,\n      eventAzimuthAngle\n    );\n\n    return {\n      tiltX,\n      tiltY,\n      azimuthAngle: eventAzimuthAngle,\n      altitudeAngle: eventAltitudeAngle,\n      pressure: event.pressure,\n    };\n  }\n\n  const { altitudeAngle, azimuthAngle } = tilt2spherical(\n    event.tiltX,\n    event.tiltY\n  );\n\n  return {\n    tiltX: event.tiltX,\n    tiltY: event.tiltY,\n    azimuthAngle,\n    altitudeAngle,\n    pressure: event.pressure,\n  };\n}\n\n// `altitudeAngle` and `azimuthAngle` are experimental properties, which are not supported on Firefox and Safari.\n// Given that, we use `tilt` properties and algorithm that converts one value to another.\n//\n// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle\nfunction tilt2spherical(tiltX: number, tiltY: number) {\n  const tiltXrad = (tiltX * Math.PI) / 180;\n  const tiltYrad = (tiltY * Math.PI) / 180;\n\n  // calculate azimuth angle\n  let azimuthAngle = 0;\n\n  if (tiltX === 0) {\n    if (tiltY > 0) {\n      azimuthAngle = Math.PI / 2;\n    } else if (tiltY < 0) {\n      azimuthAngle = (3 * Math.PI) / 2;\n    }\n  } else if (tiltY === 0) {\n    if (tiltX < 0) {\n      azimuthAngle = Math.PI;\n    }\n  } else if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {\n    // not enough information to calculate azimuth\n    azimuthAngle = 0;\n  } else {\n    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90\n    const tanX = Math.tan(tiltXrad);\n    const tanY = Math.tan(tiltYrad);\n\n    azimuthAngle = Math.atan2(tanY, tanX);\n    if (azimuthAngle < 0) {\n      azimuthAngle += 2 * Math.PI;\n    }\n  }\n\n  // calculate altitude angle\n  let altitudeAngle = 0;\n\n  if (Math.abs(tiltX) === 90 || Math.abs(tiltY) === 90) {\n    altitudeAngle = 0;\n  } else if (tiltX === 0) {\n    altitudeAngle = Math.PI / 2 - Math.abs(tiltYrad);\n  } else if (tiltY === 0) {\n    altitudeAngle = Math.PI / 2 - Math.abs(tiltXrad);\n  } else {\n    // Non-boundary case: neither tiltX nor tiltY is equal to 0 or +-90\n    altitudeAngle = Math.atan(\n      1.0 /\n        Math.sqrt(\n          Math.pow(Math.tan(tiltXrad), 2) + Math.pow(Math.tan(tiltYrad), 2)\n        )\n    );\n  }\n\n  return { altitudeAngle: altitudeAngle, azimuthAngle: azimuthAngle };\n}\n\n// If we are on a platform that doesn't support `tiltX` and `tiltY`, we have to calculate them from `altitude` and `azimuth` angles.\n//\n// Source: https://w3c.github.io/pointerevents/#converting-between-tiltx-tilty-and-altitudeangle-azimuthangle\nfunction spherical2tilt(altitudeAngle: number, azimuthAngle: number) {\n  const radToDeg = 180 / Math.PI;\n\n  let tiltXrad = 0;\n  let tiltYrad = 0;\n\n  if (altitudeAngle === 0) {\n    // the pen is in the X-Y plane\n    if (azimuthAngle === 0 || azimuthAngle === 2 * Math.PI) {\n      // pen is on positive X axis\n      tiltXrad = Math.PI / 2;\n    }\n    if (azimuthAngle === Math.PI / 2) {\n      // pen is on positive Y axis\n      tiltYrad = Math.PI / 2;\n    }\n    if (azimuthAngle === Math.PI) {\n      // pen is on negative X axis\n      tiltXrad = -Math.PI / 2;\n    }\n    if (azimuthAngle === (3 * Math.PI) / 2) {\n      // pen is on negative Y axis\n      tiltYrad = -Math.PI / 2;\n    }\n    if (azimuthAngle > 0 && azimuthAngle < Math.PI / 2) {\n      tiltXrad = Math.PI / 2;\n      tiltYrad = Math.PI / 2;\n    }\n    if (azimuthAngle > Math.PI / 2 && azimuthAngle < Math.PI) {\n      tiltXrad = -Math.PI / 2;\n      tiltYrad = Math.PI / 2;\n    }\n    if (azimuthAngle > Math.PI && azimuthAngle < (3 * Math.PI) / 2) {\n      tiltXrad = -Math.PI / 2;\n      tiltYrad = -Math.PI / 2;\n    }\n    if (azimuthAngle > (3 * Math.PI) / 2 && azimuthAngle < 2 * Math.PI) {\n      tiltXrad = Math.PI / 2;\n      tiltYrad = -Math.PI / 2;\n    }\n  }\n\n  if (altitudeAngle !== 0) {\n    const tanAlt = Math.tan(altitudeAngle);\n\n    tiltXrad = Math.atan(Math.cos(azimuthAngle) / tanAlt);\n    tiltYrad = Math.atan(Math.sin(azimuthAngle) / tanAlt);\n  }\n\n  const tiltX = Math.round(tiltXrad * radToDeg);\n  const tiltY = Math.round(tiltYrad * radToDeg);\n\n  return { tiltX, tiltY };\n}\n"]}

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

@@ -17,6 +17,6 @@ export declare const DrawerLayoutAndroid: React.ForwardRefExoticComponent<RNDraw
     children?: React.ReactNode;
 } & NativeViewGestureHandlerProps & React.RefAttributes<React.ComponentType<any>>>;
 export type DrawerLayoutAndroid = typeof DrawerLayoutAndroid & RNDrawerLayoutAndroid;
-export declare const FlatList: <ItemT = any>(props: React.PropsWithChildren<RNFlatListProps<ItemT> & React.RefAttributes<FlatList<ItemT>> & NativeViewGestureHandlerProps>, ref: React.ForwardedRef<FlatList<ItemT>>) => ReactElement | null;
+export declare const FlatList: <ItemT = any>(props: React.PropsWithChildren<Omit<RNFlatListProps<ItemT>, "renderScrollComponent"> & React.RefAttributes<FlatList<ItemT>> & NativeViewGestureHandlerProps>, ref: React.ForwardedRef<FlatList<ItemT>>) => ReactElement | null;
 export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;
 export {};

package/lib/typescript/components/Pressable/utils.d.ts

@@ -1,7 +1,6 @@
-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 { PressableEvent } from './PressableProps';
 declare const numberAsInset: (value: number) => Insets;
 declare const addInsets: (a: Insets, b: Insets) => Insets;
@@ -11,5 +10,4 @@ declare const isTouchWithinInset: (dimensions: {
 }, inset: Insets, touch?: TouchData) => boolean;
 declare const gestureToPressableEvent: (event: GestureStateChangeEvent<HoverGestureHandlerEventPayload | LongPressGestureHandlerEventPayload>) => PressableEvent;
 declare const gestureTouchToPressableEvent: (event: GestureTouchEvent) => PressableEvent;
-declare const splitStyles: (from: ViewStyle) => [ViewStyle, ViewStyle];
-export { numberAsInset, addInsets, isTouchWithinInset, gestureToPressableEvent, gestureTouchToPressableEvent, splitStyles, };
+export { numberAsInset, addInsets, isTouchWithinInset, gestureToPressableEvent, gestureTouchToPressableEvent, };

package/lib/typescript/handlers/GestureHandlerEventPayload.d.ts

@@ -1,3 +1,4 @@
+import { StylusData } from '../web/interfaces';
 export type FlingGestureHandlerEventPayload = {
     x: number;
     y: number;
@@ -104,6 +105,10 @@ export type PanGestureHandlerEventPayload = {
      * value is expressed in point units per second.
      */
     velocityY: number;
+    /**
+     * Object containing additional stylus data.
+     */
+    stylusData: StylusData | undefined;
 };
 export type PinchGestureHandlerEventPayload = {
     /**
@@ -157,3 +162,33 @@ export type RotationGestureHandlerEventPayload = {
      */
     velocity: number;
 };
+export type HoverGestureHandlerEventPayload = {
+    /**
+     * X coordinate of the current position of the pointer relative to the view
+     * attached to the handler. Expressed in point units.
+     */
+    x: number;
+    /**
+     * Y coordinate of the current position of the pointer relative to the view
+     * attached to the handler. Expressed in point units.
+     */
+    y: number;
+    /**
+     * X coordinate of the current position of the pointer relative to the window.
+     * The value is expressed in point units. It is recommended to use it instead
+     * of `x` in cases when the original view can be transformed as an
+     * effect of the gesture.
+     */
+    absoluteX: number;
+    /**
+     * Y coordinate of the current position of the pointer relative to the window.
+     * The value is expressed in point units. It is recommended to use it instead
+     * of `y` in cases when the original view can be transformed as an
+     * effect of the gesture.
+     */
+    absoluteY: number;
+    /**
+     * Object containing additional stylus data.
+     */
+    stylusData: StylusData | undefined;
+};

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { HitSlop, CommonGestureConfig, GestureTouchEvent, GestureStateChangeEvent, GestureUpdateEvent, ActiveCursor, MouseButton } from '../gestureHandlerCommon';
 import { GestureStateManagerType } from './gestureStateManager';
-import type { FlingGestureHandlerEventPayload, ForceTouchGestureHandlerEventPayload, LongPressGestureHandlerEventPayload, PanGestureHandlerEventPayload, PinchGestureHandlerEventPayload, RotationGestureHandlerEventPayload, TapGestureHandlerEventPayload, NativeViewGestureHandlerPayload } from '../GestureHandlerEventPayload';
-export type GestureType = BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<FlingGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload>;
+import type { FlingGestureHandlerEventPayload, ForceTouchGestureHandlerEventPayload, LongPressGestureHandlerEventPayload, PanGestureHandlerEventPayload, PinchGestureHandlerEventPayload, RotationGestureHandlerEventPayload, TapGestureHandlerEventPayload, NativeViewGestureHandlerPayload, HoverGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
+export type GestureType = BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<FlingGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload> | BaseGesture<HoverGestureHandlerEventPayload>;
 export type GestureRef = number | GestureType | React.RefObject<GestureType | undefined> | React.RefObject<React.ComponentType | undefined>;
 export interface BaseGestureConfig extends CommonGestureConfig, Record<string, unknown> {
     ref?: React.MutableRefObject<GestureType | undefined>;

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

@@ -1,11 +1,6 @@
 import { BaseGestureConfig, ContinousBaseGesture } from './gesture';
 import { GestureUpdateEvent } from '../gestureHandlerCommon';
-export type HoverGestureHandlerEventPayload = {
-    x: number;
-    y: number;
-    absoluteX: number;
-    absoluteY: number;
-};
+import type { HoverGestureHandlerEventPayload } from '../GestureHandlerEventPayload';
 export type HoverGestureChangeEventPayload = {
     changeX: number;
     changeY: number;

package/lib/typescript/handlers/handlersRegistry.d.ts

@@ -6,7 +6,7 @@ export declare function registerOldGestureHandler(handlerTag: number, handler: G
 export declare function unregisterHandler(handlerTag: number, testID?: string): void;
 export declare function findHandler(handlerTag: number): GestureType | undefined;
 export declare function findOldGestureHandler(handlerTag: number): GestureHandlerCallbacks | undefined;
-export declare function findHandlerByTestID(testID: string): import("./gestures/gesture").BaseGesture<Record<string, unknown>> | import("./gestures/gesture").BaseGesture<Record<string, never>> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").TapGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").PanGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").LongPressGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").RotationGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").PinchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").ForceTouchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").NativeViewGestureHandlerPayload> | null;
+export declare function findHandlerByTestID(testID: string): import("./gestures/gesture").BaseGesture<Record<string, unknown>> | import("./gestures/gesture").BaseGesture<Record<string, never>> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").TapGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").PanGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").LongPressGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").RotationGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").PinchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").ForceTouchGestureHandlerEventPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").NativeViewGestureHandlerPayload> | import("./gestures/gesture").BaseGesture<import("./GestureHandlerEventPayload").HoverGestureHandlerEventPayload> | null;
 export interface GestureHandlerCallbacks {
     onGestureEvent: (event: GestureEvent<any>) => void;
     onGestureStateChange: (event: HandlerStateChangeEvent<any>) => void;

package/lib/typescript/jestUtils/jestUtils.d.ts

@@ -26,5 +26,5 @@ type ClassComponentConstructor<P> = new (props: P) => React.Component<P, any, an
 type ExtractPayloadFromProps<T> = T extends BaseGestureHandlerProps<infer TPayload> ? TPayload : never;
 type ExtractConfig<T> = T extends BaseGesture<infer TGesturePayload> ? TGesturePayload : T extends ClassComponentConstructor<infer THandlerProps> ? ExtractPayloadFromProps<THandlerProps> : Record<string, unknown>;
 export declare function fireGestureHandler<THandler extends AllGestures | AllHandlers>(componentOrGesture: ReactTestInstance | GestureType, eventList?: Partial<GestureHandlerTestEvent<ExtractConfig<THandler>>>[]): void;
-export declare function getByGestureTestId(testID: string): BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload>;
+export declare function getByGestureTestId(testID: string): BaseGesture<Record<string, unknown>> | BaseGesture<Record<string, never>> | BaseGesture<TapGestureHandlerEventPayload> | BaseGesture<PanGestureHandlerEventPayload> | BaseGesture<LongPressGestureHandlerEventPayload> | BaseGesture<RotationGestureHandlerEventPayload> | BaseGesture<PinchGestureHandlerEventPayload> | BaseGesture<ForceTouchGestureHandlerEventPayload> | BaseGesture<NativeViewGestureHandlerPayload> | BaseGesture<import("../handlers/GestureHandlerEventPayload").HoverGestureHandlerEventPayload>;
 export {};

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

@@ -2,7 +2,9 @@
 import { AdaptedEvent, Config } from '../interfaces';
 import GestureHandler from './GestureHandler';
 export default class HoverGestureHandler extends GestureHandler {
+    private stylusData;
     init(ref: number, propsRef: React.RefObject<unknown>): void;
+    protected transformNativeEvent(): Record<string, unknown>;
     updateGestureConfig({ enabled, ...props }: Config): void;
     protected onPointerMoveOver(event: AdaptedEvent): void;
     protected onPointerMoveOut(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

@@ -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/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.19.0",
+  "version": "2.20.0",
   "description": "Experimental implementation of a new declarative API for gesture handling in react-native",
   "scripts": {
     "prepare": "bob build && husky install",

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,7 +17,6 @@ import {
   isTouchWithinInset,
   gestureTouchToPressableEvent,
   addInsets,
-  splitStyles,
 } from './utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { GestureTouchEvent } from '../../handlers/gestureHandlerCommon';
@@ -386,33 +384,22 @@ export default function Pressable(props: PressableProps) {
       ? children({ pressed: pressedState })
       : children;
 
-  const flattenedStyles = StyleSheet.flatten(styleProp ?? {});
-
-  const [innerStyles, outerStyles] = splitStyles(flattenedStyles);
-
   return (
-    <View {...remainingProps} style={outerStyles}>
-      <GestureDetector gesture={gesture}>
-        <NativeButton
-          ref={pressableRef}
-          hitSlop={appliedHitSlop}
-          enabled={isPressableEnabled}
-          touchSoundDisabled={android_disableSound ?? undefined}
-          rippleColor={processColor(
-            android_ripple?.color ?? defaultRippleColor
-          )}
-          rippleRadius={android_ripple?.radius ?? undefined}
-          style={[
-            { width: '100%', height: '100%' },
-            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/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,
 };