Victory-native: VictoryLabel onPress does not fire.

Created on 12 Sep 2018  路  7Comments  路  Source: FormidableLabs/victory-native

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

The Problem

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.

Reproduction

                {/* 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'
                      }}
                    />
                  }
                />

Most helpful comment

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.

All 7 comments

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

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

Was this page helpful?
0 / 5 - 0 ratings