onPress doesn't register on Tooltip - Victory Native

[talon-himself]

Bug Reports

Checklist

• [ x] I have read through the FAQ and Guides

• [x ] I am using the latest version of Victory

• [ x] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I am trying to add an onPress prop to a Svg tooltip that I am passing to VictoryVoronoiContainer, but the onPress does not register. I saw this issue was resolved for web here. Essentially you add pointerEvents: 'auto' to the div in the tooltip. I have done this on my <View /> but it doesn't solve the issue.

I am trying to pull off something similar to the following:

I have tried multiple iterations of different Victory components/events but I cannot quite get it. The closest I have gotten is with the following code:

Chart Component

<VictoryChart
  containerComponent={
    <VictoryVoronoiContainer
      labelComponent={<CustomTooltip />}
      labels={() => ' '}
      voronoiDimension="x"
    />
  }
  domainPadding={{ x: 10 }}
  height={CHART_HEIGHT}
  padding={{ top: 120, right: 30, bottom: 40, left: 40 }}
>
  <ForeignObject>
  ...
  </ForeignObject>
  <VictoryAxis ... />
  <VictoryAxis ... />
  <VictoryBar
    barRatio={0.8}
    data={data}
    name="dailySpendBars"
    style={{
      data: {
        fill: 'green',
      },
    }}
  />
</VictoryChart>

CustomTooltip Component:

<View
  pointerEvents="auto"
  style={{
    position: 'absolute',
    top: 5,
    left: 10,
    right: 10,
    width: '100%',
  }}
>
  <Svg width="100%">
    <G>
      <ForeignObject>
        ... custom component with onPress()
      </ForeignObject>
    </G>
  </Svg>
</View>

The main things I am having issues with are:

• The bug I am reporting, which is being able to press on the tooltip. Pressing on the tooltip is just pressing on the chart behind it even when passing pointerEvents="auto" to the <View />
• getting the bar to change color. I tried adding an onTouch event to VictoryChart but it was changing the color of all the bars.
• getting the line to go from the top of the bar to the tooltip at the top. I was able to do just a line by using VictoryTooltip and passing a custom flyoutComponent that was using <Line /> but I couldn't get it to work with the actual tooltip so I ended up creating the custom tooltip component above. I tried adding the <Line /> in there, but it wouldn't work.

Any help would be much appreciated.

Additional notes: I have added the following to my VictoryChart to make the tooltip stay on screen when the user no longer is pressing on the chart

events={
  [
      {
        target: 'parent',
        eventHandlers: {
          onTouchEnd: () => {},
        },
      },
    ]
}

Reproduction

Here is the codesandbox that was referenced in the previously resolved issue with the added pointerEvents and shows that it works for web: https://codesandbox.io/s/victory-tooltip-onclick-ktk13o

Here is another codesandbox of it working on web but for a flyout component: https://codesandbox.io/s/onpress-victory-flyout-p0kdkt

Since this is Victory Native, I can't provide a reproducible example on mobile but here is a visual showing my touch events with the my current code:

[Engazan]

anyone found solution ? is there yay to show Tooltip onClick event inside "VictoryVoronoiContainer" ?, cuz "event" is not triggering ...

<VictoryVoronoiContainer
    labelComponent={<VictoryTooltip
                            flyoutStyle={{  }}
                            events={{onClick: (evt) => console.log(evt)}}
                        />}
/>

[Freddy03h]

The issue seems to be relative to react-native-svg https://github.com/react-native-svg/react-native-svg/issues/1026

I found a workaround by patching VictoryLabel : I attached events to background too And then in my code : add a transparent background to labels

I could provide a PR to victory-native with the patch, but it need to explain (in the doc?) that it's also needed to add a transparent background to labels… not really a good fix.

The other solution would be to add a transparent background to label, even without provided backgroundStyle or backgroundPadding, but I'll want maintainers opinions on it before doing it.

[talon-himself]

@Freddy03h Interesting. Thanks for taking the time to look at this. I will see if I can implement what you mentioned.

[AlexanderMoonBit]

Assuming this is still an open issue, @Freddy03h can you provide an example code of how you made this work for React Native? thanks a ton!

[github-actions[bot]]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.