Hey! I believe you're here to learn about Animated from React Native. In this article, we'll discuss how to use it in a project to improve the usability of a swipe component. Before we get there, I'd like to introduce you to the idea of animations. If you're already familiar with this topic, feel free to jump to the “Animations in React Native” section.
The idea of animation involves a sequence of states, which can be images or attributes like the position of an element on the XYZ axis. These states are called keyframes. In the example below, we have eight keyframes. When applied in sequence, they create an animation.
Sometimes, we can see animations without changing the drawing. For example, we might see an element moving along the XYZ axis or changing its opacity. At this moment, we are updating the values of these states, similar to a keyframe.
Animation created frame by frame using the frame rate to update is called frame-based animation. In this type of animation, the frame rate determines the speed of the movement.
Time-based animation involves using the elapsed time since the last frame to calculate the necessary updates for the current frame. Here, the frame rate affects the quality of the movement, but the speed remains similar across different frame rates.
React Native provides two animation systems by default to help create and manipulate animations in projects. You can use the Animated library to handle specific cases and values in a component, or the LayoutAnimation library for global configuration to animate all views in the render/layout cycle. This tutorial will focus on the Animated library.
The Animated library helps create animations in mobile applications using React Native. It allows easy animation of components and values using Animated.Value or Animated.ValueXY. Essentially, it works with input and output values, controlled by start and stop methods.
For performance optimization, you shouldn't modify the Animated value directly. Instead, create a reference using the useRef hook to make a mutable reference object. This lets you update the property and persist values throughout the component lifecycle.
This library exports six component types: View, Text, Image, ScrollView, FlatList, and SectionList, but you can create others using the createAnimatedComponent() method.
The main goal of this article is to talk about animations using Animated. I won't spend too much time explaining how to create a To-Do List in React Native (you can follow this repository and check the full project or in many videos/tutorials on the web).
So, to make the layout, we will create an input text field, a button to add the task, a flat list, and a component to display the task content and its state which we'll refer to as the TaskCard component. This component will display the task content, like the layout below:
Each TaskCard has a checkbox to check if the task is done, a title, and an identifier number.
In our application without animation, the interaction with the trigger to mark as done will be using the onPress to trigger the state (clicking on the box to mark the task as done).
To improve readability and make it easier to use in different situations, let's create a component called AnimationSwipe. We will use this component to wrap the component we would like to animate.
The main behavior of this component is to enable swiping of child components on the screen, sliding them to the left or right. This component will have four initial props:
We will create a few constants to help with action management:
To apply an animation of swipe, we should create two refs: one for the Animated to work with ValueXY called swipeAnim to work with 2D animations, and another to handle the gesture called panResponder, which will listen to the touch gestures.
We now have the ref objects swipeAnim and panResponder, but we need a way to interact with these refs. This includes triggering the animation, checking if it should complete the swipe (avoiding missed triggers), and completing the swipe.
To help with these interactions, we will create two functions:
As it's an Animated component, we should use an Animated.View instead of a simple View tag. Wrap the children in Animated.View and spread the panResponder.panHandlers as props to enable gesture recognition and response.
Note: This style was applied only to create a limited range for the swipes.
To enhance user experience and guide them in choosing the final result, add an example behind the animation showing the outcome after a swipe.
Create a component to represent this result, with a CheckBox on the left side checked as true, and another on the right side checked as false.
It will have an absolute position and will be placed before the task content in TaskCard, as shown in the code below:
Working with animations isn't too complicated and can improve user interaction with our apps. Whether guiding the user or enhancing presentation, animations can make our app feel better.
https://blog.sklambert.com/using-time-based-animation-implement/#frame-based-animation
https://reactnative.dev/docs/animated
https://github.com/totabraz/todo-list-with-atomic-design-and-animated-library
Image 01 - Animation. 3 May 2024. Image. Available on: https://www.freepik.com/free-vector/colorful-tropical-parrots-flying-cartoon-illustration-set_24644198.htm#uuid=95b7af5f-98fb-42c0-9d21-a5b5aea55f5d.