How can I get the Canvas touch handler to work nicely within a ScrollView?

[Jorundur]

See issue and discussion here for context: #681

I have a ScrollView containing several graphs made with react-native-skia. The graphs are interactable, i.e. I can touch them and move an indicator on the graph along the x-axis of the graph.

I have a reproducible demo in the issue linked above. From the comment I made there:

This is a react-native ScrollView large enough to make sure we have to scroll, the top component is a graph using react-native-skia. If we drag the cursor in the graph around, then the UX gets bad pretty quickly as the graph touch events seem to be ignored as soon as any vertical scrolling happens. I've tried playing around with ScrollView from react-native-gesture-handler but without luck.
To me, the expected behaviour would be for the graph to be interactable even while scrolling. I.e. if I'm pressing the graph and move my finger diagonally up/down I would expect the ScrollView to scroll and the graph cursor also to change its position accordingly. (I say diagonally since a straight vertical movement wouldn't change the cursor position in this graph.)

Much appreciated if anyone has any ideas on how to solve this! I couldn't work out how to do it via GestureDetector from react-native-gesture-handler like someone mentioned in that issue.

Here's a Snack with the reproducible demo: https://snack.expo.dev/@jorundur/supportive-raisins

FYI: For some reason the Canvas disappears after 1 second in the Snack, but if you make any change in the file and save (such add a newline somewhere), then it appears. It's fine if you run locally. But that's some other problem we can ignore for the purpose of this discussion.

[wcandillon]

I think the solution here is to use gesture-handler; this is the kind of use-cases where gesture-handlers excels at and that is outside the scope of our current built-in gesture API.

[Jorundur]

Yeah that seems to be the way to go, although I haven't figured out exactly just yet.

Am I correct in saying that I should remove the onTouch={touchHandler} prop from the Canvas component and instead detect gestures via react-native-gesture-handler? And then make those gestures work simultaneously with the touch events from the ScrollView?

[wcandillon]

yes 100%

[Jorundur]

Thanks @wcandillon, that did the trick! I also got some valuable info from this thread and comment: software-mansion/react-native-gesture-handler#1933 (comment)

I'll write a more detailed answer in case others stumble upon this.

[Jorundur]

To reiterate, what I wanted to do was to have the touch events of a ScrollView work simultaneously with touch events from a react-native-skia Canvas child component.

The solution was to do the following:

• Don't use onTouch on Canvas, instead detect gestures via react-native-gesture-handler
• Create a gesture and add a ref to it
• Add the simultaneousHandlers prop to the ScrollView and use the ref there
  • This tells the ScrollView that its events should not be blocked by the touch events from the ref

Code (relevant code only - don't just run this expecting to see anything😅):

import * as React from 'react';
import {
  GestureHandlerRootView,
  ScrollView // Note that this is not imported from react-native
} from 'react-native-gesture-handler';

const App = () => {
  // Create ref for the ScrollView to know what other gestures it should work simultaneously with.
  // My use case required pan but this can be swapped for other gestures.
  const panGestureRef = React.useRef<GestureType>(Gesture.Pan()); 

  // The logic that used to be in `onTouch` on the Canvas is now here
  const panGesture = Gesture.Pan()
    .onChange((e) => {
      // Do stuff, also use the other callbacks available as needed
    })
    .withRef(panGestureRef);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>{/* Don't forget this! It should be at the root of your project. */}
      <ScrollView simultaneousHandlers={[panGestureRef]}>
        <GestureDetector gesture={panGesture}>
          <Canvas style={{ width: 200, height: 200 }}>
            {/* Your react-native-skia magic that allows for interaction */}
          </Canvas>
        </GestureDetector>
      </ScrollView>
    </GestureHandlerRootView>
  );
};

export default App;

[Jorundur]

Addendum: FYI If you're using Expo, running this in Expo Go and this seems to not be working, try doing a custom dev-client build instead or an actual prod build. Sometimes react-native-gesture-handler gestures don't work properly inside the Expo Go shell.

[cihangir-mercan]

this is so good. thanks bro

[Alex25197]

Excuse me, how you can do that when you draw something inside the canvas the screen won't scroll up neither down?
using this method you described I understand it will work simultaneously with both scrolling and drawing at the same time?

[krmao]

how about class component?