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
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.
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.
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
- Scroll View
- Flat List
- Section list
Or we can create our own animations using
We use start/stop methods to control time-based animation executions.in React Native animations are highly configurable.
Animation types provided by Animated API
There are several ways to compose an animation using Animated API in React Native
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
- React Native Navigation
- Fluid transition
- 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.
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.
Fluid transitions has the ability to frees certain elements during a transition of two views.
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 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
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.