ForeignObject onPress() event not firing

Bug

I created a line chart with each line being stored in a <G> container together with a label inside a <ForeignObject> (due to styling options). The code for one such plotted line looks like this:

<G>
<Path
    d={*linePath*}
    fill="transparent"
    stroke={"black"}
    strokeWidth={1}
/>
<ForeignObject
    x={*pathEndPosition*}
    y={*pathEndPosition*}
>
    <TouchableOpacity
    onPress={() => console.log("hello")}
    style={{
        position: "absolute",
        backgroundColor: "red",
        borderRadius: 3,
    }}
    >
    <Text
        style={{
        color: "black",
        fontSize: 10,
        }}
    >
        {*data.myLabel*}
    </Text>
    </TouchableOpacity>
</ForeignObject>
</G>

The label should be interactive, as it should open a <Modal> when pressed. Therefore, I wrapped the <Text> with a TouchableOpacity> component and added an onPress() event to it.

However, this event is not triggered inside the <ForeignObject> (also when adding the event to the <ForeignObject> itself). But it does fire if I add the onPress() event to the <G> or <Path> component. I am wondering what may cause this.

Expectation:

onPress() event should be triggered in a <ForeignObject> or nested <TouchableOpacity>

Environment info

 react-native@0.61.4
react-native-svg@12.1.0

Related Issue

#580

[Gwynevere]

Add a dummy <Rect/> inside of your <ForeignObject/> in order to fire onPress event :

<ForeignObject
    onPress={() => console.log("hello")}
    x={*pathEndPosition*}
    y={*pathEndPosition*}
>
    <View
    style={{
        position: "absolute",
        backgroundColor: "red",
        borderRadius: 3,
    }}
    >
    <Text
        style={{
        color: "black",
        fontSize: 10,
        }}
    >
        {*data.myLabel*}
    </Text>
    </View>
    <Rect
	x={*pathEndPosition*}
        y={*pathEndPosition*}
	width={"width"}
        height={"height"}
	fill={'transparent'}
     />
</ForeignObject>

(you must specify a width & a height for your Rect)

[pbaker0804]

Add a dummy <Rect/> inside of your <ForeignObject/> in order to fire onPress event :

Part of this idea was a workaround for me. I put an onPressIn in the transparent Rect that was OUTSIDE of the ForeignObject component. It acted like an invisible touch zone on the thing I wanted to display in the ForeignObject.

          <Rect 
            x={xDelete} 
            y={yDelete} 
            width={24} 
            height={24} 
            fill={'transparent'} 
            onPressIn={()=>{
              console.log('It Works!');
            }} 
          />
          <ForeignObject x={xDelete} y={yDelete}>
            <IconDeleteObject />
          </ForeignObject>