search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.53k stars 1.14k forks source link

Touch Events #37

Closed srhise closed 8 years ago

srhise commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 https://github.com/magicismight/react-native-svg/issues/37#issuecomment-219206724

Sean Hise

caledhwa commented 8 years ago

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 https://github.com/magicismight/react-native-svg/issues/37#issuecomment-219206724

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

magicismight commented 8 years ago

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 commented 8 years ago

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

srhise commented 8 years ago

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 https://github.com/magicismight/react-native-svg/issues/37#issuecomment-219283411

Sean Hise

magicismight commented 8 years ago

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

srhise commented 8 years ago

@kmagiera @mkonicek might know?

magicismight commented 8 years ago

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

srhise commented 8 years ago

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 commented 8 years ago

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

matdehaast commented 8 years ago

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

sekoyo commented 8 years ago

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?