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.

Frequently Asked Questions (FAQs) about Installing React Native

Why am I getting an error message when trying to install React Native?

There could be several reasons why you’re encountering an error message during the installation process. One common issue is not having the correct version of Node.js installed. React Native requires a specific version of Node.js, so make sure you have the correct one. Another common issue is not having the Android development environment properly set up. Make sure you have the Android SDK and Android Studio installed and properly configured.

How do I set up the Android development environment for React Native?

Setting up the Android development environment involves several steps. First, you need to install the Java Development Kit (JDK) and the Android SDK. You can download these from the official Android website. Once you have these installed, you need to set up the Android Studio, which is the official IDE for Android development. Make sure to correctly set up the environment variables for these tools.

What is the role of Node.js in React Native?

Node.js is a crucial component in React Native development. It’s used to generate the initial React Native project structure, install dependencies, and run the development server. It’s also used to bundle and serve the JavaScript code to the React Native app.

How do I fix the “nvm is not compatible with the prefix environment variable” error?

This error usually occurs when there’s a conflict between the Node Version Manager (nvm) and the prefix environment variable. To fix this, you can unset the prefix by running the command nvm unalias default. Then, you can set the default Node.js version by running nvm alias default node.

How do I configure React Native environment in M1?

Configuring the React Native environment in M1 involves several steps. First, you need to install Rosetta 2, which allows apps built for Intel processors to run on Apple Silicon. Then, you need to install Node.js, Watchman, and the React Native CLI using the correct commands. Finally, you need to install the JDK and Android Studio.

Why am I getting a “Failed to install the following Android SDK packages as some licenses have not been accepted” error?

This error occurs when you haven’t accepted the licenses for the Android SDK packages. To fix this, you can run the command sdkmanager --licenses and accept all the licenses.

How do I update React Native?

To update React Native, you can use the npm update command. However, if you’re using the React Native CLI, you can use the react-native upgrade command. Make sure to backup your project before updating, as the update process can sometimes introduce breaking changes.

How do I uninstall React Native?

To uninstall React Native, you can use the npm uninstall -g react-native-cli command. This will remove the React Native CLI from your system. If you want to remove a specific React Native project, you can simply delete the project directory.

What are the system requirements for React Native?

React Native requires Node.js, the React Native CLI, Java Development Kit (JDK), and the Android SDK. It also requires a physical or virtual Android device to run the app. For iOS development, it requires Xcode and an iOS device.

How do I resolve the “Unable to load script from assets index.android.bundle” error?

This error usually occurs when the packager server isn’t running or when the app can’t connect to the server. To fix this, you can start the packager server by running npm start or react-native start. If the server is already running, you can try resetting the packager cache by running npm start -- --reset-cache.