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.
Stop using TouchableOpacity in React Native.
Your app deserves better tap interaction.
🧵 Here's how to fix your touchables with pressto:
Your app deserves better tap interaction.
🧵 Here's how to fix your touchables with pressto:
October 28, 2025 at 4:00 PM
Stop using TouchableOpacity in React Native.
Your app deserves better tap interaction.
🧵 Here's how to fix your touchables with pressto:
Your app deserves better tap interaction.
🧵 Here's how to fix your touchables with pressto:
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)
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)
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
I bet you've never used duration in your Reanimated spring animations.
🧵 Time to fix that.
🧵 Time to fix that.
October 16, 2025 at 3:46 PM
I bet you've never used duration in your Reanimated spring animations.
🧵 Time to fix that.
🧵 Time to fix that.
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 👀
4. The only difference with this approach is that when the day comes, it’ll just be about renaming/deleting a file
October 12, 2025 at 3:04 PM
4. The only difference with this approach is that when the day comes, it’ll just be about renaming/deleting a file
3. There’s nothing wrong with keeping the runtime checks, but at some point you’ll probably have to remove them, as older iOS 26 versions may no longer be relevant
October 12, 2025 at 3:04 PM
3. There’s nothing wrong with keeping the runtime checks, but at some point you’ll probably have to remove them, as older iOS 26 versions may no longer be relevant
2. The API is very helpful but can easily lead to a lot of runtime checks, especially considering how fast the Liquid Glass adoption is growing
October 12, 2025 at 3:04 PM
2. The API is very helpful but can easily lead to a lot of runtime checks, especially considering how fast the Liquid Glass adoption is growing
Lately I’ve been using a custom Babel plugin to enable Liquid Glass in Demos, following the .liquid.tsx file convention
A quick 🧵
A quick 🧵
October 12, 2025 at 3:04 PM
Lately I’ve been using a custom Babel plugin to enable Liquid Glass in Demos, following the .liquid.tsx file convention
A quick 🧵
A quick 🧵
Pro tip: define an alias to enable the yolo mode in claude code
October 8, 2025 at 7:04 PM
Pro tip: define an alias to enable the yolo mode in claude code