How to use the rax-animated.ValueXY function in rax-animated

import {createElement, Component, render, setNativeProps} from 'rax';
import View from 'rax-view';
import PanResponder from 'universal-panresponder';
import Animated from 'rax-animated';

class Drag extends Component {
  state = {
    pan: new Animated.ValueXY(),
    scale: new Animated.Value(1),
  };

  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
  }

  render() {
    // Destructure the value of pan from the state

import {createElement, Component, render} from 'rax';
import Text from 'rax-text';
import View from 'rax-view';
import Image from 'rax-image';
import Animated from 'rax-animated';

class AnimatedSample extends Component {
  state = {
    bounceValue: new Animated.Value(0),
    translateValue: new Animated.ValueXY({
      x: 0,
      y: 0
    }),
    rotateValue: new Animated.Value(0),
  };

  render() {
    return (