Discover the beauty of animations in React Native. Dive into the world of animations with this course, which will help you master both basic and advanced techniques.
reanimate.dev
Workshops
- Animated Square: To build a castle, it's important to start with the foundation. In this lesson, we will identify the basic building blocks for creating animations together.
- Exploring Pan Gestures: It’s amazing what can be achieved with simple gestures. In this video, we will learn how to coordinate gestures with Shared Values.
- Tap Gestures: Tapping on objects is always fun, but what if we could animate them when tapped? In this lesson, we will explore the possibilities of tap gestures and how to respond to them.
- Parallax Animation: The parallax effect is a classic in the world of animations. Have you ever wondered how to create it? This is what this lesson is about.
- Animated Text: Text animation can easily enhance the user experience of your app. In this lesson, we will learn how to do it, fully relying on the UI Thread.
- Scrolling Text Animation: Learning the basic building blocks of animation is fun. Combining them together is satisfying. In this lesson, we will learn how to animate text while scrolling by combining text and scroll animations.
- Shared Transitions: Let’s be honest, shared transitions are the coolest thing ever. In this lesson, we will see how to use them to experience the future of animations in React Native.
- Layout Animations: No matter what the question is, layout animations will always be the answer. In this lesson, we will uncover all the secrets of layout animations.
- Family Phone Number Input: The Family app is a pure demonstration of how animations can change the user experience. In this lesson, we will learn how to recreate a simplified version of their phone number input.
- The Beauty of Skia: Skia is the spice that makes the dish tastier. In this lesson, we will learn the basics of Skia and how to use it to enhance our animations.
- Animated Chart: Charts are the best way to visualize data. In this lesson, we will learn how to create a chart inspired by Steddy using Skia.
- Canvas Gestures: Using the canvas is always fun, but how do you interact with the elements? This lesson will give you the answers.
- Bottom Tab Animation: It’s time to integrate animations into your navigation system. In this lesson, we will learn how to create a customizable BottomTabBar and attach it to what is used in Expo Router.
- Shader Image Transitions: When an animation impresses you, chances are you've seen a shader. In this lesson, we will learn how to create a shader transition between images.
- Shader Navigation: Shaders are the best way to create stunning transitions. In this lesson, we will learn how to use shaders for navigating between screens using Skia.
About the Author: Enzo Manuel Mangano
Enzo Manuel Mangano is an Italian React Native developer and the founder of reanimate.dev — a paid course platform focused entirely on React Native Reanimated, the canonical animation library for the React Native ecosystem.
His CourseFlix listing carries reanimate.dev — a deep treatment of Reanimated 3+, the worklet model, gesture handler integration, and the production patterns for shipping smooth 60fps animations on real React Native apps.
Material is paid and aimed at React Native developers ready to ship production-quality animations using the Reanimated library. For broader mobile content, see CourseFlix's React Native category page where this course sits alongside material from Vadim Savin (notJust.dev), Catalin Miron, and Simon Grimm (Galaxies.dev).
Watch Online 16 lessons
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 001 Welcome to Reanimate.dev Demo | 06:16 | |
| 2 | 002 Bouncing Square | 14:02 | |
| 3 | 003 Pan Gesture Handler | 19:43 | |
| 4 | 004 Spatial Tap Gesture | 18:00 | |
| 5 | 005 Parallax Animation | 31:28 | |
| 6 | 006 Animated Text | 32:07 | |
| 7 | 007 Animated Scrollable Percentage | 48:29 | |
| 8 | 008 Layout Animations | 31:58 | |
| 9 | 009 Family Number Input | 44:01 | |
| 10 | 010 Shared Transitions | 52:02 | |
| 11 | 011 Skia Magical Button | 35:44 | |
| 12 | 012 Skia Animated Path | 35:01 | |
| 13 | 013 Skia Pan Gesture (Again) | 25:06 | |
| 14 | 014 Bottom Tab Animation | 42:07 | |
| 15 | 015 Image Shader Transitions | 40:11 | |
| 16 | 016 Navigating with Shaders | 39:37 |
Get instant access to all 15 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionCourse content
16 lessons · 8h 35m 52sShow all 16 lessons
- 1 001 Welcome to Reanimate.dev 06:16
- 2 002 Bouncing Square 14:02
- 3 003 Pan Gesture Handler 19:43
- 4 004 Spatial Tap Gesture 18:00
- 5 005 Parallax Animation 31:28
- 6 006 Animated Text 32:07
- 7 007 Animated Scrollable Percentage 48:29
- 8 008 Layout Animations 31:58
- 9 009 Family Number Input 44:01
- 10 010 Shared Transitions 52:02
- 11 011 Skia Magical Button 35:44
- 12 012 Skia Animated Path 35:01
- 13 013 Skia Pan Gesture (Again) 25:06
- 14 014 Bottom Tab Animation 42:07
- 15 015 Image Shader Transitions 40:11
- 16 016 Navigating with Shaders 39:37
Related courses
-
Updated 2y agoPush Notifications with Expo
By: Simon GrimmEmbrace the dynamic world of mobile notifications with our comprehensive course, “React Native Notifications with Expo.” Learn the art of crafting.58 minutes 22 seconds -
Updated 2y agoMaster React Native Navigation
By: Simon GrimmUnlock the secrets of seamless navigation in React Native apps with our in-depth course, “Master React Native Navigation.” Learn how to craft.1 hour 13 minutes 29 seconds -
Updated 2y agoThe Ultimate React Native Series: Advanced Concepts
By: Mosh Hamedani (Code with Mosh)Master advanced techniques and best practices for building professional-quality apps.5 hours 28 minutes 42 seconds 5 / 5