React Native Reanimated provides a powerful declarative API for animations running on the UI thread. This enables smooth 60fps animations without blocking JavaScript execution.
Why Reanimated?
Traditional React Native animations run on the JavaScript thread, which can drop frames during heavy computation. Reanimated runs animations on the UI thread, ensuring consistent performance.
Getting Started
typescript
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
withTiming
} from 'react-native-reanimated';
function ScaleButton() {
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => {
return {
transform: [{ scale: scale.value }]
};
});
const onPress = () => {
scale.value = withSpring(1.2, {
damping: 15,
stiffness: 150
});
};
return (
<Animated.View style={animatedStyle}>
<Button onPress={onPress} />
</Animated.View>
);
}Advanced Patterns
Gesture Handling
typescript
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
function DraggableCard() {
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const panGesture = Gesture.Pan()
.onChange((event) => {
translateX.value = event.translationX;
translateY.value = event.translationY;
})
.onEnd(() => {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
});
const animatedStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value }
]
}));
return (
<GestureDetector gesture={panGesture}>
<Animated.View style={animatedStyle}>
<Card />
</Animated.View>
</GestureDetector>
);
}Performance Tips
- 1Use worklets for animation logic
- 2Avoid JavaScript bridges during animations
- 3Share values between animations
- 4Use proper easing functions
Conclusion
React Native Reanimated is the gold standard for React Native animations. Master it to create delightful, performant user experiences.