Metaball Animation in React Native (Skia)

[@seongminpark3131]

wowowwowowowowwoo very short and simple but very interesting keep going sir, i love your content

[@bayramarif526]

great tutorial... good to be a patreon of you

[@Reactiive]

Thanks for your support! 🎉❤

[@茗猫-f9t]

amazing work

[@RushiBadheka]

why it's not working in react native CLI ?

[@dhirajjaiswal2941]

Amazing tutorial ❤️

[@collinsk8754]

Amazing stuff!

[@simonstenbk]

If you wanna make the animation even more fun and interactive, just add the velocity at the end of the gesture to the spring animation like this:
(Updated to work with the latest version of skia, using reanimated)
onEnd: ({ velocityX, velocityY }) => {
cx.value = withSpring(windowWidth / 2, { velocity: velocityX });
cy.value = withSpring(windowHeight / 2, { velocity: velocityY });
},

[@voldemore6300]

Amazing ..!!!

[@macon5696]

amazing

[@akashp4863]

beautiful

[@Reactiive]

Thank you! 😊

[@anasshaikh5590]

amazing please create skia tutorial like reanimated one ,

[@Norfeldt]

Fantastic presentation🎉🎉
Why did you use .current and not .value ?

[@Reactiive]

Hi Norfeldt, thank you very much for you feedback and continuous support! The .value refers to a SharedValue (Reanimated) instead the .current refers to a Skia Value. I believe that from the latest version of Skia you can even use Shared Values (unfortunately that's not supported yet on Expo Go)

[@hewr_srood]

🔥🔥🔥

[@akshayk725]

Helpful

[@YuriiLutsyk0304]

Cool

[@4Biddenn]

Is your patreon code is up to date?

[@rafeeqshaik7355]

Does RN Skia is safe to use in production?

[@xdrap1]

No, because there is no support for onPress events. This effect is just a show, you can’t use it to make a bottom tab, for example.

[@Reactiive]

Hi Rafeeq, to be honest RN Skia is still in beta. I've used in a few production apps for simple use cases and I haven't experienced issues

[@Reactiive]

​@@xdrap1 Well, I highly recommend you to check out my Patreon where I've built two Bottom Tab Bars with Skia 👀

[@samidebayroune3478]

we need more videos from me man

[@Reactiive]

Said and done. A lot more content will come! Stay tuned :)

[@fatkhul_ngali]

next tutor, tab navigator with reanimated,

[@xdrap1]

Skia without a proper support for onPress events and Views is worthless for prod. Skia now is useful onlyfor getting likes on YT. Miss the old times when you were doing real animation for real components.

[@Reactiive]

Hi xdrap1 thanks for your feedback! Actually I believe that there are a ton of use cases where you can apply Skia (simply think about what you've done so far with react-native-svg).
If you need to apply Tap gestures on top of a Skia Canvas you can easily do that already.
If you need to apply Gestures on top of a Skia component (inside the Canvas), you can do that with the latest version ( docs: shopify.github.io/react-native-skia/docs/animations/reanimated#element-tracking ) or you can simply use react-native-skia-gesture (as mentioned in the video).
If that's not enough for you, unfortunately you'll probably have to wait for some new update (or you can possibly use Flutter which I hope already has what you're looking for 😁)

[@disgruntleddev]

Skia shouldn't be for recreating default components and instead for creating bespoke UI's and animations , adding on press to skia , which is technically a painting library would be basically building a new UI engine inside react native