Egghead Instructor Jason Brown

Jason Brown

I'm a front end developer building and playing with the latest technologies. In my free time I run React meetups, and React and React Native workshops in Portland Oregon.



Unlock all of Jason's PRO Lessons
click for instant access!

Browse Jason Brown's lessons.

showing 52 lessons...

Create Animated Map Markers Linked to Scrolling Content in React Native

P

Create a Reusable Scroll View Component with Animated scrollTo in React

P

Create a Responsive Animated Progress Bar in React Native

P

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

P

Create an Auto Resizing Virtualized List with react-virtualized

P

Use React.cloneElement to Modify and Add Additional Properties to React Children

P

Use Yarn to Create an Alternative Import Name of an Installed Library

P

Convert Imperative Code to a Declarative React Component

P

Convert CommonJS Requires to ES6 Imports

P

Fix Only Committed Files with Prettier and lint-staged

P

Create a VSCode Snippet with Tab Stops and Named Variables

P

Use babel-preset-env with Native Node Features and Also Use Babel Plugins

P

Disable and Ignore Yellow Box Warnings in React Native

P

Use licensee.js to Check Dependencies for Accepted Library Licenses

P

Build a Collapsible React Native Header Bar

P

Create an Expanding Notify Input with Success Message in React Native

P

Use React Native to Animate a Swipe Away Comment Modal

P

Toggle Hidden Details on a React Native Event Card

P

Animate a React Native Information Callout View

P

Build an Animated Floating Action Button in React Native with Springy Menu

P

Create a Tap to Show Love React Native Animation

P

Create An Exploding Heart Button in React Native

P

Create a Horizontal Parallax ScrollView in React Native

P

Bounce a Heart Shaped Button in React Native on Press

P

Inline Edit Todo Items in a React Native ListView

P

Create the Basic React Native Todo Application Layout

P

Filter Items in the React Native List View

P

Add the Total Remaining Item Count to the Footer with React Native Text

P

Add a Toggle All Complete Button with React Native TouchableOpacity

P

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

P

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

P

Persist Items with React Native AsyncStorage

P

Add a Remove Item Button to Each Row with React Native TouchableOpacity

P

Create a List of Items with a React Native ListView

P

Setup React Native for iOS and Android

Create a React Native TextInput

P

Add a Complete Toggle with React Native Switch

P

Create a Button Shake Animation in React Native

P

Create A Login Screen in React Native

P

Get the Dimensions of a React Native Phone Screen

P

Create a Custom Map Marker with React Native Maps

P

Measure and Get the Position of a React Native Element

P

Animate Colors with React Native Interpolate

P

Animate a Sequence of React Native Animations with Animated.sequence

P

Animate Multiple Animations at the Same Time with Animated.parallel

P

Stagger React Native Animations with Animated.stagger

P

Create a Flip Card Animation with React Native

P

Animate Rotation with React Native Interpolate

P

Create a Draggable Card with React Native Pan Responder, and Animated.decay

P

Animate the Scale of a React Native Button using Animated.spring

P
react tutorial about Create Animated Map Markers Linked to Scrolling Content in React Native

Create Animated Map Markers Linked to Scrolling Content in React Native

12:15 react PRO

We'll construct a map using react-native-maps and custom animated map makers. We'll build a scroll view that when scrolled horizontally it will animate the marker that it is associated with. Once an item is scrolled to the map will automatically animate and center the map at the markers coordinates.

This will be built with a single Animated.Value and heavy use of interpolate along with extrapolate: "clamp" to lock our outputRange values.

react tutorial about Create a Reusable Scroll View Component with Animated scrollTo in React

Create a Reusable Scroll View Component with Animated scrollTo in React

8:44 react PRO

In this lesson we'll show how to build a ScrollView and ScrollElement component that do not add additional markup. We'll use context and findDOMNode to register nested items and then expose a scrollTo function our ScrollView that allows for applications to animate a scroll to hidden list items.

react tutorial about Create a Responsive Animated Progress Bar in React Native

Create a Responsive Animated Progress Bar in React Native

9:24 react PRO

In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by showing how to add animation to make the progress indicator smoothly transition.

react tutorial about Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

3:01 react PRO

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.

react tutorial about Create an Auto Resizing Virtualized List with react-virtualized

Create an Auto Resizing Virtualized List with react-virtualized

4:35 react PRO

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

react tutorial about Use React.cloneElement to Modify and Add Additional Properties to React Children

Use React.cloneElement to Modify and Add Additional Properties to React Children

2:58 react PRO

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the element.

otherjs tutorial about Use Yarn to Create an Alternative Import Name of an Installed Library

Use Yarn to Create an Alternative Import Name of an Installed Library

3:04 otherjs PRO

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.

react tutorial about Convert Imperative Code to a Declarative React Component

Convert Imperative Code to a Declarative React Component

4:45 react PRO

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.

js tutorial about Convert CommonJS Requires to ES6 Imports

Convert CommonJS Requires to ES6 Imports

4:16 js PRO

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

otherjs tutorial about Fix Only Committed Files with Prettier and lint-staged

