[Web] Adjust findNodeHandle to properly detect SVG

example/package.json

@@ -38,7 +38,7 @@
     "react-native-reanimated": "3.10.0",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "^15.8.0",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {

example/yarn.lock

@@ -7165,12 +7165,8 @@ react-is@^17.0.1:
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 "react-native-gesture-handler@link:..":
-  version "2.20.0"
-  dependencies:
-    "@egjs/hammerjs" "^2.0.17"
-    hoist-non-react-statics "^3.3.0"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
+  version "0.0.0"
+  uid ""
 
 [email protected]:
   version "3.10.0"
@@ -7199,13 +7195,14 @@ [email protected]:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
-react-native-svg@15.2.0:
-  version "15.2.0"
-  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.2.0.tgz#9561a6b3bd6b44689f437ba13182afee33bd5557"
-  integrity sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==
+react-native-svg@^15.8.0:
+  version "15.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-15.8.0.tgz#9b5fd4f5cf5675197b3f4cbfcc77c215de2b9502"
+  integrity sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw==
   dependencies:
     css-select "^5.1.0"
     css-tree "^1.1.3"
+    warn-once "0.1.1"
 
 react-native-web@~0.19.10:
   version "0.19.11"
@@ -8580,7 +8577,7 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warn-once@^0.1.0:
+warn-once@0.1.1, warn-once@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43"
   integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q==

src/findNodeHandle.web.ts

@@ -1,29 +1,31 @@
-type GestureHandlerRef = {
-  viewTag: GestureHandlerRef;
-  current: HTMLElement;
-};
+import type { GestureHandlerRef, SVGRef } from './web/interfaces';
+import { isSVGElement } from './web/utils';
 
 export default function findNodeHandle(
-  viewRef: GestureHandlerRef | HTMLElement
-): HTMLElement | number {
+  viewRef: GestureHandlerRef | SVGRef | HTMLElement | SVGElement
+): HTMLElement | SVGElement | number {
   // Old API assumes that child handler is HTMLElement.
   // However, if we nest handlers, we will get ref to another handler.
   // In that case, we want to recursively call findNodeHandle with new handler viewTag (which can also be ref to another handler).
   if ((viewRef as GestureHandlerRef)?.viewTag !== undefined) {
     return findNodeHandle((viewRef as GestureHandlerRef).viewTag);
   }
 
-  if (viewRef instanceof HTMLElement) {
+  if (viewRef instanceof HTMLElement || viewRef instanceof SVGElement) {
     if (viewRef.style.display === 'contents') {
       return findNodeHandle(viewRef.firstChild as HTMLElement);
     }
 
     return viewRef;
   }
 
+  if (isSVGElement(viewRef)) {
+    return (viewRef as SVGRef).elementRef.current;
+  }
+
   // In new API, we receive ref object which `current` field points to  wrapper `div` with `display: contents;`.
   // We want to return the first descendant (in DFS order) that doesn't have this property.
-  let element = viewRef?.current;
+  let element = (viewRef as GestureHandlerRef)?.current;
 
   while (element && element.style.display === 'contents') {
     element = element.firstChild as HTMLElement;

src/handlers/gestures/GestureDetector/Wrap.web.tsx

@@ -12,14 +12,23 @@ export const Wrap = forwardRef<HTMLDivElement, PropsWithChildren<{}>>(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const child: any = React.Children.only(children);
 
+      const isSVGElement =
+        Object.getPrototypeOf(child?.type)?.name === 'WebShape';
+
+      const additionalProps = isSVGElement
+        ? { collapsable: false, ref }
+        : { collapsable: false };
+
       const clone = React.cloneElement(
         child,
-        { collapsable: false },
+        additionalProps,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         child.props.children
       );
 
-      return (
+      return isSVGElement ? (
+        clone
+      ) : (
         <div
           ref={ref as LegacyRef<HTMLDivElement>}
           style={{ display: 'contents' }}>

src/web/interfaces.ts

@@ -179,3 +179,12 @@ export enum WheelDevice {
   MOUSE,
   TOUCHPAD,
 }
+
+export type GestureHandlerRef = {
+  viewTag: GestureHandlerRef;
+  current: HTMLElement;
+};
+
+export type SVGRef = {
+  elementRef: { current: SVGElement };
+};

src/web/utils.ts

@@ -1,5 +1,10 @@
 import { PointerType } from '../PointerType';
-import type { Point, StylusData } from './interfaces';
+import type {
+  GestureHandlerRef,
+  Point,
+  StylusData,
+  SVGRef,
+} from './interfaces';
 
 export function isPointerInBounds(view: HTMLElement, { x, y }: Point): boolean {
   const rect: DOMRect = view.getBoundingClientRect();
@@ -227,3 +232,34 @@ function spherical2tilt(altitudeAngle: number, azimuthAngle: number) {
 
   return { tiltX, tiltY };
 }
+
+const SVGElements = [
+  'Circle',
+  'ClipPath',
+  'Ellipse',
+  'ForeignObject',
+  'G',
+  'Image',
+  'Line',
+  'Marker',
+  'Mask',
+  'Path',
+  'Pattern',
+  'Polygon',
+  'Polyline',
+  'Rect',
+  'Svg',
+  'Symbol',
+  'TSpan',
+  'Text',
+  'TextPath',
+  'Use',
+];
+
+export function isSVGElement(viewRef: SVGRef | GestureHandlerRef) {
+  const className = Object.getPrototypeOf(viewRef).constructor.name;
+
+  return (
+    SVGElements.indexOf(className) >= 0 && Object.hasOwn(viewRef, 'elementRef')
+  );
+}