Exercise (Video): Animatable

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

59 ratings

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

59 ratings

Course 3 of 4 in the Specialization Full-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

From the lesson

React Native Alerts, Animations, Gestures, and Persist Redux Store

In this module we look at enhancing the user experience through the use of animations and support for gesture-based interaction. We also look at persisting the redux state, and alerting the users

Animations13:12

Exercise (Video): Animations17:20

Exercise (Video): Animatable11:09

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

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.

Whatever is inside this animated view,

you will apply that corresponding animation.

So fadeInDown animation to that.

The same animation I'm going to apply to this one also here

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

and then we'll go to the dish detail component.

In the dish detail component again I will add in the same set of animations.

So let me import the animatable first and then we will add in the same animatable view.

So, going into the dish detail component for the card.

Let me add in the animatable view here.

Then going into the render comments,

in the render comments let me again copy this animatable view from here

and then we will apply this to the card that we're rendering here.

So to this card,

we'll apply the animatable view.

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.

Close off with animatable view

and similarly for the "Menu" component.

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

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play