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
You can’t perform that action at this time.