Lightnews — Scholar-powered news

LightNews

Enzo Manuel Mangano

@reactiive.io

860 followers 99 following 120 posts

Creating tutorials about React Native animations youtube.com/@Reactiive

Posts Media Videos Starter Packs

Pinned

Enzo Manuel Mangano @reactiive.io · 22d

💥 Demos is now Open Source.

An ongoing collection of 110+ React Native animations crafted with Reanimated, Gesture Handler, and Skia.

🧵

Enzo Manuel Mangano @reactiive.io · 3d

6. Not sure it’s worth a package yet 😅, so for now you’ll need to copy it, paste it, and apply it to your babel.config.js - and you’re good to go 👀

Enzo Manuel Mangano @reactiive.io · 3d

5. To be honest, this is still experimental and should NOT be used in production. If you’d like to take a look, you can find the plugin definition here github.com/enzomanuelm...

demos/plugins/liquid-glass-resolver.js at main · enzomanuelmangano/demos

An ongoing collection of React Native animations crafted with Reanimated, Gesture Handler, and Skia. - enzomanuelmangano/demos

Enzo Manuel Mangano @reactiive.io · 3d

4. The only difference with this approach is that when the day comes, it’ll just be about renaming/deleting a file

Enzo Manuel Mangano @reactiive.io · 3d

3. There’s nothing wrong with keeping the runtime checks, but at some point you’ll probably have to remove them, as older iOS 26 versions may no longer be relevant

Enzo Manuel Mangano @reactiive.io · 3d

2. The API is very helpful but can easily lead to a lot of runtime checks, especially considering how fast the Liquid Glass adoption is growing

Enzo Manuel Mangano @reactiive.io · 3d

1. Why? This might be completely useless for your needs 🙈, since you can detect whether Liquid Glass is available through the expo-glass-effect package (or via callstack/liquid-glass)
bsky.app/profile/cod...

Beto (@codewithbeto.dev)

💡 Use expo-glass-effect to check if liquid glass is available Learn more: https://docs.expo.dev/versions/latest/sdk/glass-effect

Enzo Manuel Mangano @reactiive.io · 3d

Lately I’ve been using a custom Babel plugin to enable Liquid Glass in Demos, following the .liquid.tsx file convention

A quick 🧵

Enzo Manuel Mangano @reactiive.io · 7d

Sounds like a joke, but it’s so convenient 😆

Enzo Manuel Mangano @reactiive.io · 7d

Pro tip: define an alias to enable the yolo mode in claude code

Enzo Manuel Mangano @reactiive.io · 17d

That’s a wrap! I hope you found it helpful 🤞

Enzo Manuel Mangano @reactiive.io · 17d

5. 👀 it's amazing how easily you can spot these improvements by using the highlight renders debugging tool
x.com/reactiive_/...

Enzo Manuel Mangano @reactiive.io · 17d

4. And that's how it looks when applied to a liquid glass slider 👇

Enzo Manuel Mangano @reactiive.io · 17d

3. Luckily the useAnimatedProps hook fills the gap by letting us animate the object using a SharedValue (very similar to the trick commonly used with BlurView)

Enzo Manuel Mangano @reactiive.io · 17d

2. SwiftUI components from expo/ui port the native iOS components 1:1, which by default don't have any Shared Value concept docs.expo.dev/versions/la...

SwiftUI components for building native iOS interfaces with @expo/ui.

Enzo Manuel Mangano @reactiive.io · 17d

1. It might feel natural to use useState, but even on high-end devices, you might start noticing some lag

Enzo Manuel Mangano @reactiive.io · 17d

The useAnimatedProps hook from Reanimated really shines when used with liquid glass components 👀

Enzo Manuel Mangano @reactiive.io · 22d

5. I hope you found this helpful 🙏 I’ll share new updates in the coming weeks

Enzo Manuel Mangano @reactiive.io · 22d

4. Here's the Demos app repo github.com/enzomanuelm...

GitHub - enzomanuelmangano/demos: An ongoing collection of React Native animations crafted with Reanimated, Gesture Handler, and Skia.

An ongoing collection of React Native animations crafted with Reanimated, Gesture Handler, and Skia. - enzomanuelmangano/demos

Enzo Manuel Mangano @reactiive.io · 22d

3. Why this shift? The bsky thread format felt a bit too limiting, so I wrote a small blog post 👀 reactiive.io/articles/op...

Demos is now Open Source

After almost three years as a paid resource, all 110+ React Native animations are now completely open source

Enzo Manuel Mangano @reactiive.io · 22d

2. If you purchased Demos—whether yesterday or years ago—you are eligible for a full refund (DM me). Your support has meant the world to me, and this transition shouldn't cost you anything 🙏

You'll still be able to support my work if you choose to, but it won't be a requirement anymore.

Enzo Manuel Mangano @reactiive.io · 22d

1. After almost three years of building Demos/Patreon as a paid resource, I've decided to make all 110+ React Native animations completely open source. It feels like the right time to share this collection.

Enzo Manuel Mangano @reactiive.io · 22d

💥 Demos is now Open Source.

An ongoing collection of 110+ React Native animations crafted with Reanimated, Gesture Handler, and Skia.

🧵

Enzo Manuel Mangano @reactiive.io · Sep 2

Airbnb Flip Interaction with Reanimated.

Available on demos.reactiive.io 👀

Enzo Manuel Mangano @reactiive.io · Aug 26

Stacked Carousel concept with Reanimated

Available on demos.reactiive.io ✨

Enzo Manuel Mangano @reactiive.io · Jul 29

GitHub Contributions with React Native Reanimated.

Available on demos.reactiive.io ✨