Create touchable React-Native-Art objects?

Question

So I am new to React Native and am starting to wonder if this is even possible. I have my project setup for React Art - but I want to interact with the drawing objects I create with art.

Say there's one main view, within this view is a drawing surface. Within that surface, I render two different drawings using svg shapes and such. Is it possible for both of these drawings to be individually touchable within React Native?

Everything I try seems to screw up because you cant touch non native objects... how do I wrap my drawings so they are touchable?

If I cannot do this: How can I create svg drawings that can essentially act as buttons within my React Native app?

If you go here, which is where I began this foray into reactArt: http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/ I basically want to take the VectorWidget drawn in this article and make it touchable.

Edit:

class cardboardtests extends Component {

  _handlePress(data) {
    console.log("asdf");
  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={ this._handlePress("asdf") }>
        <View>
          <Surface
            width = {width}
            height = {height}
          >
            <CBCard/>
          </Surface>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

Browniefed's blog is a great place to turn to for help. His tinder demo might be useful to you, but I think using PanResponder is the key here. Have you played with it yet? — Chris Geirman
I have not. Would PanResponder allow me to drag an svg around the screen or touch anywhere on the svg to trigger an event? — Harrison

everlasto everlasto · Accepted Answer · 2016-02-19T13:54:27

I ran into same kind of issue when I was implementing a star rating component, where each star would be a svg component and unable to attach touch handler to them.

The way I fixed it is by wrapping that element with a Touchable component.

Somewhat like,

<TouchableWithoutFeedback onPress={__your_handler__}>
    <View>
        <Surface>
            <Shape d={__svg_path__}>
        </Surface>
    </View>
</TouchableWithoutFeedback>

Create touchable React-Native-Art objects?

1 Answers