In this lesson we'll start by using
d3-scale to build up a
scaleLinear for both our
y data points to allow them to map and extrapolate our data correctly to renderable points. Then we'll use
d3-shape to build out our
path. We'll supply it with different sets of data and explore how
range can effect how our data renders. Finally we'll show off using
curveStep to see how it changes our graph rendering.
In this lesson we'll show how to setup a nested validation structure using the
yup library. We'll then use the
yup.lazy method to evaluate the
value at runtime and adjust our validation schema. We'll make our nested validation optional only if our
optionalObject actually exists.
In this lesson we'll show how to create an updater function. We'll also dive into how to separate your state management logic into a separate reducer function much like how Redux operates. It will receive an action with a type, and any data and update state accordingly.
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.
Youtube has a unique video playing experience. It allows you to drag a video to the corner of the screen which continues to play. You can then navigate through the site and select other videos. Additionally if you want to drag it back up you can drag back to the video you were viewing.
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 explore how to use various
Animated apis including
Animated.delay to build a notification that fades and slides in and out.
We'll learn about using a
ref and the
measure function to get the dimensions of a particular view. Additionally we'll show how to use the
measure function in conjunction with the
componentDidUpdate callback on
We'll explain using
translateY and to move views around performantly.
We'll explore the concept behind child function components and how to add dynamic return values and hiding state management inside the component. Then we'll explore how to setup functional render props that allow for complex components with simple APIs. Finally we'll show how these 2 concepts can compose together like any other React component.
The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.