@panter/react-native-gesture-responder
v0.2.0
Published
A more convenient and powerful gesture responder than the official PanResponder.
Downloads
3
Keywords
Readme
react-native-gesture-responder
A more convenient and powerful gesture responder than the official PanResponder.
Using this library, gestures are easy to detect:
- scroll distance
- pinch distance
- single tap
- double tab
- single tap confirmed (not followed by a double tap)
Install
npm install --save react-native-gesture-responder@latest
Documentation
import {createResponder} from 'react-native-gesture-responder';
...
componentWillMount() {
this.gestureResponder = createResponder({
onStartShouldSetResponder: (evt, gestureState) => true,
onStartShouldSetResponderCapture: (evt, gestureState) => true,
onMoveShouldSetResponder: (evt, gestureState) => true,
onMoveShouldSetResponderCapture: (evt, gestureState) => true,
onResponderGrant: (evt, gestureState) => {},
onResponderMove: (evt, gestureState) => {},
onResponderTerminationRequest: (evt, gestureState) => true,
onResponderRelease: (evt, gestureState) => {},
onResponderTerminate: (evt, gestureState) => {},
onResponderSingleTapConfirmed: (evt, gestureState) => {},
moveThreshold: 2,
debug: false
});
}
render() {
return (
<View
{...this.gestureResponder}>
...
</View>
);
}
The API is quite same with the official gesture responder system. Differences are:
Every lifecycle callback is called with an additional argument gestureState, like the PanResponder.
onResponderSingleTapConfirmed: called after a single tap (not a double tap).
moveThreshold: default is 2. Use this to avoid too sensitive move events when simply tap the screen(mainly on Android).
debug: a boolean value. If true, lifecycle logs will be printed.
The gestureState object has the following(a super set of PanResponder):
stateId
moveX
andmoveY
x0
andy0
dx
anddy
: accumulated distance of the gesture since the touch started(confusing names)vx
andvy
: per millisec(PanResponder is inconsistant with different react-native version, as this issue mentioned)numberActiveTouches
previousMoveX
andpreviousMoveY
: you can usemoveX - previousMoveX
to calculate latest move distancepinch
andpreviousPinch
: useful number values when implementing zoom feature. Will be undefined if no pinch occuredsingleTapUp
: a bool value indicating if a single tap up occureddoubleTapUp
: a bool value indicating if a double tap up occured
Refer to Demo folder for a simple demonstration, as below shows: