Tutorials

A collection of tutorials produced by React Native School.

CodePush Strategy for Beta Testing

In this lesson we'll go over how I enable beta testing using CodePush.

Members Only

React (Native) Essentials

A quick reference document to give you all the essentials of working with React and React Native.

Intro to Styled Components in React Native

In this lesson we'll take a look at Styled Components, how it works, and why you may want to use it to build components in your React Native app.

Members Only

JavaScript Essentials

A quick reference document to give you all the essentials of working with JavaScript.

Shared Element Transitions with React Navigation

In this lesson we'll learn how to make UI elements transition with screen changes using React Navigation and Fluid Transitions.

Members Only

React Native Project Git Workflow

Git/source contral is an integral part of a developers workflow, or it should be. In this lesson I share my workflow to manage React Native projects.

Adding TypeScript to an Existing React Native Application

In this lesson we'll learn how to incrementally add TypeScript to an existing React Native app.

Members Only

React Native End to End Testing with Detox

When you have common user flows that need to be tested Detox can provide the means to quickly and consistently do so.

Component Testing with React Native Testing Library

In this lesson we'll cover how to setup and use react-native-testing-library to write high quality integration tests for your React Native app.

Members Only

Mocking Fetch API Calls When Using Jest

In this lesson we'll learn how to mock fetch in your Jest tests.

Test Driven Development with AsyncStorage

In this lesson we'll learn how to do test driven development when using the AsyncStorage library.

Members Only

Breaking Down React Native v0.60

In this lesson we'll discuss the biggest changes to React Native v0.60 for developers with existing React Native apps.

Integrating React Navigation Back Button with a WebView

In this lesson we'll learn to integrate the existing back button in React Native to also serve as the back button for an embedded WebView.

Members Only

Building a Dimensions Hook in React Native

In this lesson we'll create a hook that listens to any dimension changes in our app.

Migrating Data in AsyncStorage

Despite our best efforts we're never going to store our data exactly right in AsyncStorage. Here's how we can migrate the data when we outgrow the current structure.

Members Only

Handling Deep Links with React Navigation

Learn to handle deep links from within your application to take the user where they expect to go.

Install and Use Reactotron for Debugging

In this lesson we'll learn how to take your debugging experience to the next level with Reactotron.

Members Only

Complex Navigation Example with React Navigation

React Navigation is the go to solution for navigation in React Native apps.

Apollo Setup Kickstart

In this lesson we learn how to setup Apollo/GraphQL on the client and server to aggregate different data sources.

Members Only

Swipe Gestures with react-native-gesture-handler

Swiping is a common gesture on mobile devices. In this lesson we'll learn how to leverage React Native Gesture Handler to build swiping actions in your app.

Using Context to Build a Light/Dark Theme

In this lesson we'll leverage context and hooks to build a global light/dark theme in our app.

Members Only

Easily Manage Different Environment Configurations in React Native

Development, staging, production - how do you manage each environment and ensure you're accessing the right endpoints, api keys, and other data for each environment? In this lesson we'll talk about how to set up environment specific variables.

Pinch to Zoom Gesture

In this lesson we'll walk through how to use react-native-gesture-handler to implement a pinch to zoom gesture.

Members Only

Migrating from Component State to Hooks for a Fetch Request

Hooks are the latest hotness in React Native. Now that they're part of React Native core how can this change your code?

Adding Data to a React Native App | Live Coding

In this live stream we'll be putting in sample data to our React Native app.

How to Use React Native Calendar

In this introduction to React Native Calendar we'll learn how to effectively use this package to build high quality calendars for your app.

Members Only

Starting a New React Native Project | Live Coding

In this live coding session we'll start a new React Native project and get it set up for development.

Upgrading to React Native 0.59+ & Handling Deprecation Warnings

v0.59 of React Native is a big deal. It brings new features and is a major stepping stone for the future development with React Native. Here's what you need to know.

Live React Native Development | April 2, 2019

Join me in working on a React Native app! Actual videos starts around the 1:30 mark.

Normalizing Text and Spacing Between Screen Sizes

Different devices have different pixel densities and different sizes. When we design and implement our app we'll want to factor this in so each user can have a pleasant experience. This tutorial will show you a method of doing so.

Members Only

Best Practices for Capturing User Feedback in React Native

Nothing beats getting real feedback from your users - but how should you go about capturing that feedback? In this tutorial we'll discuss when you should prompt them, how you should prompt them, and what tools you can use to capture that feedback.

React Native vs. Flutter - Which to Choose?

