onMoveShouldSetPanResponder
- React Native course
- Intermediate
- Lesson 77/116
- 5 min
Learn onMoveShouldSetPanResponder.
onMoveShouldSetPanResponder
onMoveShouldSetPanResponder is called when the finger moves; if it returns true the gesture begins. It is the gate that decides when a gesture becomes 'active'.
The simplest form is () => true, which accepts every move. For finer control, a threshold like (evt, gestureState) => gestureState.dx > 5 is used; small jitter does not start the gesture.
Threshold activation
Using a threshold for gesture activation filters out small unwanted moves. (evt, gestureState) => gestureState.dx > 5 does not start the gesture until the horizontal move passes 5 pixels.
gestureState carries values like dx, dy (move amount) and vx, vy (velocity). With these you can start the gesture only on moves large enough.
Practice Add a threshold activation
Add PanResponder.create with onMoveShouldSetPanResponder: (evt, gestureState) => gestureState.dx > 5. Then return <View {...pan.panHandlers} />.
Starter code
import React from 'react';
import { PanResponder, View } from 'react-native';
export default function Drag() {
// Add a threshold activation
return <View />;
}Sample solution
import React from 'react';
import { PanResponder, View } from 'react-native';
export default function Drag() {
const pan = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => gestureState.dx > 5,
});
return <View {...pan.panHandlers} />;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Activation callback
PanResponder.create({ ____: () => true });PanResponder.create({ onMoveShouldSetPanResponder: () => true });Explanation: onMoveShouldSetPanResponder starts the gesture.
2 When is onMoveShouldSetPanResponder called?
- When the finger moves Correct answer
- Only on release
- When the component mounts
- Never
Explanation: It is called when the finger moves.
3 Match the activation concepts
| Term | Meaning |
|---|---|
onMoveShouldSetPanResponder |
Start gate |
gestureState |
Gesture data |
dx |
Horizontal move |
threshold |
Filters small moves |