Learn Animation in React Native using Reanimated Library

Introduction

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:

1. Transformations: Moving or altering the size and shape of elements (e.g., scale, rotate, translate).

2. Opacity Changes: Fading elements in and out to improve transitions.

3. Timing Animations: Animations based on time intervals (e.g., easing in/out).

4. Spring Animations: Simulating physical forces like bounce or friction.

5. 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.

Let’s combine these concepts in our example.

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, and Create the Animated Deletable Item

//App.js
// 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} />
)}
/>
);
};



//components/DeletableItem

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 = () => {
// Animate scale and opacity before deleting the item
opacity.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) });
scale.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) }, () => {
// Remove item from list after animation completes
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 the casainnov.com, and check their mobile app page, and contact them there.

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