Add react-native-svg interface

android/build.gradle

@@ -45,9 +45,9 @@ def resolveReactNativeDirectory() {
     }
 
     throw new Exception(
-        "[react-native-gesture-handler] Unable to resolve react-native location in " +
-            "node_modules. You should add project extension property (in app/build.gradle) " +
-            "`REACT_NATIVE_NODE_MODULES_DIR` with path to react-native."
+            "[react-native-gesture-handler] Unable to resolve react-native location in " +
+                    "node_modules. You should add project extension property (in app/build.gradle) " +
+                    "`REACT_NATIVE_NODE_MODULES_DIR` with path to react-native."
     )
 }
 
@@ -75,6 +75,22 @@ def shouldUseCommonInterfaceFromReanimated() {
     }
 }
 
+def shouldUseCommonInterfaceFromRNSVG() {
+    // common interface compatible with react-native-svg >= 15.11.2
+    def rnsvg = rootProject.subprojects.find { it.name == 'react-native-svg' }
+    if (rnsvg == null) {
+        return false
+    }
+
+    def inputFile = new File(rnsvg.projectDir, '../package.json')
+    def json = new JsonSlurper().parseText(inputFile.text)
+    def rnsvgVersion = json.version as String
+    def (major, minor, patch) = rnsvgVersion.tokenize('.')
+    return (Integer.parseInt(major) == 15 && Integer.parseInt(minor) == 11 && Integer.parseInt(patch) >= 2) ||
+            (Integer.parseInt(major) == 15 && Integer.parseInt(minor) > 11) ||
+            Integer.parseInt(major) > 15
+}
+
 def reactNativeArchitectures() {
     def value = project.getProperties().get("reactNativeArchitectures")
     return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
@@ -119,15 +135,15 @@ android {
         buildConfigField "int", "REACT_NATIVE_MINOR_VERSION", REACT_NATIVE_MINOR_VERSION.toString()
 
         if (isNewArchitectureEnabled()) {
-            var appProject = rootProject.allprojects.find {it.plugins.hasPlugin('com.android.application')}
+            var appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
             externalNativeBuild {
                 cmake {
                     cppFlags "-O2", "-frtti", "-fexceptions", "-Wall", "-Werror", "-std=c++20", "-DANDROID"
                     arguments "-DREACT_NATIVE_DIR=${REACT_NATIVE_DIR}",
-                        "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
-                        "-DANDROID_STL=c++_shared",
-                        "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
-                    abiFilters (*reactNativeArchitectures())
+                            "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
+                            "-DANDROID_STL=c++_shared",
+                            "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+                    abiFilters(*reactNativeArchitectures())
                 }
             }
         }
@@ -168,13 +184,19 @@ android {
                 srcDirs += 'noreanimated/src/main/java'
             }
 
+            if (shouldUseCommonInterfaceFromRNSVG()) {
+                srcDirs += 'svg/src/main/java'
+            } else {
+                srcDirs += 'nosvg/src/main/java'
+            }
+
             if (isNewArchitectureEnabled()) {
                 srcDirs += 'fabric/src/main/java'
             } else {
                 // 'paper/src/main/java' includes files from codegen so the library can compile with
                 // codegen turned off
 
-                if (REACT_NATIVE_MINOR_VERSION > 77){
+                if (REACT_NATIVE_MINOR_VERSION > 77) {
                     srcDirs += 'paper/src/main/java'
                 } else {
                     srcDirs += 'paper77/src/main/java'
@@ -211,15 +233,20 @@ def kotlin_version = safeExtGet('kotlinVersion', project.properties['RNGH_kotlin
 
 dependencies {
     implementation 'com.facebook.react:react-native:+' // from node_modules
-    
+
 
     if (shouldUseCommonInterfaceFromReanimated()) {
         // Include Reanimated as dependency to load the common interface
-        implementation (rootProject.subprojects.find { it.name == 'react-native-reanimated' }) {
-            exclude group:'com.facebook.fbjni' // resolves "Duplicate class com.facebook.jni.CppException"
+        implementation(rootProject.subprojects.find { it.name == 'react-native-reanimated' }) {
+            // resolves "Duplicate class com.facebook.jni.CppException"
+            exclude group: 'com.facebook.fbjni'
         }
     }
 
+    if (shouldUseCommonInterfaceFromRNSVG()) {
+        implementation rootProject.subprojects.find { it.name == 'react-native-svg' }
+    }
+
     implementation 'androidx.appcompat:appcompat:1.2.0'
     implementation "androidx.core:core-ktx:1.6.0"
     implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"

android/nosvg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt

@@ -0,0 +1,13 @@
+package com.swmansion.gesturehandler
+
+import android.view.View
+
+class RNSVGHitTester {
+  companion object {
+    @Suppress("UNUSED_PARAMETER")
+    fun isSvgElement(view: Any) = false
+
+    @Suppress("UNUSED_PARAMETER")
+    fun hitTest(view: View, posX: Float, posY: Float) = false
+  }
+}

android/spotless.gradle

@@ -2,7 +2,7 @@ apply plugin: "com.diffplug.spotless"
 
 spotless {
     kotlin {
-        target "src/**/*.kt", "reanimated/**/*.kt", "noreanimated/**/*.kt", "common/**/*.kt"
+        target "src/**/*.kt", "reanimated/**/*.kt", "noreanimated/**/*.kt", "svg/**/*.kt", "nosvg/**/*.kt", "common/**/*.kt"
         ktlint().editorConfigOverride([indent_size: 2])
         trimTrailingWhitespace()
         indentWithSpaces()

android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -15,6 +15,7 @@ import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.bridge.WritableArray
 import com.facebook.react.uimanager.PixelUtil
 import com.swmansion.gesturehandler.BuildConfig
+import com.swmansion.gesturehandler.RNSVGHitTester
 import com.swmansion.gesturehandler.react.RNGestureHandlerTouchEvent
 import java.lang.IllegalStateException
 import java.util.*
@@ -610,9 +611,13 @@ open class GestureHandler<ConcreteGestureHandlerT : GestureHandler<ConcreteGestu
   }
 
   fun isWithinBounds(view: View?, posX: Float, posY: Float): Boolean {
+    if (RNSVGHitTester.isSvgElement(view!!)) {
+      return RNSVGHitTester.hitTest(view, posX, posY)
+    }
+
     var left = 0f
     var top = 0f
-    var right = view!!.width.toFloat()
+    var right = view.width.toFloat()
     var bottom = view.height.toFloat()
     hitSlop?.let { hitSlop ->
       val padLeft = hitSlop[HIT_SLOP_LEFT_IDX]

android/svg/src/main/java/com/swmansion/gesturehandler/RNSVGHitTester.kt

@@ -0,0 +1,67 @@
+package com.swmansion.gesturehandler
+
+import android.view.View
+import androidx.core.view.children
+import com.horcrux.svg.SvgView
+import com.horcrux.svg.VirtualView
+
+class RNSVGHitTester {
+  companion object {
+    private fun getRootSvgView(view: View): SvgView {
+      var rootSvgView: SvgView
+
+      rootSvgView = if (view is VirtualView) {
+        view.svgView!!
+      } else {
+        view as SvgView
+      }
+
+      while (isSvgElement(rootSvgView.parent)) {
+        rootSvgView = if (rootSvgView.parent is VirtualView) {
+          (rootSvgView.parent as VirtualView).svgView!!
+        } else {
+          rootSvgView.parent as SvgView
+        }
+      }
+
+      return rootSvgView
+    }
+
+    fun isSvgElement(view: Any): Boolean {
+      return (view is VirtualView || view is SvgView)
+    }
+
+    fun hitTest(view: View, posX: Float, posY: Float): Boolean {
+      val rootSvgView = getRootSvgView(view)
+      val viewLocation = intArrayOf(0, 0)
+      val rootLocation = intArrayOf(0, 0)
+
+      view.getLocationOnScreen(viewLocation)
+      rootSvgView.getLocationOnScreen(rootLocation)
+
+      // convert View-relative coordinates into SvgView-relative coordinates
+      val rootX = posX + viewLocation[0] - rootLocation[0]
+      val rootY = posY + viewLocation[1] - rootLocation[1]
+
+      val pressedId = rootSvgView.reactTagForTouch(rootX, rootY)
+      val hasBeenPressed = view.id == pressedId
+
+      // hitTest(view, ...) should only be called after isSvgElement(view) returns true
+      // Consequently, `view` will always be either SvgView or VirtualView
+
+      val pressIsInBounds =
+        posX in 0.0..view.width.toDouble() &&
+          posY in 0.0..view.height.toDouble()
+
+      if (view is SvgView) {
+        val childrenIds = view.children.map { it.id }
+
+        val hasChildBeenPressed = pressedId in childrenIds
+
+        return (hasBeenPressed || hasChildBeenPressed) && pressIsInBounds
+      }
+
+      return hasBeenPressed && pressIsInBounds
+    }
+  }
+}

example/App.tsx

@@ -40,12 +40,16 @@
 import SwipeableReanimation from './src/release_tests/swipeableReanimation';
 import NestedGestureHandlerRootViewWithModal from './src/release_tests/nestedGHRootViewWithModal';
 import TwoFingerPan from './src/release_tests/twoFingerPan';
+import SvgCompatibility from './src/release_tests/svg';
 import NestedText from './src/release_tests/nestedText';
+
 import { PinchableBox } from './src/recipes/scaleAndRotate';
 import PanAndScroll from './src/recipes/panAndScroll';
+
 import { BottomSheet } from './src/showcase/bottomSheet';
 import Swipeables from './src/showcase/swipeable';
 import ChatHeads from './src/showcase/chatHeads';
+
 import Draggable from './src/basic/draggable';
 import MultiTap from './src/basic/multitap';
 import BouncingBox from './src/basic/bouncing';
@@ -186,6 +190,10 @@
         component: NestedButtons,
         unsupportedPlatforms: new Set(['web', 'ios', 'macos']),
       },
+      {
+        name: 'Svg integration with Gesture Handler',
+        component: SvgCompatibility,
+      },
       { name: 'Double pinch & rotate', component: DoublePinchRotate },
       { name: 'Double draggable', component: DoubleDraggable },
       { name: 'Rows', component: Rows },
@@ -327,7 +335,7 @@
         renderSectionHeader={({ section: { sectionTitle } }) => (
           <Text style={styles.sectionTitle}>{sectionTitle}</Text>
         )}
         ItemSeparatorComponent={() => <View style={styles.separator} />}
       />
     </SafeAreaView>
   );

example/package.json

@@ -38,7 +38,7 @@
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
+    "react-native-svg": "15.11.2",
     "react-native-web": "~0.19.10"
   },
   "devDependencies": {

example/src/release_tests/svg/index.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import Svg, { Circle, Rect } from 'react-native-svg';
+
+export default function SvgExample() {
+  const circleElementTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked circle')
+  );
+  const rectElementTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked parallelogram')
+  );
+  const containerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked container')
+  );
+  const vbContainerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked viewbox container')
+  );
+  const vbInnerContainerTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked inner viewbox container')
+  );
+  const vbCircleTap = Gesture.Tap().onStart(() =>
+    console.log('RNGH: clicked viewbox circle')
+  );
+
+  return (
+    <View>
+      <View style={styles.container}>
+        <Text style={styles.header}>
+          Overlapping SVGs with gesture detectors
+        </Text>
+        <View style={{ backgroundColor: 'tomato' }}>
+          <GestureDetector gesture={containerTap}>
+            <Svg
+              height="250"
+              width="250"
+              onPress={() => console.log('SVG: clicked container')}>
+              <GestureDetector gesture={circleElementTap}>
+                <Circle
+                  cx="125"
+                  cy="125"
+                  r="125"
+                  fill="green"
+                  onPress={() => console.log('SVG: clicked circle')}
+                />
+              </GestureDetector>
+              <GestureDetector gesture={rectElementTap}>
+                <Rect
+                  skewX="45"
+                  width="125"
+                  height="250"
+                  fill="yellow"
+                  onPress={() => console.log('SVG: clicked parallelogram')}
+                />
+              </GestureDetector>
+            </Svg>
+          </GestureDetector>
+        </View>
+        <Text>
+          Tapping each color should read to a different console.log output
+        </Text>
+      </View>
+      <View style={styles.container}>
+        <Text style={styles.header}>SvgView with SvgView with ViewBox</Text>
+        <View style={{ backgroundColor: 'tomato' }}>
+          <GestureDetector gesture={vbContainerTap}>
+            <Svg
+              height="250"
+              width="250"
+              viewBox="-50 -50 150 150"
+              onPress={() => console.log('SVG: clicked viewbox container')}>
+              <GestureDetector gesture={vbInnerContainerTap}>
+                <Svg
+                  height="250"
+                  width="250"
+                  viewBox="-300 -300 600 600"
+                  onPress={() =>
+                    console.log('SVG: clicked inner viewbox container')
+                  }>
+                  <Rect
+                    x="-300"
+                    y="-300"
+                    width="600"
+                    height="600"
+                    fill="yellow"
+                  />
+                  <GestureDetector gesture={vbCircleTap}>
+                    <Circle
+                      r="300"
+                      fill="green"
+                      onPress={() => console.log('SVG: clicked viewbox circle')}
+                    />
+                  </GestureDetector>
+                </Svg>
+              </GestureDetector>
+            </Svg>
+          </GestureDetector>
+        </View>
+        <Text>The viewBox property remaps SVG's coordinate space</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 48,
+  },
+  header: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    margin: 10,
+  },
+});