Quick Tip: Installing React Native

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.