React native get the coordinates of my touch event

react native touch events
react native get coordinates of view
react native panresponder
react native touchableopacity
how to get view location in react native
react native get component bounds
react-native bubble event
react native measure

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.


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}`);
}

React Native Get Clicked Position of Touch Screen Coordinates , Create componentWillMount() inbuilt function in your class and make the PanResponder inbuilt all events inside it with our created this. I want to get my coordinates in every 1 minute even app close or background. But what ever I did, I couldnt do that. I used background-task but it works minimum in every 7m30s so it doesn't help me


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.

React native get the coordinates of my touch event, 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. I am building an application (using react native) for people with Parkinson's Disease. A common symptom of the disease is a tremor, so if possible I would like to ignore multiple touch events. So


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.

Get coordinates of touch event relative to Image, 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​  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. React native get the coordinates of my touch event. 2


React Native Get Clicked Location of Touchscreen Using , To get the clicked location of touchscreen React Native provides an easy to panResponder = PanResponder.create({ onStartShouldSetPanResponder: (​event, //This is an example code to Get the Clicked Position of Touch Screen Using  So, I need to get coordinates of my touch on ImageView. I have already successfully tried to get coordinates in OnTouchListener event. But it is not what i really need. The problem is that the resolution of the screen is much lower than the resolution of the picture in ImageView. How to get actual coordinates (maybe certain pixels) of the image?


Gesture Responder System · React Native, For example, the app needs to determine if the touch is scrolling, sliding on a changedTouches - Array of all touch events that have changed since the last relative to the element; pageX - The X position of the touch, relative to the root  Setup a touch listener. In order to make your OpenGL ES application respond to touch events, you must implement the onTouchEvent() method in your GLSurfaceView class. The example implementation below shows how to listen for MotionEvent.ACTION_MOVE events and translate them to an angle of rotation for a shape.


PanResponder · React Native, changedTouches - Array of all touch events that have changed since the last event; identifier - The ID of the touch; locationX - The X position of the touch, relative  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.