Rect Native の Animated.Value で offsetの値を interpolate する方法はありますか？

Question

前提・実現したいこと

readt native の PanGestureHandler を使って Image を動かそうとしています。
Imageは無限に動かせるわけではなく範囲は決まっており、もしその範囲を超えて動かしていた場合、
アニメーションしながら範囲内までイメージを戻したいと思っています。

発生している問題・エラーメッセージ

scale などの Animated.Value ならば interpolate を使うといいんだろうなというのはわかるのですが、
Panの場合、

var _translateX = this.currentX;
var _translateY = this.currentY;

_translateX.setOffset(this._lastX);
_translateX.setValue(0);
_translateY.setOffset(this._lastY);
_translateY.setValue(0);

this.currentX = _translateX;
this.currentY = _translateY;

といったように Offset を指定する必要があり、この Offset を interpolate する方法がわかりません。

該当のソースコード

_handlePanGestureStateChange = (e: PanGestureHandlerGestureEvent) => {
  this._lastX += e.nativeEvent.translationX;
  this._lastY += e.nativeEvent.translationY;

  // ここで生の入力値を作成
  var lastX = this.currentX;
  var lastY = this.currentY;

  lastX.setOffset(this._lastX);
  lastX.setValue(0);
  lastY.setOffset(this._lastY);
  lastY.setValue(0);

  // 生の値 = lastX, lastY

  // ここでcrop済みの値を作成
  let minX = (this.state.width / 2 / this._lastScale - this.state.originalWidth / 2) * this._lastScale;
  let maxX = (this.state.originalWidth - this.state.width / 2 / this._lastScale - this.state.originalWidth / 2) * this._lastScale;
  let minY = (this.state.height / 2 / this._lastScale - this.state.originalHeight / 2) * this._lastScale;
  let maxY = (this.state.originalHeight - this.state.height / 2 / this._lastScale - this.state.originalHeight / 2) * this._lastScale;

  this._lastX = Math.max(Math.min(this._lastX, maxX), minX);
  this._lastY = Math.max(Math.min(this._lastY, maxY), minY);

  var cropedX = this.currentX;
  var cropedY = this.currentY;

  cropedX.setOffset(this._lastX);
  cropedX.setValue(0);
  cropedY.setOffset(this._lastY);
  cropedY.setValue(0);

  // crop済みの値 = cropedX, cropedY

  this.currentX = // ここで lastX から cropedX にアニメーションさせたい　
  this.currentY = // ここで lastY から cropedY にアニメーションさせたい
};

render() {
  return (
    <View style={[this.props.style, {borderColor: 'red', borderWidth: 2}]}>
      {/* imageを表示する部分 */}
      <View style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', overflow: 'hidden'}}>
        <Animated.View
          style={{
            width: '100%',
            height: '100%',
            transform: [
              { translateX: this.currentX },
              { translateY: this.currentY }
            ]
          }}
        >
          <Animated.View
            style={{
              width: '100%',
              height: '100%',
              transform: [
                { scale: this.state.scale }
              ]
            }}
          >
            {/* 拡縮の中心が画像の真ん中に来るようにすると計算が楽なのでコンポーネントが画面の真ん中に来るようにする */}
            <Image
             source={this.state.open == null ? { uri: '' } : { uri: this.state.open }}
             style={{
               width: this.state.originalWidth,
               height: this.state.originalHeight,
               position: 'absolute',
               top: -this.state.originalHeight / 2 + this.state.viewHeight / 2,
               left: -this.state.originalWidth / 2 + this.state.width / 2,
             }}
            />
          </Animated.View>
        </Animated.View>
      </View>
      {/* ジェスチャーのハンドリング */}
      <View
         onLayout={(e) => {
           {/* Viewのサイズを取得しておく */}
           let width = e.nativeEvent.layout.width;
           let viewHeight = e.nativeEvent.layout.height;
           let height = width * this.props.size[1] / this.props.size[0]
                          
           let scaleX = width / this.state.originalWidth;
           let scaleY = height / this.state.originalHeight;

           this.scaleMin = Math.max(scaleX, scaleY);
           //this.scaleMin = scaleX;

            this.setState({width: width, height: height, viewHeight: viewHeight})
          }}
           style={{position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', overflow: 'hidden', opacity: 0.5}}
       >
         <PanGestureHandler
           ref={this.panRef}
           waitFor={[this.pinchRef]}
           onGestureEvent={Animated.event(
             [{ nativeEvent: { translationX: this.currentX, translationY: this.currentY  } }],
               { useNativeDriver: true }
             )}
             onHandlerStateChange={this._handlePanGestureStateChange}
           >
              <Animated.View style={{ width: '100%', height: '100%', backgroundColor: 'blue' }}>
                 <PinchGestureHandler
                    ref={this.pinchRef}
                    onGestureEvent={Animated.event(
                      [{ nativeEvent: { scale: this.currentScale } }],
                       { useNativeDriver: true }
                    )}
                    onHandlerStateChange={this._handlePinchGestureStateChange}
                 >
                   <Animated.View style={{ width: '100%', height: '100%', backgroundColor: 'green', }}/>
                 </PinchGestureHandler>
               </Animated.View>
             </PanGestureHandler>
           </View>
         </View>
        );
    }

試したこと

this.currentX = croped.interpolate({
        inputRange: [0, 1],
        outputRange: [lastX, cropedX]
});

としてみたけどうまくいきません。

どのようにすればoffsetの値をinterpolateすることができるでしょうか？

補足情報（FW/ツールのバージョンなど）

Expo使ってます。

ここにより詳細な情報を記載してください。

Comments

[tgfjt]

タイトルの `Rect Native` を `React Native` に修正された方が検索しやすくて良いと思いますー！