8. If you enjoy React Native animations and would like to learn more, check out my course! (AI section coming soon)
β reanimate.dev
8. If you enjoy React Native animations and would like to learn more, check out my course! (AI section coming soon)
β reanimate.dev
7. Yes, AI helps a lot, but you should treat it like a multiplier. I would have loved to have the option to use Claude a few years ago π
bsky.app/profile/rea...
6. Small tip: blur masks will make a huge difference!
5. Now you can prototype as much as you'd like until you land on a result that's good enough for you.
4. At this point, it's all just path interpolation with Skia.
3. Once the mascot was ready, Claude was kind enough to read it directly from Paper via MCP and translate it into Skia paths.
2. What I did was "vibe-prototype" the mascot with @paper.design + Claude. Mostly just asking questions and iterating until I landed on the design I liked
1. The real answer is to use Rive/Lottie with a hand-crafted design, but I just lack the creative skills to pull that off π
Itβs easier than ever to bring your React Native app to life.
Hereβs how π§΅
Design tip: always start with a donut.
Source code β reactiive.io/demos
Best part: useAnimatedProps gives you fully native animations with zero extra renders. Source code: github.com/enzomanuelm...
SwiftUI modifiers landing in Expo 55 is quietly one of the best updates.
Interactive demos speak louder than words.
Finally reworked reanimate.dev to make the concepts click faster.
4. Everything is open source βοΈ
github.com/enzomanuelm...
3. The website is built with @expo.dev and powered by Skia, it ships to the web and still runs natively. Thatβs the best part.
2. Customize colors, style, and logo - then copy the snippet straight into your project. It works with react-native-qrcode-skia.
1. Some of you might remember the v1. This is a complete redesign strongly inspired by ray.soΒ (which is great for creating beautiful code snippets)
Creating a QR code in React Native should be fun.
β qrcode.reactiive.io
Shape morphing animations are so addictive.
Just added a few to enzo.fyi
12/ If you found this useful, the full talk goes deeper on each of these π youtu.be/cbTsg8GggzA
11/ Skia can feel overwhelming to learn, but Iβve found that over the past three years, more than 50% of my Skia animations were built on a Skia Path, which has proven to be the most flexible component Iβve ever used.
10/ β¦ Skia is the signature of memorable animations.
9/ To prioritize consistency and delight in tap interactions, I created (and use) pressto - a very simple package built on top of Reanimated and RNGH that provides consistent defaults. bsky.app/profile/rea...
8/ That's especially true with React Native where the default way of building an animated touchable is still the TouchableOpacity.
7/ β¦ Treat every single tap like a miracle.
6/ Prototyping a spring animation is hard. But with Reanimated v4, all you need to define a spring animation is a perceptual duration and a damping ratio (0.9 β 1)
5/ β¦ Define spring animations using perceptual duration.
4/ That's not just easier. It's way more delightful, as you get the exact scrolling behavior the user expects.
3/ By doing that, youβll just lose the native feeling. Whatβs happening here instead is that thereβs a single invisible ScrollView that lets you control all of them with one shared value.
2/ When dealing with cards, it's very tempting to have full control by setting up a Pan Gesture Handler for every single one. But...