Skip to content

Instantly share code, notes, and snippets.

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) => () => {'onStartShouldSetPanResponderCapture');
return true;
// Should child views be prevented from becoming responder of subsequent touches?
onMoveShouldSetPanResponderCapture: (evt, gestureState) => () => {'onMoveShouldSetPanResponderCapture');
return true;
onShouldBlockNativeResponder: (evt, gestureState) => {'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) => {'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) => {'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) => {'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) => {'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) => {'onPanResponderReject');
// If the view is the responder, the following handlers could be called:
// - Touch start
onPanResponderStart: (e) => {'onPanResponderStart');
// - The user is moving their finger
onPanResponderMove: (e, gestureState) => {'onPanResponderMove', dy);
// React to the movement!
// - Fired at the end of the touch before onPanResponderRelease
onPanResponderEnd: (e) => {'onPanResponderEnd');
// - Fired at the end of the touch, ie "touchUp"
onPanResponderRelease: (e, gestureState) => {'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) => {'onPanResponderTerminate');

This comment has been minimized.

Copy link
Owner Author

@teameh teameh commented Oct 18, 2016


This comment has been minimized.

Copy link

@wcandillon wcandillon commented Jun 22, 2018

When is isAllowedResponder set to true?


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