Is it possible to use React Native Gesture Handler concurrently with useTouchHandler?

[hypekn1ght]

Hi there,

I am trying to experiment with severance tutorial by adding a gesture detector from RNGH, but as soon as I add the canvas with the gesture detector, expo crashes with no warning. Is this because useTouchHandler and RNGH can't run concurrently?

`import {
Canvas,
Fill,
Group,
useClockValue,
useFont,
useTouchHandler,
useValue,
runSpring
} from "@shopify/react-native-skia";
import React, {useState} from "react";
import { useWindowDimensions, View } from "react-native";

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";

import { Gesture, GestureDetector } from "react-native-gesture-handler";

import { CRT } from "./CRT";
import { COLS, ROWS, Symbol } from "./Symbol";
import { BG } from "./Theme";

const rows = new Array(COLS).fill(0).map((, i) => i);
const cols = new Array(ROWS).fill(0).map((, i) => i);

export enum Adjustment {
INCREASE = "INCREASE",
NONE = "INACTIVE",
DECREASE = "DECREASE"
}

export const Severance = () => {
const { width, height } = useWindowDimensions();
const clock = useClockValue();
const font = useFont(require("./SF-Mono-Medium.otf"), height / ROWS);
const skiaPointerX = useValue(width/2); //single row component
const skiaPointerY = useValue(height/2);
const [touchActive, setTouchActive] = useState(false);
const [adjustRequest, setAdjustRequest] = useState(Adjustment.NONE);
const onTouch = useTouchHandler({
onStart : (pt) => {
runSpring(skiaPointerX, pt.x);
runSpring(skiaPointerY, pt.y);
},
onActive: (pt) => {
skiaPointerX.current = pt.x;
skiaPointerY.current = pt.y;
if (!touchActive) {
setTouchActive(true);
}
},
onEnd: () => {
runSpring(skiaPointerX, width/2)
runSpring(skiaPointerY, height/2);
setTouchActive(false);
},
});

const pan = Gesture.Pan()
  .activeOffsetY(height * 0.15)
  .onStart((e) => {
    if (e.absoluteY >= height * 0.65) {
      console.log("increase");
    } else if (e.absoluteY <= height * 0.35) {
      console.log("decrease");
    }
  });

if (font === null) {
  return null;
}
return (
  <GestureDetector gesture={pan}>
    <Canvas style={{ flex: 1 }} onTouch={onTouch} debug>
      <CRT>
        <Group>
          <Fill color={BG} />
          {rows.map((_i, i) =>
            cols.map((_j, j) => {
              return (
                <Symbol
                  key={`${i}-${j}`}
                  i={i}
                  j={j}
                  font={font}
                  pointerX={skiaPointerX}
                  pointerY={skiaPointerY}
                  clock={clock}
                  touchActive={touchActive}
                />
              );
            })
          )}
        </Group>
      </CRT>
    </Canvas>
  </GestureDetector>
);

};`

Thanks in advance!

[hypekn1ght]

Sorry for this, but I actually fixed with a expo start -c seems to be an issue with reanimated according to the docs.