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

  1. Transition Animations
  2. Supplement Animations
  3. Feedback Animations
  4. 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

  • View
  • Text
  • Image
  • Scroll View
  • Flat List
  • Section list
READ  Why you need an MVP

Or we can create our own animations using

Animated.createAnimatedComponent()

We use start/stop methods to control time-based animation executions.in React Native animations are highly configurable.

Animation types provided by Animated API

  • Timing
  • Easing
  • Duration
  • Delay

There are several ways to compose an animation using Animated API in React Native

  • Sequance()
  • Delay()
  • Start()
  • Stop()

If we set animations in a series manner and stop or interrupt an animation in between, then all the rest of the animations will stop.

To overcome this we can use Animate.paralled and put false to the stopTogether option.

Ways we can add animations to a React Native application

  1. React Native Navigation
  2. Fluid transition
  3. Lottie
  4. React pose

React Native Navigation

This is not the same as React navigation but has the same objective as the react-router

React Native navigation by default make the page transition like the native products but if we use it in one place, we are forced to use it everywhere

React Native Navigation has modal views, overlay views and other helpers

Even for iOS with side menus and split views

Defining all the screens in our application as constants help with push and pop operations in navigation.

Fluid transitions

React native navigation is ok for page transitions without effort but some transitions are a little bit complicated than that.

The most common example for a complicated animation could be items transitioning while keeping some of the elements on the display.

We can use React native navigations for this also but it takes too much time to implement it the we could do the other pages with fluid transitions with that time.

READ  What is the best CMS platform

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.

References

https://medium.com/nursoft/4-ways-to-add-animations-quickly-to-your-react-native-projects-7875f71f7c80

https://blog.usejournal.com/react-native-animations-intro-a71439e07f70

https://reactnative.dev/docs/0.51/animations

Tutorial