Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - onTouchStart vs PanResponder for multiple touches per second

I'm developing an app with React Native which has to respond to tap gestures as soon as possible because more than one tap event can be fired in a second. No need for double tap or move gestures, but need to take care of simultaneous taps. I've been testing with both onTouchStart and PanResponder | onPanResponderGrant and seen that:

  • onTouchStart is fired twice when two taps are simultaneous, while onPanResponderGrant is called just once.
  • onPanResponderMove is fired even when I have onMoveShouldSetPanResponder to false, and it's fired many times when two taps are simultaneous, or when there are several taps in a second.
  • When several taps are done in a second, onTouchStart works fine, but onPanResponderGrant is fired less times.

Based on above reasons, I think that I'd better use onTouchStart.

Now the question is: Should I use onTouchStart even when React Native docs suggest to use the PanResponder for multi-touch gestures?

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures.

Or am I missing something of PanResponder?

Edit:

Also, gestureState.numberActiveTouches is always 1, event when two taps are simultaneous. I thought that this could do the trick.

like image 610
Manolo Avatar asked Aug 03 '17 16:08

Manolo


People also ask

Which react native function can retrieve multiple touch user interactions?

TouchableHighlight and Touchable*​ This uses the responder system and allows you to configure tap interactions declaratively.

What is Pan responder used for?

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.

What is gesture responder system in react native?

Image from: Learning React Native: Building Native Mobile Apps with JavaScript by Bonnie Eisenman. The gesture responder System allows views to negotiate responsibility for a touch event. A touch event has three phases: start, move and release.


1 Answers

From the definition of PanResponder, I understand that it's used to interpret a multi-touch gesture and render 1 action. Like I tap with 2 fingers on an image and I could get the image copied to the clipboard.

While it seems you want a different behaviour: I you tap with 2 fingers on 1 drum cymbal, you want to get 2 sounds. It's as if you were dividing your drum cymbals into an infinity of buttons, and whatever you do, for every tap, you'll get one separate sound.

Then you don't want to use PanResponder, because it's going to try to interpret a bunch of movements into a single sound, while you want every movement to generate a separate sound. And onTouchStart simply gets the job done. So you are probably doing the right thing with it!

like image 193
Jeremie Avatar answered Oct 13 '22 23:10

Jeremie