Animated API
Animated API
The Animated API is React Native’s built-in library for creating smooth, performant animations, allowing you to animate component properties like opacity, position, and scale.
Creating an Animated Value
javascript
import { Animated } from 'react-native';
import { useRef } from 'react';
const fadeAnim = useRef(new Animated.Value(0)).current;
Animating Opacity
javascript
Animated.timing(fadeAnim, {
toValue: 1,
duration: 500,
useNativeDriver: true,
}).start();
Fading In
Using Animated.spring for Natural Motion
javascript
Animated.spring(scaleAnim, {
toValue: 1,
friction: 5,
useNativeDriver: true,
}).start();
Sequencing Multiple Animations
javascript
Animated.sequence([
Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
Animated.timing(scaleAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
]).start();
Running Animations in Parallel
javascript
Animated.parallel([
Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
Animated.timing(translateY, { toValue: 0, duration: 300, useNativeDriver: true }),
]).start();
The Importance of useNativeDriver
Setting useNativeDriver to true offloads the animation to run on the native UI thread rather than the JavaScript thread, resulting in significantly smoother performance, especially under JavaScript load.
Interpolating Values
javascript
const rotate = spinAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
Conclusion
The Animated API provides a powerful, built-in foundation for creating smooth animations in React Native, forming the basis for more advanced animation techniques covered in this section.
