ForeignObject onPress() event not firing

[JoBerkner]

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You may also mark this issue as a "discussion" and I will leave this open.

[egorshulga]

Hey, could anyone take a look at this issue?

[mortezacruise]

I think it is a bug I have the same issue

[alicema15]

I also have this issue - any updates or workarounds?

[aditya1711]

Any Updates?

[quintenbox]

Same problem here, any updates?

[sdandois]

Same issue here.

[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)

[pkvov]

Add a dummy Rect not working on IOS

[Stevemoretz]

Same issue

[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>

[cuantmac]

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>

it works for me!

[bhushan-patil-official]

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>

This worked for me too. Keeping the rect outside the foreingObject did the job, I was keeping it inside and it was breaking in iOS.