How to implement smooth Animation in React Native
Fluid animations are necessary to provide an excellent mobile experience. Poorly implemented animations in React Native can easily result in frame drops, UI jank, and delayed interactions, especially on low-end Android devices.
This blog explains how React Native animations work, which APIs to use, and how to make consistently fluid animations.
Why React Native Animations Are Slow ?
React Native runs JavaScript on a separate thread from the UI. If an animation heavily depends on the JavaScript thread, any delays caused by API calls, re-renders, or complicated computations will affect how smooth it is.
Common reasons for lag:
- Animations running on the JS thread
- Frequent re-renders during animation
- Layout recalculations (height, width, top)
- Unoptimized lists and images
To avoid this, animations should be offloaded to the native thread whenever possible.
Animation Options in React Native
1. Animated API (Built-in)
For the majority of use cases, React Native’s Animated API is adequate and allows using useNativeDriver to run animations on the native thread.
Recommended for:
- Simple transitions
- Opacity, scale, translate animations
- Gesture-based interactions
Example: Fade In Animation
const fadeAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}).start();
}, []);
<Animated.View style={{ opacity: fadeAnim }}>
<Text>Animated View</Text>
</Animated.View>
– useNativeDriver only supports non-layout properties like:
- opacity
- transform
2. LayoutAnimation (For Simple Layout Changes)
LayoutAnimation automatically animates layout updates like height or position changes.
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setExpanded(true);
Limitations:
- Limited control
- Android requires explicit enabling
- Not suitable for complex animations
3. React Native Reanimated (Recommended)
React-native-reanimated removes JS thread bottlenecks by running animations solely on the UI thread.
Suggested for:
- intricate animations based on gestures
- High-performance exchanges
- Applications of production quality
Basic Example
const opacity = useSharedValue(0);
useEffect(() => {
opacity.value = withTiming(1, { duration: 300 });
}, []);
const animatedStyle = useAnimatedStyle(() => ({
opacity: opacity.value,
}));
<Animated.View style={animatedStyle} />
This approach avoids frame drops even under heavy JS load.
Gesture + Animation = Smooth UX
Performance rapidly deteriorates when gestures and animations are executed simultaneously on the JS thread.
Gestures and animations remain on the UI thread when Reanimated + Gesture Handler is used.
const translateX = useSharedValue(0);
const gesture = Gesture.Pan()
.onUpdate((e) => {
translateX.value = e.translationX;
})
.onEnd(() => {
translateX.value = withSpring(0);
});
This pattern is ideal for:
- Swipe actions
- Drag & drop
- Bottom sheets
Performance Best Practices
Use Transforms Instead of Layout Properties
Bad:
height: animatedValue Good:
transform: [{ scaleY: animatedValue }] Avoid Re-renders During Animations
- Use useRef instead of useState
- Memoize animated components
- Avoid inline functions in animated views
Optimize Lists Before Animating
- Use FlatList instead of ScrollView
- Set removeClippedSubviews
- Avoid animating large lists directly
Reduce Overdraw
- Avoid nested gradients
- Limit shadows on Android
- Prefer static backgrounds
When to Choose Which Animation API
| Use Case | Recommended API |
| Simple fade / scale | Animated |
| Expand / collapse layout | LayoutAnimation |
| Gestures & complex UI | Reanimated |
| Production-level performance | Reanimated |
Common Mistakes
- Animating height, width, or top
- Forgetting useNativeDriver
- Running heavy logic during animation
- Animating large lists without virtualization
Conclusion
React Native smooth animations are more about thread management and performance awareness than they are about visuals.
The built-in Animated API is sufficient for basic transitions.
React Native Reanimated is the best option for anything involving lists, gestures, or intricate interactions.
User satisfaction and perceived performance are enhanced by well-executed animations; poorly executed ones have the opposite effect.
