React Native Reanimated разрешает перетаскивание только в определенной области

Question

Я работаю над приложением для студентов с особыми потребностями, чтобы они могли научиться писать. Для этого им нужно много повторений начертания букв, и я подумал, что использование реанимированного будет лучшим способом добиться этого. На данный момент у меня есть круг, который можно перетаскивать в любом месте экрана, но мне нужно, чтобы его можно было перетаскивать только в определенной области. Этой областью может быть буква (например, «А»), где ученику нужно перетащить ее от начала до конца и не может выйти за ее пределы. По сути, они будут отслеживать письмо. Однако это мой первый проект React Native, и я довольно застрял. Может ли кто-нибудь помочь мне в этом? Это код, который у меня сейчас есть:

      import React, { useState } from 'react'
import {
  StyleSheet,
  View,
  Dimensions,
} from 'react-native'
import { PanGestureHandler, State } from 'react-native-gesture-handler'
import Animated from "react-native-reanimated"

const { Value, event, cond, eq, add, set, interpolate, extrapolate } = Animated
const {width, height } = Dimensions.get('window')
export default class App extends React.Component {
  dragX = new Value(0)
  dragY = new Value(0)
  gestureState = new Value(-1)
  offsetX = new Value(width/2)
  offsetY = new Value(height/2)

  onGestureEvent = event([
    {
      nativeEvent: {
        translationX: this.dragX,
        translationY: this.dragY,
        state: this.gestureState
      }
    }
  ])
  transX = cond(
     eq(this.gestureState, State.ACTIVE),
     add(this.offsetX, this.dragX),
     set(this.offsetX, add(this.offsetX, this.dragX))
  )
  transY = cond(
    eq(this.gestureState, State.ACTIVE),
    add(this.offsetY, this.dragY),
    set(this.offsetY, add(this.offsetY, this.dragY))
 )

 opacity = interpolate(this.transY, {
  inputRange: [0, height],
  outputRange: [0.1,1 ]
 })
  
  render() {
    return (
      <View style={styles.container}>
        <PanGestureHandler onGestureEvent={this.onGestureEvent}
        onHandlerStateChange={this.onGestureEvent}
        >
          <Animated.View style={[styles.box, {
            opacity: this.opacity,
            transform: [{
              translateX: this.transX,
              translateY: this.transY,
            }]
          }]}/>
        </PanGestureHandler>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  box: {
    width: 50,
    height: 50,
    marginLeft: 34,
    marginTop: 115,
    backgroundColor: 'blue',
    zIndex: 200,
    borderRadius: 30,
  },
  image: {
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
    height: 500,
  },
})

Любая помощь будет принята с благодарностью!