Screencasts

Build a Map with Custom Animated Markers and Region Focus when Content is Scrolled in React Native
12:15

Build a Map with Custom Animated Markers and Region Focus when Content is Scrolled in React Native

Published on Jul 2, 2017
-
React Native

We'll build out a map with react-native-maps and custom animated map makers. We'll construct an a scroll view that when scrolled will animate the marker that it is associated with. Once scrolling has stopped we will animate the map region and focus on the marker we are looking at.

We'll use a single Animated.Value and use and explain interpolate in depth. We'll also show how to use extrapolate: "clamp" to lock our outputRange values.

Build a Reusable Scroll View Component with Animated scrollTo Abilities in React
8:45

Build a Reusable Scroll View Component with Animated scrollTo Abilities in React

Published on Jun 26, 2017
-
React

We'll show how to build a reusable ScrollView and ScrollElement component without adding any additional DOM elements. We'll take advantage of React.cloneElement, React.Children.only,findDOMNode, and context to build a registry of scrollable elements in the list. Then we'll use ref on the ScrollView to expose a way to animate to any item at any scroll position in the list.

Add Additional Properties to React Children Using React.cloneElement
2:58

Add Additional Properties to React Children Using React.cloneElement

Published on Jun 13, 2017
-
React

We'll show how to modify the children prop with React.cloneElement. We'll add additional properties, and modify existing properties to enhance an element.

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

Build an Animated and Responsive Progress Bar in React Native

Published on Jun 12, 2017
-
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

Published on Jun 12, 2017
-
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

Published on Jun 12, 2017
-
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

Published on Jun 12, 2017
-
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

Published on Jun 7, 2017
-
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

Published on Jun 7, 2017
-
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

Published on Jun 6, 2017
-
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.