PanResponder внутри увеличенного ScrollView

Question

Я пытаюсь создать перетаскиваемый компонент внутри масштабируемого ScrollView. Это работает очень хорошо, когда нет увеличения, но если я увеличиваю (ущипну, чтобы увеличить), когда я пытаюсь перетащить тот же компонент, поведение при перемещении не следует за касанием, это как перетаскиваемый элемент не знает, что ScrollView увеличен , Есть ли способ это исправить? вот мой код:

export default class App extends React.Component {
  state = {
    scroll: true,
    pan: new Animated.ValueXY()
  }
  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: () => this.setState({scroll: false}),
      onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]),
        onPanResponderRelease: () => this.setState({scroll: true})
    })
  }
  render() {
    return (
        <ScrollView 
        contentContainerStyle={{ alignItems: "enter", justifyContent: 'center', flex: 1 }} 
        scrollEnabled={false}                      
        >
        <ImageBackground 
            source={require('./assets/icon.1.png')} 
            style={{width: '100%', height: '100%'}}
            resizeMode='center'>
              <Animated.View 
                style={{transform: this.state.pan.getTranslateTransform(), position: 'absolute', left: 150, top: 150, width: 60, height: 60, borderRadius: 30, backgroundColor: '#1abc9c50'}}
                {...this._panResponder.panHandlers}
            >
                <Text>Drag Me</Text>
            </Animated.View>
          </ImageBackground>
        </ScrollView>
    );
  }
}