Реагировать Native Pan Responder на анимацию одного динамического представления

Question

Я создаю серию кубов в сетке, и я хочу перемещать только тот куб, на который нажата.В настоящее время в моем коде он перемещает все кубы как один.Я попытался найти отдельный ключ куба, чтобы попытаться нацелить его на анимацию, но пока мне не удаётся выяснить это.

Компонент myPanel предназначен только для разметки кубов, которые определеныв функции renderCube.Это может быть проблемой с разметкой всех кубов с помощью Animated.View, хотя я добавил ключ, но я не могу получить доступ или выяснить, как конкретно анимировать только выбранный куб.

import React, { Component } from 'react';
import { TouchableWithoutFeedback, View, ImageBackground, Dimensions, Animated, PanResponder } from 'react-native';
import myPanel from './myPanel';

const DATA = [
{ id: 1, color: '#ff8080' },
{ id: 2, color: '#80ff80' },
{ id: 3, color: '#ffff80' }
];

const winWidth = Dimensions.get('window').width;
const widthCalc = winWidth/400;
const cubeWidth = widthCalc*74;
const winHeight = Dimensions.get('window').height;
const heightCalc = ((winHeight-winWidth)/2)-5;
const xPush = 5*widthCalc;
const borRadius = 7.4*widthCalc;
let cnt = 0;
let xMove = 0;
let yMove = 0;
let currTarget = '033';

class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
          pan: new Animated.ValueXY()
        };
    }

    componentWillMount() {
        this._panResponder = PanResponder.create({
            onMoveShouldSetResponderCapture: () => true,
            onMoveShouldSetPanResponderCapture: () => true,
            onStartShouldSetPanResponder:(e, gestureState) => true,
            onPanResponderGrant: (e, gestureState) => {
              console.log(this.currTarget);
            },
            onPanResponderMove: Animated.event([
                null,
                {
                  dx: this.state.pan.x,
                  dy: this.state.pan.y,
                },
            ]),
            onPanResponderRelease: () => {
                Animated.spring(
                  this.state.pan,
                  {toValue: {x: 0, y: 0}},
                ).start();
            }
        });
    }

    renderCube(item) {
        return (
            <Animated.View {...this._panResponder.panHandlers} 
            style={this.state.pan.getLayout()} key={item.id}>
                <TouchableWithoutFeedback 
                onPressIn={()=>{this.currTarget = item.id; console.log('Set '+item.id);}}>
                    <View
                        style={{
                            backgroundColor:myColor,
                            width:cubeWidth,
                                        height:cubeWidth,
                                        position: 'absolute',
                                        top: yMove,
                                        left: xMove,
                                        bottom: 0,
                                        right: 0,
                                        borderRadius:borRadius
                        }}
                    ></View>
                </TouchableWithoutFeedback>
            </Animated.View>
        );
    }

    render() {
        return (
                <myPanel 
                        data={DATA}
                        renderCube={this.renderCube.bind(this)}
                    />
        );
    }
}

export default Board;