Refactor getting started navigation and information based on platform
Summary: This simplifies the Quick Start section of the React Native documentation into two pages. A Getting Started and a Tutorial. The Getting Started page uses some CSS and Javascript magic (thanks vjeux for the initial infra for this!!) to allow selection between platforms and have instructions for Getting Started with React Native be shown according to the selection -- all within the same page, realtime. A much cleaner interface. I have made a pretty large presentation and information overhaul for each platform as well. For example, requiring Android Studio for Android development to make the Android SDK and build tools installation easier. I added more screenshots to the Android sections since they are more complicated than the more straightforward iOS. Screenshots for Android for Windows, Linux and iOS are available now. Some of the other pages such as `GettingStartedOnLinux` are now obsolete and deleted. ** Test Plan ** Tested locally and navigation works. Closes https://github.com/facebook/react-native/pull/7418 Differential Revision: D3268621 Pulled By: vjeux fb-gh-sync-id: 65f9181c9f959fadeffd254efddc5b64816eb1f4 fbshipit-source-id: 65f9181c9f959fadeffd254efddc5b64816eb1f4
This commit is contained in:
Joel Marcey
Facebook Github Bot 0
parent
359b381796
commit
156d3ed7a2
|
|
@ -1,114 +0,0 @@
|
||||||
---
|
|
||||||
id: android-setup
|
|
||||||
title: Android Setup
|
|
||||||
layout: docs
|
|
||||||
category: Quick Start
|
|
||||||
permalink: docs/android-setup.html
|
|
||||||
next: linux-windows-support
|
|
||||||
---
|
|
||||||
|
|
||||||
This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator.
|
|
||||||
|
|
||||||
### Install Git
|
|
||||||
|
|
||||||
- **On Mac**, if you have installed [XCode](https://developer.apple.com/xcode/), Git is already installed, otherwise run the following:
|
|
||||||
|
|
||||||
brew install git
|
|
||||||
|
|
||||||
- **On Linux**, install Git [via your package manager](https://git-scm.com/download/linux).
|
|
||||||
|
|
||||||
- **On Windows**, download and install [Git for Windows](https://git-for-windows.github.io/). During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your `PATH` environment variable.
|
|
||||||
|
|
||||||
### Install the Android SDK (unless you already have it)
|
|
||||||
|
|
||||||
1. [Install the latest JDK](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)
|
|
||||||
2. Install the Android SDK:
|
|
||||||
- **On Mac**: `brew install android-sdk`
|
|
||||||
- **On Linux and Windows**: [Download from the Android website](https://developer.android.com/sdk/installing/index.html)
|
|
||||||
|
|
||||||
### Define the ANDROID_HOME environment variable
|
|
||||||
|
|
||||||
__IMPORTANT__: Make sure the `ANDROID_HOME` environment variable points to your existing Android SDK:
|
|
||||||
|
|
||||||
- **On Mac**, add this to your `~/.bashrc`, `~/.bash_profile` or whatever your shell uses:
|
|
||||||
|
|
||||||
# If you installed the SDK via Homebrew, otherwise ~/Library/Android/sdk
|
|
||||||
export ANDROID_HOME=/usr/local/opt/android-sdk
|
|
||||||
- **On Linux**, add this to your `~/.bashrc`, `~/.bash_profile` or whatever your shell uses:
|
|
||||||
|
|
||||||
export ANDROID_HOME=<path_where_you_unpacked_android_sdk>
|
|
||||||
|
|
||||||
- **On Windows**, go to `Control Panel` -> `System and Security` -> `System` -> `Change settings` -> `Advanced` -> `Environment variables` -> `New`
|
|
||||||
|
|
||||||
__NOTE__: You need to restart the Command Prompt (Windows) / Terminal Emulator (Mac OS X, Linux) to apply the new Environment variables.
|
|
||||||
|
|
||||||
|
|
||||||
### Use gradle daemon
|
|
||||||
|
|
||||||
React Native Android use [gradle](https://docs.gradle.org) as a build system. We recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code. Learn [here](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) how to enable it for your platform.
|
|
||||||
|
|
||||||
### Configure your SDK
|
|
||||||
|
|
||||||
1. Open the Android SDK Manager (**on Mac** start a new shell and run `android`); in the window that appears make sure you check:
|
|
||||||
* Android SDK Build-tools version 23.0.**1**
|
|
||||||
* Android 6.0 (API 23)
|
|
||||||
* Local Maven repository for Support Libraries (this is called Android Support Repository in older versions)
|
|
||||||
2. Click "Install Packages"
|
|
||||||
|
|
||||||
 
|
|
||||||
|
|
||||||
### Install Genymotion
|
|
||||||
|
|
||||||
Genymotion is much easier to set up than stock Google emulators. However, it's only free for personal use. If you want to use the stock Google emulator, see below.
|
|
||||||
|
|
||||||
1. Download and install [Genymotion](https://www.genymotion.com/).
|
|
||||||
2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
|
|
||||||
3. Create a new emulator and start it.
|
|
||||||
4. To bring up the developer menu press ⌘+M
|
|
||||||
|
|
||||||
### Alternative: Create a stock Google emulator
|
|
||||||
|
|
||||||
1. Start a new shell and run `android`; in the window that appears make sure you check:
|
|
||||||
* Intel x86 Atom System Image (for Android 5.1.1 - API 22)
|
|
||||||
* Intel x86 Emulator Accelerator (HAXM installer)
|
|
||||||
2. Click "Install Packages".
|
|
||||||
3. [Configure hardware acceleration (HAXM)](http://developer.android.com/tools/devices/emulator.html#vm-mac), otherwise the emulator is going to be slow (or may not run at all).
|
|
||||||
* On a mac this is typically requires opening: `/usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_<version>.dmg` and installing the package within.
|
|
||||||
4. Create an Android Virtual Device (AVD):
|
|
||||||
1. Run `android avd` and click on **Create...**
|
|
||||||
|
|
||||||
2. With the new AVD selected, click `Start...`
|
|
||||||
5. To bring up the developer menu press F2 (or ⌘+M for Android Studio 2.0 or newer)
|
|
||||||
6. Install [Frappé](http://getfrappe.com) (OSX only)
|
|
||||||
|
|
||||||
### Windows Hyper-V Alternative
|
|
||||||
|
|
||||||
The [Visual Studio Emulator for Android](https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx) is a free android emulator that is hardware accelerated via Hyper-V. 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:
|
|
||||||
|
|
||||||
1. Open the Run Command (Windows+R)
|
|
||||||
2. Enter `regedit.exe`
|
|
||||||
3. In the Registry Editor navigate to `HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools`
|
|
||||||
4. Right Click on `Android SDK Tools` and choose `New > String Value`
|
|
||||||
5. Set the name to `Path`
|
|
||||||
6. Double Click the new `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.
|
|
||||||
|
|
||||||
### Editing your app's Java code in Android Studio
|
|
||||||
|
|
||||||
You can use any editor to edit JavaScript. If you want to use Android Studio to work on native code, from the Welcome screen of Android Studio choose "Import project" and select the `android` folder of your app.
|
|
||||||
|
|
||||||
### Troubleshooting
|
|
||||||
|
|
||||||
In case you encounter
|
|
||||||
|
|
||||||
```
|
|
||||||
Execution failed for task ':app:installDebug'.
|
|
||||||
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
|
|
||||||
```
|
|
||||||
|
|
||||||
try downgrading your Gradle version to 1.2.3 in `<project-name>/android/build.gradle` (https://github.com/facebook/react-native/issues/2720)
|
|
||||||
|
|
@ -4,71 +4,796 @@ title: Getting Started
|
||||||
layout: docs
|
layout: docs
|
||||||
category: Quick Start
|
category: Quick Start
|
||||||
permalink: docs/getting-started.html
|
permalink: docs/getting-started.html
|
||||||
next: getting-started-linux
|
next: tutorial
|
||||||
---
|
---
|
||||||
|
|
||||||
## Requirements
|
|
||||||
|
|
||||||
1. OS X - This guide assumes OS X which is needed for iOS development.
|
<div class="toggler">
|
||||||
2. [Homebrew](http://brew.sh/) is the recommended way to install Watchman and Flow.
|
<style>
|
||||||
3. Install [Node.js](https://nodejs.org/) 4.0 or newer.
|
.toggler a {
|
||||||
- Install **nvm** with [its setup instructions here](https://github.com/creationix/nvm#installation). Then run `nvm install node && nvm alias default node`, which installs the latest version of Node.js and sets up your terminal so you can run it by typing `node`. With nvm you can install multiple versions of Node.js and easily switch between them.
|
display: inline-block;
|
||||||
- New to [npm](https://docs.npmjs.com/)?
|
padding: 10px 5px;
|
||||||
4. `brew install watchman`. We recommend installing [watchman](https://facebook.github.io/watchman/docs/install.html), otherwise you might hit a node file watching bug.
|
margin: 2px;
|
||||||
5. `brew install flow`, if you want to use [flow](http://www.flowtype.org).
|
border: 1px solid #05A5D1;
|
||||||
|
border-radius: 3px;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
.display-os-mac .toggler .button-mac,
|
||||||
|
.display-os-linux .toggler .button-linux,
|
||||||
|
.display-os-windows .toggler .button-windows,
|
||||||
|
.display-platform-ios .toggler .button-ios,
|
||||||
|
.display-platform-android .toggler .button-android {
|
||||||
|
background-color: #05A5D1;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
block { display: none; }
|
||||||
|
.display-platform-ios.display-os-mac .ios.mac,
|
||||||
|
.display-platform-ios.display-os-linux .ios.linux,
|
||||||
|
.display-platform-ios.display-os-windows .ios.windows,
|
||||||
|
.display-platform-android.display-os-mac .android.mac,
|
||||||
|
.display-platform-android.display-os-linux .android.linux,
|
||||||
|
.display-platform-android.display-os-windows .android.windows {
|
||||||
|
display: block;
|
||||||
|
}</style>
|
||||||
|
<span>Platform:</span>
|
||||||
|
<a href="" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
|
||||||
|
<a href="" class="button-android" onclick="display('platform', 'android')">Android</a>
|
||||||
|
<span>OS:</span>
|
||||||
|
<a href="" class="button-mac" onclick="display('os', 'mac')">Mac</a>
|
||||||
|
<a href="" class="button-linux" onclick="display('os', 'linux')">Linux</a>
|
||||||
|
<a href="" class="button-windows" onclick="display('os', 'windows')">Windows</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
We recommend periodically running `brew update && brew upgrade` to keep your programs up-to-date.
|
<!-- ######### LINUX AND WINDOWS for iOS ##################### -->
|
||||||
|
|
||||||
## iOS Setup
|
<block class="linux windows ios" />
|
||||||
|
|
||||||
[Xcode](https://developer.apple.com/xcode/downloads/) 7.0 or higher is required. It can be installed from the App Store.
|
## Unsupported
|
||||||
|
|
||||||
## Android Setup
|
<div>Unfortunately, Apple only lets you develop for iOS on a Mac machine. Please check out the <a href="" onclick="display('platform', 'android')">Android</a> instructions instead.</div>
|
||||||
|
|
||||||
To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See [Android setup guide](docs/android-setup.html) for instructions on how to set up your Android environment.
|
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xaf1/t39.1997-6/851591_233289256829505_447005964_n.png" width="150"></img></center>
|
||||||
|
|
||||||
_NOTE:_ There is experimental [Windows and Linux support](docs/linux-windows-support.html) for Android development.
|
<!-- ######### MAC for iOS ##################### -->
|
||||||
|
|
||||||
## Quick start
|
<block class="mac ios android" />
|
||||||
|
|
||||||
Install the React Native command line tools:
|
## Installation
|
||||||
|
|
||||||
$ npm install -g react-native-cli
|
### Required Prerequisites
|
||||||
|
|
||||||
__NOTE__: If you see the error, `EACCES: permission denied`, please run the command: `sudo npm install -g react-native-cli`.
|
#### Homebrew
|
||||||
|
|
||||||
Create a React Native project:
|
[Homebrew](http://brew.sh/), in order to install the required NodeJS, in addition to some
|
||||||
|
recommended installs.
|
||||||
|
|
||||||
$ react-native init AwesomeProject
|
```
|
||||||
|
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
|
||||||
|
```
|
||||||
|
|
||||||
|
> We recommend periodically running `brew update && brew upgrade` to keep your programs up-to-date.
|
||||||
|
|
||||||
|
#### Node
|
||||||
|
|
||||||
|
Use Homebrew to install [Node.js](https://nodejs.org/).
|
||||||
|
|
||||||
|
> 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.
|
||||||
|
|
||||||
|
```
|
||||||
|
brew install node
|
||||||
|
```
|
||||||
|
|
||||||
|
#### React Native Command Line Tools
|
||||||
|
|
||||||
|
The React Native command line tools allow you to easily create and initialize projects, etc.
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install -g react-native-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||||
|
> `sudo npm install -g react-native-cli`.
|
||||||
|
|
||||||
|
<block class="mac ios" />
|
||||||
|
|
||||||
|
#### XCode
|
||||||
|
|
||||||
|
[Xcode](https://developer.apple.com/xcode/downloads/) 7.0 or higher. Open the App Store or go to https://developer.apple.com/xcode/downloads/. This will also install `git` as well.
|
||||||
|
|
||||||
|
<block class="mac android" />
|
||||||
|
|
||||||
|
#### Android Studio
|
||||||
|
|
||||||
|
[Android Studio](http://developer.android.com/sdk/index.html) 2.0 or higher. This will provide you
|
||||||
|
the Android SDK and emulator required to run and test your React Native apps.
|
||||||
|
|
||||||
|
> 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](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html).
|
||||||
|
|
||||||
|
You will need to customize your installation:
|
||||||
|
|
||||||
|
- Choose a `Custom` installation
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Choose both `Performance` and `Android Virtual Device`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- After installation, choose `Configure | SDK Manager` from the Android Studio welcome window.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- In the `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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- In the `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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### ANDROID_HOME Environment Variable
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```
|
||||||
|
# If you installed the SDK without Android Studio, then it may be something like:
|
||||||
|
# /usr/local/opt/android-sdk
|
||||||
|
export ANDROID_HOME=~/Library/Android/sdk
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
### Highly Recommended Installs
|
||||||
|
|
||||||
|
#### Watchman
|
||||||
|
|
||||||
|
[Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching
|
||||||
|
changes in the filesystem. It is recommended you install it for better performance.
|
||||||
|
|
||||||
|
```
|
||||||
|
brew install watchman
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Flow
|
||||||
|
|
||||||
|
[Flow](http://www.flowtype.org), for static typechecking of your React Native code (when using
|
||||||
|
Flow as part of your codebase).
|
||||||
|
|
||||||
|
|
||||||
**To run the iOS app:**
|
```
|
||||||
|
brew install flow
|
||||||
|
```
|
||||||
|
|
||||||
- `$ cd AwesomeProject`
|
<block class="mac android" />
|
||||||
- `$ react-native run-ios` **OR** open `ios/AwesomeProject.xcodeproj` and hit "Run" button in Xcode
|
|
||||||
- Open `index.ios.js` in your text editor of choice and edit some lines.
|
#### Add Android Tools Directory to your `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`:
|
||||||
|
|
||||||
|
```
|
||||||
|
# Your exact string here may be different.
|
||||||
|
PATH="~/Library/Android/sdk/tools:~/Library/Android/sdk/platform-tools:${PATH}"
|
||||||
|
export PATH
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Gradle Daemon
|
||||||
|
|
||||||
|
Enable [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which greatly improves incremental build times for changes in java code.
|
||||||
|
|
||||||
|
### Other Optional Installs
|
||||||
|
|
||||||
|
#### Git
|
||||||
|
|
||||||
|
Git version control. If you have installed [XCode](https://developer.apple.com/xcode/), Git is
|
||||||
|
already installed, otherwise run the following:
|
||||||
|
|
||||||
|
```
|
||||||
|
brew install git
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
#### Nuclide
|
||||||
|
|
||||||
|
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing,
|
||||||
|
[running](http://nuclide.io/docs/platforms/react-native/#running-applications) and
|
||||||
|
[debugging](http://nuclide.io/docs/platforms/react-native/#debugging)
|
||||||
|
[React Native](http://nuclide.io/docs/platforms/react-native/) applications.
|
||||||
|
|
||||||
|
Get started with Nuclide [here](http://nuclide.io/docs/quick-start/getting-started/).
|
||||||
|
|
||||||
|
<block class="mac android" />
|
||||||
|
|
||||||
|
#### Genymotion
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
1. Download and install [Genymotion](https://www.genymotion.com/).
|
||||||
|
2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
|
||||||
|
3. Create a new emulator and start it.
|
||||||
|
4. To bring up the developer menu press ⌘+M
|
||||||
|
|
||||||
|
### Troubleshooting
|
||||||
|
|
||||||
|
#### Virtual Device Not Created When Installing Android Studio
|
||||||
|
|
||||||
|
There is a [known bug](https://code.google.com/p/android/issues/detail?id=207563) 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:
|
||||||
|
|
||||||
|
```
|
||||||
|
Creating Android virtual device
|
||||||
|
Unable to create a virtual device: Unable to create Android virtual device
|
||||||
|
```
|
||||||
|
|
||||||
|
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...`.
|
||||||
|
|
||||||
|
#### Shell Command Unresponsive Exception
|
||||||
|
|
||||||
|
If you encounter:
|
||||||
|
|
||||||
|
```
|
||||||
|
Execution failed for task ':app:installDebug'.
|
||||||
|
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
|
||||||
|
```
|
||||||
|
|
||||||
|
try downgrading your Gradle version to 1.2.3 in `<project-name>/android/build.gradle` (https://github.com/facebook/react-native/issues/2720)
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->
|
||||||
|
|
||||||
|
<block class="linux windows android" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
### Required Prerequisites
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
#### Chocolatey
|
||||||
|
|
||||||
|
[Chocolatey](https://chocolatey.org) is a package manager for Windows similar to `yum` and
|
||||||
|
`apt-get`. See the [website](https://chocolatey.org) for updated instructions, but installing from
|
||||||
|
the Terminal should be something like:
|
||||||
|
|
||||||
|
```
|
||||||
|
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
|
||||||
|
```
|
||||||
|
|
||||||
|
> Normally when you run Chocolatey to install a package, you should run your Terminal as
|
||||||
|
> Administrator.
|
||||||
|
|
||||||
|
#### Python 2
|
||||||
|
|
||||||
|
Fire up the Termimal and use Chocolatey to install Python 2.
|
||||||
|
|
||||||
|
> Python 3 will currently not work when initializing a React Native project.
|
||||||
|
|
||||||
|
```
|
||||||
|
choco install python2
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="linux windows android" />
|
||||||
|
|
||||||
|
#### Node
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
Fire up the Terminal and type the following commands to install NodeJS from the NodeSource
|
||||||
|
repository:
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt-get install -y build-essential
|
||||||
|
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
|
||||||
|
sudo apt-get install -y nodejs
|
||||||
|
sudo ln -s /usr/bin/nodejs /usr/bin/node
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class='windows android' />
|
||||||
|
|
||||||
|
Fire up the Termimal and use Chocolatey to install NodeJS.
|
||||||
|
|
||||||
|
```
|
||||||
|
choco install nodejs.install
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
#### React Native Command Line Tools
|
||||||
|
|
||||||
|
The React Native command line tools allow you to easily create and initialize projects, etc.
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install -g react-native-cli
|
||||||
|
```
|
||||||
|
|
||||||
|
> If you see the error, `EACCES: permission denied`, please run the command:
|
||||||
|
> `sudo npm install -g react-native-cli`.
|
||||||
|
|
||||||
|
#### Android Studio
|
||||||
|
|
||||||
|
[Android Studio](http://developer.android.com/sdk/index.html) 2.0 or higher. This will provide you
|
||||||
|
the Android SDK and emulator required to run and test your React Native apps.
|
||||||
|
|
||||||
|
> 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](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html),
|
||||||
|
> or use a pacakage manager to install it (e.g. `choco install jdk8`,
|
||||||
|
> `apt-get install default-jdk`).
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
You will need to customize your installation:
|
||||||
|
|
||||||
|
- Choose a `Custom` installation
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Choose `Android Virtual Device`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
- 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Verify installed components, particularly the emulator and the HAXM accelerator. They should be checked.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
- After installation, choose `Configure | SDK Manager` from the Android Studio welcome window.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
- In the `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.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
- In the `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.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
#### ANDROID_HOME Environment Variable
|
||||||
|
|
||||||
|
Ensure the `ANDROID_HOME` environment variable points to your existing Android SDK.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
To do that, add this to your `~/.bashrc`, `~/.bash_profile` (or whatever your shell uses) and
|
||||||
|
re-open your terminal:
|
||||||
|
|
||||||
|
```
|
||||||
|
# If you installed the SDK without Android Studio, then it may be something like:
|
||||||
|
# /usr/local/opt/android-sdk; Generally with Android Studio, the SDK is installed here...
|
||||||
|
export ANDROID_HOME=~/Android/Sdk
|
||||||
|
```
|
||||||
|
|
||||||
|
> You need to restart the Terminal to apply the new environment variables (or `source` the relevant
|
||||||
|
> bash file).
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
<block class="linux windows android" />
|
||||||
|
|
||||||
|
### Highly Recommended Installs
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
#### Watchman
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```
|
||||||
|
git clone https://github.com/facebook/watchman.git
|
||||||
|
cd watchman
|
||||||
|
git checkout v4.5.0 # the latest stable release
|
||||||
|
./autogen.sh
|
||||||
|
./configure
|
||||||
|
make
|
||||||
|
sudo make install
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Flow
|
||||||
|
|
||||||
|
[Flow](http://www.flowtype.org), for static typechecking of your React Native code (when using
|
||||||
|
Flow as part of your codebase).
|
||||||
|
|
||||||
|
Type the following in the terminal:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install -g flow-bin
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
#### Gradle Daemon
|
||||||
|
|
||||||
|
Enable [Gradle Daemon](https://docs.gradle.org/2.9/userguide/gradle_daemon.html) which greatly
|
||||||
|
improves incremental build times for changes in java code.
|
||||||
|
|
||||||
|
<block class="mac linux android" />
|
||||||
|
|
||||||
|
```
|
||||||
|
touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
```
|
||||||
|
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
#### Android Emulator Accelerator
|
||||||
|
|
||||||
|
You may have seen the following screen when installing Android Studio.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
If your system supports KVM, you should install the
|
||||||
|
[Intel Android Emulator Accelerator](https://software.intel.com/en-us/android/articles/speeding-up-the-android-emulator-on-intel-architecture#_Toc358213272).
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
#### Add Android Tools Directory to your `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`.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
In your `~/.bash` or `~/.bash_profile`:
|
||||||
|
|
||||||
|
```
|
||||||
|
# Your exact string here may be different.
|
||||||
|
PATH="~/Android/Sdk/tools:~/Android/Sdk/platform-tools:${PATH}"
|
||||||
|
export PATH
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
### Other Optional Installs
|
||||||
|
|
||||||
|
#### Git
|
||||||
|
|
||||||
|
<block class="linux android">
|
||||||
|
|
||||||
|
Install Git [via your package manager](https://git-scm.com/download/linux)
|
||||||
|
(e.g., `sudo apt-get install git-all`).
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
You can use Chocolatey to install `git` via:
|
||||||
|
|
||||||
|
```
|
||||||
|
choco install git
|
||||||
|
```
|
||||||
|
|
||||||
|
Alternatively, you can download and install [Git for Windows](https://git-for-windows.github.io/).
|
||||||
|
During the setup process, choose "Run Git from Windows Command Prompt", which will add `git` to your
|
||||||
|
`PATH` environment variable.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
#### Nuclide
|
||||||
|
|
||||||
|
[Nuclide] is an IDE from Facebook providing a first-class development environment for writing,
|
||||||
|
[running](http://nuclide.io/docs/platforms/react-native/#running-applications) and
|
||||||
|
[debugging](http://nuclide.io/docs/platforms/react-native/#debugging)
|
||||||
|
[React Native](http://nuclide.io/docs/platforms/react-native/) applications.
|
||||||
|
|
||||||
|
Get started with Nuclide [here](http://nuclide.io/docs/quick-start/getting-started/).
|
||||||
|
|
||||||
|
<block class="linux windows android" />
|
||||||
|
|
||||||
|
#### Genymotion
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
1. Download and install [Genymotion](https://www.genymotion.com/).
|
||||||
|
2. Open Genymotion. It might ask you to install VirtualBox unless you already have it.
|
||||||
|
3. Create a new emulator and start it.
|
||||||
|
4. To bring up the developer menu press ⌘+M
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
#### Visual Studio Emulator for Android
|
||||||
|
|
||||||
|
The [Visual Studio Emulator for Android](https://www.visualstudio.com/en-us/features/msft-android-emulator-vs.aspx)
|
||||||
|
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:
|
||||||
|
|
||||||
|
1. Open the Run Command (Windows+R)
|
||||||
|
2. Enter `regedit.exe`
|
||||||
|
3. In the Registry Editor navigate to `HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools`
|
||||||
|
4. Right Click on `Android SDK Tools` and choose `New > String Value`
|
||||||
|
5. Set the name to `Path`
|
||||||
|
6. Double Click the new `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.
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
### Troubleshooting
|
||||||
|
|
||||||
|
#### Unable to run mksdcard SDK Tool
|
||||||
|
|
||||||
|
When installing Android Studio, if you get the error:
|
||||||
|
|
||||||
|
```
|
||||||
|
Unable to run mksdcard SDK tool
|
||||||
|
```
|
||||||
|
|
||||||
|
then install the standard C++ library:
|
||||||
|
|
||||||
|
```
|
||||||
|
sudo apt-get install lib32stdc++6
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Virtual Device Not Created When Installing Android Studio
|
||||||
|
|
||||||
|
There is a [known bug](https://code.google.com/p/android/issues/detail?id=207563) 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:
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
```
|
||||||
|
Creating Android virtual device
|
||||||
|
Unable to create a virtual device: Unable to create Android virtual device
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
If you see this, run `android avd` and create the virtual device manually.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
Then select the new device in the AVD Manager window and click `Start...`.
|
||||||
|
|
||||||
|
<block class="linux android" />
|
||||||
|
|
||||||
|
#### Shell Command Unresponsive Exception
|
||||||
|
|
||||||
|
In case you encounter
|
||||||
|
|
||||||
|
```
|
||||||
|
Execution failed for task ':app:installDebug'.
|
||||||
|
com.android.builder.testing.api.DeviceException: com.android.ddmlib.ShellCommandUnresponsiveException
|
||||||
|
```
|
||||||
|
|
||||||
|
try downgrading your Gradle version to 1.2.3 in `<project-name>/android/build.gradle` (https://github.com/facebook/react-native/issues/2720)
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
## Testing Installation
|
||||||
|
|
||||||
|
<block class="mac ios" />
|
||||||
|
|
||||||
|
```
|
||||||
|
react-native init AwesomeProject
|
||||||
|
cd AwesomeProject
|
||||||
|
react-native run-ios
|
||||||
|
```
|
||||||
|
|
||||||
|
> You can also
|
||||||
|
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||||
|
> folder in [Nuclide](http://nuclide.io) and
|
||||||
|
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line), or open
|
||||||
|
> `ios/AwesomeProject.xcodeproj` and hit the `Run` button in Xcode.
|
||||||
|
|
||||||
|
<block class="mac android" />
|
||||||
|
|
||||||
|
```
|
||||||
|
react-native init AwesomeProject
|
||||||
|
cd AwesomeProject
|
||||||
|
react-native run-android
|
||||||
|
```
|
||||||
|
|
||||||
|
> You can also
|
||||||
|
> [open the `AwesomeProject`](http://nuclide.io/docs/quick-start/getting-started/#adding-a-project)
|
||||||
|
> folder in [Nuclide](http://nuclide.io) and
|
||||||
|
> [run the application](http://nuclide.io/docs/platforms/react-native/#command-line).
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
### Modifying Project
|
||||||
|
|
||||||
|
Now that you successfully started the project, let's modify it:
|
||||||
|
|
||||||
|
<block class="mac ios" />
|
||||||
|
|
||||||
|
- Open `index.ios.js` in your text editor of choice (e.g. [Nuclide](http://nuclide.io/docs/platforms/react-native/)) and edit some lines.
|
||||||
- Hit ⌘-R in your iOS simulator to reload the app and see your change!
|
- Hit ⌘-R in your iOS simulator to reload the app and see your change!
|
||||||
|
|
||||||
_Note: If you are using an iOS device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content)._
|
<block class="mac android" />
|
||||||
|
|
||||||
**To run the Android app:**
|
- Press the `R` key twice **OR** open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
|
||||||
|
|
||||||
- `$ cd AwesomeProject`
|
|
||||||
- `$ react-native run-android`
|
|
||||||
- Open `index.android.js` in your text editor of choice and edit some lines.
|
|
||||||
- Press the menu button (F2/⌘-M by default, depending on AVD version, or ⌘-M in Genymotion) and select *Reload JS* (or press R twice) to see your change!
|
|
||||||
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
||||||
|
|
||||||
_Note: If you are using an Android device, see the [Running on Android Device page](docs/running-on-device-android.html#content)._
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
### That's It
|
||||||
|
|
||||||
Congratulations! You've successfully run and modified your first React Native app.
|
Congratulations! You've successfully run and modified your first React Native app.
|
||||||
|
|
||||||
_If you run into any issues getting started, see the [troubleshooting page](docs/troubleshooting.html#content)._
|
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/851555_209575209232981_1876032292_n.png" width="150"></img></center>
|
||||||
|
|
||||||
## Adding Android to an existing React Native project
|
<block class="windows linux android" />
|
||||||
|
|
||||||
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
|
## Testing Installation
|
||||||
|
|
||||||
1. Update the `react-native` dependency in your `package.json` file to [the latest version](https://www.npmjs.com/package/react-native)
|
```
|
||||||
2. `$ npm install`
|
react-native init AwesomeProject
|
||||||
3. `$ react-native android`
|
cd AwesomeProject
|
||||||
|
react-native run-android
|
||||||
|
```
|
||||||
|
|
||||||
|
<block class="windows android" />
|
||||||
|
|
||||||
|
### Troubleshooting Run
|
||||||
|
|
||||||
|
A common issue on Windows is that the packager is not started automatically when you run
|
||||||
|
`react-native run-android`. You can start it manually using:
|
||||||
|
|
||||||
|
```
|
||||||
|
cd AwesomeProject
|
||||||
|
react-native start
|
||||||
|
```
|
||||||
|
|
||||||
|
Or if you hit a `ERROR Watcher took too long to load` on Windows, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
|
||||||
|
|
||||||
|
### Modifying Project
|
||||||
|
|
||||||
|
Now that you successfully started the project, let's modify it:
|
||||||
|
|
||||||
|
- Press the `R` key twice **OR** open the menu (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
|
||||||
|
- Run `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal to see your app's logs
|
||||||
|
|
||||||
|
### That's It
|
||||||
|
|
||||||
|
Congratulations! You've successfully run and modified your first React Native app.
|
||||||
|
|
||||||
|
<center><img src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xfa1/t39.1997-6/851555_209575209232981_1876032292_n.png" width="150"></img></center>
|
||||||
|
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
## Common Followups
|
||||||
|
|
||||||
|
<block class="mac ios" />
|
||||||
|
|
||||||
|
- If you want to run on a physical device, see the [Running on iOS Device page](docs/running-on-device-ios.html#content).
|
||||||
|
|
||||||
|
<block class="mac android" />
|
||||||
|
|
||||||
|
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||||
|
|
||||||
|
<block class="mac ios android" />
|
||||||
|
|
||||||
|
- If you run into any issues getting started, see the [Troubleshooting page](docs/troubleshooting.html#content).
|
||||||
|
|
||||||
|
|
||||||
|
<block class="windows linux android" />
|
||||||
|
|
||||||
|
## Common Followups
|
||||||
|
|
||||||
|
- If you want to run on a physical device, see the [Running on Android Device page](docs/running-on-device-android.html#content).
|
||||||
|
|
||||||
|
- If you run into any issues getting started, see the [Troubleshooting page](docs/troubleshooting.html#content).
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Convert <div>...<span><block /></span>...</div>
|
||||||
|
// Into <div>...<block />...</div>
|
||||||
|
var blocks = document.getElementsByTagName('block');
|
||||||
|
for (var i = 0; i < blocks.length; ++i) {
|
||||||
|
var block = blocks[i];
|
||||||
|
var span = blocks[i].parentNode;
|
||||||
|
var container = span.parentNode;
|
||||||
|
container.insertBefore(block, span);
|
||||||
|
container.removeChild(span);
|
||||||
|
}
|
||||||
|
// Convert <div>...<block />content<block />...</div>
|
||||||
|
// Into <div>...<block>content</block><block />...</div>
|
||||||
|
blocks = document.getElementsByTagName('block');
|
||||||
|
for (var i = 0; i < blocks.length; ++i) {
|
||||||
|
var block = blocks[i];
|
||||||
|
while (block.nextSibling && block.nextSibling.tagName !== 'BLOCK') {
|
||||||
|
block.appendChild(block.nextSibling);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function display(type, value) {
|
||||||
|
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||||
|
container.className = 'display-' + type + '-' + value + ' ' +
|
||||||
|
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||||
|
event && event.preventDefault();
|
||||||
|
}
|
||||||
|
var isMac = navigator.platform === 'MacIntel';
|
||||||
|
var isWindows = navigator.platform === 'Win32';
|
||||||
|
display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
|
||||||
|
display('platform', isMac ? 'ios' : 'android');
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
---
|
|
||||||
id: getting-started-linux
|
|
||||||
title: Getting Started on Linux
|
|
||||||
layout: docs
|
|
||||||
category: Quick Start
|
|
||||||
permalink: docs/getting-started-linux.html
|
|
||||||
next: android-setup
|
|
||||||
---
|
|
||||||
|
|
||||||
This guide is essentially a beginner-friendly version of the [Getting Started](/react-native/docs/getting-started.html) page for React Native on Linux.
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
|
|
||||||
For the purposes of this guide, we assume that you're working on Ubuntu Linux 14.04 LTS.
|
|
||||||
|
|
||||||
Before following this guide, you should have installed the Android SDK and run a successful Java-based "Hello World" app for Android.
|
|
||||||
|
|
||||||
See [Android Setup](/react-native/docs/android-setup.html) for details.
|
|
||||||
|
|
||||||
#### Installing NodeJS
|
|
||||||
|
|
||||||
The first thing you need to do is to install NodeJS, a popular Javascript implementation.
|
|
||||||
|
|
||||||
Fire up the Terminal and type the following commands to install NodeJS from the [NodeSource](https://nodesource.com/) repository:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
sudo apt-get install -y build-essential
|
|
||||||
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
|
|
||||||
sudo apt-get install -y nodejs
|
|
||||||
sudo ln -s /usr/bin/nodejs /usr/bin/node
|
|
||||||
```
|
|
||||||
__NOTE__: The above instructions are for Ubuntu. If you're on a different distro, please follow the instructions on the [NodeJS website](https://nodejs.org/en/download/).
|
|
||||||
|
|
||||||
#### Installing Watchman
|
|
||||||
|
|
||||||
[watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching changes in the filesystem. You need to install it for better performance and avoid a node file-watching bug.
|
|
||||||
|
|
||||||
Type the following into your terminal to compile watchman from source and install it:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
sudo apt-get install -y automake python-dev
|
|
||||||
git clone https://github.com/facebook/watchman.git
|
|
||||||
cd watchman
|
|
||||||
git checkout v4.5.0 # the latest stable release
|
|
||||||
./autogen.sh
|
|
||||||
./configure
|
|
||||||
make
|
|
||||||
sudo make install
|
|
||||||
```
|
|
||||||
__NOTE__: The above ```apt-get install``` line is for Ubuntu/Debian only. You might need to install required dependencies differently on other distributions.
|
|
||||||
|
|
||||||
#### Installing Flow
|
|
||||||
|
|
||||||
Flow is a static type checker for JavaScript. To install it, type the following in the terminal:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install -g flow-bin
|
|
||||||
```
|
|
||||||
|
|
||||||
## Setting up an Android Device
|
|
||||||
|
|
||||||
Let's set up an Android device to run our starter project.
|
|
||||||
|
|
||||||
First thing is to plug in your device and check the manufacturer code by using `lsusb`, which should output something like this:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ lsusb
|
|
||||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
|
||||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
|
|
||||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
|
||||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
|
||||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
```
|
|
||||||
These lines represent the USB devices currently connected to your machine.
|
|
||||||
|
|
||||||
You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ lsusb
|
|
||||||
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
|
||||||
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
|
||||||
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
|
||||||
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
|
||||||
```
|
|
||||||
You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.
|
|
||||||
|
|
||||||
`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS`
|
|
||||||
|
|
||||||
From the above line, you want to grab the first four digits from the device ID:
|
|
||||||
|
|
||||||
`22b8:2e76`
|
|
||||||
|
|
||||||
In this case, it's `22b8`. That's the identifier for Motorola.
|
|
||||||
|
|
||||||
You'll need to input this into your udev rules in order to get up and running:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
|
|
||||||
```
|
|
||||||
|
|
||||||
Make sure that you replace `22b8` with the identifier you get in the above command.
|
|
||||||
|
|
||||||
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by using `adb devices`.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
List of devices attached
|
|
||||||
TA9300GLMK device
|
|
||||||
```
|
|
||||||
|
|
||||||
For more information, please see the docs for [running an Android app on your device](/react-native/docs/running-on-device-android.html).
|
|
||||||
|
|
||||||
## Next Steps
|
|
||||||
|
|
||||||
Your Android device and your tools are all ready to go. You can now follow the instructions in the [Quick Start](http://facebook.github.io/react-native/docs/getting-started.html#quick-start) guide to install React Native and start your first project.
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
---
|
|
||||||
id: linux-windows-support
|
|
||||||
title: Linux and Windows Support
|
|
||||||
layout: docs
|
|
||||||
category: Quick Start
|
|
||||||
permalink: docs/linux-windows-support.html
|
|
||||||
next: tutorial
|
|
||||||
---
|
|
||||||
|
|
||||||
__NOTE: This guide focuses on Android development. You'll need a Mac to build iOS apps.__
|
|
||||||
|
|
||||||
As React Native on iOS requires a Mac and most of the engineers at Facebook and contributors use Macs, support for OS X is a top priority. However, we would like to support developers using Linux and Windows too. We believe we'll get the best Linux and Windows support from people using these operating systems on a daily basis.
|
|
||||||
|
|
||||||
Therefore, Linux and Windows support for the development environment is an ongoing community responsibility. This can mean filing issues and submitting PRs, and we'll help review and merge them. We are looking forward to your contributions and appreciate your patience.
|
|
||||||
|
|
||||||
As of **version 0.14** Android development with React native is mostly possible on Linux and Windows. You'll need to install [Node.js](https://nodejs.org/) 4.0 or newer. On Linux we recommend installing [watchman](https://facebook.github.io/watchman/docs/install.html), otherwise you might hit a node file watching bug.
|
|
||||||
|
|
||||||
## What's missing on Windows
|
|
||||||
|
|
||||||
On Windows the packager won't be started automatically when you run `react-native run-android`. You can start it manually using:
|
|
||||||
|
|
||||||
cd MyAwesomeApp
|
|
||||||
react-native start
|
|
||||||
|
|
||||||
If you hit a `ERROR Watcher took too long to load` on Windows, try increasing the timeout in [this file](https://github.com/facebook/react-native/blob/5fa33f3d07f8595a188f6fe04d6168a6ede1e721/packager/react-packager/src/DependencyResolver/FileWatcher/index.js#L16) (under your `node_modules/react-native/`).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -22,6 +22,60 @@ Seeing **device** in the right column means the device is connected. Android - g
|
||||||
|
|
||||||
Now you can use `react-native run-android` to install and launch your app on the device.
|
Now you can use `react-native run-android` to install and launch your app on the device.
|
||||||
|
|
||||||
|
## Setting up an Android Device
|
||||||
|
|
||||||
|
Let's now set up an Android device to run our React Native projects.
|
||||||
|
|
||||||
|
First thing is to plug in your device and check the manufacturer code by using `lsusb`, which should output something like this:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ lsusb
|
||||||
|
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||||
|
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
|
||||||
|
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||||
|
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||||
|
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
```
|
||||||
|
These lines represent the USB devices currently connected to your machine.
|
||||||
|
|
||||||
|
You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ lsusb
|
||||||
|
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||||
|
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
|
||||||
|
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
|
||||||
|
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
|
||||||
|
```
|
||||||
|
You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.
|
||||||
|
|
||||||
|
`Bus 001 Device 003: ID 22b8:2e76 Motorola PCS`
|
||||||
|
|
||||||
|
From the above line, you want to grab the first four digits from the device ID:
|
||||||
|
|
||||||
|
`22b8:2e76`
|
||||||
|
|
||||||
|
In this case, it's `22b8`. That's the identifier for Motorola.
|
||||||
|
|
||||||
|
You'll need to input this into your udev rules in order to get up and running:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
|
||||||
|
```
|
||||||
|
|
||||||
|
Make sure that you replace `22b8` with the identifier you get in the above command.
|
||||||
|
|
||||||
|
Now check that your device is properly connecting to ADB, the Android Debug Bridge, by using `adb devices`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
List of devices attached
|
||||||
|
TA9300GLMK device
|
||||||
|
```
|
||||||
|
|
||||||
## Accessing development server from device
|
## Accessing development server from device
|
||||||
|
|
||||||
You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.
|
You can also iterate quickly on device using the development server. Follow one of the steps described below to make your development server running on your laptop accessible for your device.
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||||
color: #7b7b7b;
|
color: #7b7b7b;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3, h4 {
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -683,8 +683,7 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.documentationContent blockquote p:first-child {
|
.documentationContent blockquote p:first-child {
|
||||||
font-weight: bold;
|
font-size: 14px;
|
||||||
font-size: 17.5px;
|
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
text-rendering: optimizelegibility;
|
text-rendering: optimizelegibility;
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 405 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Loading…
Reference in New Issue