onMoveShouldSetPanResponder

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.

Exercise Add a threshold activation

Add PanResponder.create with onMoveShouldSetPanResponder: (evt, gestureState) => gestureState.dx > 5. Then return <View {...pan.panHandlers} />.

Show example 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} />;
}

Test yourself

Activation callback

PanResponder.create({ ____: () => true });

Show answer

PanResponder.create({ onMoveShouldSetPanResponder: () => true });

When is onMoveShouldSetPanResponder called?
- When the finger moves
- Only on release
- When the component mounts
- Never
Show answer

When the finger moves — It is called when the finger moves.
Match the activation concepts

onMoveShouldSetPanResponder

Start gate
gestureState

Gesture data
dx

Horizontal move
threshold

Filters small moves

Next lesson: onPanResponderMove

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies