Tutorials

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed it will shake from side to side.

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.