Unable to use animated react-native-svg sub-components with GestureDetector on web

[chriscoomber]

Description

In the following code, the red Rect doesn't appear at all on web.

import Animated, { useSharedValue, useAnimatedProps} from 'react-native-reanimated'
...
const AnimatedRect = RNRAnimated.createAnimatedComponent(Rect)
...
    <Svg width={200} height={100}>
      <Rect width={200} height={100} fill='yellow'/>
      <GestureDetector gesture={svgPanGesture}>
        <AnimatedRect width={100} height={100} animatedProps={animatedX} y={0} fill='red' />
      </GestureDetector>        
    </Svg>

See github repro for full code.

I've taken a look, and it seems that Wrap.web.tsx is always giving isRNSVGNode === false for my AnimatedRect. If you hack this to be true, everything works fine.

Steps to reproduce

(web only)

1. Wrap a react-native-svg sub-component, e.g. Rect, with react-native-reanimated's Animated.createAnimatedComponent.
2. Wrap the result in a GestureDetector
3. It doesn't even appear

This is with [email protected], [email protected]

Alternatively, check out the repro and commit below, and run npm install; npm run web

Snack or a link to a repository

https://github.com/chriscoomber/chris-expo-51-repro-app/blob/55495ff705506c28fcb92dd682715a1d33a7d989/app/index.tsx#L50

Gesture Handler version

2.22.1

React Native version

0.76.6

Platforms

Web

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[m-bert]

HI @chriscoomber! This happens because createAnimatedComponent returns forwardRef. Currently we can't detect if this component comes from SVG, therefore div with display: contents; is added. Unfortunately, this breaks SVG.

I'll try to find other way to decide when to add this wrapper.

[chriscoomber]

Hi @m-bert, thanks for taking a look!

Just noting that I've now worked around this. I'm no longer wrapping a react-native-svg component in a GestureDetector (I added in a transparent Animated.View for that). On the react-native-gesture-handler version currently bundled with expo-52 (2.20.2), I was seeing a different problem (the line here wasn't recognizing a <rect/> as a HTMLElement or react component which was leading to init() not being called, which led to a crash when destroying the gesture handler - but this has been fixed on the latest react-native-gesture-handler version), and on the latest react-native-gesture-handler I was seeing the issue above, so I figured it might be easier to rewrite my code slightly.