Animated.Image with PanResponder 'react-native - react-native

Question

I am using Animated.Image inside a scrollView. I apply a pan responder to the Animated.Image.
The problem: when I move the image for big distance, it disappears.
The question: how can I adjust the Animated.Image to stay within specific boundaries when i move it?
My code:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Animated,
PanResponder,
ScrollView
} from 'react-native';
var xPosition, yPosition;
var position;
export default class AvatarEditor extends Component {
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY(), // inits to zero
image: this.props.image,
border: this.props.border,
width: this.props.width,
height: this.props.height,
viewWidth: this.props.width + 2 * this.props.border,
viewHeight: this.props.height + 2 * this.props.border,
first: true,
left: 0,
top: 0,
xPosition: 0,
yPosition: 0,
translateX: 0,
translateY: 0
};
}
componentWillMount() {
this._animatedValueX = 0;
this._animatedValueY = 0;
this.state.pan.x.addListener((value) => this._animatedValueX = value.value);
this.state.pan.y.addListener((value) => this._animatedValueY = value.value);
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true, //Tell iOS that we are allowing the movement
onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({ x: this._animatedValueX, y: this._animatedValueY });
this.state.pan.setValue({ x: 0, y: 0 }); //Initial value
},
onPanResponderMove: (evt, gestureState) => {
// Animated.event([
// null, { dx: this.state.pan.x, dy: this.state.pan.y }
// ]) // Creates a function to handle the movement and set offsets
newdx = gestureState.dx;
newdy = gestureState.dy;
Animated.event([
null, { dx: this.state.pan.x, dy: this.state.pan.y },
])(evt, { dx: newdx, dy: newdy });
},
onPanResponderRelease: () => {
this.state.pan.flattenOffset(); // Flatten the offset so it resets the default positioning
}
});
}
componentDidMount() {
}
componentWillUnmount() {
this.state.pan.x.removeAllListeners();
this.state.pan.y.removeAllListeners();
}
render() {
var imageStyle = {
width: this.state.width,
height: this.state.height,
resizeMode: 'stretch',
top: this.state.top,
left: this.state.left,
transform: [
{ translateX: this.state.pan.x },//this.state.pan.x
{ translateY: this.state.pan.y },
{ scale: this.props.scale }
]
};
return (
<View
style={[this.props.style, { backgroundColor: 'gray' }]}
>
<ScrollView
style={{
width: this.state.viewWidth,
height: this.state.viewHeight,
borderWidth: this.state.border,
borderColor: 'rgba(100, 100, 100, 0.5)',
overflow: 'hidden',
}}
scrollEnabled={false}
>
<Animated.Image
style={imageStyle}
source={{ uri: this.state.image }}
{...this._panResponder.panHandlers}
>
</Animated.Image>
</ScrollView>
</View>
);
}
}
AvatarEditor.propTypes = {
scale: React.PropTypes.number,
image: React.PropTypes.string,
border: React.PropTypes.number,
width: React.PropTypes.number,
height: React.PropTypes.number,
style: React.PropTypes.object
};
AvatarEditor.defaultProps = {
scale: 1,
border: 25,
width: 200,
height: 200,
style: {
top: 50,
left: 25,
position: 'absolute',
},
image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQesv5ucRQ1KUNtDipnrhS6Gn9yMn7GOqFdQGTeLMG1fCKGvudEUji_Aw',
};