Closed m-bert closed 2 weeks ago
findNodeHandle
GestureDetector
<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.
div
display: 'contents';
SVG
This PR does the following things:
react-native-svg
Wrap
Description
3127 introduced our own implementation of
findNodeHandle
on web. Unfortunately, it doesn't work if someone usesGestureDetector
on SVG elements, e.g.:Code above would render additional
div
element withdisplay: 'contents';
, which would breakSVG
.This PR does the following things:
react-native-svg
versionWrap
component such that now if element is part ofSVG
it doesn't wrap it into additionaldiv
findNodeHandle
function to properly handleSVG
refsTest 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 (