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
bisectors are and how to use them.
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.
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-rewire-babel-loader to rewire the create-react-app configuration to allow babel to process the shared code from workspace. We'll also use
metro-bundler-config-yarn-workspaces to configure the react-native app to be able to find the shared code in the workspaces.
In this lesson we'll use the screen
Dimensions and an
Animated.ValueXY to create an animated element that when animated is contained within the screen dimensions. It uses the
extrapolate: "clamp" feature of
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.
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
We'll show how to build a reusable
ScrollElement component without adding any additional DOM elements. We'll take advantage of
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.
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.
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.
In this lesson we'll use
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.