Detect the touch events on GLView

Expo SDK
1

Does anyone know if on GLView we can detect the synthetic touch events from the View component? onResponderGrant, onResponderMove, and so on…

Or maybe is there some other way to detect touch events from GLView?

I didn’t find such info in the docs, forums, neither Google.

Thanks.

1 Like
2

Hi, yes, I think either just pass the responder props into the GLView, or if that doesn’t work, pass them into its container view. Once you receive the touch events you will need to convert the touch coordinates from screen space to your GL view’s camera/world space.

3

Hi Ben, thanks for the response.

Neither the GLView or the container View are receiving the touch events. I also added pointerEvents="none" but no touch event is received:

  _onResponderGrant = (event) => {
    console.log(`_onResponderGrant`);
  }

  _onResponderMove = (event) => {
    console.log(`_onResponderMove`);
  }

  _onResponderRelease = (event) => {
    console.log(`_onResponderRelease`);
  }

  render() {
    return (
      <View style={styles.container}
        onResponderGrant={this._onResponderGrant}
        onResponderMove={this._onResponderMove}
        onResponderRelease={this._onResponderRelease}>
        <GLView
          onContextCreate={this._onContextCreate}
          pointerEvents="none"
        />
      </View>
    );
  }

If that doesn’t work, I’ll use a WebView and implement that directly in web.

Thanks.

4

Does this work when the target is not a GLView but (say) a regular View instead? That’s one way to debug this. In any case, using a PanResponder is known to work, as in https://github.com/expo/gl-test/blob/master/Scenes/THREEBasicTouchScene.js – just in your case rather than a THREEView you would use a GLView.

5

Hi Ben, can you explain a bit more about how to convert the touch coordinates into the GLView coordinates? I put the responder props on the container View and it is detecting touches. I am also using expo-2d-context for drawing inside the GLView if that helps.

6

I’m looking to do something like this as well.

7

For anyone else coming here, you have to tell GLView that it should respond to touch events or it won’t…

<GLView 
  onStartShouldSetResponder={() => true} 
  onResponderGrant={/*...*/} 
  {...props} 
/>