Victory-native: onPress (or onPressIn) not work unless I remove Portal component from container

Created on 16 Dec 2017  路  14Comments  路  Source: FormidableLabs/victory-native

I can't get onPress or onPressIn events to work with a very basic bar chart. I debugged it for a while and if I remove line #94 from victory-container.js (Portal component) onPressIn event is triggered properly. Is this a new bug or any ideas what's wrong with my code?

I have very basic bar chart like this:

<VictoryBar events={[{ target: 'data', eventHandlers: { onPressIn: () => alert('Clicked!') } }]} data={[ { x: 1, y: 4 }, { x: 2, y: 3 }, { x: 3, y: 4 }, { x: 4, y: 5 }, { x: 5, y: 5 }, ]} />

And installed versions:
"react": "16.0.0", "react-native": "0.51.0", "victory-native": "0.16.1", "react-native-svg": "6.0.1-rc.1",

Most helpful comment

@boygirl : I tried 0.16.3, still have to comment out Portal component to have it work

All 14 comments

@sampsasaarela: I got the similar trouble, but my issue was closed (https://github.com/FormidableLabs/victory-native/issues/206)

Would test removing the line mentioned above to see if it is the exact same problem I encounter

EDIT:
IT IS
I removed the line #94 and it works just great

@boygirl : I tried 0.16.3, still have to comment out Portal component to have it work

Same here @athirah-yahya. @boygirl, the problem still exists in [email protected].

I investigated this a little bit more and seemed that touches are not delegated through the View component to the SVG component.

I tested to add pointerEvents="none" property to the View (line #91) around the Portal component and it then worked without removing the Portal component.

I saw you @boygirl added touchAction="none" property to the same View, but I didn't find any documentation for that property? pointerEvents property is documented here.

Can you confirm @athirah-yahya if pointerEvents="none" would fix this for you too? And what do you think @boygirl?

@sampsasaarela Yes, I will add that as well.

@sampsasaarela the solution ended up being pointerEvents="box-only". This fix will go out in the next few minutes.

Thanks, @boygirl, works now perfectly.

@boygirl the most recent version has the same issue and the pointerEvents prop has been overwritten, and even after updating the component line #91 the onPress event still is not working

@wkwyatt Did you find any resolution on this with vicotry-native or did you end up finding another library? We are using Victory for our web applications and wanted to stay in the Victory Family when going to mobile, but this onPress with a bar graph on Android is the one issue. Just trying to get an idea of other options.

@dahudson88 Luckily my app was only for Android and I ended up using react-native-chart-android, if you need a multi-platform solution then victory-native would probably be better if we could get the onPress to work.

@wkwyatt DANG....aight...cool thanks for the info...Im gonna keep digging to see if I can get something working!

Might be related to this issue

Was this page helpful?
0 / 5 - 0 ratings