TutorialsCourses

Tutorials

Create a Tap-and-Hold Toggle Opacity Animated Box with Reanimated in React Native
Jason BrownJason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using TapGestureHandler. With declarative animations in Reanimated we'll use tools like timing, Clock, set cond, and eq to create a purely native opacity animation.

React NativeReact Native
Introduction to Reanimated in React Native
Jason BrownJason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using TapGestureHandler. With declarative animations in Reanimated we'll use cond, and eq to create a purely native opacity change animation when the button is pressed.

React NativeReact Native
Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native
Jason BrownJason Brown

In this lesson we'll show how to create an always rendered but invisible modal. Then using onLayout, refs, and measure we can find our action locations. We'll use a PanResponder to register presses on an image. When you press and hold we'll use Animated to show the modal. With the onPanResponderMove we can check if the user has moved their finger onto an action. We'll use setState updater function to highlight the action in bold and show how to take action in onPanResponderRelease.

React NativeReact Native
Create an Interactive Line Graph with a Hover Dual Line Highlight using VX and D3
Jason BrownJason Brown

In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using bisect from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.

D3D3
Create a Line Graph with Hovering to Render a Dual Line Highlight using VX and D3
Jason BrownJason Brown

In this lesson we'll take a look at how to render a basic line graph using D3, and VX. We'll move on to analyzing how to add some interactivity that will render a line where ever the user hovers using bisect from D3. Then we'll show how to render another line path using the scales and manipulating our data. Finally we'll add another line split so we're rendering 2 line paths.

D3D3
Create a Form Wizard with Data Loss Prevention using Formik and React Router
Jason BrownJason Brown

In this lesson we'll explore using Formik to create a form wizard. Each route will be a new piece of a form. We'll then use Prompt and matchPath to determine if we need to protect our data from being destroyed by navigating away from the page.

React RouterReact Router
Use matchPath to Match Nested Route Paths in Parent Routes with React-Router
Jason BrownJason Brown

In this lesson we'll use the matchPath function exported by react-router to find active nested routes inside of a parent component. This technique can be used for comparing routes outside of a React component, or even inside of life cycle methods to do data loading.

React RouterReact Router
Create a ProtectedRoute for Logged In Users with Route, Redirect, and a Render Prop in React Router
Jason BrownJason Brown

In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine if the route should be allowed to be accessed. Finally we'll use nav state to preserve the location the user visited and redirect them back to the protected route once they login.

React RouterReact Router
Create a Modal Route with Link and Nav State in React Router
Jason BrownJason Brown

In this lesson we'll show how the Link component to prop can receive an object. This allows us to pass state to the route. With the nav state we destructure off of location we can determine if a user wants to open a modal or on a cold visit show an image embedded in the page.

React RouterReact Router
Prevent Navigation with the React Router Prompt Component When Data is Being Edited
Jason BrownJason Brown

In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return true from the message as a function to dynamically allow navigation.

React RouterReact Router