CODEWITHSUNDEEP
javascriptreact-nativegesture
Philipp Sumi
Philipp Sumi

Reputation: 987

Detect two finger gesture

I have a PanGesture handler that is nested in a ScrollView, which hence should only handle pinch gestures with two fingers, but let the parent handle all other gestures.

From reading the docs, onStartShouldSetPanResponder would be the right place to determine whether to handle the gesture, but unfortunately, gestureState.numberActiveTouches is always 1, so I can't tell whether the user is going to tap, pinch or swipe.

Also, it's not like that method would be invoked two times with a short delay if I tap the screen with two fingers and start pinching, so I really wouldn't know how to detect that case.

Any advice?

Edit

View.onTouchStart would fire twice in a row for two fingers, so I could easily detect an upcoming pinch gesture and set a flag for the PanResponder. However, the responder's onStartShouldSetPanResponder always fires before I get those two events, whether I declare onTouchStart on a nested view, the parent view, or the view that owns the ParentResponder, so I'm too late here.

Upvotes: 2

Views: 3548

Answers (1)

Thomas D.
Thomas D.

Reputation: 259

As far as I know onStartShouldSetPanResponder should only return true or false. So with

...
onStartShouldSetPanResponder: () => true
...

you are telling the responder to handle touches and with

...
onMoveShouldSetPanResponder: () => true
...

to handle movement and drag gestures. Then you can use

...
onPanResponderGrant: (event, gesture) => {

}
onPanResponderStart: (event, gesture) => {
    let activeTouches = gesture.numberActiveTouches;
}
...

to get your active touches. If you have trouble getting the right responder to handle your input in a nested situation, try looking into onStartShouldSetPanResponderCapture at the bottom of the gesture responder system docs (https://facebook.github.io/react-native/docs/gesture-responder-system.html)

Upvotes: 2

Related Questions