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.