[x] This is a victory-native specific issue. (Issues that _also_ appear in victory should be opened here)
[x] I have read through the FAQ and Guides before asking a question
[x] I am using the latest version of victory-native
[x] I have checked to make sure that my versions of react-native and react-native-svg are compatible with this version of victory-native. Read about version requirements
[x] I've searched open issues to make sure I'm not opening a duplicate issue
Trying to capture taps on VictoryLabel on a Polar Chart. On simulators this semi-works, but only fires if you manage to tap on the stroke/fill of the text, tapping on spaces in between does not work, so is very flaky.
On real devices even the above doesn't work, it never seems to fire.
{/* Plot labels around edge of my Polar Chart */}
<VictoryPolarAxis
tickValues={this.state.labels}
tickFormat={(t) => this.displayLabel(t)}
style={{
axis: { stroke: 'white', strokeOpacity: 0 },
grid: { stroke: 'white', strokeOpacity: 0.2 } // these are the spokes
}}
events={[{
target: 'tickLabels',
eventHandlers: {
onPress: (evt, props) => { console.log('ticklabels', evt, props); this.clickLabelIndex(props.index); }
}
}]}
tickLabelComponent={
<VictoryLabel active
style={{
stroke: 'rgba(0,0,0,0.01)', // stroke workaround for onPress only firing on stroke/fill, not on gaps??
strokeWidth: 32,
fill: 'steelblue'
}}
/>
}
/>
Is this happening on both iOS and Android? We've never been able to get touch events working on Android. Since you mentioned simulators, sounds like it's an iOS issue?
Is this happening on both iOS and Android? We've never been able to get touch events working on Android. Since you mentioned simulators, sounds like it's an iOS issue?
Both.
Is this happening on both iOS and Android? We've never been able to get touch events working on Android. Since you mentioned simulators, sounds like it's an iOS issue?
Both.
Actually, very occasionally it does seem to work on iOS, about one tap in 20 (but then my labels are pretty small). Never seen it working on Android yet.
This is an unfortunate limitation of how victory-native extends victory. Very few changes have been made for the native version, which is good for maintaining a nearly identical API, but not-so-good for optimizing for native. I would recommend creating a custom labelComponent that renders both the label and a larger, invisible target area that you can attach events to.
This is an unfortunate limitation of how
victory-nativeextendsvictory. Very few changes have been made for the native version, which is good for maintaining a nearly identical API, but not-so-good for optimizing for native. I would recommend creating a customlabelComponentthat renders both the label and a larger, invisible target area that you can attach events to.
Would you please show an example for this?
Probably not only for VictoryLabel. I was creating a bar chart that reponds to onPress events for bars, the same thing happened. Only one tap in approximately every 5~15 taps would successfully fire the onPress events. It fires on every onPressIn event though - but you had to make compromise on user experiences.
if some one came digging on internet like me, in my case i just wanted to redirect to my edit values pages, what i did was to englobe my graphic in a touchableOpacity from 'react-native-gesture-handler' and then fired onPress function, i hope it helps
Most helpful comment
Actually, very occasionally it does seem to work on iOS, about one tap in 20 (but then my labels are pretty small). Never seen it working on Android yet.