I'm often asked about which technology to choose, who is killing who, who's going to win and who's going to fail? Here's my running answer on the React Native vs. Flutter debate.

Easily Work on Deeply Nested Screens in React Native

Apps have many screens. Many screens need to be developed. How do we easily work on a nested screen without having to click around a bunch? In this tutorial we'll learn how to leverage your navigation to make developing on nested screens easier.

Members Only

How to Detect Crashes in a React Native App

Crashes are going to happen. We can try to minimize them but they'll still happen. When they happen in production what can we do about them? In this tutorial we'll learn how to detect crashes in React Native and what to do about them.

Setting up an Authentication Flow in React Native

Learn how to configure your router to check, manage, and route to the right place based on the user's authentication state.

Members Only

Building an Animation Hook in React Native

Take a first look at how you can use React Hooks to simplify your animation logic in React Native.

App Development Preplanning: Data and Requirements

In this video I walk through my process of thinking about app requirements, data relationships, and general planning for an app I plan to build.

Breaking an Interface into Components

Learn to break a UI into a series of logical components.

How to Organize Your Components

Learn some basic tips on organizing your React Native app's components so you can more easily maintain your app.

How to Upload Images in a React Native App

Explore this quick tutorial to learn how to upload images in your React Native to create a better user experience.

Layout with Flexbox - React Native Basics

In this video you'll learn the basics of using Flexbox in React Native to build your app layout.

How to use the Image Component - React Native Basics

In this video you'll learn the basics of using the core Image component in React Native.

Building a Global Alert System in React Native

Learn to build a global alert system in React Native.

How to Use the SectionList Component - React Native Basics

In this video you'll be introduce to the SectionList component from React Native core.

Implement a Long Press Button with React Native's Gesture Responder System

In this video you'll learn to leverage React Native's Gesture Responder System to create a component that calls a function only if you interact with the component for a set period of time.

Detect Multiple Touches in React Native with the Gesture Responder System

In this video you'll be introduced to React Native's Gesture Responder System by creating a component to detect n number of presses.

Fix Broken React Native Projects in Xcode 10

In this video we'll learn how to fix an issue where you're unable to build a React Native app in Xcode 10

Progressive Image Loading in React Native

Internet connection speeds are variable, especially when you’re working with mobile devices. As developers we often forget that many of our…

Building a React Native Multi-Theme Button

In this video we'll walk through designing a button API for ease of development, maintenance, and (most importantly) use.

Animated Image Overlay in React Native

Build an Instagram style animated heart when liking a picture

Instagram Style Double Tap with React Native

There are a host of ways to detect a tap in React Native — but how do you detect a double tap? Detecting double taps has a host of uses —…

Install React Native Firebase Core

Install React Native Firebase Core

Intro to Gestures in React Native

In this tutorial we’ll be learning to add gesture handling to a React Native app via PanResponder. In a previous tutorial I walked through…

How to Search a React Native FlatList

How to Search a React Native FlatList

React Native Animated Answer Bar

A multi-part series teaching you how to create an animated answer bar in React Native.

Enable Scroll in a React Native ScrollView Based on the Content Size

Ever have the situation where you sometimes had content that was shorter than the screen size and didn’t require scrolling but occasionally…

Use the SwitchNavigator in React Navigation for an Authentication Flow (React Native)

Use the SwitchNavigator in React Navigation for an Authentication Flow (React Native)

4 Questions to Ask When Choosing a Push Notification Provider for a React Native App

Push notifications rock. Twice a day I’m reminded about how I can win some 💰 💰 💰 by playing a trivia game. Or I’m sent a daily news…

Fade in an Image with React Native with the Animated API

In this video, you will learn how to gradually fade in images in React Native in order to eliminate the jarring flash associated with an image rendering. We will take a look at the Image component onLoad property and use it, in conjunction with the Animated API, to accomplish the desired user experience.

Dismiss the Keyboard in React Native from Anywhere

In this video you will learn how create a re-usable component that gives the user the ability to dismiss the keyboard whenever they tap outside of a TextInput.

iPhoneX Compatibility in React Native with SafeAreaView

In this video, you will learn how to use the SafeAreaView component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X.

Migrating from Redux to the New React Context API

In this video, you'll see an example of replacing Redux with the new React context API in a real-world app.

Migrating from the Old to New React Context API

In this video, you'll get an intro & example of migrating a component that uses the old context API to use the new (in React 16.3) context API.

React Native FlatList Grid

In this video, we will start with a list of content from a React Native FlatList that we will then transform into a three-per-row grid.

