Tutorials

In this lesson we'll create a tap to show more information animation card. We'll zoom out an image, disable horizontal scrolling, and pop up an informational card. This will rely heavily on interpolate for coordinating animations.

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.stagger, Animated.sequence, Animated.delay, and Animated.parallel to coordinate the animations.

In this lesson we'll create an animated floating action button. When pressed stagger the transition of all menu options using Animated.stagger, Animated.parallel, and Animated.spring.

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.

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.

In this lesson we'll create a collapsible header bar. We'll use a ScrollView and the onScroll event to hide/show information based upon how far a user scrolls.

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed. We'll need various ScrollView callbacks to allow us to still scroll through comments and only close when desired. We'll use the Animated library to translate, and fade our modal.

In this lesson we'll create a notify button that expands from the middle to show a TextInput and a send button. We'll additionally show how to collapse the TextInput when searching is complete and show a thank you message.

In this lesson we'll build a "tap to show love" animation. When the screen is tapped we'll create a heart randomly that will float to the top of the screen and disappear.

We'll show how to build a reusable ScrollView and ScrollElement component without adding any additional DOM elements. We'll take advantage of React.cloneElement, React.Children.only,findDOMNode, and context to build a registry of scrollable elements in the list. Then we'll use ref on the ScrollView to expose a way to animate to any item at any scroll position in the list.