Get coordinates of touch event relative to Image

Question

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.

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.

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.

    const {width, height} = Dimensions.get("window");

    class Inspection extends React.Component {

        handlePress(evt) {
            // do stuff
            ...
        }

        render() {
            return (
                <View style={{flex:1, backgroundColor:'#fff'}}>
                    <TouchableOpacity 
                        onPress={(evt) => this.handlePress(evt)}
                        style={{backgroundColor: '#3897f0'}}
                    >
                        <Image 
                            onLayout={({nativeEvent}) => {
                                console.log(nativeEvent.layout);
                            }}
                            source={require('../../images/wireframe-car.jpg')}
                            resizeMode='contain'
                            style={{
                                maxHeight: height,
                                maxWidth: width
                                }} 
                        />
                    </TouchableOpacity>
                </View>
            );
        }
    }

Console Output:

{height: 683.4285888671875, width: 411.4285583496094, y: 0, x: 0}

I've added a backgroundColor to TouchableOpacity so you can see that it takes up the entire screen.

Is there another way of doing this?

Answer 1

TouchableOpacity would be the same size as of the Image because you haven't given any height to it, you simply need to assign onLayout prop to your TouchableOpacity like this

      <View
        style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
        <TouchableOpacity
          onLayout={({ nativeEvent }) => {
            console.log(nativeEvent.layout)
          }}
          style={{}}
          onPress={evt => this.handlePress(evt)}>
          <Image
            source={require('../../images/wireframe-car.jpg')}
            resizeMode="contain"
            style={{
              maxWidth: '100%',
            }}
          />
        </TouchableOpacity>
      </View>

This will give you the exact x and y of Image.

Update

The problem is also with image size, since the image size is quite big so it takes the height of the device and we get x:0 and y:0, in order to resolve this issue we can give the Image component a static height or calculate its height according to width. We can get width and height image from local path like this:

let imageUri = Image.resolveAssetSource(require('../../images/wireframe-car.jpg').uri)
    Image.getSize(imageUri , (width, height) => { 
    console.log(`The image dimensions are ${width}x${height}`); 
    }, (error) => { 
    console.error(`Couldn't get the image size: ${error.message}`); 
    });