Enzo Manuel Mangano
@reactiive.io
Creating tutorials about React Native animations youtube.com/@Reactiive
9. And of course... It's not just about iOS and Android. The web matters too.
You can choose to activate on hover (or on press).
You can choose to activate on hover (or on press).
October 28, 2025 at 4:00 PM
9. And of course... It's not just about iOS and Android. The web matters too.
You can choose to activate on hover (or on press).
You can choose to activate on hover (or on press).
8. You can always access your theme data (or any other data) and use it to animate components according to your app’s theme.
October 28, 2025 at 4:00 PM
8. You can always access your theme data (or any other data) and use it to animate components according to your app’s theme.
7. With the latest version, pressables are meant to be stateful.
You can easily have control over any state: isPressed, isToggled, isSelected
You can easily have control over any state: isPressed, isToggled, isSelected
October 28, 2025 at 4:00 PM
7. With the latest version, pressables are meant to be stateful.
You can easily have control over any state: isPressed, isToggled, isSelected
You can easily have control over any state: isPressed, isToggled, isSelected
6. createAnimatedPressable requires the worklet keyword, since all styles are animated on the UI thread.
Pressto comes with an ESLint plugin to have you covered if you forget the keyword 👀
Pressto comes with an ESLint plugin to have you covered if you forget the keyword 👀
October 28, 2025 at 4:00 PM
6. createAnimatedPressable requires the worklet keyword, since all styles are animated on the UI thread.
Pressto comes with an ESLint plugin to have you covered if you forget the keyword 👀
Pressto comes with an ESLint plugin to have you covered if you forget the keyword 👀
5. A touchable isn’t just about scale or opacity - pressto provides a simple API that lets you animate any prop.
October 28, 2025 at 4:00 PM
5. A touchable isn’t just about scale or opacity - pressto provides a simple API that lets you animate any prop.
4. You can easily control all of them once, via the PressablesConfig
October 28, 2025 at 4:00 PM
4. You can easily control all of them once, via the PressablesConfig
3. First, you get access to ready-to-use PressableScale and PressableOpacity.
October 28, 2025 at 4:00 PM
3. First, you get access to ready-to-use PressableScale and PressableOpacity.
2. Pressto is built on a simple idea: touchables should feel coherent. It’s not just about adding animations, but about using a consistent animation curve across all interactions.
October 28, 2025 at 4:00 PM
2. Pressto is built on a simple idea: touchables should feel coherent. It’s not just about adding animations, but about using a consistent animation curve across all interactions.
1. Pressto isn’t something new - I announced the package last year, but the latest version introduces quite a few interesting things
x.com/reactiive_/...
x.com/reactiive_/...
October 28, 2025 at 4:00 PM
1. Pressto isn’t something new - I announced the package last year, but the latest version introduces quite a few interesting things
x.com/reactiive_/...
x.com/reactiive_/...
That’s it, but now I’m really curious to know if I won my bet 😆
October 16, 2025 at 3:46 PM
That’s it, but now I’m really curious to know if I won my bet 😆
11. Of course using mass, damping, and stiffness is still helpful when your animation isn’t meant to have a fixed duration (for example, anything connected to a gesture)
October 16, 2025 at 3:46 PM
11. Of course using mass, damping, and stiffness is still helpful when your animation isn’t meant to have a fixed duration (for example, anything connected to a gesture)
10. By the way, you can find the final dampingRatio I picked for this one in the following repo 👀github.com/enzomanuelm...
demos/src/animations/blur-cards at main · enzomanuelmangano/demos
An ongoing collection of React Native animations crafted with Reanimated, Gesture Handler, and Skia. - enzomanuelmangano/demos
github.com
October 16, 2025 at 3:46 PM
10. By the way, you can find the final dampingRatio I picked for this one in the following repo 👀github.com/enzomanuelm...
9. A dampingRatio greater than 1 -> slow return, no bounce at all 🥲 (overdamped)
October 16, 2025 at 3:46 PM
9. A dampingRatio greater than 1 -> slow return, no bounce at all 🥲 (overdamped)
8. A dampingRatio of 1 → the fastest version with zero bounce (critically damped)
October 16, 2025 at 3:46 PM
8. A dampingRatio of 1 → the fastest version with zero bounce (critically damped)
7. A dampingRatio smaller than 1 → bouncy! (underdamped)
October 16, 2025 at 3:46 PM
7. A dampingRatio smaller than 1 → bouncy! (underdamped)
6. Nice! But how do you decide whether the animation should be bouncy or not? 🤔 The dampingRatio is all you need. It might feel a bit overwhelming at first, but it’s super simple to get used to.
October 16, 2025 at 3:46 PM
6. Nice! But how do you decide whether the animation should be bouncy or not? 🤔 The dampingRatio is all you need. It might feel a bit overwhelming at first, but it’s super simple to get used to.
5. Ironically, v3 matches the duration requirement perfectly, but v4 matches exactly what we expect from a 5-second duration
October 16, 2025 at 3:46 PM
5. Ironically, v3 matches the duration requirement perfectly, but v4 matches exactly what we expect from a 5-second duration
4. Here’s how the same animation looks in Reanimated v4.
October 16, 2025 at 3:46 PM
4. Here’s how the same animation looks in Reanimated v4.
3. It seems like the animation is taking way less than 5 seconds, isn’t it? The point is that the duration also includes the tiny final oscillations (and there are quite a few)
October 16, 2025 at 3:46 PM
3. It seems like the animation is taking way less than 5 seconds, isn’t it? The point is that the duration also includes the tiny final oscillations (and there are quite a few)
2. This is what a 5-second spring animation looks like in Reanimated v3
October 16, 2025 at 3:46 PM
2. This is what a 5-second spring animation looks like in Reanimated v3
1. One of the most useful (but quite subtle) changes in Reanimated v4 has been the support for perceptual duration in spring animations
October 16, 2025 at 3:46 PM
1. One of the most useful (but quite subtle) changes in Reanimated v4 has been the support for perceptual duration in spring animations
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 👀
October 12, 2025 at 3:04 PM
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 👀