Screencasts

Make a Beautiful Interactive Bitcoin Price Chart with React, D3, and VX
19:50

Make a Beautiful Interactive Bitcoin Price Chart with React, D3, and VX

React

In this lesson we'll walk through building an interactive bitcoin price chart. We'll use React combined with VX to render our chart and tooltips. D3 will power all of the data processing to ensure everything is rendered where it should be. We'll also walk through explaining what scales, ranges, domains and bisectors are and how to use them.

Understanding setState in componentDidMount to Measure Elements Without Transient UI State
3:19

Understanding setState in componentDidMount to Measure Elements Without Transient UI State

React

In this lesson we'll explore using setState to synchronously update in componentDidMount. This allows for us to use getBoundingClientRect or other synchronous UI calls and make changes to the UI without a transient UI state.

Use Yarn Workspaces to Share Code with a create-react-app and create-react-native-app in a Monorepo
14:24

Use Yarn Workspaces to Share Code with a create-react-app and create-react-native-app in a Monorepo

React

In this lesson we'll use yarn and yarn workspaces to create a monorepo that includes a web creat-react-app, a react-native app, and shared code. We'll use react-app-rewired and react-app-rewire-babel-loader to rewire the create-react-app configuration to allow babel to process the shared code from workspace. We'll also use crna-make-symlinks-for-yarn-workspaces and metro-bundler-config-yarn-workspaces to configure the react-native app to be able to find the shared code in the workspaces.

Contain an Animation within the Screen Dimensions in React Native
4:08

Contain an Animation within the Screen Dimensions in React Native

React Native

In this lesson we'll use the screen Dimensions and anAnimated.ValueXY to create an animated element that when animated is contained within the screen dimensions. It uses the extrapolate: "clamp" feature of interpolate.

How to Detect Touch Inactivity with a PanResponder in React Native
5:26

How to Detect Touch Inactivity with a PanResponder in React Native

React Native

In this lesson we'll use the onMoveShouldSetPanResponderCapture from PanResponder to register touches with out stealing touches from other PanResponders. We can detect use this method to detect inactivity. This technique can be used for things like video players with auto-hiding controls.

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

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

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

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

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.