Enzo Manuel Mangano
@reactiive.io
Creating tutorials about React Native animations youtube.com/@Reactiive
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)
December 6, 2025 at 4:26 PM
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
December 6, 2025 at 4:26 PM
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)
December 6, 2025 at 4:26 PM
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
x.com/reactiive_/...
x.com/reactiive_/...
December 6, 2025 at 4:26 PM
4. avoid-touchable-opacity: your react native app deserves better tap interactions. I'd recommend pressto as the default option
x.com/reactiive_/...
x.com/reactiive_/...
3. prefer-box-shadow: this is not about having clean code - it helps you support beautiful shadows on Android too! (requires newArch)
December 6, 2025 at 4:26 PM
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)
December 6, 2025 at 4:26 PM
2. border-radius-with-curve: always prefer adding borderCurve property when borderRadius is specified. It makes your corners a bit smoother (iOS only)
Introducing Refined ✨
A simple eslint plugin that instantly sharpens your React Native app.
🧵 Here are the rules/tips:
A simple eslint plugin that instantly sharpens your React Native app.
🧵 Here are the rules/tips:
December 6, 2025 at 4:26 PM
Introducing Refined ✨
A simple eslint plugin that instantly sharpens your React Native app.
🧵 Here are the rules/tips:
A simple eslint plugin that instantly sharpens your React Native app.
🧵 Here are the rules/tips:
Aave Day Picker with React Native Reanimated.
Available on Demos ✨
Available on Demos ✨
December 1, 2025 at 3:33 PM
Aave Day Picker with React Native Reanimated.
Available on Demos ✨
Available on Demos ✨
👀 You can get a 25% discount today with the code “TODAY25” on my animations course.
More info in the thread below 🧵
More info in the thread below 🧵
November 28, 2025 at 10:44 AM
👀 You can get a 25% discount today with the code “TODAY25” on my animations course.
More info in the thread below 🧵
More info in the thread below 🧵
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)