Tutorials

A collection of tutorials produced by React Native School.

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.

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

If you’re building a React Native app, how do you give your users the ability to upload images? React Native has polyfills for many web APIs — to do image uploading we’ll be using the fetch API. You…

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 users are running our apps on less powerful devices and…

Animated Image Overlay in React Native

When you like a picture on Instagram a heart quickly scales and fades in over the image you liked — how would we go about accomplishing the same in React Native? In this quick tutorial we’ll cover…

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 — like liking a picture, causing a scroll to top in a tab, etc…

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 building a basic JavaScript based navigator for 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 had content taller than the screen size, thus necessitating…

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 digest. Or Twitter tells me someone I follow liked a tweet (🙄)…

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.). With that, I had to put together an example app — I decided on an app that will show you…

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. This is great to see. I’ve spent the last year, full-time, teaching people to use React…

Setup Continuous Integration with React Native

If you’ve worked on production web projects in the past you likely have experience with continuous integration. Push to the staging branch and it automatically goes to the staging server! But what…

Navigating Navigation in React Native

Those were only the first few I could think of — no doubt that there are more! So, why is it like this? Native navigators are navigators written in the platform’ss native language (typically…

GraphQL Authentication with React Native & Apollo [Part 2/2]

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…

GraphQL Authentication with React Native & Apollo [Part 1/2]

I’ve been playing with Apollo a lot lately and, as with nearly any app, I needed to add authentication to that app. I looked around but couldn’t find any posts specifically on the subject of…

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 and can’t do with your deployed React Native app. When can I…

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 build quite a few (sign in, sign up, edit profile, etc.)…

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 simple app to read and write to it. To keep this tutorial…

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 website. I haven’t done that in a quite a while so I started…

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 Native is appealing — it’s so much like the web. But because of…

A Brief Overview of ES6 for React Native Developers

then you may feel a bit lost at times. The syntax can seem weird, confusing, or sometimes you just don’t know what to look for. I’ve compiled a brief list of the most common ES6+ features that I see…

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 further! I put together a quick video on how you can do so…

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 we’ll cover today! To accomplish this we’ll use the FlatList…

Announcing React Native Basics: Build a Currency Converter [Free Video Course]

React Native is a special tech for me — it opened up the world of mobile development that seemed hidden behind the door of Java & Objective-C. Could I learn it? Sure! But it was going to take a lot…

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…

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 react-native-meteor. You may have also come across meteor-client-bundler which…

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 started) but that’s a Javascript based routing solution. This…

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 —…

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 built in way to do it (though that should change soon-ish) but…

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. Each have their strengths and weaknesses. Since v0.43 of…

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 README in the last few months you may have noticed that it’s in…

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 bit. I don’t have much/any native development experience so I…

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 that time — growing with the platform, experiencing…

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 happened at/during React Conf 2017, as it pertains to React…

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, etc). I’ve used React Native since the very early days of…

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. Something like this: There are a few ways you can avoid…

Announcing Learn React Native + Meteor

In mid-January I opened up pre-sales for my first course, Learn React Native + Meteor. The pre-sale surpassed my expectations. I finished the first version of the course in early February and the…

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-meteor is offline support. In short, how can I do…

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 definitely didn’t realize how easy it was to actually use…

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 bars that animate in and constantly change their size…

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 something else, realize that definitely doesn’t work, and…

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 taken while offline and sync them with the server the next…

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 your react native app handle that situation? Does it sit on…

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 and Android). But the post stopped at the point of delivery —…

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…

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 wanted to share that with you… Presenting on video, especially…

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 a few of the modules and services we’ve used in a production…

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 but this week I wanted to spend some time doing common…

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 how to use them every night. When you’re building a React…

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 multiple platforms. This is definitely opinionated and falls…

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 Android. Using React Native with Android is easy, it just works…

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 want. This is great! But can also be daunting, especially to…

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. How are things set up? This is a great question and will…

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 delay/no post then). I didn’t have the time to dive into an in…

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 evolving and it’s hard to make choices without often following…

How I use React Native, Redux, and Meteor

I originally set out to build a package on top of my React Native Meteor boilerplate that would make using React Native and Redux, backed by Meteor, trivial to implement. As I started building I…

Updating the React Native Meteor Boilerplate

A few months ago I released a boilerplate to build React Native apps with Meteor. A lot has changed on this landscape in the last 3 months and that boilerplate has fallen behind. It was extremely…

React Native Basics: How to Use the ListView Component

Basically it’s a way to create an efficient scrolling component. It’s driven by a data blob and, theoretically, can be infinitely long. Whereas the other core scrollable component, ScrollView, may…

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 in the why I’d suggest reading through this deck. Let’s put…

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 now that it won’t — nothing out of the box will. It’ll take…

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 email/username + password. It’s much more simple than last week’s…

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 connection from React Native to Meteor. In this example I’ll be…

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 comes in many flavors but at it’s core a user is still…

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 recent edition of the Crater podcast. He made a great point…

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 codebase. Something that, as designers and developers, I’m…

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…

Google OAuth using Meteor and React Native

Allowing a user to sign up for your app via OAuth has become common place. If you’ve used Meteor in the past you’ve experienced the ease through which you can set up OAuth in the browser or in…

Intro to Debugging React Native (iOS and Android)

Debugging a React Native app, while similar to the web, is a bit different. Once you get the hang of it and know the tools it’s simple. This small guide is intended to reduce that learning curve…

React Native + Meteor Boilerplate

Over the last few weeks I’ve been writing a weekly blog post about various aspects of developing React Native applications that interface with a Meteor backend. I’ve really enjoyed the process of…

Password Hashing for Meteor React Native

Last week I talked about how to authenticate a Meteor user from a React Native client. It covers how to sign up and login via email, username, and resume token. I mentioned in that post that the…

Easily Connect React Native to a Meteor Server

With Parse recently announcing that they will be shutting down, many companies are looking into the next steps to take. This shut down may lead many away from BaaS products and towards an in-house…

Meteor Authentication from React Native

In this post I extend on my previous one in which I discussed how to easily connect a React Native app to a Meteor server. We’ll talk about the next component you’re likely to encounter —…

React Native + CodePush

I’ve been building with React Native for a few months now — I wrote about my experiences a while back. Recently we’ve started a new mobile project and we chose to, again, use React Native on the…