title: React Native PanGesture set pan position from tap
body: <p>I'm currently working on an HSV-Colorpicker component for a react-native project I have. I have everything setup so that I have a draggable object on the HSV-canvas and a slider next to it to handle the hue change.</p>
  
  <p>However, I now want to be able to set the position of the draggable object by clicking on the hsv-canvas. I got it working so that the draggable element moves to the right position, however, when I then try to drag the element with a pan-gesture again, the offset for the pan-gesture starts from the wrong position.</p>
  
  <p>Here is the corresponding parts of code:</p>
  
  <pre><code>setPanFromTouch(event) {
      const x = event.nativeEvent.locationX;
      const y = event.nativeEvent.locationY;
      const gesture = {
          moveX: x,
          moveY: y
      };
      this.state.pan.setOffset({ x: x, y: y });
      this.state.pan.setValue({ x: 0, y: 0 });
      this.updateColorFromGesture((gesture as any));
  }
  //inside the render method those are the 2 components that respond to 
  //touches and pans
  //Parent container for the HSV-hue and the draggable element 
  &lt;TouchableWithoutFeedback
          style={{
          width: this.props.colorBoxWidth,
          height: this.props.height
      }}
      onPress={this.setPanFromTouch}
  &gt;
  &lt;Animated.View
      {...this.panResponder.panHandlers}
      style={[this.state.pan.getLayout(), {
      height: this.draggableSize,
      width: this.draggableSize,
      borderRadius: this.draggableSize / 2,
      backgroundColor: 'transparent',
      borderColor: '#fff',
      borderWidth: 1
      }]}&gt;
  &lt;/Animated.View&gt;
  //pan-gesture setup inside the constructor method
  (this as any).panResponder = PanResponder.create({
          onMoveShouldSetPanResponder: () =&gt; true,
          onMoveShouldSetPanResponderCapture: () =&gt; true,
          onStartShouldSetPanResponder: () =&gt; true,
          onPanResponderGrant: () =&gt; {
              this.state.pan.setOffset({ x: this.state.panValues.x, y: this.state.panValues.y });
              this.state.pan.setValue({ x: 0, y: 0 });
          },
          onPanResponderMove: Animated.event([null, {
              dx: this.state.pan.x,
              dy: this.state.pan.y
          }]),
          onPanResponderRelease: (e: GestureResponderEvent, gesture: PanResponderGestureState) =&gt; {
                  this.state.pan.flattenOffset();
                  this.updateColorFromGesture(gesture);
          }
      });
  //component will mount code
  componentWillMount() {
      this.state.pan.addListener((c) =&gt; this.setState({
          ...this.state,
          panValues: c
      }));
  }
  </code></pre>
  
  <p>I know that inside the <code>onPanResponderGrant</code> I am resetting the offset again, however this is necessary for the dragging to work correctly. I also tried to set the new values for <code>this.state.panValues.x</code> and <code>this.state.panValues.y</code> after updating the pan position from the touch event but setState does not change the behavior at all.</p>
  
  <p>This is what the colorpicker looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/XDMFg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XDMFg.png" alt="colorpicker result"></a></p>
  
  <p>I would be really grateful if someone has an idea what I could do in this situation. Let me know if you need more code or anything else. Thanks in advance :)</p>