Mobile
Article

Quick Tip: Installing React Native

By Jon Shaffer

React Native has fast become one of the hottest frameworks for building cross platform mobile apps. Based on JavaScript and Facebook’s React Library it focuses on performance and tight integration with the native platforms supports. With Facebook invested in the framework and React’s learn once, write anywhere philosophy, React has a bright future.

There is no offical way to build iOS applications on Windows or Linux, so this guide mostly focuses on installing in OS X.

Step 1: Dependency Managers

Start by installing Homebrew, a handy tool for installing applications on OS X that aren’t available in the app store. Chocolatey is a Windows equivalent, with most required packages available on Linux.

Step 2: Install Optional Dependencies

Watchman

Watchman is a service that watches for file changes and triggers actions based on those changes. It’s recommended by the React Native team to instantly show changes in code.

Mac Installation

brew install watchman

Windows Installation

Windows support is in Alpha, but read through this GitHub issue to try and install Watchman on Windows.

Linux Installation

git clone https://github.com/facebook/watchman.git
cd watchman
./autogen.sh
./configure
make
sudo make install

Flow

Flow is a static type checker that will help make your JavaScript more stable.

Mac Installation

brew install flow

Windows Installation

Windows support is in Alpha, but read through this GitHub issue to try and install Flow on Windows.

Linux Installation

wget https://facebook.github.io/flow/downloads/flow-linux64-latest.zip
unzip flow-linux64-latest.zip
cd flow-linux64-latest
echo -e "\nPATH=\"\$PATH:$(pwd)/\"" >> ~/.bashrc && source ~/.bashrc

Step 3: Install Node

The downside of using Homebrew is that having a package manager handle another package manager can get complicated, and your NPM installation may have reliability issues. If you’re on Windows there shouldn’t be a problem with Chocolatey.

The most robust way to install Node is by installing it under NVM (Node Version Manager). If you already have NVM, or have a version of Node 4+ installed by other means, you can skip to Step 4.

Uninstall Previous Node Installation

Uninstall an existing version of node by following the advice in this gist, summarized for brevity:

rm -rf /usr/local/lib/node_modules
brew uninstall node

Install NVM

Linux and Mac OS

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

Windows

There are unofficial alternatives for installing NVM on Windows, find them here.

Step 4: Install Latest Node and React Native

You should now be able to run the following commands to install Node, set a default Node version for new terminals, and install React Native:

nvm install node && nvm alias default node
npm install -g react-native-cli

You now have the command line tools for React Native installed. Next let’s install the iOS and Android dependencies.

Step 5: Install Xcode

Xcode is only available for the Mac and can be installed directly from this link.

Step 6: Android Dependencies

Java Developer Kit

Install the latest JDK (Java Development Kit) from here. Mac Users will also need a Java Runtime Environment installed, find details here.

The Android SDK

Android Studio is the official IDE for native Android development and the Android SDK included with it, download Android Studio here.

Step 7: Create a React Native Project

Create a React Native project with this command:

react-native init projectname

You now have React Native installed and your first project!

Please let me know if you have any questions or comments below.

Jon Shaffer
Meet the author
Jon is the founder of Hyperfluid Solutions, a Pittsburgh software development company.
  • zbrspyjms

    all of those steps are already written in documentation. there’s no tip in this post, which grants us a small amount of wasted time…

    • http://www.hyperfluidsolutions.com/ Jon Shaffer

      You’re not wrong – there is a ton of overlap with the already great official guide.

      Here’s a gist for the fixes to the issues I had coming from a OS X set up already for native Android & iOS dev:
      https://gist.github.com/properjon/5c682cb1caf917104b23

  • zbrspyjms

    all of those steps are already written in documentation. there’s no tip in this post, which grants us a small amount of wasted time…

    • Chris Ward

      Yes, that is true, but I wanted to publish something that contained as much as possible, even the offical documents send you off to several different other sites and doesn’t always tell you why you’re being sent there and why you’re installing what it recommends.

      You are likely experienced with React Native and installing it, not everyone is and understand the steps they’re following.

      That’s my feeling anyway. Outside of SitePoint I create technical documentation for a couple of projects and it’s something that is often missing, that completely overall walkthrough.

  • David Stinnett

    So he’s only concerned with using React for iOS, not Android, and seems to assume I am the same.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Mobile, once a week, for free.