Animation Libraries

Implement smooth animations in React Native using built-in Animated API and popular animation libraries. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples

60 min•By Priygop Team•Last updated: Feb 2026

Animated API

Use React Native's built-in Animated API for creating smooth, performant animations with timing, spring, and decay animations.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Animation Types

Timing - Linear animations with duration and easing
Spring - Physics-based animations with bounce effects
Decay - Animations that slow down over time — a critical concept in cross-platform mobile development that you will use frequently in real projects
Sequence - Chain multiple animations together — a critical concept in cross-platform mobile development that you will use frequently in real projects
Parallel - Run multiple animations simultaneously — a critical concept in cross-platform mobile development that you will use frequently in real projects

Animation Libraries

Explore libraries like react-native-reanimated and lottie-react-native for advanced animations and complex motion graphics.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Advanced Animation Example

Example

import React, { useRef, useEffect } from 'react';
import { View, Text, StyleSheet, Animated, TouchableOpacity, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const AdvancedAnimationExample = () => {
  // Animation values
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(0.5)).current;
  const translateX = useRef(new Animated.Value(-width)).current;
  const rotateAnim = useRef(new Animated.Value(0)).current;
  const bounceAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // Initial animation sequence
    Animated.sequence([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.parallel([
        Animated.spring(scaleAnim, {
          toValue: 1,
          tension: 50,
          friction: 3,
          useNativeDriver: true,
        }),
        Animated.timing(translateX, {
          toValue: 0,
          duration: 800,
          useNativeDriver: true,
        }),
      ]),
    ]).start();
  }, []);

  const startRotation = () => {
    Animated.loop(
      Animated.timing(rotateAnim, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
      })
    ).start();
  };

  const startBounce = () => {
    Animated.sequence([
      Animated.timing(bounceAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(bounceAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  };

  const startPulse = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 1.2,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
      ])
    ).start();
  };

  const resetAnimations = () => {
    fadeAnim.setValue(0);
    scaleAnim.setValue(0.5);
    translateX.setValue(-width);
    rotateAnim.setValue(0);
    bounceAnim.setValue(0);
  };

  const rotateInterpolate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  const bounceInterpolate = bounceAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -20],
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Advanced Animations</Text>
      
      <View style={styles.animationContainer}>
        {/* Fade Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.fadeBox,
            {
              opacity: fadeAnim,
            },
          ]}
        >
          <Text style={styles.boxText}>Fade In</Text>
        </Animated.View>

        {/* Scale Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.scaleBox,
            {
              transform: [{ scale: scaleAnim }],
            },
          ]}
        >
          <Text style={styles.boxText}>Scale</Text>
        </Animated.View>

        {/* Translate Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.translateBox,
            {
              transform: [{ translateX }],
            },
          ]}
        >
          <Text style={styles.boxText}>Slide In</Text>
        </Animated.View>

        {/* Rotation Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.rotateBox,
            {
              transform: [{ rotate: rotateInterpolate }],
            },
          ]}
        >
          <Text style={styles.boxText}>Rotate</Text>
        </Animated.View>

        {/* Bounce Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.bounceBox,
            {
              transform: [{ translateY: bounceInterpolate }],
            },
          ]}
        >
          <Text style={styles.boxText}>Bounce</Text>
        </Animated.View>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={startRotation}>
          <Text style={styles.buttonText}>Start Rotation</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={startBounce}>
          <Text style={styles.buttonText}>Bounce</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={startPulse}>
          <Text style={styles.buttonText}>Pulse</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={[styles.button, styles.resetButton]} onPress={resetAnimations}>
          <Text style={styles.buttonText}>Reset</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  animationContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
  animationBox: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  fadeBox: {
    backgroundColor: '#2196F3',
  },
  scaleBox: {
    backgroundColor: '#4CAF50',
  },
  translateBox: {
    backgroundColor: '#FF9800',
  },
  rotateBox: {
    backgroundColor: '#9C27B0',
  },
  bounceBox: {
    backgroundColor: '#F44336',
  },
  boxText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 12,
  },
  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: 10,
    marginTop: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  resetButton: {
    backgroundColor: '#f44336',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default AdvancedAnimationExample;

Try It Yourself — Advanced UI Components

Try It Yourself — Advanced UI ComponentsHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 8</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 8</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Quick Quiz — Advanced UI Components

Next Module →

Animation Libraries

60 min•By Priygop Team•Last updated: Feb 2026

Animated API

Animation Types

Timing - Linear animations with duration and easing

Spring - Physics-based animations with bounce effects

Decay - Animations that slow down over time — a critical concept in cross-platform mobile development that you will use frequently in real projects

Sequence - Chain multiple animations together — a critical concept in cross-platform mobile development that you will use frequently in real projects

Parallel - Run multiple animations simultaneously — a critical concept in cross-platform mobile development that you will use frequently in real projects

Animation Libraries

Advanced Animation Example

Example

import React, { useRef, useEffect } from 'react';
import { View, Text, StyleSheet, Animated, TouchableOpacity, Dimensions } from 'react-native';

const { width, height } = Dimensions.get('window');

const AdvancedAnimationExample = () => {
  // Animation values
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const scaleAnim = useRef(new Animated.Value(0.5)).current;
  const translateX = useRef(new Animated.Value(-width)).current;
  const rotateAnim = useRef(new Animated.Value(0)).current;
  const bounceAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // Initial animation sequence
    Animated.sequence([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.parallel([
        Animated.spring(scaleAnim, {
          toValue: 1,
          tension: 50,
          friction: 3,
          useNativeDriver: true,
        }),
        Animated.timing(translateX, {
          toValue: 0,
          duration: 800,
          useNativeDriver: true,
        }),
      ]),
    ]).start();
  }, []);

  const startRotation = () => {
    Animated.loop(
      Animated.timing(rotateAnim, {
        toValue: 1,
        duration: 2000,
        useNativeDriver: true,
      })
    ).start();
  };

  const startBounce = () => {
    Animated.sequence([
      Animated.timing(bounceAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(bounceAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  };

  const startPulse = () => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 1.2,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
      ])
    ).start();
  };

  const resetAnimations = () => {
    fadeAnim.setValue(0);
    scaleAnim.setValue(0.5);
    translateX.setValue(-width);
    rotateAnim.setValue(0);
    bounceAnim.setValue(0);
  };

  const rotateInterpolate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  const bounceInterpolate = bounceAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, -20],
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Advanced Animations</Text>
      
      <View style={styles.animationContainer}>
        {/* Fade Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.fadeBox,
            {
              opacity: fadeAnim,
            },
          ]}
        >
          <Text style={styles.boxText}>Fade In</Text>
        </Animated.View>

        {/* Scale Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.scaleBox,
            {
              transform: [{ scale: scaleAnim }],
            },
          ]}
        >
          <Text style={styles.boxText}>Scale</Text>
        </Animated.View>

        {/* Translate Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.translateBox,
            {
              transform: [{ translateX }],
            },
          ]}
        >
          <Text style={styles.boxText}>Slide In</Text>
        </Animated.View>

        {/* Rotation Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.rotateBox,
            {
              transform: [{ rotate: rotateInterpolate }],
            },
          ]}
        >
          <Text style={styles.boxText}>Rotate</Text>
        </Animated.View>

        {/* Bounce Animation */}
        <Animated.View
          style={[
            styles.animationBox,
            styles.bounceBox,
            {
              transform: [{ translateY: bounceInterpolate }],
            },
          ]}
        >
          <Text style={styles.boxText}>Bounce</Text>
        </Animated.View>
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button} onPress={startRotation}>
          <Text style={styles.buttonText}>Start Rotation</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={startBounce}>
          <Text style={styles.buttonText}>Bounce</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={styles.button} onPress={startPulse}>
          <Text style={styles.buttonText}>Pulse</Text>
        </TouchableOpacity>
        
        <TouchableOpacity style={[styles.button, styles.resetButton]} onPress={resetAnimations}>
          <Text style={styles.buttonText}>Reset</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
  animationContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
  animationBox: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  fadeBox: {
    backgroundColor: '#2196F3',
  },
  scaleBox: {
    backgroundColor: '#4CAF50',
  },
  translateBox: {
    backgroundColor: '#FF9800',
  },
  rotateBox: {
    backgroundColor: '#9C27B0',
  },
  bounceBox: {
    backgroundColor: '#F44336',
  },
  boxText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 12,
  },
  buttonContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    gap: 10,
    marginTop: 20,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  resetButton: {
    backgroundColor: '#f44336',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default AdvancedAnimationExample;

Try It Yourself — Advanced UI Components

Try It Yourself — Advanced UI ComponentsHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 8</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Animation Libraries

Animated API

Animation Types

Animation Libraries

Advanced Animation Example

Try It Yourself — Advanced UI Components

Quick Quiz — Advanced UI Components

Topics in This Module

Animation Libraries

Animated API

Animation Types

Animation Libraries

Advanced Animation Example

Try It Yourself — Advanced UI Components

Quick Quiz — Advanced UI Components

Topics in This Module