React native get the coordinates of my touch event

Question

How would I get the coordinates of my touch event. So I tap anywhere within the display and I can retrieve the X, Y positioning of where it happened.

Answer 1

You will need to wrap your view object with TouchableOpacity or one of the other Touchable components. With TouchableOpacity you have the onPress prop that is passed a press event. From this press event you have access to the x,y coordinates of the press.

pseudo code would look like this:

render() {
 ....

<TouchableOpacity onPress={(evt) => this.handlePress(evt) } 
 .... > 
 <View></View>
</TouchableOpacity>
}

handlePress(evt){
  console.log(`x coord = ${evt.nativeEvent.locationX}`);
}

Answer 2

Put it on your view tag and you can get all coordinates

<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />

For example

<View onTouchStart={(e) => {console.log('touchMove',e.nativeEvent)}} />

However this event only work with tag. so you can set view according to your requirement.

Answer 3

If you want more flexibility than what is offered by a button such as TouchableOpacity (eg. if you want gesture move events), then you'll need to make use of the gesture responder system. This allows components to subscribe to touch events.

I've included example implementations for all of the gesture response event handlers, but have commented out most of them on my View to just provide the basic functionality: subscribing to all touch and move events. I demonstrate arrow syntax for the boolean functions, and use the old-fashioned bind() syntax for calling my custom onTouchEvent(name, ev) function.

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';

export class Battlefield extends Component {
    constructor(props) {
        super(props);
    }

    // The event 'ev' is of type 'GestureResponderEvent'. Documentation for ev.nativeEvent:
    // https://facebook.github.io/react-native/docs/gesture-responder-system.html
    onTouchEvent(name, ev) {
        console.log(
            `[${name}] ` + 
            `root_x: ${ev.nativeEvent.pageX}, root_y: ${ev.nativeEvent.pageY} ` +
            `target_x: ${ev.nativeEvent.locationX}, target_y: ${ev.nativeEvent.locationY} ` + 
            `target: ${ev.nativeEvent.target}`
        );
    }

    render() {
        return (
            <View
                style={styles.container}
                onStartShouldSetResponder={(ev) => true}
                // onMoveShouldSetResponder={(ev) => false}
                onResponderGrant={this.onTouchEvent.bind(this, "onResponderGrant")}
                // onResponderReject={this.onTouchEvent.bind(this, "onResponderReject")}
                onResponderMove={this.onTouchEvent.bind(this, "onResponderMove")}
                // onResponderRelease={this.onTouchEvent.bind(this, "onResponderRelease")}
                // onResponderTerminationRequest={(ev) => true}
                // onResponderTerminate={this.onTouchEvent.bind(this, "onResponderTerminate")}
            >
                <Text>Click me</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'relative',
        height: "100%",
        width: "100%",
        backgroundColor: 'orange'
    }
});

If this is still not enough functionality for you (eg. if you need multi-touch info), refer to PanResponder.