Draggable_ListView_Item.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  PanResponder,
  Animated
} from 'react-native';

export default class draggableLV extends Component {
  constructor(props){
    super(props)
    fakeData = [
      {word: 'Hello', _id: 0},
      {word: 'Rainbow', _id: 1},
      {word: 'My', _id: 2},
      {word: 'Old', _id: 3},
      {word: 'Friend', _id: 4},
      {word: 'You', _id: 5},
      {word: 'Again', _id: 6},
      {word: 'Hello', _id: 7},
    ]
    fakeData2 = [
      {word: 'I\'ve Come', _id: 8},
      {word: 'To', _id: 9},
      {word: 'Talk', _id: 10},
      {word: 'With', _id: 11},
    ]
    this.state = {
      ds1: this.mountDataSource(fakeData),
      ds2: this.mountDataSource(fakeData2),
      pan:  [],

    }
    this.panResponder = []
    for(let i = 0; i < fakeData.length + fakeData2.length; i++){
      let allData = fakeData.concat(fakeData2)
      this.state.pan[allData[i]._id] = new Animated.ValueXY()
      this.panResponder[allData[i]._id] = PanResponder.create({    //Step 2
          onStartShouldSetPanResponder : () => true,
          onPanResponderMove           : Animated.event([null,{ //Step 3
              dx : this.state.pan[allData[i]._id].x,
              dy : this.state.pan[allData[i]._id].y
          }]),
          onPanResponderRelease        : (e, gesture) => {} //Step 4
      });
    }

    console.log('this.panResponder', this.panResponder)
  }
  mountDataSource(data){
    let ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    })
    return ds.cloneWithRows(data)
  }
  render() {
    return (
      <View style={styles.container}>
      <ListView
        style={styles.listWrapper}
        horizontal={true}
        dataSource={this.state.ds1}
        renderRow={(data) => (
          <Animated.View
              {...this.panResponder[data._id].panHandlers}
              style={[this.state.pan[data._id].getLayout(), styles.listItem]}>
              <Text style={styles.text}>{data.word}</Text>
          </Animated.View>
        )}
        ></ListView>
        <ListView
          horizontal={true}
          style={styles.listWrapper}
          dataSource={this.state.ds2}
          renderRow={(data) => (
              <View style={[styles.listItem, styles.listItem2]}>
                <Text>{data.word}</Text>
              </View>
          )}
          ></ListView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  listWrapper:{
    flex: 1,
    borderWidth: 2,
    borderColor: "#ffffff",
    backgroundColor: "#0000ff"
  },
  listItem:{
    height: 100,
    width: 100,
    margin: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#ff00ff"
  },
  listItem2:{
    backgroundColor: "#ff0000"
  }
});

AppRegistry.registerComponent('draggableLV', () => draggableLV);