PanResponderDragMoveExample.js

// @flow

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TouchableHighlight,
  PanResponder,
  Animated,
} from 'react-native';

type State = {
  dragging: boolean,
  x: number,
  y: number,
  draggingX: number,
  draggingY: number,
}

type GestureState = {
  dx: number,
  dy: number,
}

export default class App extends Component<{}, State> {

  state: State = {
    dragging: false,
    x: 100,
    y: 100,
    draggingX: 100,
    draggingY: 100,
  }

  panResponder: any

  componentWillMount() {
    this.createPanResponder()
  }

  createPanResponder() {
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this.onStartShouldSetPanResponder,
      onStartShouldSetPanResponderCapture: this.onStartShouldSetPanResponderCapture,
      onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder,
      onMoveShouldSetPanResponderCapture: this.onMoveShouldSetPanResponderCapture,
      onPanResponderGrant: this.onPanResponderGrant,
      onPanResponderMove: this.onPanResponderMove,
      onPanResponderTerminationRequest: this.onPanResponderTerminationRequest,
      onPanResponderRelease: this.onPanResponderEnd,
      onPanResponderTerminate: this.onPanResponderEnd,
      onShouldBlockNativeResponder: (evt, gestureState) => {
        return true;
      },
    })
  }

  onStartShouldSetPanResponder (e: Object, gestureState: GestureState) {
    return true
  }

  onMoveShouldSetPanResponder (e: Object, gestureState: GestureState) {
    return true
  }

  onMoveShouldSetPanResponderCapture (e: Object, gestureState: GestureState) {
    return true
  }

  onPanResponderGrant = (e: Object, gestureState: GestureState) => {
    this.setState({ dragging: true })
  }

  onStartShouldSetPanResponderCapture = (e: Object, gestureState: GestureState) => {
    return true
  }

  onPanResponderMove = (e: Object, gestureState: GestureState) => {
    const { x, y } = this.state
    const { dx, dy } = gestureState
    console.log('onPanResponderMove', dx, dy)
    this.setState({
      draggingX: x + dx,
      draggingY: y + dy,
    })
  }

  onPanResponderEnd = (e: Object, gestureState: GestureState) => {
    this.setState({
      x: this.state.draggingX,
      y: this.state.draggingY,
      dragging: false,
    })
  }

  onPanResponderTerminationRequest(e: Object, gestureState: GestureState) {
    return true
  }

  render() {
    const { x, y, dragging, draggingX, draggingY } = this.state
    const backgroundColor = dragging ? '#FFEF15' : 'rgb(200, 240, 250)'
    const left = dragging ? draggingX : x
    const top = dragging ? draggingY : y
    return (
      <View
        style={[
          styles.responder,
          {
            backgroundColor,
            left,
            top,
          }
        ]}
        {...this.panResponder.panHandlers}
      />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  responder: {
    position: 'absolute',
    width: 100,
    height: 100,
    borderRadius: 10,
  },
});