Egghead Instructor Jason Brown

Jason Brown

I'm a full time front end developer at http://miradortech.com/. 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 28 lessons...

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

Create A Login Screen in React Native

Get the Dimensions of a React Native Phone Screen

Create a Custom Map Marker with React Native Maps

Measure and Get the Position of a React Native Element

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

Animate Styles of a React Native View with Animated.timing

Use Flex to Scale React Native Background Image

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

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

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

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

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

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.

react tutorial about Animate Styles of a React Native View with Animated.timing

Animate Styles of a React Native View with Animated.timing

3:29 react

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

react tutorial about Use Flex to Scale React Native Background Image

Use Flex to Scale React Native Background Image

1:44 react

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

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