custom postMessage crashes react-native-canvas

[peacechen]

I'm porting a mini-game which uses canvas. This requires user interaction, so I injected a touch handler that posts a message to pass the event back to the RN side.

    this.onkeypress = 'window.addEventListener("touchstart", function (e) { window.postMessage("touchstart") } );';
    canvas.webview.injectJavaScript(this.onkeypress);

However, handleMessage() in Canvas.js tries to parse this as JSON which crashes.

    var data = JSON.parse(e.nativeEvent.data);

I tried passing in serialized JSON, but the rest of the code needs id, meta, and payload fields in a specific way which the app has no visibility into. I got it to work by wrapping the JSON.parse in a try-catch block, and if it catches, pass data directly to listeners and skip the rest including the bus call.

Would you be interested in a PR? Or is there a better way to accomplish this?

[iddan]

Hey! Thanks for giving React Native Canvas a try.
You shouldn't count on <Canvas /> being a WebView as it might change in the future. You should manage all user interaction events on the RN side. To do so wrap the <Canvas /> element with a <TouchableWithoutFeedback /> to get touch events.
Let me know if that solves your problem.

[peacechen]

I did try wrapping it in TouchableWithoutFeedback but no touch events would fire. I didn't dig down into exactly what was going on, but I'm guessing the WebView is swallowing the events. Strange, but that's what I observed.

[iddan]

Just wrap the <Canvas /> component with a <View /> that is with the same dimensions as it is and that should fix it.