How I can block scrolling while drawing in a canvas component that's inside a FlatList?

[Alex25197]

Hello, awesome library, I really love it, just digged it into it recently and made an example for a drawing component.
As the title says, the thing is I have a FlatList with other bunch of components that I need for the app and one of them is the Canvas component, that one that I use is meant to be a free-drawing component, but the thing is that when I try to draw a vertical line inside the Canvas, it just scrolls down at the same time and I would like it to block the scrolling while drawing, is there any way of achieving this sort of behaviour with Skia?

This is my actual drawing component that is stored inside a FlatList

import React, { useCallback, useState } from "react";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import {
  SkPath,
  TouchInfo,
  useTouchHandler,
  Skia,
  Canvas,
  Path,
} from "@shopify/react-native-skia";
import CheckSignIcon from "src/Theme/Svgs/check-sign-icon";
import TrashIcon from "src/Theme/Svgs/trash-icon";
import { BRANDCOLORS } from "src/Theme/Colors";
import UndoIcon from "src/Theme/Svgs/undo-icon";

interface DrawingCanvasProps {}

const DrawingCanvas: React.FC<DrawingCanvasProps> = () => {
  const [paths, setPaths] = useState<SkPath[]>([]);

  const onDrawingStart = useCallback((touchInfo: TouchInfo) => {
    setPaths((old) => {
      const { x, y } = touchInfo;
      const newPath = Skia.Path.Make();
      newPath.moveTo(x, y);
      return [...old, newPath];
    });
  }, []);

  const onDrawingActive = useCallback((touchInfo: TouchInfo) => {
    setPaths((currentPaths) => {
      const { x, y } = touchInfo;
      const currentPath = currentPaths[currentPaths.length - 1];
      const lastPoint = currentPath.getLastPt();
      const xMid = (lastPoint.x + x) / 2;
      const yMid = (lastPoint.y + y) / 2;

      currentPath.quadTo(lastPoint.x, lastPoint.y, xMid, yMid);
      return [...currentPaths.slice(0, currentPaths.length - 1), currentPath];
    });
  }, []);

  const onUndoPath = useCallback(() => {
    setPaths((currentPaths) => {
      return currentPaths.slice(0, currentPaths.length - 1);
    });
  }, []);

  const onDeletePaths = useCallback(() => {
    setPaths([]);
  }, []);

  const onSave = useCallback(() => {}, []);

  const touchHandler = useTouchHandler(
    {
      onActive: onDrawingActive,
      onStart: onDrawingStart,
    },
    [onDrawingActive, onDrawingStart]
  );

  return (
    <View style={style.container}>
      <View style={style.toolbarContainer}>
        <TouchableOpacity onPress={onUndoPath}>
          <UndoIcon color={BRANDCOLORS.BLUE} width={26} height={26} />
        </TouchableOpacity>
        <TouchableOpacity onPress={onDeletePaths}>
          <TrashIcon color={BRANDCOLORS.BLUE} width={26} height={26} />
        </TouchableOpacity>
        <TouchableOpacity onPress={onSave}>
          <CheckSignIcon stroke={BRANDCOLORS.BLUE} width={"26"} height={"26"} />
        </TouchableOpacity>
      </View>

      <Canvas style={style.canvasContainer} onTouch={touchHandler}>
        {paths.map((path, index) => (
          <Path
            key={index}
            path={path}
            color={"black"}
            style={"stroke"}
            strokeWidth={2}
          />
        ))}
      </Canvas>
    </View>
  );
};

const style = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    borderWidth: 1,
  },
  canvasContainer: {
    flex: 1,
    width: "100%",
  },
  toolbarContainer: {
    flexDirection: "row",
    gap: 6,
    justifyContent: "flex-end",
    paddingHorizontal: 10,
    paddingTop: 10,
  },
});

export default DrawingCanvas;

Thanks in advance.