Touch Events

[srhise]

Is it possible for an SVG to have shapes bound to touch events? I have an svg of a vehicle and I want to be able to tap sections of it to highlight certain areas.

[srhise]

So, I was able to attach a touch event to an component by wrapping it in touchablehighlight, however, what I need to do is to split up a larger SVG into sections and have each section be tappable. Is this possible?

[caledhwa]

Could we get a discussion on this about HOW we might do this? I'd love to help figure out touch if we had an approach and maybe an MVP idea... Like maybe simple onPress events from the JS side which are supported on the backend bridged component around one shape type?! Thoughts???

[magicismight]

Its very difficult to attach touch events on current code.The Svg element is more like a canvas not a truly container for some shape elements. The shape elements inside Svg, like(Circle, Path etc..) are some kind of virtual nodes, theyre abstractions of the paint on the canvas.

For example

<Svg>
    <Rect x="0" y="0" width="100" height="100" />
</Svg>

The Rect element is just a virtual node. It wont layout itself, It just draw a rectangle on the Svg canvas context.So its very difficult to attach events on a node which is not existed on layout system.
But I`ll try my best to refactor whole library to support the touch events, thanks for the awesome suggestion anyway.

[magicismight]

I think I did it on iOS.
This will be released within the next major version.
I`ll feature out how to implement this on Android.

[srhise]

Wow!!! Thank you, and let us know if you need any help. This could be a
game changer.

On Sat, May 14, 2016 at 3:50 AM, Horcrux notifications@github.com wrote:

I think I did it in iOS.
This will be released within the next major version.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#37 (comment)

Sean Hise

[caledhwa]

OMG, throw some ideas at someone and watch them run! Even if my idea was just a “hey how could we”, I never expected this.

iOS is the first step, so I’m totally blown away. Very nice work Horcrux!

On May 14, 2016 at 4:35:55 AM, srhise (notifications@github.com) wrote:

Wow!!! Thank you, and let us know if you need any help. This could be a
game changer.

On Sat, May 14, 2016 at 3:50 AM, Horcrux notifications@github.com wrote:

I think I did it in iOS.
This will be released within the next major version.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#37 (comment)

Sean Hise
—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

[magicismight]

The gesture responder system added in a new branch named touch-events, which is not finished yet on Android.
Those handlers are supported

onMoveShouldSetResponder
onMoveShouldSetResponderCapture
onResponderGrant
onResponderMove
onResponderReject
onResponderRelease
onResponderTerminate
onResponderTerminationRequest
onStartShouldSetResponder
onStartShouldSetResponderCapture

Im planning to implement touchable handlers on some new elements like: TouchableCircle TouchableRect ...etc Im not sure if this is a good idea to add those new elements

[caledhwa]

I think this is great! And makes it a killer library. Keep on keeping on! 👍 💯

[srhise]

I don't know if this is possible, but the touch events I am trying to hook
to are 's

On Sun, May 15, 2016 at 8:36 AM, Cale Hoopes notifications@github.com
wrote:

I think this is great! And makes it a killer library. Keep on keeping on!
👍 💯

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#37 (comment)

Sean Hise

[magicismight]

Can`t find a way to dispatch touch events to ReactShadowNode on Android.
Been working on this for days.
Any ideas?

[srhise]

@kmagiera @mkonicek might know?

[magicismight]

Im closing this issue now, for the [gesture responder system](http://facebook.github.io/react-native/docs/gesture-responder-system.html#content) is shiped within react-native-svg@2.0.0`.
Feel free to reopen this issue.

[srhise]

Wow, you did it!! I'll play around with it a bit as I think it would be good for us to update the docs with an example.

[magicismight]

The doc is out of date for ages.
But I`ll update the doc later.
And will add some examples for this.

[matdehaast]

Does that mean I can use gesture fully to get items touch events for this library?

[sekoyo]

Thanks I read through this but none the wiser on how to detect touch events on svg shapes - do I understand it correctly that react native gives you coordinates, but there's still no easy way to detect what shape those coordinates are on?