Intermediate18 min read
Animations & Gestures
Create fluid UI with Animated API, Reanimated, Gesture Handler, and layout animations.
Animated API
React Native Animated drives opacity, transform, and layout values on native driver when possible for 60fps animations.
Animated.timing, spring, and decay animate values over time. Compose Animated.parallel and sequence for complex transitions.
useNativeDriver: true offloads transforms and opacity; layout properties may still run on JS thread.
- Prefer native driver for transform animations
- Avoid animating width/height on large lists
- Use LayoutAnimation for simple layout changes sparingly
const fade = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(fade, { toValue: 1, duration: 300, useNativeDriver: true }).start();
}, []);
return <Animated.View style={{ opacity: fade }} />;Reanimated and Gestures
react-native-reanimated runs worklets on UI thread enabling gesture-linked animations without bridge lag.
Gesture Handler provides Pan, Pinch, and Tap recognizers composing with Reanimated shared values.
Shared transitions and entering/exiting animations in Reanimated 3 simplify modal and list item motion.
- Install gesture-handler and reanimated babel plugin
- Wrap root app with GestureHandlerRootView
- Test gestures on real devices—not only simulators
const offset = useSharedValue(0);
const style = useAnimatedStyle(() => ({ transform: [{ translateX: offset.value }] }));
const gesture = Gesture.Pan().onUpdate(e => { offset.value = e.translationX; });