How 💩 dad jokes helped me better understand immutable data

I recently started working on a course regarding React Native and push notifications (how to, strategy, etc.).

Configure Visual Studio Code for React Native Development

Configure Visual Studio Code for React Native Development

Sum of Items in a React Native FlatList

Sum of Items in a React Native FlatList

How to Become a React Native Developer in 2018

If you’ve looked at the results from The State of JavaScript 2017 you’ll find a ton of interesting data.

Setup Continuous Integration with React Native

Learn to Use Visual Studio App Center to Automatically Build and Distribute Your React Native App

Navigating Navigation in React Native

An Opinionated Take on the Current State of Navigation in React Native

Understanding React Native Deployments

If you’re coming to React Native from a web background, or if you’re new to programming in general, you may be confused about what you can…

Easily Build Forms in React Native

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably...

How to Hire React Native Developers & Find React Native jobs

At Handlebar Labs I train people to become React Native developers. Part of that training is exchanging emails with the students to help them through any of the material. Once someone has worked...

React Native Basics: Copy to Clipboard

Reading and writing from the clipboard is incredibly easy in React Native by using the Clipboard API. In this quick tutorial we’ll build a…

How to Get Started with React Native

Before diving in I want to tell you a little story — I’ve been wanting to put together a simple website. Not a web app, just a simple…

Checklist to Deploy React Native to Production

Many React Native developers came to mobile development from a background of web development (like me). That’s one of the reasons React…

A Brief Overview of ES6 for React Native Developers

If you’re coming to React Native and you’re

Use Redux to Manage React Navigation State

If you’ve ever wanted to know how to store the state from React Navigation in Redux and didn’t understand the guide in the docs — look no…

How to Animate the Items of a React Native FlatList

I was recently asked about animating items in a React Native list — specifically animating the item when added and removed. That’s what…

Building an Authentication Flow with React Navigation

I’m asked fairly often about setting up an authentication flow with React Navigation. That’s what we’ll cover today — we’ll have two “layouts” a signed in layout with a TabNavigator and a signed out layout with a two screen StackNavigator.

Create React Native App + React Native Debugger

Quick overview of how I got React Native Debugger working with Create React Native App.

React Native + Meteor: react-native-meteor vs. meteor-client-bundler

If you’ve spent any time looking into building an app with React Native and Meteor you’ve likely come across the package…

Getting Started with React Native Navigation V1

