iink SDK Web

Answered

React MyScript on Mobile Browsers

 Hi,

The MyScript canvas runs perfectly on desktop browsers (Chrome/Safari), but it doesn't respond on my iPad and acts strangely on my Android tablet (pictured at the bottom).

I can get the example at https://github.com/MyScript/web-integration-samples/tree/master/react-integration-examples working perfectly on desktop browsers but not mobile browsers. Below is my package.json dependencies. My app.js is a copy and paste of the example code below except the keys

https://github.com/MyScript/web-integration-samples/blob/master/react-integration-examples/src/App.js

 "dependencies": {
 "myscript""^4.3.0",
 "node""^11.12.0",
 "npm""^6.9.0",
 "react""^16.8.5",
 "react-dom""^16.8.5",
 "react-scripts""2.1.8",
 "typescript""^3.3.4000"
 },



image




Best Answer

I figured it out. The editor div needs touch-action="none" as well. It's missing from line 23 of the App.js example. Thanks for the help!




 Dear Winston Zhao,

Thank you for contacting us.

In order to have the example run on the mobile browsers as well, here are the updates to be done:

1 - Add PEP (Pointer Events Polyfill)  in index.html so that touch-action none works everywhere.

2 - Force the size and add the  'touch-action': 'none' property for the editor style in the App.js:

const editorStyle = {

 'minWidth': '100px',

 'minHeight': '100px',

 'width': '100vw',

 'height': 'calc(100vh - 190px)',

 'touch-action': 'none',

};

The GIT example https://github.com/MyScript/web-integration-samples/tree/master/react-integration-examples has been updated to take into account those two modifications.

Regards,

Gwenaëlle









Thanks for updating the Git. It's now working on Android Chrome and the Chrome iPad Simulator. It's still not working on the XCode simulator or the physical iPad. Is there something else that I'm missing? I'm using Chrome on the iPad.

 Hi,

Which IOS and browsers version are you using on the iPad?

We recommand you using the latest versions.

Regards,

Gwenaëlle

iOS 12.1.4 

Chrome 73.0.3683.68

Safari is the latest as well.

Answer

I figured it out. The editor div needs touch-action="none" as well. It's missing from line 23 of the App.js example. Thanks for the help!



Dear Winston Zhao,


Thank you for your feedback.

We have updated the GIT example accordingly.


Regards,


Gwenaëlle