PanResponder limit to parent container view - reactjs

Question

I am using PanResponder for a draggable box on the screen, but it can currently move off the screen. After reading the (very confusing) documentation with no examples, is there a way to constrain the box to not move off the screen?
Here's what I have:
componentWillMount () {
this.animatedValue = new Animated.ValueXY()
this.value = {x: 0, y: 0}
this.animatedValue.addListener(value => this.value = value)
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => {
return gestureState.dx !== 0 && gestureState.dy !== 0
},
onPanResponderGrant: (e, gestureState) => {
this.animatedValue.setOffset({
x: this.value.x,
y: this.value.y,
})
this.animatedValue.setValue({x: 0, y: 0})
},
onPanResponderMove: (e, gestureEvent) => {
this.pan(gestureEvent)
Animated.event([
null, {dx: this.animatedValue.x, dy: this.animatedValue.y}
])
},
onPanResponderRelease: (e, gestureState) => {
this.animatedValue.flattenOffset()
Animated.decay(this.animatedValue, {
velocity: {x: gestureState.vx, y: gestureState.vy}
}).start()
}
})
}
render () {
return (
<Animated.View
{...this.panResponder.panHandlers}
style={styles.box}
>
<Image source={{uri: 'uri'}} style={styles.imageDimensions} />
</Animated.View>
)
}

Answer 1

I made a basic code that can help you if you modify it. The Animated.View can not be moved to a negative position in the X coordinate.
import React from 'react';
import { View, Animated, PanResponder } from 'react-native';
let _value = {x: 0, y:0};
const _animatedValue = new Animated.ValueXY();
let xOffset = 0;
export default function App() {
React.useEffect(()=> {
const listener = _animatedValue.addListener(
(value) => _value = value
);
return () => {
_animatedValue.removeListener(listener);
}
}, []);
const panResponder = React.useMemo(() => PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
onPanResponderGrant: (_, gesture) => {
xOffset= (xOffset + gesture.dx >= 0) ? _value.x : 0;
_animatedValue.setOffset({x: xOffset, y: _value.y});
_animatedValue.setValue({x: 0, y: 0});
},
onPanResponderMove: (_, gesture) => {
if (xOffset + gesture.dx >= 0) {
_animatedValue.setValue({ x: gesture.dx, y: 0 });
} else {
xOffset = 0;
_animatedValue.setOffset({x: 0, y: _value.y});
_animatedValue.setValue({ x: 0, y: 0 });
}
},
onPanResponderRelease: () => {
_animatedValue.flattenOffset();
}
}), []);
return <View
style={{
flex: 1,
alignItems: 'center',
alignContent: 'center'
}}
>
<View
style={{
width: 500,
height: 200,
position: 'relative',
}}
>
<View
style={{
width: 500,
height: 2,
backgroundColor: 'red',
top: 100,
position: 'absolute'
}}
>
<Animated.View
{...panResponder.panHandlers}
style={{
width: 10,
height: 10,
backgroundColor: 'blue',
borderRadius: 5,
position: 'absolute',
zIndex: 2,
transform: _animatedValue.getTranslateTransform()
}}
></Animated.View>
</View>
</View>
</View>
}