Detect whether touch was Apple Pencil or finger in webview (react native)

Question

In safari mobile, touches can be classified as Apple Pencil vs other (finger/ mouse) using:

event.touches[0].touchType === 'stylus' //pencil
event.touches[0].touchType !== 'stylus' //other

However all events received in a react native webview (both for Apple Pencil and using a finger) are receiving:

touchType === 'direct' //inside webview, both pencil and other

How can I detect a touch with the Apple Pencil inside a webview?

Apparently event.touches[0] > 0 is another possibility but this is also being set to 0 for both types in webview.

(Not sure if this is an issue with react native or a built-in limitation of webviews).

Related:

• UIView do not react on Apple Pencil
• Javascript touch event: distinguishing finger vs. Apple Pencil

Answer 1

I resolved this issue by replacing the React Native WebView component with WKWebView component from from https://github.com/CRAlpha/react-native-wkwebview

i.e. Replace import { WebView } from 'react-native' with import WKWebView from 'react-native-wkwebview-reborn'

This required various modifications and workarounds but was ultimately successful, and events now include the extra parameters such as:

• touchType
• force
• altitudeAngle
• azimuthAngle

It appears that the older WebView may not support the additional event parameters associated with Pencil/Stylus (but it's also possible that I was using a wrong/old version or perhaps React Native does not pass these through from the native WebView component. I would be happy to update with more detail if anyone can clarify).

Answer 2

If you look at iOS 8 release date

17 September 2014

And Apple pencil release date

11 November 2015

And Apple's force touch release date

September 9, 2014

Now if you look at the below article from apple

https://developer.apple.com/documentation/webkit/wkwebview

Important

Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

So it may be possible the WKWebView has betters support for these things compared to UIWebView. But it can't be confirmed without experimentation as no documentation with clear differences between the two is available

There was huge discussion on using WKWebView by default on iOS8+ for react native. You can find the same on below

https://github.com/facebook/react-native/issues/321

You can see comment from WKWebView react component maintainer

Maintainer of react-native-wkwebview here. I agree that there are limited benefits for this repo to be merged into core, one of them being Expo support (Expo still uses UIWebView). But I think this is more of an issue for Expo, rather than React Native.

IMO, React Native should focus on the "core" bridges and this component should happily live as a 3rd party component. This makes it easier for people to actually contribute to this project. Also, it means flexible release schedule (as opposed to the monthly release schedule of React Native)

And I agree with @brunolemos that improving React Native docs is a better way to make people more aware of the decision regarding UIWebView and WKWebView and point them to the solution.

So I think it may be possible that WKWebView has more capabilities in events than the deprecate UIWebView. But unfortunately after hours of digging I couldn't find any such official information. I would have added some extra information if I had iPhone/iPad with me to experiment with.

I tried with simulator and I get the below fields in events for both UIWebView and WKWebView

WKWebView

UIWebView

The JSFiddle I used

https://jsfiddle.net/J4djY/166/

But since I don't have a physical device, I can't confirm some of the observations