0:00
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.
4:03
and move the ten.
So that is for the "About" component.
Next, let's go to the contact component.
In the contact component also I will apply
the same animation to the card here, I will import.
So let me first import and
then let me copy the animatable and then going into the contact component,
I will apply this to the card here and
then animatable view
to the card here.
Let's indent these items
6:36
Let me indent the card here and
the corresponding animatable view that we will apply is fadeInUp instead of fadeInDown.
After this, let's go to favorite component.
In the favorite component for items there,
let me go to the dish detail component.
Copy this from there to the favorite component and add that in there and then we will
apply the animatable to the favorite component to the list item.
So inside this list item in the Swipeout,
I will apply the animatable view to this.
The corresponding animation that I'm going to use is
fadeInRightBig and the duration is 2,000,
no delay for this.
8:12
Going to the "Menu" component,
I'm going to again copy the same animation that I've used here,
the animatable view and then apply that to
the tile in the "Menu" component.
So we'll say animatable view fadeInRightBig
and then inflows this.
Let's save the changes and then go and take a look at our application.
Taking a look at our application,
you can see that the "Home" component is being
animated which we have added in the previous exercise.
Let's go to the "About" component and when you go to
the "About" component you can see that the contents of the "About" component
fades in from the top and that's the fading down animatable that we have used there.
Let's go into the "Menu" component,
you can see that in the "Menu" component the tiles fade in from the right.
So that's the fadeInRightBig animation that we have applied.
Let's go to the details of
a specific dish and you will see that in the dish detail component,
the two cards fading.
One from the top and the other from the bottom.
Let me add this to my list of favorites.
While I'm here and then go back to
the "Menu" component and let me add in one more item to my list of favorites.
Again you can see the animation in the dish detail component and
then going to the contact component,
you can see that in the contact component also the card fades in from the top.
Then finally taking a look at my favorites,
you can see how the list items in the my favorites fades in and from the right side.
Because we applied the fadeInRightBig animation
to the elements in the list there.
With this, we complete this exercise.
In this exercise you have seen how we can add
simple animations to our application using React-Native-Animatable.
You will see me exploring React-Native-Animatable more in
the following exercises where I will add more animations.
This is a good time for you to do a git-commit with the message animatable
Jogesh K. MuppalaAssociate Professor
