title: How to draw on the screen with React Native?
body: <p>I'm trying to implement an android drawing app in react native. I'm using the PanResponder but I don't know how to get the coordinates of the part that the user has touched. </p>
  
  <p>I've tried to use <code>react-native-svg</code> but I don't know where to place the <code>PanResponder</code> object.</p>
  
  <pre><code>class App extends React.Component {
    constructor(props){
      super(props);
      this._panResponder={};
      this._previousLeft = 0;
      this._previousTop = 0;
      this._circleStyles = {};
      this.circle = null;
    }
    componentWillMount(){
      this._panResponder = PanResponder.create({
              onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
        onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
        onPanResponderGrant: this._handlePanResponderGrant,
        onPanResponderMove: this._handlePanResponderMove,
        onPanResponderRelease: this._handlePanResponderEnd,
        onPanResponderTerminate: this._handlePanResponderEnd,
      });
      this._previousLeft = 20;
      this._previousTop = 84;
      this._circleStyles = {
        style: {
          left: this._previousLeft,
          top: this._previousTop,
          backgroundColor: 'green',
        }
      };
    }
    componentDidMount() {
      this._updateNativeStyles();
    }
  
  
   render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;View style={styles.circle}
            ref={(circle) =&gt; {
              this.circle = circle;
            }}
            { ...this._panResponder.panHandlers }
          /&gt;
        &lt;/View&gt;
      );
    }
  
    _highlight = () =&gt; {
      this._circleStyles.style.backgroundColor = 'blue';
      this._updateNativeStyles();
    }
  
    _unHighlight = () =&gt; {
      this._circleStyles.style.backgroundColor = 'green';
      this._updateNativeStyles();
    }
  
    _updateNativeStyles() {
      this.circle &amp;&amp; this.circle.setNativeProps(this._circleStyles);
    }
  
    _handleStartShouldSetPanResponder() {
      return true;
    }
  
    _handleMoveShouldSetPanResponder() {
      return true;
    }
  
    _handlePanResponderGrant = (e, gestureState) =&gt; {
      this._highlight();
    }
  
      _handlePanResponderMove = (e, gestureState) =&gt; {
      this._circleStyles.style.left = this._previousLeft + gestureState.dx;
      this._circleStyles.style.top = this._previousTop + gestureState.dy;
      this._updateNativeStyles();
    }
  
    _handlePanResponderEnd = (e, gestureState) =&gt; {
      this._unHighlight();
      this._previousLeft += gestureState.dx;
      this._previousTop += gestureState.dy;
    }
  
  }
  </code></pre>
  
  <p>In this example, the circle moves but I want it to leave a trail. This can be done by getting the coordinates of the points where there circle has moved and then adding color to that point.</p>