Difficulty with conditional drawing of Line Path on Image

[cmkf01]

Hi,

I am hoping for some help that has completely halted my progress.

Description

My use case is a camera app that will display a gallery view of photographs that can be opened in modal view, manipulated with pinch and zoom and annotated (to redact sensitive text and highlight relevant text).

I have a component that draws line paths on a plain background (credit to @LucasVeloz with https://www.youtube.com/watch?v=7zOMXv5OnLQ) and this works well but when the component is toggled on to overlay on Skia Image component it does not function.

I have tried as best I can to amend zIndex and View/ Animated.View/ SkiaView elements without success and I'm out my depth debugging gesture conflicts to work out where the problem might be coming from.

Background

I am a medical doctor, self-taught coding over the last 8 months to try to make this app as a hobby project for the benefit of my patients in the clinic; please go easy on my ignorance or if I have missed anything out in the repo.

Versions

"@shopify/react-native-skia": "^0.1.202",
"react": "18.2.0",
"react-native": "0.72.2",
"react-native-gesture-handler": "^2.12.0",
"react-native-reanimated": "^3.3.0",

Steps to reproduce

Minimal example provided below. Button to toggle LinePath component on/off as overlay on the Image (2-pointer gesture handling breaks). Also, I have included a screen to display the functionality of LinePath within a plain View.

Snack, code example, screenshot, or link to a repository

https://github.com/cmkf01/skia_issue_example

Help greatly appreciated, thanks.

[LucasVeloz]

It seems is due to the canvas component. It might fix if you only use one canva to the components