9

I'm working on the RN application that has one screen with a list of "drawable" areas in it. So this screen should be scrollable AND drawable.

What I'm trying to do - is to find a solution to distinguish touch events coming from fingers (these will be used to scroll and disallow drawing) and stylus via Apple Pencil (these will be used to draw and disallow scrolling).

In both Gesture Responder and PanResponder there are events being passed on each move. Each of those events (alongside with the nativeEvent) contains the type property. However, it's always null for me in both simulator and device.

Is there any way to recognize a move event as a finger vs stylus?

mag_zbc
  • 6,801
  • 14
  • 40
  • 62
Nadine
  • 559
  • 2
  • 15
  • Were you able to figure this out? I'm facing the exact same issue right now. – Tatsuya Yokota Nov 08 '18 at 22:29
  • 1
    @TatsuyaYokota Unfortunately, we couldn't find any pure React Native solution to this. We ended up implementing this functionality in Objective-C on the iOS side and pass the touch type to the React Native side. For the reference, this is for Xcode v9.2. Hope this helps! – Nadine Nov 09 '18 at 01:59
  • Hia @Nadine - We are having the same problem at Pencil Bible. We tried your idea ☝ - but it did not work. According to Matt our developer: "When a touch is registered via Native iOS, there is a delay between when the touch event is registered and when React Native receives that event. So, we cannot accurately determine if the touch was a pencil or finger." - do you have any insight - or can you do a paid consultation #gettingdesperate – Erin Walker Apr 30 '22 at 08:38

1 Answers1

0

We had a similar requirement for one of our projects, and what we did was to use a Pressable component, to which a handlePress function was passed as prop. This function accepted the GestureResponderEvent as event callback argument. By using the event.nativeEvent.altitudeAngle property that was added recently, we were able to detect Apple Pencil touches.

    function handlePress(event: GestureResponderEvent) {
    //@ts-expect-error React Native Types do not include altitudeAngle
    const isPencilTouch = !!event.nativeEvent.altitudeAngle;
    ...
}
Kunal Chawla
  • 1,236
  • 2
  • 11
  • 24