React Native Unplugged: How to Create Stunning Animations in React Native

Have you ever used an app that just feels smooth and responsive? Those fluid transitions, natural movements, and engaging effects aren’t just magic—they’re well-crafted animations. If your React Native app feels static or robotic, it’s time to level up with animations. But where do you start?

This chapter of React Native Unplugged explores the best ways to implement animations using the Animated API, Reanimated, and Lottie. By the end, your UI will feel more polished, interactive, and engaging. Let’s dive in! 🚀

1. Using the Animated API (Built-in Solution)

React Native provides the Animated API, which is an easy-to-use and powerful tool for animating components.

Basic Example: Fade In Animation

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

const FadeInView = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>Fading In!</Text>
    </Animated.View>
  );
};

export default FadeInView;

Moving an Element with Animated API

import React, { useRef } from 'react';
import { Animated, View, Text, Button } from 'react-native';

const MoveView = () => {
  const moveAnim = useRef(new Animated.Value(0)).current;

  const startAnimation = () => {
    Animated.timing(moveAnim, {
      toValue: 100,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Animated.View style={{ transform: [{ translateY: moveAnim }] }}>
        <Text>Move Me!</Text>
      </Animated.View>
      <Button title="Move" onPress={startAnimation} />
    </View>
  );
};

export default MoveView;

2. Using React Native Reanimated for Performance Optimization

The Reanimated library provides better performance, especially for complex animations, as it offloads animations to the native thread.

Installing Reanimated

npm install react-native-reanimated

For iOS, run:

cd ios && pod install

Then, enable the Reanimated plugin in babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Using Reanimated for a Smooth Animation

import React from 'react';
import { View, Button, Text } from 'react-native';
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';

const ReanimatedExample = () => {
  const translateX = useSharedValue(0);

  const moveBox = () => {
    translateX.value = withSpring(100);
  };

  return (
    <View>
      <Animated.View style={{ transform: [{ translateX: translateX.value }] }}>
        <Text>Move Me Smoothly!</Text>
      </Animated.View>
      <Button title="Move" onPress={moveBox} />
    </View>
  );
};

export default ReanimatedExample;

3. Using Lottie for Complex Animations

Lottie allows you to add high-quality, lightweight animations to your React Native app with JSON files exported from Adobe After Effects.

Installing Lottie

npm install lottie-react-native lottie-ios

For iOS, install the dependencies:

cd ios && pod install

Displaying a Lottie Animation

import React from 'react';
import { View } from 'react-native';
import LottieView from 'lottie-react-native';

const LottieExample = () => {
  return (
    <View>
      <LottieView source={require('./animation.json')} autoPlay loop />
    </View>
  );
};

export default LottieExample;

4. Choosing the Right Animation Library

Library	Best For	Performance
Animated API	Simple animations	Good
Reanimated	Complex animations, gestures	Excellent
Lottie	High-quality animations from designers	Great

5. Conclusion

Animations in React Native can transform a basic UI into an engaging experience. Whether you use the Animated API for simple effects, Reanimated for smooth, high-performance transitions, or Lottie for professional animations, the right choice depends on your app’s needs.

Now that you know how to bring your UI to life, what’s next? Stay tuned for the next chapter of React Native Unplugged, where we’ll explore another essential feature to take your app to the next level!