Tutorials

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.

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

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.

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

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

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.

In this lesson we'll add a footer text item to show the total count of what is in the current filtered view. We'll show the technique of deriving computed values in render functions.

In this lesson we'll add a Toggle All Complete Button next to the Text Input. We'll show off how components without flex layout affect siblings with flex layout properties.

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.