Victory-native: Chart click events doesnot fire in iOS any version.

[santoshdahal12]

After couple of hours I found that I should wrap VictoryChart with SVG to make OnPressIn work. So I made the change ,it worked in android. But doesnot work in IOS.

The version details:
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-svg": "^9.4.0",
victory-native: "^32.0.2"

I tested in ios XR , ios 8 plus . it works fine in android .

The way I am using events is : like this

events={[{
target: 'data',
eventHandlers: {
onPressOut: () => ({
target: 'data',
mutation: (props) => {
console.log(props);
return null;
}
})
}
}]}

[santoshdahal12]

If I remove the top SVG wrapper it works in ios but not in android

[boygirl]

@santoshdahal12 this is very odd. Based on what you've said I suspect there might be an issue with panResponder. You can try disabling panResponder if you aren't using any of the evented containers (VictoryVoronoiContainer, VictoryZoomContainer etc.) You can do this by adding containerComponent={<VictoryContainer disableContainerEvents />} to your outermost Victory component (usually VictoryChart)

[XiufuJ]

Have the same issue here. I'm using the latest version of react-native-svg and victory-native. When I wrapped VictoryPie, VictoryLabel together in order to center the label inside the pie in a Svg on ios, the events of VictoryPie would not work. If I remove that Svg the events could work but in this case, the VictoryLabel could not be shown. I tried adding containerComponent={<VictoryContainer disableContainerEvents />} to the VictroyPie, but it's not working.
It works perfectly on Android.
Any suggestions? @boygirl

versions:
react-native: 0.57.8
react-native-svg: 9.4.0
victory-native: 32.0.2

My code is like this:
`

           <Svg>
                   <VictoryPie
                       containerComponent={<VictoryContainer disableContainerEvents/>}
                       data={data}
                       categories={{
                           x: keys
                       }}
                       innerRadius={width * 0.2}
                       width={width}
                       events={[{
                           target: 'data',
                           eventHandlers: {
                               onPressIn: () => ({
                                   target: 'data',
                                   mutation: (props) => {
                                       chartClickHandler(props);
                                       return null;
                                   }
                               })
                           }
                       }]}
                   />
                   <VictoryLabel
                       x={width * 0.5}
                       y={width * 0.5}
                       text={['test']}
                   />
           </Svg>

`

where charClickHandler is (data) => console.log(data)

[XiufuJ]

I got this problem fixed.
use standalone={false} in the VictoryPie and set up width and height for the <Svg> then the press events could work.

[punksta]

@XiufuJ thanks a lot!

[santoshdahal12]

@XiufuJ Thanks it worked for you. I am closing this issue . Please see how @XiufuJ has resolved and reopen the issue if this does not work for you.