Moving around paths inside of Canvas using translation

[mzruiz]

Hola hola,

This issue is relevant to an issue we're having at Pencil Bible.

Please see the following video walking through this repo and the use case we're trying to solve which was mentioned in this issue by @chrfalch.

UseTranslationToMoveThingsAround.mp4

• Matt

[wcandillon]

Matt :)

Sorry for the late reply. This is looks really cool.
It seems like the reanimated 3 integration might be the way to go here: https://shopify.github.io/react-native-skia/docs/animations/reanimated
You can slap a scrollview on top of canvas and translate the elements to match the scrollview y value.

Now the question is how to you allow for other gestures on top of it? GestureHandler has a great API for composition gesture, I'm not sure if they offer it for the ScrollView component. If you would need to have you own Pan gesture for the scrolling, the rubber band effect is definitely something reproducible (I had tried a long long time ago and took some code from the flutter implementation: https://www.youtube.com/watch?v=VZ73JdhjFC8).

But definitely not worth allocation such huge canvases, let's just allocate for what's visible (the screen) and scroll inside the canvas.

This looks cool, I think you're gonna have fun with this :) Let us know and happy hacking!