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.
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 the
List component to render our set of data as a virtualized list into the DOM using windowing.
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.
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.
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.