💥 Demos is now Open Source. An ongoing collection of 110+ React Native animations crafted with Reanimated, Gesture Handler, and Skia. 🧵

You can access this animation and 110+ others for free on Demos. All of them run on Expo Go ✨

It's hard to remember what React Native was like before Skia.

9. Do you see any missing rule? Refined is open source - GitHub ⭐️

8. Some of these rules might not be obvious, so I went a bit deeper into the reasoning behind them in this blog post

7. spring-config-consistency: enforces that spring animations either have all three spring physics parameters (mass, damping, stiffness) or none of them (quite helpful when migrating from reanimated v3 -> v4)

6. require-hitslop-small-touchables: requires hitSlop prop on touchable elements that are smaller than a configurable threshold (default: 40pt) to improve tap target size

5. prefer-hairline-width: suggests using hairlineWidth for border widths less than or equal to a configurable threshold (default: 0.3)

4. avoid-touchable-opacity: your react native app deserves better tap interactions. I'd recommend pressto as the default option

3. prefer-box-shadow: this is not about having clean code - it helps you support beautiful shadows on Android too! (requires newArch)

2. border-radius-with-curve: always prefer adding borderCurve property when borderRadius is specified. It makes your corners a bit smoother (iOS only)

1. Why? Small details compound. Some of these tips may sound trivial, but how many times have you forgotten about them? Refined has you covered.

Introducing Refined ✨ A simple eslint plugin that instantly sharpens your React Native app. 🧵 Here are the rules/tips:

Reanimated 4.2.0 is here, and it brings gifts! 🔥 🎁 Long-awaited Shared Element Transitions 🎉 Not production-ready yet, so they’re behind a feature flag. Please, test it out and give us feedback! 🎁 Experimental performance fixes, inspired by real apps. 🎁 Other improvements

In the next version of Expo Router, You can add interactive Apple zoom transitions to any <Link /> in your app ✨

Source code 👇

Aave Day Picker with React Native Reanimated. Available on Demos ✨

Hope this roadmap sounds interesting to you! And of course, all updates will always be included at no additional cost for existing members. →

6. Easing and Springs: I prioritized core principles over details in the tutorials. But with AI simplifying how animations are built, understanding how to prototype the right animation curve is more essential than ever for achieving great results.

5. Why do we need specific animations? The course dives deep into how to tackle common animation patterns, although there is still significant potential to better explain why and where certain animations are needed.

4. Written content: The course includes tutorials and a short written section for each video (including the chapters). However, I believe that adding interactive previews could make it more valuable, and I plan to include more of them.