Last active
October 21, 2023 05:28
-
-
Save teameh/dd055d546a3bd8f85b9516840e3a45f3 to your computer and use it in GitHub Desktop.
React native PanResponder interface overview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
} | |
}); |
When is isAllowedResponder
set to true?
Really helpful, thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From Gesture Responder System + PanResponder