title: Get coordinates of touch event relative to Image
body: <p>I have an image centered on the screen. I need to make it touchable and I need to get the coordinates of the touch event relative to the image. I have wrapped my image in a TouchableOpacity to make it touchable. The problem is that the touch coordinates are relative to the TouchableOpacity and not the Image. The TouchableOpacity is taking up the entire screen but the Image is centered inside it. </p>
  
  <p>I either need to make my TouchableOpacity the same size as the Image, or I need to know the offset of the Image within the TouchableOpacity. </p>
  
  <p>I have tried using OnLayout and the NativeEvent object to get the position of the Image within it's parent but it just returns 0,0.</p>
  
  <pre><code>    const {width, height} = Dimensions.get("window");
  
      class Inspection extends React.Component {
  
          handlePress(evt) {
              // do stuff
              ...
          }
  
          render() {
              return (
                  &lt;View style={{flex:1, backgroundColor:'#fff'}}&gt;
                      &lt;TouchableOpacity 
                          onPress={(evt) =&gt; this.handlePress(evt)}
                          style={{backgroundColor: '#3897f0'}}
                      &gt;
                          &lt;Image 
                              onLayout={({nativeEvent}) =&gt; {
                                  console.log(nativeEvent.layout);
                              }}
                              source={require('../../images/wireframe-car.jpg')}
                              resizeMode='contain'
                              style={{
                                  maxHeight: height,
                                  maxWidth: width
                                  }} 
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
              );
          }
      }
  </code></pre>
  
  <p>Console Output:</p>
  
  <pre><code>{height: 683.4285888671875, width: 411.4285583496094, y: 0, x: 0}
  </code></pre>
  
  <p>I've added a backgroundColor to TouchableOpacity so you can see that it takes up the entire screen. </p>
  
  <p><a href="https://i.stack.imgur.com/p5TDS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p5TDS.png" alt="Screenshot"></a></p>
  
  <p>Is there another way of doing this?</p>