Add react-native-svg interface

android/build.gradle

@@ -75,6 +75,20 @@ def shouldUseCommonInterfaceFromReanimated() {
     }
 }
 
+// Using the latest version for now, todo: find the oldest working version
+def shouldUseCommonInterfaceFromRNSVG() {
+    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) >= 8) || Integer.parseInt(major) > 15
+}
+
 def reactNativeArchitectures() {
     def value = project.getProperties().get("reactNativeArchitectures")
     return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
@@ -167,6 +181,12 @@ 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 {
@@ -214,6 +234,10 @@ dependencies {
         }
     }
 
+    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
+
+      if (view is SvgView) {
+        val childrenIds = view.children.map { it.id }
+
+        val hasChildBeenPressed = pressedId in childrenIds
+
+        val pressIsInBounds =
+          posX in 0.0..view.width.toDouble() &&
+            posY in 0.0..view.height.toDouble()
+
+        return (hasBeenPressed || hasChildBeenPressed) && pressIsInBounds
+      }
+
+      return hasBeenPressed
+    }
+  }
+}

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.10.0",
     "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,
+  },
+});