There are quite a few options out there for Navigation in React Native. I typically default to React Navigation (tutorial on getting…

How to Add a Splash Screen to a React Native App (iOS and Android)

I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google —...

Build a Cross Platform Button in React Native

Learn how to make a platform specific button in React Native by using core components and simplifying your styling process with React Native Extended StyleSheet.

Replace a Screen Using React Navigation

One challenge I faced while migrating to React Navigation was how to replace a screen when using React Navigation. Right now there’s no…

How to setup infinite scroll with the FlatList component in React Native

How to setup infinite scroll with the FlatList component in React Native

How to use the FlatList Component — React Native Basics

There have been a quite a few ways to create a scrolling list in React Native, most notably they have been the ScrollView and the ListView…

Pull to Refresh with React Native FlatList

A simple video on how to use pull to refresh in the FlatList component.

Migrate from ExNavigation to React Navigation

I’ve been using ExNavigation for quite a while. It’s simple to setup and has consistently worked for me. If you’ve checked out the the…

How to Rename A React Native App

Renaming your React Native project is something you’ll rarely have to do, if ever. I’ve had to do it in the past and I struggled quite a…

The Easiest Way to Learn React Native

I’ve spent a lot of time working with React Native. I started using it very shortly after it was open sourced and have used it daily since…

React Conf 2017 Overview for the React Native Developer

For myself, others who didn’t attend, and those wishing to review I wanted to put together a list of presentations & announcements that…

Getting Started with React Navigation, the Navigation Solution for React Native

If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages…

How to make your React Native app respond gracefully when the keyboard pops up

When you’re working with React Native apps, a common problem is that the keyboard will pop up and hide text inputs when you focus on them…

Offline First React Native + Meteor Apps

A topic that has come up numerous times in consulting calls, among students in my Learn React Native + Meteor course, and on issues for…

React Native Basics: Geolocation

I’ve been using the Geolocation API in React Native a fair amount lately. It’s an API that I didn’t realize existed in React Native and…

Playing with React Native Animations

For my first post of the year I wanted to keep it light and experiment a little bit with the React Native Animated API. We’ll create a few…

Managing Configuration in React Native

You’re a developer. You build apps. You probably build them in an iterative way —build something, test it, realize it doesn’t work, try…

Handling Offline Actions in React Native

A few weeks ago I wrote about building offline first react native apps and left the post with a question — “How would you handle actions…

Building Offline First React Native Apps

When building a mobile app it’s reasonable to expect that a user will, at some point, use your app without an internet connection. How does…

Handling Remote Push Notifications from OneSignal in React Native

Two weeks ago I published a post covering every step you have to take to set up push notifications, via OneSignal, for React Native (iOS…

React Native Push Notifications with OneSignal

I had initially planned to make a comprehensive multi-part video series on setting up remote push notifications but, unfortunately, I underestimated the time it would take for me to recover from getting my wisdom teeth removed.

Using Meteor as a Backend for Your Apps [Presentation]

Hey, long time no see! I just wrapped up a presentation (about 5 minutes ago) on using Meteor exclusively as a backend for your app. I…

Tools and Services used in a Production React Native + Meteor App

A common question (or series of questions) that I’ve had over the last few months is “what do you use for X?”. Today I’ll walk you through…

React Native Basics: Using react-native-router-flux

A core component of any app is navigating between different routes/screens/scenes. I’ve analyzed different navigation solutions in the past…

Setting up your Redux Store

If you read the articles I publish weekly you know that I’m a fan of React Native and Meteor. I use them everyday and I spend time teaching…

My Process for Building a Cross Platform React Native Component

I’ve talked about sharing code between React Native on Android and iOS but this week I want to talk more about my process of building for…

Preparing a React Native Android App for Production

We’re currently going through the launch process of one of our client’s apps — an app built with React Native running on both iOS and…

Organizing a React Native Project

One of the great things about React Native is the flexibility. You can do just about anything — including organize the project however you…

Connecting React Native and Meteor

A question I commonly get when discussing my React Native Meteor boilerplate is in regards to what is actually going on with the two apps…

Snapchat Interface in React Native

I’m kind of back to my routine this week and I wanted to make sure I dropped a new post for everyone before moving next week (likely a…

How to Setup Push Notifications in React Native (iOS & Android)

This week I wanted to try something different and, rather than write a blog post, record a screencast. Video is a completely different beast than writing and something I’m not (yet) comfortable with…

Blueprint to becoming a React Native Developer

I’m a big believer in React Native — if you’re reading this you’re likely interested in it as well. The Javascript ecosystem is quickly…

How I use React Native, Redux, and Meteor

Note: What I’ll be talking about here only covers using Meteor and Redux in the context of a React Native client.

React Native Basics: How to Use the ListView Component

ListView — A core component designed for efficient display of vertically scrolling lists of changing data.

Intro to Styling in React Native

React does styling a bit different than you may be used to on the web. It’s CSS in JS which is a controversial topic. If you’re interested…

Why Meteor is the Perfect Backend for React Native

There’s no such thing as a perfect technology stack. If you’re asking if X stack can handle the same traffic/load as Facebook I’ll tell you…

React Native Meteor: Auth with Email, Username, and Password

Welcome to post #2 of my series on authentication using React Native & Meteor! This week we’re going to cover auth as it pertains to…

React Native Meteor: OAuth with Facebook

This is a bit more advanced of a tutorial — if you’re going through this tutorial you should already be comfortable establishing a DDP…

Exploring Navigators in React Native

One of the core components of any app, be it web or mobile, is navigation/routing. It’s the basis of how a user interacts with your app. It…

Pub/Sub versus Methods in React Native Meteor

This week’s post is a short one and more of a thought exercise rather than a tutorial. It stems from a comment made by Abhi Aiyer on a…

Sharing Code between Android and iOS in React Native

One of the (many) advantages of writing an app with React Native is that you can write a mobile app for both iOS and Android from the same…

React Native Meteor FAQ

There are a few questions that I see pop up on the various blog posts I've written on React Native Meteor. I want to put together an FAQ to, hopefully, help you out and point you in the right direction. This document will be updated over time so please send me anything you feel should be included.

Google OAuth using Meteor and React Native

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same…

Intro to Debugging React Native (iOS and Android)

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same…

Password Hashing for Meteor React Native

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same…

Easily Connect React Native to a Meteor Server

This post is now outdated as the technology has changed. If you want to learn the latest please check out my profile or sign up for my…

Meteor Authentication from React Native

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same…

React Native + CodePush

As technology changes articles get out of date. This post may be in that state now so be aware that things may not work exactly the same…

Join the email list to be notified of all new lessons and classes!