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 update things over-the-air (OTA)? When do I have to go through the app store? What are my restrictions? What tools can I use?

I want to help answer that today.

The Different Parts of a React Native App

First, we need to understand what goes into a React Native app. There are two things:

1. The native code
2. The JavaScript code

The native code manages, well, the native stuff. It’s written in Objective-C (iOS) or Java (Android), and you’ll rarely have to work with it and even when you do it will likely be minor work.

Though you as an app developer rarely touch it that doesn’t mean it’s a minor piece of a React Native app — it’s a large piece of the puzzle. What React Native does is take your JavaScript and use that logic to interact with the native code. In short: React Native exposes many native APIs to us.

The JavaScript code, on the other hand, is where you’ll spend most of your time. You use different APIs (be them core React Native or from a third party package) to interact with the underlying native implementations.

How to Update

Your app is out there in the app stores. How do you update it? There are two ways.

Over-the-Air (OTA)

An OTA update does pretty much what it says. You send an update out, the user downloads it, and the app updates — much like the web. Typically this happens behind the scenes. OTA updates are a strong point of React Native (and other technologies like Cordova). Since we, the developers, usually write our logic in JavaScript (which doesn’t have to be compiled and installed) we can just send out a new JavaScript bundle, and once the user downloads it they have the updated logic! No waiting required.

App Store

If you don’t want to send an update OTA or you’ve made a change that requires it (more on that later), you can update via the app store. Doing so means you use the regular tools (either iTunes Connect or Google Play Developer Console) to upload a new .ipa or .apk.

When you’re doing this, you’re re-compiling the native code and re-bundling the JavaScript. You’re shipping 100% new code and you can do anything at this point. It also means you have to go through the usual review process & waiting period.

When to Update

How do you know which update method you can use?

Over-the-Air (OTA)

Let’s say you’ve got all of your app logic in a src directory and your latest round of updates has only made changes inside of that directory. That means you most likely can ship that update out over the air!

If you’re only modifying your JavaScript or image assets, it means that information can be bundled up and shipped out over the air because all of the underlying APIs are the same as they were before, your interaction with them is the only thing that has changed.

A word of caution. Use this extreme flexibility with caution — you really shouldn’t be making significant changes to your app like this. You don’t want to be changing the functionality of your app by changing how things work or by adding features. Doing so can get you in trouble with Apple/Google.

I like to think about it in terms of SEMVER. If it’s a patch version (bug fix, minor improvement) it can go out OTA. If it’s a major or minor version change, I’m going to send it via the regular app store approval process.

App Store

I already touched on one instance where you would want to go through the app store and that’s whenever you make a decently significant change in your app; even though it’s a pain to wait it’s best to play it safe and go through the normal process.

The other time you’ll want to go through the app store is when you make any changes to the native app (that being the ios and android directories in your project). You may be thinking you never touch those, so you never have to go through the app store…

But that’s not true. Just about any time you upgrade React Native you’re modifying the native project; or whenever you add a third party package and have to run react-native link. That’s a change to your native project and will require you to go through the app store to ensure everything works correctly.

When in doubt, go through the app store.

Tools

Now that we know when to update and through what means, what tools are out there to make our life easier? There are other options out there but these are the ones that I feel give you the most bang for your buck and the ones I have extensive experience with.

OTA Updates = CodePush

CodePush is a tool developed by Microsoft to quickly and easily manage and update your production React Native JavaScript bundles. It’s easy to setup, easy to use, and it’s free.

It’s seriously incredible and will make your life easy. I would suggest that, even if you never intend to send an update OTA, you still configure CodePush to have as a last chance to fix a bug that made it to production.

Native Updates = Fastlane

Fastlane helps automate many of the repetitive tasks that come along with building the native app. You can think of it as a tool belt and in that tool belt are a variety of tools that handle different pieces of the native development puzzle.

Continuous Integration = Bitrise/CircleCI

Though a category I haven’t used much, once you’re ready to invest in total automation (beyond Fastlane) Bitrise and CircleCI are both great options. They allow you to automate the build & deployment process of your native app. No more waiting for the app to build on your machine, and you take the human error element out!