Building Animated view using React Native framework

Building interactive buttons, graphics and icons may be easy but have you thought of adding animation to your app? With animation, I meant to imply motion objects or elements. Yes, React Native can be used to build animated views. If you are not familiar with the process, don’t worry. This tutorial blog will guide you through the process of building a moving object and adding it to your RN app.

What is the need of incorporating an animated view?

Designing an animated view and incorporating the same into the UI of an app can enhance its UX. This will, in hand, increase user satisfaction. Experts of React Native development company can easily add an animated view using the third-party library.

This is similar to the topic of momentum. Once an object is set in motion from its inertia state, it cannot be brought to a state of rest immediately. A similar kind of state can be created for the app’s interface using the Animated component of React Native.

Considering the Animated Library for the project

As you will be using the animated component for the project, you should be familiar with the context of the animated Library in React Native. You have to add properties from this Animated Library and bring variation to your animated view. This library is designed with the intent to make the task of developers much easier. The purpose of the Animated Library is the same as that of the Animated API. You can consider the Animated API or the Animated Library the same. These are used to ensure consistency in the animation.

As far as the operation of the Animated API is concerned, it works on the declarative connection to ensure the timely presentation of the animated view.

When you are using the component Animated, you have to associate it with six distinct child components namely ScrollView, Image, Text, FlatList, and SectionList. There is also an option to design other animatable components. In this regard, you have to consider Animated.createAnimatedComponent().

Isn’t it interesting that the React Native framework can provide you with greater flexibility?

However, other than these animatable components, you need to focus on the Aimated.ValueXY and Animated.Spring() method.

Animation.spring() method

Since we are focused on designing a spring-animated view, we need to consider this method. While using this method, you have to link an object of configuration (animation), comprising properties like friction, toValue, bounciness, useNativeDriver, and delay. These properties and specific values added to it define the pattern and consistency of your created animated view.

You will learn about these properties later in the section of the codebase.

Animated.ValueXY: Creating animation in 2D view

If not ValueXY, we could have used the standard form of a value class, i.e., the Animated.Value. However, for the current project, we will consider the 2D animated view. The ‘X’ and ‘Y’ linked to the Animated.Value is to mention the value of X and Y. thus you can be specific about its initial state and the ending state, which may not be possible to attain with Animated.Value.

Prerequisites context

For an RN project, there are two mandatory prior-needed tasks that you have to checklist before getting into the codebase. They are as follows.

• Setting up the Environment- If you have already set it up, move to the second step. However, if you have not, you cannot skip this step and install Node.js, android Studio, and the VS code editor. If you need a detailed step, you can visit the attached blog article.
• A template for the project- You have to execute the command npx react-native init AnimationProject –version 0.68.1. In your command prompt. This will create the required template for the project.

Now we will start with the codebase.

The Codebase design in the App.js file

Open the template (AnimationProject) that you built for the project. Note that you have to open it from the VS Code editor. Now, open the App.js file. Clear all the code syntax stored in this App.js file.

Image 1

You have to import the core React Native components from the react-native library. The StyleSheet component is for styling the added objects. The Text component is used for adding text elements. The View component is for adding containers and wrapping text elements.

Most importantly, the Animated component is for creating the animated view.

Also, you have to import the useEffect hook and React component.

Image 2

First, the code specifies the App component. Animated.ValueXY is introduced in the codebase for setting the initial value of x and y as 0. This means that the Animation will start from 0,0. It will go till x: 200 and y:200. It is delayed by 2 seconds. The bounciness property of the animation is 50 and it uses the Native driver.

You can notice the properties that you have to use with the Animated.ValueXY.

Image 3

The code snippets mentioned in mage 3 specify the style of the animation. The properties used with it are height, width, borderRadius, backgroundColor, and transform.

The position.x and position.y are the values used to mention the coordinates of x and y respectively of the considered object.

Lastly, you have to export the App.

Image 4

Although I don’t need to use the StyleSheet component, if you want, you can use this in this way and style the object.

To execute the codebase

This is the last step, where you have to execute the program using two commands. The first one is the npm install and the other one is npx react-native run-android.

However, to run this command line, you have to create a new terminal from your created template ‘AnimationProject’. Run these two given commands. Your virtual device will start presenting the animation of a red ball on it. The red ball is in oscillatory motion.

Consider image 5 as its output.

For informative blogs go here:- Etechnicaltalk