React-native reanimated distance calculation to the View - react-native

Question

Today I want to make an animation to be determined by the user. In my example is when the user moves the square close and hit the red rectangle for example to write something in console. But i don't know how to calculate distance to the rectangle and I can't determine when the square touched the rectangle? So my code sa far -
import React from "react";
import { StyleSheet, View } from "react-native";
import {
GestureHandlerRootView,
PanGestureHandler,
PanGestureHandlerGestureEvent,
} from "react-native-gesture-handler";
import Animated, {
useAnimatedGestureHandler,
useAnimatedStyle,
useSharedValue,
withSpring,
withTiming,
} from "react-native-reanimated";
const SIZE = 100.0;
const CIRCLE_RADIUS = SIZE * 2;
type ContextType = {
translateX: number;
translateY: number;
size: number;
};
export default function App() {
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const size = useSharedValue(100);
const panGestureEvent = useAnimatedGestureHandler<
PanGestureHandlerGestureEvent,
ContextType
>({
onStart: (event, context) => {
context.translateX = translateX.value;
context.translateY = translateY.value;
size.value = 122;
},
onActive: (event, context) => {
translateX.value = event.translationX + context.translateX;
translateY.value = event.translationY + context.translateY;
},
onEnd: () => {
const distance = Math.sqrt(translateX.value ** 2 + translateY.value ** 2);
size.value = 100;
if (distance < CIRCLE_RADIUS + SIZE / 2) {
translateX.value = withSpring(30);
translateY.value = withSpring(50);
}
},
});
const rStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateX: translateX.value,
},
{
translateY: translateY.value,
},
],
width: withTiming(size.value, { duration: 160 }),
height: withTiming(size.value, { duration: 160 }),
};
});
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<View style={styles.container}>
<View style={styles.circle}>
<PanGestureHandler onGestureEvent={panGestureEvent}>
<Animated.View
style={[
{
width: size.value,
height: size.value,
backgroundColor: "rgba(0, 0, 256, 0.5)",
borderRadius: 20,
},
rStyle,
]}
/>
</PanGestureHandler>
</View>
<View
style={{ width: 30, height: 50, backgroundColor: "red", top: 80 }}
></View>
</View>
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
circle: {
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
alignItems: "center",
justifyContent: "center",
borderRadius: CIRCLE_RADIUS,
borderWidth: 5,
borderColor: "rgba(0, 0, 256, 0.5)",
},
});