Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React native PanResponder interface overview
this._panResponder = PanResponder.create({
// ----------- NEGOTIATION:
// A view can become the touch responder by implementing the correct negotiation methods.
// Should child views be prevented from becoming responder on first touch?
onStartShouldSetPanResponderCapture: (evt, gestureState) => () => {
console.info('onStartShouldSetPanResponderCapture');
return true;
},
// Should child views be prevented from becoming responder of subsequent touches?
onMoveShouldSetPanResponderCapture: (evt, gestureState) => () => {
console.info('onMoveShouldSetPanResponderCapture');
return true;
},
onShouldBlockNativeResponder: (evt, gestureState) => {
console.info('onShouldBlockNativeResponder');
return true;
},
// There are two methods to ask the view if it wants to become responder:
// - Does this view want to become responder on the start of a touch?
onStartShouldSetPanResponder: (evt, gestureState) => {
console.info('onStartShouldSetPanResponder', this.isAllowedResponder);
return this.isAllowedResponder;
},
// - Called for every touch move on the View when it is not the responder
// does this view want to "claim" touch responsiveness?
onMoveShouldSetPanResponder: (evt, gestureState) => {
console.info('onMoveShouldSetPanResponder', this.isAllowedResponder, gestureState);
return this.isAllowedResponder && gestureState.dx != 0 && gestureState.dy != 0;
},
// ... And one when some other view requested to be the responder
// - Something else wants to become responder.
// Should this view release the responder? Returning true allows release
onPanResponderTerminationRequest: (evt, gestureState) => {
console.info('onPanResponderTerminationRequest');
return false;
},
// ----------- NEGOTIATION RESULT:
// If the View returns true and attempts to become the responder,
// one of the following will happen:
// - The View is now responding for touch events.
onPanResponderGrant: (evt, gestureState) => {
console.info('onPanResponderGrant');
// This is the time to highlight and show the user what is happening
},
// - Something else is the responder right now and will not release it
onPanResponderReject: (evt) => {
console.info('onPanResponderReject');
},
// ----------- ACTUAL TOUCH HANDLERS:
// If the view is the responder, the following handlers could be called:
// - Touch start
onPanResponderStart: (e) => {
console.info('onPanResponderStart');
},
// - The user is moving their finger
onPanResponderMove: (e, gestureState) => {
console.info('onPanResponderMove', dy);
// React to the movement!
},
// - Fired at the end of the touch before onPanResponderRelease
onPanResponderEnd: (e) => {
console.info('onPanResponderEnd');
},
// - Fired at the end of the touch, ie "touchUp"
onPanResponderRelease: (e, gestureState) => {
console.info('onPanResponderRelease');
},
// - The responder has been taken from the View.
// Might be taken by other views after a call to onPanResponderTerminationRequest,
// or might be taken by the OS without asking
// (happens with control center/ notification center on iOS)
onPanResponderTerminate: (evt, gestureState) => {
console.info('onPanResponderTerminate');
}
});
@teameh

This comment has been minimized.

Copy link
Owner Author

@teameh teameh commented Oct 18, 2016

@wcandillon

This comment has been minimized.

Copy link

@wcandillon wcandillon commented Jun 22, 2018

When is isAllowedResponder set to true?

@daxaxelrod

This comment has been minimized.

Copy link

@daxaxelrod daxaxelrod commented Jul 9, 2019

Really helpful, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment