Welcome to Day 14 of the React Native Advent Calendar!
Today we’re celebrating Demos - an incredible open-source repository by Enzo Mangano containing 110+ professionally crafted animation examples built with Reanimated, Gesture Handler, and Skia. This is the ultimate learning resource for mastering React Native animations!
What is Demos?
Demos is an ongoing collection of production-quality React Native animations that showcase what’s possible with modern animation libraries. Each demo is:
- Fully functional - Not just concepts, but complete, working implementations
- Well-architected - Clean code following best practices
- Thoroughly tested - Battle-tested patterns from real projects
- Educational - Learn by exploring real-world examples
The repository includes:
- 110+ animation demos and counting
- Interactive gesture-based animations
- Complex shader effects with Skia
- Smooth 60fps transitions and micro-interactions
- Real-world UI patterns you can use in your apps
In his article Open Sourcing Demos, Enzo explains his motivation:
“My profile looked more like a paywall than a place where I share valuable insights. Without consistently sharing real value, it’s impossible to build anything meaningful in the long run.”
Standout Examples to Explore
Here are some must-see demos from the collection:
1. Threads Holo Ticket
Aa beautiful holographic effect using Skia for high-performance graphics.
2. Verification Code with Reanimated and Skia
A beautiful verification code input with a face-like animation using Reanimated and Skia.
3. Delete Button with React Native Skia
A beautiful delete button with fluid animations and a gooey effect.
4. Card Stack Gestures
Tinder-style card swiping with rotation, opacity, and scale animations all synchronized perfectly.
5. Drag to Sort with Reanimated and Gesture Handler
A list component that allows reordering through drag and drop gestures.
Try It Live: TestFlight Demo App
Want to experience these animations in action? Enzo has released a TestFlight demo app where you can interact with all 110+ animations directly on your device.
This is invaluable for:
- Feeling the performance - See 60fps animations on real hardware
- Understanding gestures - Experience the natural touch interactions
- Getting inspiration - Browse through examples to spark ideas
- Testing on devices - See how animations perform on different iPhone models
The demo app is perfectly organized with a clean navigation system, making it easy to explore categories and find specific animation patterns.
Wrapping Up
Demos is more than just a repository - it’s a masterclass in React Native animations. With 110+ examples covering everything from simple transitions to complex shader effects, it’s the ultimate reference for animation development.
Quick recap:
- 110+ working examples - Complete, production-quality code
- Free and open source - Learn from real implementations
- Live TestFlight app - Experience animations on your device
- Constantly evolving - New demos added regularly
- Educational focus - Built to help you learn and grow
Ready to explore?
Built something amazing with inspiration from Demos? Tag @reactiive_ on Twitter!
Tomorrow we’ll explore Day 15’s topic - see you then! 🎄