Victory-native: Wrapping around TouchableOpacity does not work react-native

[jinxac]

I wanted to expand VictoryLine on pressing it to render detailed chart information. I tried following:-

          <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
            <TouchableOpacity onPress={() => console.log("svg clicked")}>
              <VictoryChart
                theme={VictoryTheme.material}
              >
                <VictoryLine
                  style={{
                    data: { stroke: "#c43a31" },
                    parent: { border: "1px solid #ccc"}
                  }}
                  data={[
                    { x: 1, y: 2 },
                    { x: 2, y: 3 },
                    { x: 3, y: 5 },
                    { x: 4, y: 4 },
                    { x: 5, y: 7 }
                  ]}
                />
              </VictoryChart>
            </TouchableOpacity>

          </View>

But no event is being fired on when I click on the chart.

Is this a bug or is it suppose to behave this way? If it is not a bug can u please tell how to add onPress to expand that chart?

P.S:-

For now I am adding a touchableOpacity layer by positioning it absolutely. But is this the correct way?

          <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
              <View>
                <VictoryChart
                  theme={VictoryTheme.material}
                >
                  <VictoryLine
                    style={{
                      data: { stroke: "#c43a31" },
                      parent: { border: "1px solid #ccc"}
                    }}
                    data={[
                      { x: 1, y: 2 },
                      { x: 2, y: 3 },
                      { x: 3, y: 5 },
                      { x: 4, y: 4 },
                      { x: 5, y: 7 }
                    ]}
                  />
                </VictoryChart>
                <TouchableOpacity style={{position:"absolute","top":0,"right":0,"left":0,"height":300}} onPress={() => console.log("svg clicked")} />                
              </View>
          </View>

[kshah21]

Good catch on making the position absolute. Let me know if you find a more permanent solution to this problem. I have run into this wall and don't know how to get past it.

[jinxac]

For now I have moved back to https://github.com/TradingPal/react-native-highcharts. I have multiple charts involved in the application and i felt position absolute is a hack.

[asendia]

Having same issue with victory chart, is there any other workaround other than using touchable with absolute position?

[harrisonturton]

You can work around this issue by wrapping the chart in a View with the prop pointerEvents='none'. This allows touch events to pass through the chart to the TouchableOpacity component beneath it.

For example:

<TouchableOpacity onPress={this.doSomething}>
    <View pointerEvents='none'>
        <VictoryGroup>
            <VictoryArea data={this.data} />
        </VictoryGroup>
    </View>
</TouchableOpacity>

[prcbass]

I'm experiencing this same issue, however I am using a VictoryVoronoiContainer and as such using pointerEvents='none'doesn't work for me. Does anyone have another workaround for this issue or is there another way to detect if a user has pressed (onLongPress, onPress, onPressIn, onPressOut) on the chart? Currently have a VictoryGroup with a VictoryVoronoiContainer surrounding a VictoryLine.

[prcbass]

Got around this issue by using the onTouchStart and onTouchEnd props on VictoryVoronoiContainer.

https://formidable.com/open-source/victory/docs/common-container-props/#ontouchstart

[hugohow]

I put on open source a wrapper to handle better touch events for victory native
https://github.com/hugohow/react-native-touchable-graph
If you want to try

[nirre7]

Same issue here i.e onLongPress on chart (which is using VictoryVoronoiContainer + VictoryZoomContainer)...
So not really sure how to solve this 🤔