Using Animation in React Native Applications

Introduction

Animations in an application are used to make the user interactions colorful and engaging and also to make the product different from the once that are already in the market or so to speak to make the application unique and attention grabbing.

Types of Animations

Transition Animations

Supplement Animations

Feedback Animations

Decorative Animations

Transitions Animations

Animations that are displayed when we are taking the user from one page to another in the application the animations used to it are called transition animations.

This is the most important kind of animations out of the 4 animations.

These transitions animations are working as a notifier to the user that the task has been changed.

Supplement Animations

The animations that modify the information being displayed is done by the supplement animations

These animations are used to let the user know that the information has been changed or the data has been left or joined the view

These animations are not triggered by the user but the events that are being done.

Feedback Animations

All the animations that shows the information regarding internal processes or state of the application

These animations are triggered by the interactions of the user with the application

Decorative Animations in React Native

The animations that does provide a functional importance but help the application to look good

Mainly used to give an aesthetic view and help it to differ from the applications that are in the market in the same category.

React native uses an API to deal with animations called the Animated API, Animatable components in React Native include the follows

Fluid transitions has the ability to frees certain elements during a transition of two views.

Lottie

Lottie is the best library for decorative animations, Lottie is a library for React Native that allows small animations in Lottie format to display in our React Native Application we simply need to install and import the relevant library and use <LottieView> tag which is a lot like the view tag to use Lottie format animations that we have in our assets folder

Lottie can be used with Animated API or with any other transition libraries

React pose

React pose mainly target supplement and feedback animations.

Feedback Animations are used with Boolean variables like isPressed, isDragged, isActive, hasMessageArrived

Pose is similar to a state it defined by the internal state of an element which vary overtime.

Poses have properties in the most common cases like scale, position, color

Conclusion

All the tools are good but they are also with limitations for specific animations that are yet to be created and if we are in need of such, we can always hand craft animations using native. And also over using animation leads to memory drain resulting slow apps.