Victory-native: Somehow no eventHandler works on IOS (not onPress nor onPressIn)

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

Hi I just started using your victory-native

Graphs, charts, and others are working.
The thing is, no onPress (nor onPressIn) event triggered when I touch on the graph.
I tried any examples I found on the documentations and issues here, no press even works (despite people said they resolved theirs).

For information, I run it on IOS emulator with below packages:
"react": "16.0.0",
"react-native": "0.50.4",
"react-native-svg": "^6.0.1-rc.1",
"victory-native": "^0.16.1"

Any help would be appreciated.
Thanks

Most helpful comment

@Arjunappsimity I got it solved and i opened my solution here : https://github.com/hugohow/react-native-touchable-graph

works perfectly on iOS and Android

All 15 comments

Try this code?
I use VictoryChart & VictoryBar, events can work!

<VictoryChart>
  <VictoryBar
     data={myData}
     event={[{
        target: 'data',
        eventHandlers: { 
            onPressIn: ( )=>{ 
                return {
                   target: 'data',
                   mutation: ()=>({style: { your style} })
                }
            }
        }
     }]}
  />
</VictoryChart>

Hi, I tried to simplify your code into

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

Still doesn't alert anything. Did I make any mistake?

Try again?

 <VictoryChart>
                <VictoryBar
                    data={[
                        { x: 1, y: 3 },
                        { x: 2, y: 5 },
                        { x: 3, y: 4 },
                        { x: 4, y: 2 },
                        { x: 5, y: 5 }
                    ]}
                    events={[
                        {
                            target: "data",
                            eventHandlers: {
                                onPressIn: () => {
                                    return {
                                        target: 'data',
                                        mutation: alert('boom')
                                    }
                                }
                            }
                        }
                    ]}
                />
            </VictoryChart>

Thanks @yvonne6344,

  • Tried it no success,
  • Tried on App.js (just in case middleware preventing) still no success

  • Tried keep it on App.js and build as Release, app crash

[tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: ReferenceError: Can't find variable: a22241

This error is located at:
in VictoryChart
in t
in RCTView
in RCTView
in t
2017-12-14 16:37:59.021629+0700

@athirah-yahya I notice that your code is using the prop event. The prop should be called events. Give that a shot.

@boygirl : Still no luck, I even copied and pasted the code @yvonne6344 posted up there.

For info, I use XCode 9.2 and IPhone 6 simulator with IOS 11.2

I'm also unable to get the events to work. In trying to find a solution I found this issue. Any updates?

+1

Can everyone please post their version of victory-native, react-native-svg and react-native?

Try something like this :

{ target: "data", eventHandlers: { onPressOut: (evt, clickedProps) => { return { target: 'data', mutation: () => { // your action } } } } }

@boygirl I am having the same issue here are my versions of the packages

"victory-native": "^0.17.1",
"react-native-svg": "^6.2.2",
"react-native": "0.49.3"

+1
@boygirl
onPressIn working fine but not working VictoryScatterData inside.It's working on VictoryLine but i want to display VictoryScatterdata Tooltip popup but it didn't work but when i give Victory line all popup display on certain point Touch.but your demo also not working https://formidable.com/open-source/victory/docs/victory-line/

I want to display same as example link given demo https://codesandbox.io/s/883kryl6x9 but in VictoryLine use VictoryScatterData

Here, I attached ScreenShot link:
https://drive.google.com/a/ewallsolutions.com/file/d/1PhE6n6dkRBB3q45h-ovLXjlDs1yEwdjP/view?usp=drivesdk

"victory-native": "0.18.0",
"react-native-svg": "^6.4.1",
"react-native": "0.55.4",

Onpress handler not working in release ios mode .in development click is working fine but in release build its having issues .Please have a look at that

@Arjunappsimity I got it solved and i opened my solution here : https://github.com/hugohow/react-native-touchable-graph

works perfectly on iOS and Android

@hugohow Great Work Hugo 馃

Was this page helpful?
0 / 5 - 0 ratings