PanResponder

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures. It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object.

Methods

`create()`

static create(config: PanResponderCallbacks)

Creates a new PanResponder instance with the provided configuration.

object

required

Configuration object containing responder callbacks

function

Called to determine whether to become the responder on the start of a touchSignature: (event, gestureState) => boolean

function

Called during the capture phase to determine whether to become the responderSignature: (event, gestureState) => boolean

function

Called when a touch moves to determine whether to become the responderSignature: (event, gestureState) => boolean

function

Called during the capture phase when a touch movesSignature: (event, gestureState) => boolean

function

Called when the view becomes the responder. Show visual feedback.Signature: (event, gestureState) => void

function

Called when another component has become the responderSignature: (event, gestureState) => void

function

Called when a touch startsSignature: (event, gestureState) => void

function

Called when the touch movesSignature: (event, gestureState) => void

function

Called when a touch endsSignature: (event, gestureState) => void

function

Called when the user has released all touches. This typically means a gesture has succeeded.Signature: (event, gestureState) => void

function

Called when another component has become the responder, so this gesture should be cancelledSignature: (event, gestureState) => void

function

Called to determine whether this responder should be terminatedSignature: (event, gestureState) => boolean

function

Returns whether this component should block native components from becoming the JS responder. Currently only supported on Android.Signature: (event, gestureState) => boolean

Returns: An object containing:

panHandlers - Props to spread on the View component
getInteractionHandle() - Returns interaction handle (deprecated)

GestureState Object

The gestureState object passed to handlers has the following properties:

number

ID of the gestureState - persisted as long as there is at least one touch on screen

number

The latest screen coordinates of the recently-moved touch

number

The latest screen coordinates of the recently-moved touch

number

The screen coordinates of the responder grant

number

The screen coordinates of the responder grant

number

Accumulated distance of the gesture since the touch started

number

Accumulated distance of the gesture since the touch started

number

Current velocity of the gesture

number

Current velocity of the gesture

number

Number of touches currently on screen

Native Event Properties

The native event object contains:

nativeEvent.changedTouches - Array of all touch events that have changed since the last event
nativeEvent.identifier - The ID of the touch
nativeEvent.locationX - The X position of the touch, relative to the element
nativeEvent.locationY - The Y position of the touch, relative to the element
nativeEvent.pageX - The X position of the touch, relative to the root element
nativeEvent.pageY - The Y position of the touch, relative to the root element
nativeEvent.target - The node id of the element receiving the touch event
nativeEvent.timestamp - A time identifier for the touch, useful for velocity calculation
nativeEvent.touches - Array of all current touches on the screen

Example

import React, {useRef} from 'react';
import {Animated, PanResponder, View, StyleSheet} from 'react-native';

function DraggableBox() {
  const pan = useRef(new Animated.ValueXY()).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        pan.setOffset({
          x: pan.x._value,
          y: pan.y._value
        });
      },
      onPanResponderMove: Animated.event(
        [
          null,
          {dx: pan.x, dy: pan.y}
        ],
        {useNativeDriver: false}
      ),
      onPanResponderRelease: () => {
        pan.flattenOffset();
      }
    })
  ).current;

  return (
    <View style={styles.container}>
      <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',
  },
  box: {
    height: 150,
    width: 150,
    backgroundColor: 'blue',
    borderRadius: 5,
  },
});

export default DraggableBox;

Multi-Touch Example

import React, {Component} from 'react';
import {PanResponder, View, Text} from 'react-native';

class MultiTouchExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      touches: 0
    };

    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (evt, gestureState) => {
        this.setState({touches: gestureState.numberActiveTouches});
      },
      onPanResponderMove: (evt, gestureState) => {
        this.setState({touches: gestureState.numberActiveTouches});
      },
      onPanResponderRelease: () => {
        this.setState({touches: 0});
      },
    });
  }

  render() {
    return (
      <View {...this._panResponder.panHandlers} style={{flex: 1}}>
        <Text>Active touches: {this.state.touches}</Text>
      </View>
    );
  }
}

export default MultiTouchExample;

Core APIs

Hooks

Interaction

Accessibility & Internationalization

Developer Tools

Networking

Storage

Android APIs

iOS APIs

Methods

`create()`

GestureState Object

Native Event Properties

Example

Multi-Touch Example

​Methods

​create()

​GestureState Object

​Native Event Properties

​Example

​Multi-Touch Example

Methods

`create()`

GestureState Object

Native Event Properties

Example

Multi-Touch Example