React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

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.

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.

Create a Horizontal Parallax ScrollView in React Native

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.

Animate a React Native Information Callout View

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.

Bounce a Heart Shaped Button in React Native on Press

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. 

Create An Exploding Heart Button in React Native 

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.

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

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.

Use React Native to Animate a Swipe Away Comment Modal

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.


Create a Tap to Show Love React Native Animation

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.



Toggle Hidden Details on a React Native Event Card

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.

Build a Collapsible React Native Header Bar

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.

Real World React Native Animations

Jason Brown

Course Content