Setting up a React Native Project

May 20, 2017 · 4 min read

I thought I’d share my process of how I setup a simple React Native Project as it’s something I’ve done recently when working on hobby app projects. This is largely similar to Facebook’s own guide (just a little shorter).

What’s React Native?

React native is basically a framework that allows you to build native iOS and Android apps using Javascript, which is awesome. Instead of having to learn Objective-C/Swift and Java, you can now essentially create a mobile app using only Javascript.

iOS Setup

First of all, I’m working on a Mac so all examples will only apply to you if you’re also using a Mac. Setting up the project for iOS is incredibly easy and simple. In order to proceed you’re going to need to have Xcode (version 8 or higher), Node (version 4 or higher), Watchmen and the React Native CLI. At this point you’re going to want to open terminal. Now, using Homebrew, we can easily install Node and Watchmen with the following commands.

$ brew install node
$ brew install watchmen

Once this is done, install the React Native CLI with the following command.

$ npm install -g react-native-cli

Next you’re going to need to install Xcode, which is best done through the App Store.

Next we’re going to initialise a skeleton React Native project and open that app in a virtual iOS device.

$ react-native init MyProject
$ cd MyProject
$ react-native run-ios

Before typing the last command, just take a moment to look at the project structure. When you’re ready, type the last command, you’ll notice it’ll cause a bunch of stuff to happen, just let it do it’s shit. Essentially it’s building your app and booting up a local server to run it. After all the loading you’ll see this.

Now you’re ready to build stuff! As the prompt suggests, you can head over to the index.ios.js to begin playing around and editing things.

Android Setup

Everything is pretty much the same, however there are just a few extra things you need to do if you’d like to start developing with Android.

Firstly you’ll need to download JDK (Java Development Kit) and then download Android Studio (basically Xcode but for Android). If you have any issues, they’ve provided an installation guide here.

When running Android Studio for the first time ensure the following items are checked when asked what you’d like to include in installation.

  • Android SDK
  • Android SDK Platform
  • Performance (Intel HAXM)
  • Android Virtual Device

As well as this, you’re going to need to make sure Android 6 (Marshmallow) is installed. To do this click the Configure button on the Welcome page, and then launch the SDK Manager. From here select Android 6 (Marshmallow) and make sure the following items are checked.

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Now there’s one last fiddily bit to do. Select the SDK Tools tab and then Show Package Details, here you’re making sure that Android SDK Build-Tools 23.0.1 is included and selected. Once this is done click Apply, which will download everything you need.

Next you’re going to have to configure some Enviornment Variables for things to work properly. You can open up your .profile file in your text editor and add the following lines, or just type them straight into the terminal and hit enter. Bearing in mind the latter will only keep these as long as that tab is open, once closed it’ll forget those variables, so it might just be best to edit your .profile file.

$ export ANDROID_HOME=${HOME}/Library/Android/sdk
$ export PATH=${PATH}:${ANDROID_HOME}/tools
$ export PATH=${PATH}:${ANDROID_HOME}/platform-tools

If things are the same for you as they were for me, you may need to manually setup a virtual device using the AVD. This can be done following this guide.

Assuming this is all setup correctly, and that we’re using the project we setup earlier for iOS, you can simply type the following to run the app on Android. You’ll see the same screen as above, but on Android.

$ react-native run-android

If you’ve got an Android device you can plug it in, enable USB Debugging, type the above command and it’ll boot the app on your device, which is even cooler!

From here you can start building your app and playing around with React Native. The awesome thing is whenever you make any changes, you just need to reload app (which is super quick) and those changes are reflected pretty much instantly. It makes developing mobile apps so quick and easy.

Thanks for reading, hit 💚 if you enjoyed this and be sure to follow if you’d like to keep up to date with what I’m working on.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade