Tutorials

Learn React, React Native, JavaScript and more with in-depth tutorials.

React Native

Animate the Scale of a React Native Button using Animated.spring

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.
React Native

Animate a Sequence of React Native Animations with Animated.sequence

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

Animate Styles of a React Native View with Animated.timing

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.
React Native

Animate Rotation with React Native Interpolate

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

Animate Multiple Animations at the Same Time with Animated.parallel

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

Animate Colors with React Native Interpolate

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.
React Native

Add the Total Remaining Item Count to the Footer with React Native Text

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.
React Native

Add a Toggle All Complete Button with React Native TouchableOpacity

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.
React Native

Add a Remove Item Button to Each Row with React Native TouchableOpacity

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
React Native

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

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.