Getting Started # | Edit on GitHub |
Homebrew, in order to install the required NodeJS, in addition to some recommended installs.
Use Homebrew to install Node.js.
NodeJS 4.0 or greater is required for React Native. The default Homebrew package for Node is currently 6.0, so that is not an issue.
The React Native command line tools allow you to easily create and initialize projects, etc.
If you see the error,
EACCES: permission denied
, please run the command:sudo npm install -g react-native-cli
.
Xcode 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install git
as well.
Android Studio 2.0 or higher.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
javac -version
to see what version you have, if any. If you do not meet the JDK requirement, you can download it.
Android Studio will provide you the Android SDK and emulator required to run and test your React Native apps.
Unless otherwise mentioned, keep all the setup defaults intact. For example, the
Android Support Repository
is installed automatically with Android Studio, and we need that for React Native.
You will need to customize your installation:
Custom
installationPerformance
and Android Virtual Device
Configure | SDK Manager
from the Android Studio welcome window.SDK Platforms
window, choose Show Package Details
and under Android 6.0 (Marshmallow)
, make sure that Google APIs
, Intel x86 Atom System Image
, Intel x86 Atom_64 System Image
, and Google APIs Intel x86 Atom_64 System Image
are checked.SDK Tools
window, choose Show Package Details
and under Android SDK Build Tools
, make sure that Android SDK Build-Tools 23.0.1
is selected.Ensure the ANDROID_HOME
environment variable points to your existing Android SDK. To do that, add
this to your ~/.bashrc
, ~/.bash_profile
(or whatever your shell uses) and re-open your terminal:
Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.
Flow, for static typechecking of your React Native code (when using Flow as part of your codebase).
PATH
#You can add the Android tools directory on your PATH
in case you need to run any of the Android
tools from the command line such as android avd
. In your ~/.bash
or ~/.bash_profile
:
Enable Gradle Daemon which greatly improves incremental build times for changes in java code.
Git version control. If you have installed Xcode, Git is already installed, otherwise run the following:
Nuclide is an IDE from Facebook providing a first-class development environment for writing, running and debugging React Native applications.
Get started with Nuclide here.
Genymotion is an alternative to the stock Google emulator that comes with Android Studio. However, it's only free for personal use. If you want to use the stock Google emulator, see below.
There is a known bug on some versions of Android Studio where a virtual device will not be created, even though you selected it in the installation sequence. You may see this at the end of the installation:
If you see this, run android avd
and create the virtual device manually.
Then select the new device in the AVD Manager window and click Start...
.
If you encounter:
try downgrading your Gradle version to 1.2.3 in <project-name>/android/build.gradle
(https://github.com/facebook/react-native/issues/2720)
Chocolatey is a package manager for Windows similar to yum
and
apt-get
. See the website for updated instructions, but installing from
the Terminal should be something like:
Normally when you run Chocolatey to install a package, you should run your Terminal as Administrator.
Fire up the Termimal and use Chocolatey to install Python 2.
Python 3 will currently not work when initializing a React Native project.
Fire up the Terminal and type the following commands to install NodeJS from the NodeSource repository:
Fire up the Termimal and use Chocolatey to install NodeJS.
The React Native command line tools allow you to easily create and initialize projects, etc.
If you see the error,
EACCES: permission denied
, please run the command:sudo npm install -g react-native-cli
.
Android Studio 2.0 or higher.
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. You can type
javac -version
to see what version you have, if any. If you do not meet the JDK requirement, you can download it, or use a pacakage manager to install it (e.g.choco install jdk8
,apt-get install default-jdk
).
Android Studio will provide you the Android SDK and emulator required to run and test your React Native apps.
Unless otherwise mentioned, keep all the setup defaults intact. For example, the
Android Support Repository
is installed automatically with Android Studio, and we need that for React Native.
You will need to customize your installation:
Custom
installationAndroid Virtual Device
Make sure all components are checked for the install, particularly the Android SDK
and Android Device Emulator
.
After the initial install, choose a Custom
installation.
Configure | SDK Manager
from the Android Studio welcome window.SDK Platforms
window, choose Show Package Details
and under Android 6.0 (Marshmallow)
, make sure that Google APIs
, Intel x86 Atom System Image
, Intel x86 Atom_64 System Image
, and Google APIs Intel x86 Atom_64 System Image
are checked.SDK Tools
window, choose Show Package Details
and under Android SDK Build Tools
, make sure that Android SDK Build-Tools 23.0.1
is selected.Ensure the ANDROID_HOME
environment variable points to your existing Android SDK.
To do that, add this to your ~/.bashrc
, ~/.bash_profile
(or whatever your shell uses) and
re-open your terminal:
You need to restart the Terminal to apply the new environment variables (or
source
the relevant bash file).
Go to Control Panel
-> System and Security
-> System
-> Change settings
->
Advanced System Settings
-> Environment variables
-> New
Your path to the SDK will vary to the one shown below.
You need to restart the Command Prompt (Windows) to apply the new environment variables.
Watchman is a tool by Facebook for watching changes in the filesystem. It is recommended you install it for better performance.
This also helps avoid a node file-watching bug.
Type the following into your terminal to compile watchman from source and install it:
Flow, for static typechecking of your React Native code (when using Flow as part of your codebase).
Type the following in the terminal:
Enable Gradle Daemon which greatly improves incremental build times for changes in java code.
You may have seen the following screen when installing Android Studio.
If your system supports KVM, you should install the Intel Android Emulator Accelerator.
PATH
#You can add the Android tools directory on your PATH
in case you need to run any of the Android
tools from the command line such as android avd
.
In your ~/.bashrc
or ~/.bash_profile
:
Go to Control Panel
-> System and Security
-> System
-> Change settings
->
Advanced System Settings
-> Environment variables
-> highlight PATH
-> Edit...
The location of your Android tools directories will vary.
Install Git via your package manager
(e.g., sudo apt-get install git-all
).
You can use Chocolatey to install git
via:
Alternatively, you can download and install Git for Windows.
During the setup process, choose "Run Git from Windows Command Prompt", which will add git
to your
PATH
environment variable.
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing, running and debugging React Native applications.
Get started with Nuclide here.
Genymotion is an alternative to the stock Google emulator that comes with Android Studio. However, it's only free for personal use. If you want to use the stock Google emulator, see below.
The Visual Studio Emulator for Android is a free android emulator that is hardware accelerated via Hyper-V. It is an alternative to the stock Google emulator that comes with Android Studio. It doesn't require you to install Visual Studio at all.
To use it with react-native you just have to add a key and value to your registry:
regedit.exe
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools
Android SDK Tools
and choose New > String Value
Path
Path
Key and set the value to C:\Program Files\Android\sdk
. The path value might be different on your machine.You will also need to run the command adb reverse tcp:8081 tcp:8081
with this emulator.
Then restart the emulator and when it runs you can just do react-native run-android
as usual.
When installing Android Studio, if you get the error:
then install the standard C++ library:
There is a known bug on some versions of Android Studio where a virtual device will not be created, even though you selected it in the installation sequence. You may see this at the end of the installation:
If you see this, run android avd
and create the virtual device manually.
Then select the new device in the AVD Manager window and click Start...
.
In case you encounter
try downgrading your Gradle version to 1.2.3 in <project-name>/android/build.gradle
(https://github.com/facebook/react-native/issues/2720)
You can also open the
AwesomeProject
folder in Nuclide and run the application, or openios/AwesomeProject.xcodeproj
and hit theRun
button in Xcode.
You can also open the
AwesomeProject
folder in Nuclide and run the application.
Now that you successfully started the project, let's modify it:
index.ios.js
in your text editor of choice (e.g. Nuclide) and edit some lines.index.android.js
in your text editor of choice (e.g. Nuclide) and edit some lines.R
key twice OR open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V
in a terminal to see your app's logsCongratulations! You've successfully run and modified your first React Native app.
A common issue is that the packager is not started automatically when you run
react-native run-android
. You can start it manually using:
Or 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/
).
Now that you successfully started the project, let's modify it:
index.android.js
in your text editor of choice (e.g. Nuclide) and edit some lines.R
key twice OR open the menu (F2 by default, or ctrl-M in the emulator) and select Reload JS to see your change!adb logcat *:S ReactNative:V ReactNativeJS:V
in a terminal to see your app's logsCongratulations! You've successfully run and modified your first React Native app.
If you want to run on a physical device, see the Running on Android Device page.
If you run into any issues getting started, see the Troubleshooting page.
We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!