search

godaddy / svgs

svgs is a compatiblity layer between svg and react-native-svg
MIT License
191 stars 31 forks source link

Path onPress prop not handled #34

Open carlost opened 5 years ago

carlost commented 5 years ago

I ran into this when using:

Luckily this isn't a result of some arcane interplay between these packages.

react-native-svg supports a series of touchable props on the Path component. You can see those props in the typescript lib def in their repo. Unfortunately, onPress is not a recognized event handler on the path dom element so react will strip out the property and log an error to the console:

Warning: Unknown event handler property 'onPress'. It will be ignored.

I suspect that once you dig into this issue this will quickly open up a can or worms and require supporting a wider range of TouchableProps on a wider range of SVG dom elements.

let me know if you would like some help putting a PR together. react-native-web has a mixin that adds support for onPress event handlers do dom elements ... the work is pretty extensive. unfortunately, it isn't yet packaged up as an independent module.

3rd-Eden commented 5 years ago

Yeah, I can see this being problematic. I just don't know if this should be solved in this library or that universal library should be created that can solve the compatibility issue in a more pragmatic way.

While I recognize that is a problem in terms of interop, the amount of code to get compatibility in this area is quite insane with no good options for code sharing. Not really sure what to do here, the last thing I want to is bloat this library just to get event support. Ideally, some sort of interop library should be used/created to tackle this specific issue. E.g.

import { onPress } from 'what-ever-compatilblity-library';
import { Path } from 'svgs';

<Path { ...onPress(() => {}) } />
carlost commented 5 years ago

@3rd-Eden ... I wholeheartedly agree that creating touch support from scratch is a pretty large undertaking. however, lets imagine a paradise where there was a module that provided generic "onPress" compatibility for the web. if that module existed, wouldn't the ideal place to integrate that functionality be in svgs? that will help increase API compatibility between svgs and react-native-svg and reduce the need for downstream apps to create their own adapters.

carlost commented 5 years ago

@3rd-Eden ... and to give our use case a little more clarity. we have a react-native app and use react-native-web to provider a browser based UI. we make use of 3rd party libs, such as react-native-charts, that use react-native-svg touch event handlers. we are using svgs to transparently replace the impl of all of the react-native-svg components via webpack aliases. works great.

unfortunately, there are a few gaps in API compatibility and those gaps are being exposed by 3rd party libs, like react-native-charts, that we don't directly control.