Getting Started #

Welcome to React Native! This page will help you install React Native on your system, so that you can build apps with it right away. If you already have React Native installed, you can skip ahead to the Tutorial.

The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick one to start with, since the setup is a bit different.

Unsupported #

Dependencies for Mac + iOS #

You will need Xcode, node.js, the React Native command line tools, and Watchman.

Dependencies for Mac + Android #

You will need Android Studio, node.js, the React Native command line tools, and Watchman.

We recommend installing node and watchman via Homebrew.

Node comes with npm, which lets you install the React Native command line interface.

If you get a permission error, try with sudo: sudo npm install -g react-native-cli.

The easiest way to install Xcode is via the Mac App Store.

Download and install Android Studio.

If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the build.

Dependencies for Linux + Android #

Dependencies for Windows + Android #

You will need node.js, the React Native command line tools, Watchman, and Android Studio.

Follow the installation instructions for your Linux distribution to install Node.js 4 or newer.

We recommend installing node.js and Python2 via Chocolatey, a popular package manager for Windows. Open a Command Prompt as Administrator, then run:

Node comes with npm, which lets you install the React Native command line interface.

Download and install Android Studio.

Watchman is a tool by Facebook for watching changes in the filesystem. Installing it should improve performance, but you can also try not installing it, if the installation process is too annoying. You can follow the Watchman installation guide to compile and install from source.

If you plan to make changes in Java code, we recommend Gradle Daemon which speeds up the build.

Testing your React Native Installation #

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-ios inside the newly created folder.

You should see your new app running in the iOS Simulator shortly. react-native run-ios is just one way to run your app - you can also run it directly from within Xcode or Nuclide.

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder.

If everything is set up correctly, you should see your new app running in your Android emulator shortly. react-native run-android is just one way to run your app - you can also run it directly from within Android Studio or Nuclide.

Modifying your app #

Now that you have successfully run the app, let's modify it.

• Open index.ios.js in your text editor of choice and edit some lines.
• Hit Command⌘ + R in your iOS Simulator to reload the app and see your change!

• Open index.android.js in your text editor of choice and edit some lines.
• Press the R key twice or select Reload from the Developer Menu to see your change!

That's it! #

Congratulations! You've successfully run and modified your first React Native app.

Testing your React Native Installation #

Use the React Native command line tools to generate a new React Native project called "AwesomeProject", then run react-native run-android inside the newly created folder.

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

A common issue is that the packager is not started automatically when you run react-native run-android. You can start it manually using react-native start.

If you hit a ERROR Watcher took too long to load on Windows, try increasing the timeout in this file (under your node_modules/react-native/).

Modifying your app #

Now that you have successfully run the app, let's modify it.

• Open index.android.js in your text editor of choice and edit some lines.
• Press the R key twice or select Reload from the Developer Menu to see your change!

That's it! #

Congratulations! You've successfully run and modified a React Native app.

Now What? #

• If you want to add this new React Native code to an existing application, check out the Integration guide.

• If you can't get this to work, see the Troubleshooting page.

• If you're curious to learn more about React Native, continue on to the Tutorial.