Something awesome about Skia

03/17/2024 13:17

React Native Skia works wonderfully.
I've managed to seamlessly integrate it with Reanimated 3 as well.
I even have the touch listeners directly on the Skia components.

It automatically overlays the Skia view with the Animated.View and binds it.
To achieve this, I created an extension of the skia canvas, along with a react context for the components to communicate the touch components to.

That in turn gives me this delicious setup:

This allows the same flexibility that the standard React components offer, in the sense that you can connect the onPress listener directly to a Skia component.
To me, this is just beautiful and will be one of the things that will soon allow me to fly very fast.

Thankful for Skia as well, that library performs so well.
Excited to see how far I can take this stack.

I'm considering doing Skia tutorials as well, in the same style as @wcandillon does along the way.
Let me know if this is something you would want.

So what happens under the hood?

All of this happens through a custom context and a custom hook.


And then finally, the button component with touch handlers can be implemented like so:


Where the TabGesture component looks like this:


And that gives us this magical setup:


And then in the button, you can trigger the onPress event from the props like so (or however you want your component to trigger the event):


That's about it!

I hope you got inspired for your own Skia setup. Since all of these libraries are new, I find it interesting to see new uses of Skia pop up.
 
Thanks for reading 😊 Comments, likes and subscriptions are always appreciated, and can be done so annonymously.

2

4

Write a reply (0/3500)

Replies

0

(0/0) 05/20/2024 10:17, anonymous user wrote

beautiful....am currently building a game library with it......

1

(1/0) 03/18/2024 13:14, anonymous user wrote

"thanks for sharing this, do you a rep example of this?" - I'll set up a repo later "Don't you mean Tapped gesture btw? Instead of "Tabbed"" - Yes, you're right. I'll correct it soon "Shouldn't you have a way to reply to people here?" - Yeah I should, will make it soon 😄

1

(1/0) 03/18/2024 07:40, anonymous user wrote

Don't you mean Tapped gesture btw? Instead of "Tabbed"

1

(1/0) 03/18/2024 04:43, anonymous user wrote

thanks for sharing this, do you a rep example of this?