Touchable opacity on press not working inside SVG tags

Question

I have a component inside an <Svg> where I have a button (<TouchableOpacity> with <View>) inside the component.

While the button onClick worked fine standalone, it's not working when I wrap the component inside the SVG.

<Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
  <Defs>
    <LinearGradient
        id='prefix__b'
        x1={'75.7%'}
        y1={'34.3%'}
        x2={'84.6%'}
        y2={'-9.6%'}
        gradientUnits='objectBoundingBox'
    >
      <Stop offset={1} stopColor='#2ff290' />
    </LinearGradient>
  </Defs>
  <View >
    <TouchableOpacity
                      onPress={() => {
      console.log('DSDA')
      }}
      ><Text>Click me!!</Text>
    </TouchableOpacity>
  </View>
</Svg>

https://github.com/react-native-community/react-native-svg/issues/1050

Answer 1

You need to wrap your svg with TouchableOpacity tag, Like this:

<TouchableOpacity
    onPress={() => {
        console.log('DSDA')
    }}
>
    <Svg width={'100%'} height={'100%'} viewBox='0 0 360 243' {...props}>
        <Defs>
            <LinearGradient
                id='prefix__b'
                x1={'75.7%'}
                y1={'34.3%'}
                x2={'84.6%'}
                y2={'-9.6%'}
                gradientUnits='objectBoundingBox'
            >
                <Stop offset={1} stopColor='#2ff290' />
            </LinearGradient>
        </Defs>
        <View ><Text>Click me!!</Text>
        </View>
    </Svg>
</TouchableOpacity>