software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.13k stars 982 forks source link

[Web] Adjust `findNodeHandle` to properly detect `SVG` #3197

Closed m-bert closed 2 weeks ago

m-bert commented 2 weeks ago

Description

3127 introduced our own implementation of findNodeHandle on web. Unfortunately, it doesn't work if someone uses GestureDetector on SVG elements, e.g.:

<Svg width={200} height={200}>
  <GestureDetector gesture={tapGestureCircle}>
    <Circle r={200} cx={210} cy={210} fill={circleFill} />
  </GestureDetector>
</Svg>

Code above would render additional div element with display: 'contents';, which would break SVG.

This PR does the following things:

  1. Bumps react-native-svg version
  2. Modifies Wrap component such that now if element is part of SVG it doesn't wrap it into additional div
  3. Adjusts findNodeHandle function to properly handle SVG refs

Test plan

Tested on the following example: ```jsx import { GestureHandlerRootView, GestureDetector, Gesture, } from 'react-native-gesture-handler'; import { View } from 'react-native'; import { Svg, Circle } from 'react-native-svg'; import { useState, useCallback } from 'react'; export default function App() { const [circleFill, setCircleFill] = useState('blue'); const switchCircleColor = useCallback( () => setCircleFill((old) => (old === 'blue' ? 'brown' : 'blue')), [setCircleFill] ); const tapGestureCircle = Gesture.Tap().runOnJS(true).onEnd(switchCircleColor); return ( ); } ```