CODEWITHSUNDEEP
iosreactjsreact-native
Adrienne
Adrienne

Reputation: 2680

How do you detect if the right half of the screen has been tapped in react-native?

Originally I was going to create a view component that was the size of half the screen and wrap it in a TouchableHighlight, but that seems messy.

Upvotes: 1

Views: 1394

Answers (2)

Adrienne
Adrienne

Reputation: 2680

Fixed it.

I added a wrapper <View {...this.panResponder.panHandlers}> to the element and filled in the onPanResponderGrant function:

    onPanResponderGrant: ({ nativeEvent: { touches } }, { x0, y0, moveX }) =>{

    // if on right side of screen
    if (x0 > (Dimensions.get('window').width / 2)){
      _this.nextPhoto();
    } 
  }

Upvotes: 1

Colin Ramsay
Colin Ramsay

Reputation: 16466

Have a look at the Gesture Responder system, which can let you set a view to react to a touch:

http://facebook.github.io/react-native/docs/gesture-responder-system.html#content

Specifically if you pass your view a onStartShouldSetResponder prop which is a function that returns true. You can then also pass a onResponderGrant function as a prop which will receive an event object with the details you need.

Upvotes: 1

Related Questions