Fix Only Committed Files with Prettier and lint-staged

2:07 otherjs PRO

In this lesson we'll use prettier and lint-staged to run prettier only on files that have been changed and committed to git. This will allow you to prettify files as you change them, and prevent massive lint only git check ins.

otherjs tutorial about Create a VSCode Snippet with Tab Stops and Named Variables

Create a VSCode Snippet with Tab Stops and Named Variables

4:26 otherjs PRO

In this lesson we'll create a VSCode snippet for quickly reusing code. We'll show how to setup tab stops orders to move the cursor in a specific order when tab is pressed. Then we'll show how to create named variables with default values.

node tutorial about Use babel-preset-env with Native Node Features and Also Use Babel Plugins

Use babel-preset-env with Native Node Features and Also Use Babel Plugins

5:19 node PRO

In this lesson we'll show how to setup a .babelrc file with presets and plugins. Then create npm scripts that use babel-node and babel. With babel-preset-env we'll show how to target specific versions of node and how to use babel plugins, while not transpiling features (like async await) that are already supported by node natively.

react tutorial about Disable and Ignore Yellow Box Warnings in React Native

Disable and Ignore Yellow Box Warnings in React Native

2:04 react PRO

Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnings.

otherjs tutorial about Use licensee.js to Check Dependencies for Accepted Library Licenses

Use licensee.js to Check Dependencies for Accepted Library Licenses

3:38 otherjs PRO

In this lesson we'll use licensee.js to see how to configure accepted license types for our project. We'll also explore how to use whitelist overrides to allow specific libraries that may not match our license configuration. We'll also setup an npm script to show a more visible exit code 1 failure.

react tutorial about Build a Collapsible React Native Header Bar

Build a Collapsible React Native Header Bar

4:27 react PRO

In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of ScrollView, onScroll, and the Animated.event function to update our Animated.Value every time the user scrolls. Then with a series of interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the fontSize of our title.

react tutorial about Create an Expanding Notify Input with Success Message in React Native

Create an Expanding Notify Input with Success Message in React Native

7:07 react PRO

In this lesson we'll create a notify button that expands from the middle to show a TextInput with a send button and once sent will hide the TextInput and show a thank you message. We'll use the helper method StyleSheet.absoluteFill to position our input inside of our wrapping View. This allows us to animate our TextInput and our messages in and out without effecting layout of each other.
When pressed to show the TextInput and when we show the thank you message a combination of animating the width and justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use Animated.timing and a success boolean on state to control what is rendered, and what is animating. interpolate will be used heavily to scale in and out views when they are needed.

react tutorial about Use React Native to Animate a Swipe Away Comment Modal

Use React Native to Animate a Swipe Away Comment Modal

8:33 react PRO

In this lesson we'll use PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the Animated.setValue function to translate our Modal up or down depending on the direction of the swipe.

react tutorial about Toggle Hidden Details on a React Native Event Card

Toggle Hidden Details on a React Native Event Card

4:14 react PRO

In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use state and the componentDidUpdate callback to trigger our animations.
Depending our state we'll use Animated.timing to animate the information in and out. We'll use a series interpolate on our Animated.Value to rotate the arrow, and translate our information into view.

react tutorial about Animate a React Native Information Callout View

Animate a React Native Information Callout View

6:38 react PRO

In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
We'll use Animated.timing and rely heavily on interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe ScrollView to allow for our gestures to work correctly.

react tutorial about Build an Animated Floating Action Button  in React Native with Springy Menu

Build an Animated Floating Action Button in React Native with Springy Menu

7:43 react PRO

In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use Animated.parallel to execute our stagger menu options and execute our Animated.timing animation which will rotate our button and change our background color with interpolate. We use Animated.stagger to create a delay of our buttons sliding up. Animated.spring will give our buttons a spring effect as they shoot upwards.

react tutorial about Create a Tap to Show Love React Native Animation

Create a Tap to Show Love React Native Animation

7:14 react PRO

In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an Animated.Value will be created. We will measure the screen dimensions with Dimensions so we can place our heart in a random location. Then we'll use Animated.timing to animate the heart upwards. Finally a series of interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.

react tutorial about Create An Exploding Heart Button in React Native

Create An Exploding Heart Button in React Native

6:18 react PRO

In this lesson we'll create a like button that explodes with hearts. We'll use Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of Animated.timing animations and then use Animated.stagger to make the hearts appear with a 50ms stagger. We use Animated.delay to wait before we then use Animated.stagger again to hide the hearts in. Finally our Animated.sequence will cause each of those animations to happen one after the other.

react tutorial about Create a Horizontal Parallax ScrollView in React Native

Create a Horizontal Parallax ScrollView in React Native

9:57 react PRO

In this lesson we'll create a Twitter Moments clone with a horizontal parallax image scrolling effect. We'll use Animated.event, and interpolation to make the effect work.

react tutorial about Bounce a Heart Shaped Button in React Native on Press

Bounce a Heart Shaped Button in React Native on Press

4:25 react PRO

In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.

