MENU


PanResponder

The PanResponder API helps build complex gestures in the UI.By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.

Methodscreate()

Usage Pattern:


RESETRUNFULL
const ExampleComponent = () => {
  const panResponder = React.useRef(
    PanResponder.create({      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {        // The gesture has started. Show visual feedback so the user knows        // what is happening!        // gestureState.d{x,y} will be set to zero now
      },
      onPanResponderMove: (evt, gestureState) => {        // The most recent move distance is gestureState.move{X,Y}        // The accumulated gesture distance since becoming responder is        // gestureState.d{x,y}
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {        // The user has released all touches while this view is the        // responder. This typically means a gesture has succeeded
      },
      onPanResponderTerminate: (evt, gestureState) => {        // Another component has become the responder, so this gesture        // should be cancelled
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {        // Returns whether this component should block native components from becoming the         // JS responder. Returns true by default. Is currently only supported on android.
        return true;
      }
    })
  ).current;
  return <View {...panResponder.panHandlers} />;};

A gestureState has the following properties:

stateID - ID of the gestureState- persisted as long as there's at least one touch on the screen

moveX - the latest screen coordinates of the recently-moved touch

moveY - the latest screen coordinates of the recently-moved touch

x0 - the screen coordinates of the responder grant

y0 - the screen coordinates of the responder grant

dx - accumulated distance of the gesture since the touch started

dy - accumulated distance of the gesture since the touch started

vx - current velocity of the gesture

vy - current velocity of the gesture

numberActiveTouches - Number of touches currently on screen


RESETRUNFULL
import React, { useRef } from "react";import { Animated, View, StyleSheet, PanResponder, Text } from "react-native";const App = () => {
  const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {pan.setOffset({x: pan.x._value, y: pan.y._value}); },
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
      onPanResponderRelease: () => { pan.flattenOffset();}
    })
  ).current;
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Drag this box!</Text>
      <Animated.View style={{transform: [{ translateX: pan.x }, { translateY: pan.y }]}}
        {...panResponder.panHandlers}>
        <View style={styles.box} />
      </Animated.View>
    </View>
  );}const styles = StyleSheet.create({
  container: { flex: 1, alignItems: "center", justifyContent: "center"},
  titleText: { fontSize: 14, lineHeight: 24, fontWeight: "bold"},
  box: { height: 150, width: 150, backgroundColor: "blue", borderRadius: 5}});export default App;