Real World React Native Animations

66 minutes

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. We'll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.

This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.

The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

pro-course-rss-logo

PRO RSS Feed

Create a Horizontal Parallax ScrollView in React Native

Animate a React Native Information Callout View

Bounce a Heart Shaped Button in React Native on Press

Create An Exploding Heart Button in React Native

Build an Animated Floating Action Button in React Native with Springy Menu

Use React Native to Animate a Swipe Away Comment Modal

Create a Tap to Show Love React Native Animation

Toggle Hidden Details on a React Native Event Card

Build a Collapsible React Native Header Bar

Create an Expanding Notify Input with Success Message in React Native

react tutorial about Create a Horizontal Parallax ScrollView in React Native

Create a Horizontal Parallax ScrollView in React Native

9:57 react

In this lesson we'll create a Twitter Moments clone with a horizontal parallax image scrolling effect. We'll use Animated.event, and interpolation to make the effect work.

react tutorial about Animate a React Native Information Callout View

Animate a React Native Information Callout View

6:38 react

In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
We'll use Animated.timing and rely heavily on interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe ScrollView to allow for our gestures to work correctly.

react tutorial about Bounce a Heart Shaped Button in React Native on Press

Bounce a Heart Shaped Button in React Native on Press

4:25 react

In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.

react tutorial about Create An Exploding Heart Button in React Native

Create An Exploding Heart Button in React Native

6:18 react

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of Animated.timing animations and then use Animated.stagger to make the hearts appear with a 50ms stagger. We use Animated.delay to wait before we then use Animated.stagger again to hide the hearts in. Finally our Animated.sequence will cause each of those animations to happen one after the other.

react tutorial about Build an Animated Floating Action Button  in React Native with Springy Menu

Build an Animated Floating Action Button in React Native with Springy Menu

7:43 react

In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use Animated.parallel to execute our stagger menu options and execute our Animated.timing animation which will rotate our button and change our background color with interpolate. We use Animated.stagger to create a delay of our buttons sliding up. Animated.spring will give our buttons a spring effect as they shoot upwards.

react tutorial about Use React Native to Animate a Swipe Away Comment Modal

Use React Native to Animate a Swipe Away Comment Modal

8:33 react

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the Animated.setValue function to translate our Modal up or down depending on the direction of the swipe.

react tutorial about Create a Tap to Show Love React Native Animation

Create a Tap to Show Love React Native Animation

7:14 react

In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an Animated.Value will be created. We will measure the screen dimensions with Dimensions so we can place our heart in a random location. Then we'll use Animated.timing to animate the heart upwards. Finally a series of interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.

react tutorial about Toggle Hidden Details on a React Native Event Card

Toggle Hidden Details on a React Native Event Card

4:14 react

In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use state and the componentDidUpdate callback to trigger our animations.
Depending our state we'll use Animated.timing to animate the information in and out. We'll use a series interpolate on our Animated.Value to rotate the arrow, and translate our information into view.

react tutorial about Build a Collapsible React Native Header Bar

Build a Collapsible React Native Header Bar

4:27 react

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

react tutorial about Create an Expanding Notify Input with Success Message in React Native

Create an Expanding Notify Input with Success Message in React Native

7:07 react

In this lesson we'll create a notify button that expands from the middle to show a TextInput with a send button and once sent will hide the TextInput and show a thank you message. We'll use the helper method StyleSheet.absoluteFill to position our input inside of our wrapping View. This allows us to animate our TextInput and our messages in and out without effecting layout of each other.
When pressed to show the TextInput and when we show the thank you message a combination of animating the width and justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use Animated.timing and a success boolean on state to control what is rendered, and what is animating. interpolate will be used heavily to scale in and out views when they are needed.

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?