React Native Gesture Reponder inside hybrid app

Question

I'm trying to use the touch event position when clicking a image to start animating a image from that location and to the center of the screen.

When react native is taking the full screen this is not a issue. But when React Native is running in a hybrid app and the screen that is rendered by React Native is not taking up the whole screen (like in a split view mode, or in a popup view on iPad) the nativeEvent coordinates are all relative to the view where React Native is rendering, and not the actual screen.

I would like to get the actual screen coordinates where the touch is happening. Is there any workaround to make this happen?

From the documentation of the Gesture Responder System all the events are relative to the root element. And I assume this means the root element of react native.

I did some experimenting and the react native Dimensions do give me the correct screen size. I was first thinking of using that to calculate the offset of where the React Native screen is being rendered. But I can't really know how much spacing is at the top/bottom/left/right of the view with just this data.

Answer 1

Figured it out.

I can use measureInWindow to figure out the actual screen coordinates when React Native is running in a subview of a hybrid app.

onPress = () => {
   this.refs.button.measureInWindow((x, y, width, height) => {
     console.log("x", x, "y", y);
   })
}

render() {
  <TouchableOpacity ref="button" onPress={this.onPress}>
    ...
  </TouchableOpacity>
}