Animate React Native UI Elements

25 minutes

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like timing and spring to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

pro-course-rss-logo

PRO RSS Feed

Animate Styles of a React Native View with Animated.timing

Animate the Scale of a React Native Button using Animated.spring

P

Create a Draggable Card with React Native Pan Responder, and Animated.decay

P

Animate Colors with React Native Interpolate

P

Animate Rotation with React Native Interpolate

P

Animate a Sequence of React Native Animations with Animated.sequence

P

Stagger React Native Animations with Animated.stagger

P

Animate Multiple Animations at the Same Time with Animated.parallel

P

Create a Flip Card Animation with React Native

P
react tutorial about Animate Styles of a React Native View with Animated.timing

Animate Styles of a React Native View with Animated.timing

3:29 react

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

react tutorial about Animate the Scale of a React Native Button using Animated.spring

Animate the Scale of a React Native Button using Animated.spring

3:12 react PRO

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

react tutorial about Create a Draggable Card with React Native Pan Responder, and Animated.decay

Create a Draggable Card with React Native Pan Responder, and Animated.decay

3:57 react PRO

In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.

react tutorial about Animate Colors with React Native Interpolate

Animate Colors with React Native Interpolate

2:11 react PRO

We'll use the interpolate function from an Animated.Value to transition the background color of an Animated.View. We'll simultaneously translate the position with the same Animated.Value.

react tutorial about Animate Rotation with React Native Interpolate

Animate Rotation with React Native Interpolate

1:52 react PRO

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

react tutorial about Animate a Sequence of React Native Animations with Animated.sequence

Animate a Sequence of React Native Animations with Animated.sequence

1:47 react PRO

In this lesson we'll use Animated.sequence to play multiple Animated.timing, and Animated.spring animations one after another.

react tutorial about Stagger React Native Animations with Animated.stagger

Stagger React Native Animations with Animated.stagger

2:53 react PRO

In this lesson we'll use Animated.stagger to stagger Animated.timing animations that animate the height of a React Native view every 300 milliseconds.

react tutorial about Animate Multiple Animations at the Same Time with Animated.parallel

Animate Multiple Animations at the Same Time with Animated.parallel

1:26 react PRO

In this lesson we'll use Animated.parallel to animate multiple Animated.timing and Animated.spring animations at the same time.

react tutorial about Create a Flip Card Animation with React Native

Create a Flip Card Animation with React Native

4:23 react PRO

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.

Presented by:

Jason Brown

I'm a front end developer building and playing with the latest technologies. In my free time I run React meetups, and React and React Native workshops in Portland Oregon.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?