The Expo CLI

First install expo

npm install -g expo-cli

Then run the following commands to create a new React Native project called , and pick the blank configuration:

expo init <ProjectName>
cd <ProjectName>
npm start 

In theory, you can also use: expo start but some for folks this wasn't working 🤔❓

development server should be ready now.

Next... install expo app to your phone from the app store.

Now your environments are up and you've run the app on your phone, you can modify it and make things!

Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

⚠️Caveats

Because you don't build any native code when using Expo to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.

If you know that you'll eventually need to include your own native code, Expo is still a good way to get started. In that case you'll need to "eject" eventually to create your own native builds. If you do eject, the "React Native CLI Quickstart" instructions will be required to continue working on your project.

If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build environment. Follow "React Native CLI Quickstart" below for instructions on configuring a native build environment for React Native.

The React Native CLI

First, housekeeping--install dependencies with homebrew

Node, Watchman, JDK We recommend installing Node, Watchman, and JDK using Homebrew. Run the following commands in a Terminal after installing Homebrew:

brew install yarn
brew install node
brew install watchman
brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

Node 8.3 or newer.

Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.

If you have already installed JDK on your system, make sure it is JDK 8 or newer.

Then install react

npm install -g react-native-cli

You'll also need tools like xcode. More info on that here

Start building...

creating an app is simple as:

react-native init <ProjectName>

Done Building, Ready to Deploy?

tips from Spencer Carli

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 this we often have a gap of knowledge, namely around bringing the app to production. The web has its challenges but mobile development has a different set of challenges — challenges we may not necessarily be familiar with.

I know this is something I struggled with so I wanted to put together a quick checklist of tasks you can use to successfully bring your React Native app to production.

iOS

• Add basic offline support. A network connection isn’t guaranteed (especially if you’re targeting emerging markets) so test things on a disconnected device or at least one with a slow connection
• Spend time on your release management. I don’t automate much but I do try to make it as easy and error free as possible. Tools like Fastlane and CodePush help a ton.
• Create a development account with apple (this can take some time for verification so do it early — 9/year)
• Add app icons to your app (I typically use this tool to generate all necessary sizes)
• Add splash screens to your app (I typically use this tool to generate all necessary sizes)
• Create a new explicit app id on developer.apple.com (this gives you more flexibility in the future rather than using a wildcard)
• Select your explicit app id as the bundle identifier in Xcode
• Create development and production certificates for your app (Fastlane match can help with this)
• Create development and production provisioning profiles for your app (Fastlane match can help with this)
• Create app in iTunes Connect
• Upload
• BOOM!

But First--some anatomy

also from Spencer Carli React Native = Native Code (Objective C for iOS) + JavaScript

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.

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!

Further reading

react native docs: platform specific code apple platforms google platforms