Building your first React Native app on Windows

To my mind, mobile app developers have two routes to producing their apps. Firstly, they can write the apps in the supported language and IDE of the mobile platform provider – Java for Android, Swift for iOS and .NET for Windows. Three different platforms, with three different IDEs, three different languages, and three different programming models. Let’s be reasonable and drop Windows support – that’s still double the work, not to mention double the mental juggling you have to do to do both apps. I’m not a fan, although I will probably learn Android Java and Swift at some point.

The alternatives are:

  • Produce a mobile-ready web app.
  • Wrap mobile-ready web apps in something like Apache Cordova to produce a hybrid app.
  • Write in a cross-platform language that compiles to a native app.

I like the latter option as it produces native apps, unlike the other two. My second choice would be a mobile-ready Progressive Web App (PWA). So, native apps it is. There are two options here:

  1. React Native (JavaScript)
  2. Xamarin (C# / .NET)

I’ve been an advocate for Xamarin for a while, but since I’ve got some time right now, I figured I would try out React Native. When I tried the Getting Started guide for React Native, I realized they missed some steps, so this post is hopefully a “better” Getting Started Guide.

Install Pre-requisites

Let’s start with the pre-requisites. It’s a pretty good list; just not complete. I run Chocolatey as my package installer as well, but you don’t need to run it. You can just download the installers and run them. All of these installers are fairly straight-forward.

  • Node – choose the LTS version if you don’t like the bleeding edge.
  • Python 2.7 – ensure you select “Add to PATH” when installing.
  • Java Development Kit 8 – choose the 64-bit version.
  • Yarn – they forgot this one in the list. If you use Chocolatey: choco install yarn.
  • Android Studio – a whopping 1.8Gb installer!

When installing Android Studio, ensure you follow the custom path and install:

  • Android SDK
  • Android SDK Platform
  • Intel HAXM
  • Android Virtual Device

I also adjusted the path that the Android SDK is installed to be C:\Users\myid\Android\sdk. This reaps benefits later as the default AppData location is not visible normally.

There are some other good packages for React Native that you may want to consider:

However, all of these are optional to the task at hand – running your first React Native app.

Configure Android Studio

Once you have run all the installers, run Android Studio. This gives you a chance to install the right Android SDK. Run Configure -> SDK Manager… You need the following:

  • SDK Platforms
    • Android 6.0 (Marshmallow)
      • Google APIs
      • Android SDK Platform 23
      • Google APIs Intel x86 Atom System Image
  • SDK Tools
    • Android Emulator
    • Android SDK Platform-Tools
    • ANdroid SDK Tools
    • Intel x86 Emulator Accelerator (HAXM installer)
    • NDK

Once these are selected, click OK to install and go get lunch or something. It’s going to take a while. Once it is done, create a new project using Import an Android code sample, or use Start a new Android Studio project. It can be anything (I used the ActionBarCompat-Basic sample). You aren’t interested in the project. You are interested in getting to the editor area where the AVD Manager is located.

Create an Android Virtual Device (AVD)

Once you have the Android Studio IDE open, click on the AVD Manager:

  • Click Create Virtual Device…
  • Select Category Phone and Name Pixel (or choose another!)
  • Click Next.
  • Select Marshmallow, then click Next.
  • Enter a name for the AVG, then select Finish.

Before you start your React Native development for the day, you will need a running device. Start up Android Studio, go into the AVD Manager, then click the Run button next to your AVD:

Don’t start it now! You still have some environment set up to do and that is going to require you to log out.

Adjust your PATH

Although you have installed all the pre-requisites, they may not be available to you. In your Cortana search box, type Environment. One of the matches will be Edit environment variables for your account. You need to modify two environment variables:

  • ANDROID_HOME points to the location of the Android SDK.
  • Path should have some additional paths in it.

I adjusted the path of the Android SDK to C:\Users\myid\Android\sdk so that I can easily find it later. If you didn’t do this, it will be in C:\Users\myid\AppData\Local\Android\sdk. Replace myid with your local Windows user ID. You can set the ANDROID_HOME variable easily using the New… button:

In the latest edition of Windows 10, the Path environment variable is a list editor. Double-click the Path entry. You definitely want the following:

  • C:\Users\myid\AppData\Roaming\npm
  • %ANDROID_HOME%\build-tools
  • %ANDROID_HOME%\platform-tools

These latter two can be written as absolute paths, dependent on %USERPROFILE% (as I have done below) or dependent on %ANDROID_HOME% (as I have done above). All three are correct.

Click OK twice to get out of the environment variable editor. Then log out and log back in again so that the environment variables take effect.

Now you can start the Android AVD if you like.

Install React Native

Now you have all the pre-requisites in and configured, you can install React Native!

npm install -g react-native-cli

I also like to install a few other packages globally, the most notable is rimraf, which is a directory remover that can handle long paths such as those created by node_modules.

Finally Ready to Do Something!

Now that you have all the extra steps out of the way, you can finally create your first React Native app and run it:

react-native init rntest
cd rntest
react-native run-android

The first run of an app is a laborious affair and will take several minutes to complete. Watch the scrolling output, however. If there are any red blocks of text, those are indicative of a problem in your installation. Otherwise, congrats – you have done what the Getting Started project is meant to do – validate that your build and debugging environment is right.