The animated API that we explored in the previous exercise,
provides a fairly comprehensive way of doing complex animations.
But, as you realized in the exercise,
it is quite cumbersome to set up those animations for performing simple animation.
So, this is where we will make use of
another NPM package called as React-Native-Animatable,
which provides a set of pre-packaged animations
that we can more easily apply to our application.
There are many React Native Animation packages that are available.
I selected one of them to illustrate to you how we can
apply animations with one of the pre-packaged set of animations.
Let's explore the animatable package in a bit more detail.
To get started on this exercise,
at the prompt in your project type yarn
add React-Native-Animatable@1.2.4 and then
add this into our project.
Once you have added this into the project,
then we can go ahead and make use of
the animatable support from this React-Native-Animatable.
To make use of some of the pre-packaged animations from animatable,
let's go to some of the components and then add the animatable based animations.
Now, in this exercise we will explore some simple animations.
I'll also show you how we can use the animatable to add more animations in several of
the following exercises where we will apply more of the animation
animatable support for adding animations.
So, we'll start out with the "About" component.
In the "About" component,
the first thing is to import everything as animatable from
React-Native-Animatable and that will give us all the exports from
the React-Native-Animatable and then going down into
our "About" component to the ScrollView here,
to this ScrollView in the error message,
we will add a animatable view.
So this is animatable view,
not animated view that we used earlier and then we just need to
specify the corresponding animation that we want to apply and animation.
Some pre-packaged animations that we can apply is a fading down.
Meaning that this item will fade down from the top and I can specify the duration
as 2,000 milliseconds and
a delay of 1,000 milliseconds.
So one second delay after the component is mounted,
one second delay before you begin the animation.