TutorialsCourses

Tutorials

Animate a Sequence of React Native Animations with Animated.sequence
Jason BrownJason Brown

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

React NativeReact Native
Animate Styles of a React Native View with Animated.timing
Jason BrownJason Brown

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 NativeReact Native
Animate Rotation with React Native Interpolate
Jason BrownJason Brown

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

React NativeReact Native
Animate Multiple Animations at the Same Time with Animated.parallel
Jason BrownJason Brown

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

React NativeReact Native
Animate Colors with React Native Interpolate
Jason BrownJason Brown

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 NativeReact Native
Add the Total Remaining Item Count to the Footer with React Native Text
Jason BrownJason Brown

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 NativeReact Native
Add a Toggle All Complete Button with React Native TouchableOpacity
Jason BrownJason Brown

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 NativeReact Native
Add a Remove Item Button to Each Row with React Native TouchableOpacity
Jason BrownJason Brown

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 NativeReact Native
Add a Loading Indicator While Loading Items with React Native ActivityIndicator
Jason BrownJason Brown

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.

React NativeReact Native
Add a Complete Toggle with React Native Switch
Jason BrownJason Brown

We'll add a cross platform Switch component to toggle the completeness of each todo item. We'll show how to pass down functions from the parent application to the child row of a ListView.

React NativeReact Native