Screencasts

Build an Animated and Responsive Progress Bar in React Native
9:25

Build an Animated and Responsive Progress Bar in React Native

React Native

We'll show how to construct views to build out a responsive progress bar. It will have props to allow fora dynamic border, bar color, and fill colors. Finally we'll use componentDidUpdate to add a smooth animation for when the progress is updated.

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
3:02

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

React

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

Create an Auto Resizing Virtualized List with react-virtualized
3:02

Create an Auto Resizing Virtualized List with react-virtualized

React

In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We'll then use theList component to render our set of data as a virtualized list into the DOM using windowing.

Use Yarn to Create an Alternative Import Name of an Installed Library
3:05

Use Yarn to Create an Alternative Import Name of an Installed Library

JavaScript

In this lesson we'll show how to use yarn to alias the names of same npm libraries but install different versions. This could allow for easy migrating from one library version to an upgraded version.

Convert Imperative Code to a Declarative React Component
4:46

Convert Imperative Code to a Declarative React Component

React

In this lesson we'll show how to take a beforeUnload call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory leaks.

Convert CommonJS Requires to ES6 Imports
4:17

Convert CommonJS Requires to ES6 Imports

JavaScript

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

Show An Error Message When A Video Fails to Load in React Native
3:24

Show An Error Message When A Video Fails to Load in React Native

React Native

In this lesson we'll show to use the onError callback from react-native-video. We'll show how to put a separate view to cover the video and render an error icon from react-native-vector-icons. Finally we'll add custom error messages based upon the error code returned.

Show an Animated Buffering Icon When Remote Videos are Loading in React Native
5:34

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

React Native

In this lesson we'll show how to use icons from react-native-vector-icons. With absolute positioning we'll center the icon over the video. Then we'll use the Animated.loop call to rotate the icon continuously in a 360 degree loop. Finally we'll the stopAnimation call to pause the animation when we are no longer buffering.

Build Interactive Video Controls that Animate Visible and Hidden for React Native Video
4:56

Build Interactive Video Controls that Animate Visible and Hidden for React Native Video

React Native

We'll modify our previous controls to animate visible when the video is touched or interacted with. The video controls will animate visible in when the video is touched, played, or continues to be interacted with. After a 1500ms timeout elapses the controls will animate away.

Create Custom Controls for React Native Video
9:28

Create Custom Controls for React Native Video

React Native

In this lesson we'll use react-native-vector-icons to add play/paused buttons, a seek bar, and the duration of the video. We'll use the onLoad, onProgress, and onEnd callbacks to track the video progress. We'll use the react-native-progress to create an animated progress bar for us. Finally with TouchableWithoutFeedback we will add a tap to seek interaction to jump to specific times in the video.