react tutorial about Inline Edit Todo Items in a React Native ListView

Inline Edit Todo Items in a React Native ListView

6:18 react PRO

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders

react tutorial about Create the Basic React Native Todo Application Layout

Create the Basic React Native Todo Application Layout

2:35 react PRO

In this lesson we'll create the basic application layout with a header, content section, and footer. We'll learn to use StyleSheet to create styles to apply to React Native components.

react tutorial about Filter Items in the React Native List View

Filter Items in the React Native List View

6:44 react PRO

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.

react tutorial about Add the Total Remaining Item Count to the Footer with React Native Text

Add the Total Remaining Item Count to the Footer with React Native Text

0:40 react PRO

In this lesson we'll add a footer text item to show the total count of what is in the current filtered view. We'll show the technique of deriving computed values in render functions.

react tutorial about Add a Toggle All Complete Button with React Native TouchableOpacity

Add a Toggle All Complete Button with React Native TouchableOpacity

3:43 react PRO

In this lesson we'll add a Toggle All Complete Button next to the Text Input. We'll show off how components without flex layout affect siblings with flex layout properties.

react tutorial about Add a Loading Indicator While Loading Items with React Native ActivityIndicator

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

1:49 react PRO

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with alignItems and justifyContent set to center.

react tutorial about Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity

1:42 react PRO

In this lesson we'll add a button to the footer that will clear all completed items. We'll use TouchableOpacity and we'll examine how flex space-around property works.

react tutorial about Persist Items with React Native AsyncStorage

Persist Items with React Native AsyncStorage

1:06 react PRO

In this lesson we'll use AsyncStorage to save our items so they persist with each reload of the application. We'll show how to use the promise base interface to handle success as well as handle errors.

react tutorial about Add a Remove Item Button to Each Row with React Native TouchableOpacity

Add a Remove Item Button to Each Row with React Native TouchableOpacity

1:48 react PRO

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

react tutorial about Create a List of Items with a React Native ListView

Create a List of Items with a React Native ListView

5:57 react PRO

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

react tutorial about Setup React Native for iOS and Android

Setup React Native for iOS and Android

4:48 react

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

react tutorial about Create a React Native TextInput

Create a React Native TextInput

4:29 react PRO

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

react tutorial about Add a Complete Toggle with React Native Switch

Add a Complete Toggle with React Native Switch

3:19 react PRO

We'll add a cross platform Switch component to toggle the completeness of each todo item. We'll show how to pass down functions from the parent application to the child row of a ListView.

react tutorial about Create a Button Shake Animation in React Native

Create a Button Shake Animation in React Native

2:38 react PRO

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed it will shake from side to side.

react tutorial about Create A Login Screen in React Native

Create A Login Screen in React Native

6:21 react PRO

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

react tutorial about Get the Dimensions of a React Native Phone Screen

Get the Dimensions of a React Native Phone Screen

1:10 react PRO

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

react tutorial about Create a Custom Map Marker with React Native Maps

Create a Custom Map Marker with React Native Maps

2:52 react PRO

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

react tutorial about Measure and Get the Position of a React Native Element

Measure and Get the Position of a React Native Element

2:14 react PRO

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

react tutorial about Animate Colors with React Native Interpolate

Animate Colors with React Native Interpolate

2:11 react PRO

We'll use the interpolate function from an Animated.Value to transition the background color of an Animated.View. We'll simultaneously translate the position with the same Animated.Value.

react tutorial about Animate a Sequence of React Native Animations with Animated.sequence

Animate a Sequence of React Native Animations with Animated.sequence

1:47 react PRO

In this lesson we'll use Animated.sequence to play multiple Animated.timing, and Animated.spring animations one after another.

react tutorial about Animate Multiple Animations at the Same Time with Animated.parallel

Animate Multiple Animations at the Same Time with Animated.parallel

1:26 react PRO

In this lesson we'll use Animated.parallel to animate multiple Animated.timing and Animated.spring animations at the same time.

react tutorial about Stagger React Native Animations with Animated.stagger

Stagger React Native Animations with Animated.stagger

2:53 react PRO

In this lesson we'll use Animated.stagger to stagger Animated.timing animations that animate the height of a React Native view every 300 milliseconds.

react tutorial about Create a Flip Card Animation with React Native

Create a Flip Card Animation with React Native

4:23 react PRO

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.

react tutorial about Animate Rotation with React Native Interpolate

Animate Rotation with React Native Interpolate

1:52 react PRO

By using the interpolate function, the Animated.View can be rotated using both degrees and radians.

react tutorial about Create a Draggable Card with React Native Pan Responder, and Animated.decay

Create a Draggable Card with React Native Pan Responder, and Animated.decay

3:57 react PRO

In this lesson we'll create a PanResponder to allow us to drag a card around the screen. We'll use Animated.event to automatically set the values of our Animated.Value and when the card is released we'll use Animated.decay to decelerate it to a stop.

react tutorial about Animate the Scale of a React Native Button using Animated.spring

Animate the Scale of a React Native Button using Animated.spring

3:12 react PRO

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?