pan.js

import React, { Component } from 'react'
import { View, Image, StyleSheet, ScrollView, Text, Animated, StatusBar, PanResponder } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'

const CIRCLE_SIZE = 80
const IMG_SRC = { uri: "https://pulsations.files.wordpress.com/2010/05/randomdog.jpg" }


class PanExample extends Component {

  constructor(props) {
    super(props)
    this.panResponder = {}
    this.previousLeft = 0
    this.previousTop = 0
    this.circleStyles = {}
  }

  componentWillMount() {
    this.animatedOpacity = new Animated.Value(1)
    this.translateX = new Animated.Value(0)
    this.translateY = new Animated.Value(0)

    const moveEvent = Animated.event(
      [{}, { dx: this.translateX, dy: this.translateY }],
    )

    this.animatedStyles = {
      opacity: this.animatedOpacity,
      transform: [
        { translateX: this.translateX },
        { translateY: this.translateY },
      ]
    }

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
      onPanResponderGrant: this.handlePanResponderGrant,
      onPanResponderMove: moveEvent,
      onPanResponderRelease: this.handlePanResponderEnd,
      onPanResponderTerminate: this.handlePanResponderEnd,
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" />
        <Animated.View style={[styles.circle, this.animatedStyles]} {...this.panResponder.panHandlers}>
          <View style={styles.rounded}>
            <Image source={IMG_SRC} style={styles.image} />
          </View>
        </Animated.View>
      </View>
    );
  }

  handleStartShouldSetPanResponder = (e, gestureState) => {
    return true;
  }

  handleMoveShouldSetPanResponder = (e, gestureState) => {
    return true;
  }

  handlePanResponderGrant = (e, gestureState) => {
    this.animatedOpacity.setValue(0.7)
  }

  handlePanResponderEnd = (e, gestureState) => {
    this.animatedOpacity.setValue(1.0)
    // Merge value and offset for each animated node and then store
    // it under offset keeping value set to 0 and ready for next
    // pan move events
    this.translateX.flattenOffset()
    this.translateX.extractOffset()
    this.translateY.flattenOffset()
    this.translateY.extractOffset()
  }
}

var styles = StyleSheet.create({
  circle: {
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE / 2,
    position: 'absolute',
    left: 100,
    top: 100,
    shadowOpacity: 0.3,
    shadowRadius: 2,
    shadowColor: '#35475D',
    shadowOffset: { height: 2, width: 0 },
  },
  rounded: {
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE / 2,
    overflow: 'hidden',
  },
  image: {
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
  },
  container: {
    flex: 1,
  },
})

export default PanExample