Así que estoy tratando de implementar un círculo arrastrable que se puede mover hacia arriba y hacia abajo aleatoriamente dentro de un elemento svg. Estoy usando el elemento Svg de react-native-svg y dentro tengo varios de los siguientes componentes personalizados:

 const panGestureHandler = useAnimatedGestureHandler({ onStart: (event, context) => { context.translateY = translateY.value; console.log("start"); }, onActive: (event, context) => { console.log(event.translationY); let tmp = event.translationY + context.translateY; if (posY + tmp >= svgHeight) { translateY.value = svgHeight - posY; } else if (posY + tmp <= 0) { translateY.value = -posY; } else { translateY.value = tmp; } }, onEnd: (event, context) => { console.log("end"); }, }); const translateStyle = useAnimatedStyle(() => { return { transform: [ { translateY: translateY.value, }, ], }; }); return ( <PanGestureHandler onGestureEvent={panGestureHandler} style={translateStyle}> <AnimatedCircle cx={posX} cy={posY} r={radius} fill={color} stroke={color} style={translateStyle} animatedProps={strokeAnimation} /> </PanGestureHandler> );

El onActive inside panGestureHandler debería evitar el arrastre fuera del svg. AnimatedCircle es un componente animado de react-native-reanimated e implementado así:

 import { Circle } from "react-native-svg"; const AnimatedCircle = Animated.createAnimatedComponent(Circle);

Sin embargo, la mayoría de las veces, el arrastre solo funciona en el último elemento creado (creado mientras se itera sobre una matriz) y una vez que se mueve hacia arriba o hacia abajo, ya no se puede mover.

Pero si arrastro el círculo a alguna parte y luego lo coloco en su punto de inicio, puedo arrastrarlo de nuevo.

Probarlo sin el estilo en PanGestureHandler produce el mismo resultado por cierto.

Cualquier ayuda es apreciada :)