Learn Animation in React Native using Reanimated

Introduction

This series of Build for Scale focuses on advanced React Native app development.

I will discuss methods, best practices, how-to guides, and advanced approaches for using the most common tools and packages. We'll cover how to structure your app, architect solutions, and implement advanced approaches for building performant, secure, and scalable applications.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you're a seasoned professional or just starting, you'll find invaluable knowledge and practical guidance to transform your React Native development journey.

In mobile applications, smooth animations can significantly improve the user experience by providing visual cues that make interactions feel intuitive. Whether it's a button press, a screen transition, or an element deletion, animations help users understand the changes happening on the screen.

One of the most powerful libraries for handling animations in React Native is Reanimated. Reanimated provides a declarative API for creating high-performance animations, enabling developers to design smooth and responsive animations.

Why Use Animations?

Animations are essential in modern mobile applications for several reasons:

• Improved User Experience: Visual feedback helps users understand interactions, making the app feel more responsive.
• Smooth Transitions: Seamless animations between actions reduce cognitive load and make the experience more pleasant.
• Interactive Design: Animations can provide context and meaning, such as showing that an item was deleted from a list.

By using libraries like Reanimated, developers can create fluid animations that feel native and lightweight, even when handling complex gestures or transitions.

Introduction to React Native Reanimated

Reanimated is a powerful animation library that allows you to build smooth and complex animations in React Native. Unlike the built-in Animated API, Reanimated provides greater flexibility and improved performance by running animations directly on the UI thread. This eliminates frame drops and makes animations more fluid.

Types of Animations in Reanimated

With Reanimated, you can create several types of animations:

• Transformations: Moving or altering the size and shape of elements (e.g., scale, rotate, translate)
• Opacity Changes: Fading elements in and out to improve transitions
• Timing Animations: Animations based on time intervals (e.g., easing in/out)
• Spring Animations: Simulating physical forces like bounce or friction
• Gesture-Based Animations: Handling complex interactions like dragging or swiping

Key Animation Concepts

Before we jump into the example, it's important to understand how to think about animations. The key concepts include:

• Transform: Used to scale, rotate, or translate (move) elements. For example, when deleting an item, we can animate its scale to shrink it down.
• Opacity: Adjusts the visibility of an element. We can reduce the opacity to fade out an item as it is being deleted.
• Timing and Easing: Defines the speed and style of the animation. Easing refers to the way an animation accelerates or decelerates. For example, an “ease-out” animation makes the animation slow down towards the end, creating a smoother experience when an item is deleted.

Example: Deleting an Item from a FlatList with Easing Out Animation

In this example, we'll use Reanimated to create an easing out animation when an item is deleted from a FlatList. The item will scale down and fade out before it is removed from the list.

Step 1: Install Reanimated and Dependencies

Check the official documentation on how to install the package.

Steps 2 and 3: Set Up a FlatList with Deletable Items

// App.js
import React, { useState } from 'react';
import { Text, View, Button, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import Animated, { 
  useSharedValue, 
  useAnimatedStyle, 
  withTiming, 
  Easing 
} from 'react-native-reanimated';

const DATA = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  { id: '3', title: 'Item 3' },
];

const App = () => {
  const [data, setData] = useState(DATA);

  const deleteItem = (id) => {
    setData((currentData) => currentData.filter(item => item.id !== id));
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <DeletableItem item={item} onDelete={deleteItem} />
      )}
    />
  );
};

const DeletableItem = ({ item, onDelete }) => {
  const opacity = useSharedValue(1);
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      transform: [{ scale: scale.value }],
    };
  });

  const handleDelete = () => {
    opacity.value = withTiming(0, { 
      duration: 300, 
      easing: Easing.out(Easing.ease) 
    });
    scale.value = withTiming(0, { 
      duration: 300, 
      easing: Easing.out(Easing.ease) 
    }, () => {
      onDelete(item.id);
    });
  };

  return (
    <Animated.View style={[styles.item, animatedStyle]}>
      <Text>{item.title}</Text>
      <TouchableOpacity onPress={handleDelete}>
        <Text style={styles.deleteText}>Delete</Text>
      </TouchableOpacity>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 20,
    marginVertical: 8,
    backgroundColor: '#f9c2ff',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  deleteText: {
    color: 'red',
  },
});

How it Works

• useSharedValue: Stores the animation values for opacity and scale. These are shared across the app and updated when the delete action is triggered.
• useAnimatedStyle: Returns the animated styles (opacity and transform scale) based on the current values.
• withTiming: Smoothly animates the opacity and scale values with a given duration and easing function.
• Easing.out(Easing.ease): Eases the animation, making it slow down as the item disappears, creating a more natural feel.

Conclusion

Animations can elevate the user experience by providing meaningful feedback and creating smoother transitions. With Reanimated, you can create highly performant and fluid animations in React Native. In this guide, we demonstrated how to use Reanimated to create an easing-out animation when deleting an item from a FlatList.

You can experiment with different types of animations, such as spring or gesture-based interactions, to further enhance the interactivity and responsiveness of your app.

If you need to integrate Advanced functionalities in your Mobile app, create one from scratch, or need consulting in React Native, visit casainnov.com and check their mobile app page.

I share insights about React Native, React, and TypeScript. Follow me on LinkedIn or Medium.

#ReactNative #WebSockets #RealTime #MobileDevelopment #AppDevelopment #TechInnovation #Coding #JavaScript #MobileApps #DevCommunity #SocketProgramming #RealTimeCommunication #TechNavy