title: React Native Animated - Start animation at touch location
body: <p>I'm playing around with animation in React Native. Want to build a Screen that allows a user to touch the screen at any point. When they do, a circle should appear at the location of their finger, and follow it around. When they release, the circle should shrink back to nothing. </p>
  
  <p>I started following <a href="https://mindthecode.com/getting-started-with-the-panresponder-in-react-native/" rel="nofollow noreferrer">this tutorial</a>, which is for a spring-like animation, in which you drag a preexisting square (which starts in the center of the screen), and it springs back on release. </p>
  
  <p>In my case, the circle should have <strong>no</strong> preexisting location, and this is causing the problem. If I initialize my component state, with, say, <code>pan: new Animated.ValueXY()</code>, and then touch the screen, the circle starts in the upper left corner, <strong>not</strong> where my finger is. I've tried a variety of other solutions, all replacing the commented line in the onPanResponderGrant method below, but can't seem to figure it out. </p>
  
  <p>How do I have an animation that simply has the component track my finger without starting or returning anywhere?</p>
  
  <p>Here's the code for the component:</p>
  
  <pre><code>class FollowCircle extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        pan: new Animated.ValueXY(),
        scale: new Animated.Value(0)
      };
    }
  
    componentWillMount() {
      this._panResponder = PanResponder.create({
        onStartShouldSetPanResponderCapture: () =&gt; true,
        onMoveShouldSetPanResponderCapture: () =&gt; true,
  
        onPanResponderGrant: (e, gestureState) =&gt; {
          // This is the line I'm playing with
          this.state.pan.setValue({ x: this.state.pan.x._value, y: this.state.pan.y._value });
  
          Animated.spring(
            this.state.scale,
            { toValue: 1, friction: 3 },
          ).start();
        },
  
        onPanResponderMove: Animated.event([
          null, { dx: this.state.pan.x, dy: this.state.pan.y }
        ]),
  
        onPanResponderRelease: (/* e, gestureState */) =&gt; {
          this.state.pan.flattenOffset();
          Animated.spring(
            this.state.scale,
            {
              toValue: 0,
              friction: 10,
              restDisplacementThreshold: 1
            },
          ).start();
        }
      });
    }
  
    render() {
      const { pan, scale } = this.state;
      const circleStyles = {
        backgroundColor: 'black',
        width: 50,
        height: 50,
        borderRadius: 25,
        transform: [
          { translateX: pan.x },
          { translateY: pan.y },
          { scale }
        ]
      };
  
      return (
        &lt;AppWrapper navigation={ this.props.navigation }&gt;
          &lt;Animated.View
            style={ {
              flex: 1,
              width: Dimensions.get('window').width,
              height: Dimensions.get('window').height,
              backgroundColor: 'white'
            } }
            { ...this._panResponder.panHandlers }
          &gt;
            &lt;Animated.View
              style={ circleStyles }
            /&gt;
          &lt;/Animated.View&gt;
        &lt;/AppWrapper&gt;
      );
    }
  };
  </code></pre>
  
  <p>And here are my alternative attempts (replacements for the commented line):</p>
  
  <pre><code>this.state.pan.setValue({ x: gestureState.x0, y: gestureState.y0 });
  </code></pre>
  
  <p>And this one:</p>
  
  <pre><code>  if (this.state.pan) {
      this.state.pan.setValue({ x: this.state.pan.x._value, y: this.state.pan.y._value });
    } else {
      this.setState({ pan: new Animated.ValueXY(gestureState.x0, gestureState.y0) });
    }
  </code></pre>
  
  <p>Both seem to behave similarly, resetting the circle location in the upper left after each movement, and not quite tracking my finger location unless I start my touch at that origin.</p>
  
  <p>Any ideas how to do this correctly?</p>