title: Why is React Native Native Event pageX and pageY appearing inaccurate?
body: <p>I'm making a simple drag and drop ReactNative component in my application where the component can be dragged from one location to another. I'm trying to figure out why my component is not responding correctly to changes in its position. </p>
  
  <p>Even after setting the X and Y location to be pageX and pageY, it shifts downward first and slightly to the right. What is causing this slight change to happen?</p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Item extends React.Component
  {
     ...
  
      pressItem = (evt) =&gt; {
      this.setState({shouldRotate: true});
  
      if (evt.nativeEvent) {
  
          let newX = evt.nativeEvent.pageX;
          let newY = evt.nativeEvent.pageY;
          this.state.x = newX;
          this.state.y = newY;
  
  
  
      }
  
  };
   ...
  
      render()
      {
  
          return (
              &lt;View onStartShouldSetResponder={() =&gt; true}
                    onResponderRelease={this.releaseItem}
                    onResponderMove={this.pressItem}
                    style={[
                        styles.item,
                        {top: this.state.y,position: 'absolute',
                            left: this.state.x,
                            }]}&gt;
              &lt;Animated.Image source={this.props.imageURL}
                              resizeMode='contain'
                              style={{width: "100%", height: "100%",
                                  transform: [{rotate: this.state.spin}]}}/&gt;
              &lt;/View&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/Lq914.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lq914.gif" alt="enter image description here"></a></p>