React Native : dragging and animation to original place

import React, { Component } from 'react';
import { StyleSheet, View, Animated, PanResponder, Easing } from 'react-native';
import _ from 'underscore';

class Square {
    constructor(value, origin, cellsSize) {
        this.value = value;
        this.pan = new Animated.ValueXY();
        this.cellsSize = cellsSize;
        this.boardSize = 3 * this.cellsSize;
        this.minXY = this.cellsSize * (0.5);
        this.maxXY = this.cellsSize * (1.5);
        this.midXY = this.cellsSize;
        this.origin = origin;
        this.constrainedX = this.pan.x.interpolate({
            inputRange: [this.minXY, this.midXY, this.maxXY],
            outputRange: [this.minXY, this.midXY, this.maxXY],
            extrapolate: 'clamp',
        });
        this.constrainedY = this.pan.y.interpolate({
            inputRange: [this.minXY, this.midXY, this.maxXY],
            outputRange: [this.minXY, this.midXY, this.maxXY],
            extrapolate: 'clamp',
        });

        const x = parseInt(this.cellsSize * (0.5 + this.origin.file));
        const y = parseInt(this.cellsSize * (0.5 + this.origin.rank));

        this.pan.setValue({ x, y });
        this.panResponder = this._buildPanResponder();
    }

    get valueString() {
        return this.value;
    }

    get panRef() {
        return this.pan;
    }

    get panResponderRef() {
        return this.panResponder;
    }

    _buildPanResponder() {
        return PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderGrant: (event, gestureState) => {
                this.pan.setOffset({ x: this.pan.x._value, y: this.pan.y._value });
            },
            onPanResponderMove: (event, gestureState) => {
                this.pan.setValue({ x: gestureState.dx, y: gestureState.dy });
            },
            onPanResponderRelease: (event, gesture) => {
                const nativeEvent = event.nativeEvent;

                const origX = parseInt(this.cellsSize * (this.origin.file + 0.5));
                const origY = parseInt(this.cellsSize * (this.origin.rank + 0.5));

                Animated.timing(
                    this.pan,
                    {
                        toValue: { x: origX, y: origY },
                        duration: 400,
                        delay: 0,
                        easing: Easing.linear
                    }
                ).start();

                this.pan.flattenOffset()
            }
        });
    }
}

export default class TestComponent extends Component {

    constructor(props) {
        super(props);

        this.cellsSize = 100;

        this.squares = [
            new Square('red', { file: 1, rank: 0 }, this.cellsSize),
            new Square('green', { file: 0, rank: 1 }, this.cellsSize),
            new Square('blue', { file: 1, rank: 1 }, this.cellsSize),
        ];
    }

    renderACoin(value, file, rank) {
        if (value) {
            let style;
            switch (value.valueString) {
                case 'red': style = styles.redCoin; break;
                case 'green': style = styles.greenCoin; break;
                case 'blue': style = styles.blueCoin; break;
            }

            const randomKey = parseInt(Math.random() * 1000000).toString()

            return (
                <Animated.View key={randomKey} style={StyleSheet.flatten([style,
                    {
                        left: value.constrainedX,
                        top: value.constrainedY,
                    }])}
                    {...value.panResponderRef.panHandlers }
                />
            );
        }
    }

    renderAllCoins() {
        return _.map(this.squares, (currSquare) => {
            return this.renderACoin(currSquare, currSquare.origin.file, currSquare.origin.rank);
        });
    }

    render() {

        return (
            <View style={styles.topLevel}>
                <View style={StyleSheet.flatten([styles.board])}
                    ref="boardRoot"
                >
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 50,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 150,
                        top: 50,
                    }])} />
                    <View style={StyleSheet.flatten([styles.blackCell, {
                        left: 50,
                        top: 150,
                    }])} />
                    <View style={StyleSheet.flatten([styles.whiteCell, {
                        left: 150,
                        top: 150,
                    }])} />

                    {this.renderAllCoins()}

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topLevel: {
        backgroundColor: "#CCFFCC",
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    board: {
        width: 300,
        height: 300,
        backgroundColor: "#FFCCFF",
    },
    whiteCell: {
        width: 100,
        height: 100,
        backgroundColor: '#FFAA22',
        position: 'absolute',
    },
    blackCell: {
        width: 100,
        height: 100,
        backgroundColor: '#221122',
        position: 'absolute',
    },
    greenCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#23CC12',
        borderRadius: 50,
    },
    redCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#FF0000',
        borderRadius: 50,
    },
    blueCoin: {
        width: 100,
        height: 100,
        position: 'absolute',
        backgroundColor: '#0000FF',
        borderRadius: 50,
    },
});