Update Getting Started instructions for Android

Summary: Addresses a ton of feedback from facebook#10372. React Native does require Marshmallow to be installed. ![screencapture-localhost-8079-react-native-docs-getting-started-html-1478125642639](https://cloud.githubusercontent.com/assets/165856/19949794/1629d974-a111-11e6-8f7b-abbb5730b1b3.png) ![screencapture-localhost-8079-react-native-docs-getting-started-html-1478125630469](https://cloud.githubusercontent.com/assets/165856/19949795/162cd7a0-a111-11e6-8a90-50de3c260e66.png) ![screencapture-localhost-8079-react-native-docs-getting-started-html-1478125615552](https://cloud.githubusercontent.com/assets/165856/19949797/1630093e-a111-11e6-9424-e630691df2fc.png) ![screencapture-localhost-8079-react-native-docs-getting-started-html-1478125604686](https://cloud.githubusercontent.com/assets/165856/19949796/162fb268-a111-11e6-9bc6-e89ebb9bdd20.png) ![screencapture-localhost-8079-react-native-docs-getting-started-htm Closes facebook#10710 Differential Revision: D4122776 Pulled By: mkonicek fbshipit-source-id: 81a5afc55d17302cb9a1dafc61a1e21206436f38
xin- · Nov 3, 2016 · 4c284e2 · 4c284e2
1 parent c0c80d7
commit 4c284e2
Showing 1 changed file with 119 additions and 116 deletions.
diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md
@@ -42,18 +42,17 @@ block { display: none; }
 .display-platform-android.display-os-linux .android.linux,
 .display-platform-android.display-os-windows .android.windows {
   display: block;
-}</style>
+}
+</style>
 <span>Mobile OS:</span>
 <a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
 <a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
 <span>Development OS:</span>
-<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">Mac</a>
+<a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
 <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
 <a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
 </div>
 
-<!-- ######### LINUX AND WINDOWS for iOS ##################### -->
-
 <block class="linux windows ios" />
 
 ## Unsupported
@@ -62,20 +61,24 @@ block { display: none; }
 
 <center><img src="img/react-native-sorry-not-supported.png" width="150"></img></center>
 
-<!-- ######### MAC for iOS ##################### -->
-
-<block class="mac ios android" />
+<block class="mac ios" />
 
 ## Installing Dependencies
 
-<block class="mac ios" />
-
 You will need Node.js, Watchman, the React Native command line interface, and Xcode.
 
 <block class="mac android" />
 
+## Installing Dependencies
+
 You will need Node.js, Watchman, the React Native command line interface, and Android Studio.
 
+<block class="windows linux android" />
+
+## Installing Dependencies
+
+You will need Node.js, the React Native command line interface, and Android Studio.
+
 <block class="mac ios android" />
 
 ### Node, Watchman
@@ -90,195 +93,182 @@ brew install watchman
 > [Watchman](https://facebook.github.io/watchman) is a tool by Facebook for watching
 changes in the filesystem. It is highly recommended you install it for better performance.
 
-### The React Native CLI
-
-Node.js comes with npm, which lets you install the React Native command line interface. Run the following command in a Terminal:
-
-```
-npm install -g react-native-cli
-```
-
-> If you get a *permission error*, try using sudo: `sudo npm install -g react-native-cli`.
-
-> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L http://npmjs.org/install.sh | sudo sh`.
-
-<block class="mac ios" />
-
-### Xcode
-
-The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
+<block class="linux android" />
 
-<block class="mac android" />
+### Node
 
-### Android Development Environment
+Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node.js 4 or newer.
 
-Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+<block class='windows android' />
 
-#### 1. Install Android Studio
+### Node
 
-Download and install [Android Studio](https://developer.android.com/studio/install.html).
+We recommend installing Node.js and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run:
 
-#### 2. Confirm the Android SDK is installed
+```
+choco install nodejs.install
+choco install python2
+```
 
-Android Studio installs `Android 7.0 (Nougat)` by default. You can confirm that the SDK was installed by clicking on "Configure" in the last screen in the Android Studio Setup Wizard, or by opening "Preferences" from the Android Studio menu, then choosing `Appearance and Behavior` → `System Settings` → `Android SDK`.
+> You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/).
 
-![Android Studio SDK Manager](img/react-native-android-studio-configure-sdk.png)
+<block class="mac ios android" />
 
-Select "SDK Platforms" from within the SDK Manager and you should see a blue checkmark next to "Android 7.0 (Nougat)". In case it is not, click on the checkbox and then "Apply".
+### The React Native CLI
 
-![Android Studio SDK Manager](img/react-native-sdk-platforms.png)
+Node.js comes with npm, which lets you install the React Native command line interface.
 
-> If you wish to support older versions of Android, you can install additional Android SDKs from this screen.
+<block class="windows linux android" />
 
-#### 3. Set up paths
+### The React Native CLI
 
-The React Native command line interface requires the `ANDROID_HOME` environment variable to be set up. You can configure it in a Terminal using the following command:
+Node.js comes with npm, which lets you install the React Native command line interface.
 
-```
-export ANDROID_HOME=~/Library/Android/sdk
-```
+<block class="mac ios android" />
 
-To avoid doing this every time you open a new terminal, add the following lines to your `~/.bashrc` or equivalent config file:
+Run the following command in a Terminal:
 
 ```
-export ANDROID_HOME=~/Library/Android/sdk
-export PATH=${PATH}:${ANDROID_HOME}/tools
+npm install -g react-native-cli
 ```
 
-The second line will add the `android` tool to your path, which will come in handy in the next step.
+> If you get a *permission error*, try using sudo: `sudo npm install -g react-native-cli`.
 
-> Please make sure you export the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio. If you install the Android SDK using Homebrew, it will be located at `/usr/local/opt/android-sdk`.
+> If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L http://npmjs.org/install.sh | sudo sh`.
 
-#### 4. Set up your Android Virtual Device
+<block class="mac ios" />
 
-Android Studio should have set up an Android Virtual Device for you during installation, but it is very common to run into an issue where Android Studio fails to install the AVD.
+### Xcode
 
-![Android Studio AVD Manager](img/react-native-tools-avd.png)
+The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.
 
-To see the list of available AVDs, launch the "AVD Manager" from within Android Studio or run the following command in a Terminal:
+<block class="mac linux windows android" />
 
-```
-android avd
-```
+### Android Development Environment
 
-You may follow the [Android Studio User Guide](https://developer.android.com/studio/run/managing-avds.html) to create a new AVD if needed.
+Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
 
-> If you see "No system images installed for this target." under CPU/ABI, go back to your "SDK Manager" and click on "Show Package Details" under "SDK Platforms". You will then be able to install any missing system images, such as "Google APIs Intel Atom (x86)".
+#### 1. Download and install Android Studio
 
-<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->
+[Android Studio](https://developer.android.com/studio/install.html) provides the Android SDK and AVD (emulator) required to run and test your React Native apps.
 
-<block class="windows linux android" />
+<block class="mac android" />
 
-## Installing Dependencies
+> Android Studio requires the [Java Development Kit (JDK)](https://www.java.com/en/download/mac_download.jsp), version 1.8 or higher. You can type `javac -version` in a terminal to see what version you have, if any.
 
-<block class="linux android" />
+<block class="mac windows android" />
 
-You will need Node.js, the React Native command line interface, and Android Studio.
+#### 2. Install the AVD and HAXM
 
-### Node
+Choose `Custom` installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:
 
-Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node.js 4 or newer.
+- `Android SDK`
+- `Android SDK Platform`
+- `Performance (Intel ® HAXM)`
+- `Android Virtual Device`
 
-<block class='windows android' />
+Then, click "Next" to install all of these components.
 
-You will need Node.js, the React Native command line interface, and Android Studio.
+> If you've already installed Android Studio before, you can still [install HAXM](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows) without performing a custom installation.
 
-### Node
+<block class="linux android" />
 
-We recommend installing Node.js and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows. Open a Command Prompt as Administrator, then run:
+#### 2. Install the AVD and configure VM acceleration
 
-```
-choco install nodejs.install
-choco install python2
-```
+Choose `Custom` installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:
 
-> You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/).
+- `Android SDK`
+- `Android SDK Platform`
+- `Android Virtual Device`
 
-<block class="windows linux android" />
+Click "Next" to install all of these components, then [configure VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system.
 
-### The React Native CLI
+<block class="mac linux windows android" />
 
-Node comes with npm, which lets you install the React Native command line interface.
+#### 3. Install the Android 6.0 (Marshmallow) SDK
 
-```
-npm install -g react-native-cli
-```
+Android Studio installs the most recent Android SDK by default. React Native, however, requires the `Android 6.0 (Marshmallow)` SDK. To install it, launch the SDK Manager, click on "Configure" in the "Welcome to Android Studio" screen.
 
-### Android Development Environment
+> The SDK Manager can also be found within the Android Studio "Preferences" menu, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
 
-Setting up your development environment can be somewhat tedious if you're new to Android development. If you're already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.
+Select "SDK Platforms" from within the SDK Manager, then check the box next to "Show Package Details". Look for and expand the `Android 6.0 (Marshmallow)` entry, then make sure the following items are all checked:
 
-#### 1. Install Android Studio
+- `Google APIs`
+- `Intel x86 Atom System Image`
+- `Intel x86 Atom_64 System Image`
+- `Google APIs Intel x86 Atom_64 System Image`
 
-Download and install [Android Studio](https://developer.android.com/studio/install.html).
+Next, select "SDK Tools" and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build Tools" entry, then make sure that `Android SDK Build-Tools 23.0.1` is selected.
 
-#### 2. Confirm the Android SDK is installed
+Finally, click "Apply" to download and install the Android SDK and related build tools.
 
-Android Studio installs `Android 7.0 (Nougat)` by default. You can confirm that the SDK was installed by clicking on "Configure" in the last screen in the Android Studio Setup Wizard, or by opening "Preferences" from the Android Studio menu, then choosing `Appearance and Behavior` → `System Settings` → `Android SDK`.
+<block class="mac windows linux android" />
 
-![Android Studio SDK Manager](img/react-native-android-studio-configure-sdk-windows.png)
+#### 4. Set up the ANDROID_HOME environment variable
 
-Select "SDK Platforms" from within the SDK Manager and you should see a blue checkmark next to "Android 7.0 (Nougat)". In case it is not, click on the checkbox and then "Apply".
+The React Native command line interface requires the `ANDROID_HOME` environment variable to be set up.
 
-![Android Studio SDK Manager](img/react-native-sdk-platforms.png)
+<block class="mac android" />
 
-> If you wish to support older versions of Android, you can install additional Android SDKs from this screen.
+Add the following lines to your `~/.bashrc` (or equivalent) config file:
 
-#### 3. Set up paths
+```
+export ANDROID_HOME=~/Library/Android/sdk
+export PATH=${PATH}:${ANDROID_HOME}/tools
+export PATH=${PATH}:${ANDROID_HOME}/platform-tools
+```
 
-The React Native command line interface requires the `ANDROID_HOME` environment variable to be set up.
+> Please make sure you export the correct path for `ANDROID_HOME`. If you installed the Android SDK using Homebrew, it would be located at `/usr/local/opt/android-sdk`.
 
 <block class="linux android" />
 
-Create or edit your `~/.bashrc` file and add the following lines:
+Add the following lines to your `~/.bashrc` (or equivalent) config file:
 
 ```
 export ANDROID_HOME=~/Android/Sdk
 export PATH=${PATH}:${ANDROID_HOME}/tools
-export PATH=${PATH}:${ANDROID_HOME}/platform_tools
+export PATH=${PATH}:${ANDROID_HOME}/platform-tools
 ```
 
-The second line will add the `android` tool to your path, which will come in handy in the next step. The third line will add the `adb` tool to your path, which is used to communicate with your Android device / emulator.
-
 > Please make sure you export the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio.
 
 <block class="windows android" />
 
-Go to `Control Panel` → `System and Security` → `System` → `Change settings` →
-`Advanced System Settings` → `Environment variables` → `New`, then enter the path to your Android SDK.
+Go to **Control Panel** → **System and Security** → **System** → **Change settings** →
+**Advanced System Settings** → **Environment variables** → **New**, then enter the path to your Android SDK.
 
 ![env variable](img/react-native-android-sdk-environment-variable-windows.png)
 
-> Please make sure you use the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio.
-
 Restart the Command Prompt to apply the new environment variable.
 
 <block class="linux windows android" />
 
-#### 4. Set up your Android Virtual Device
+> Please make sure you export the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio.
 
-Android Studio should have set up an Android Virtual Device for you during installation, but it is very common to run into an issue where Android Studio fails to install the AVD.
+<block class="linux android" />
 
-![Android Studio AVD Manager](img/react-native-tools-avd.png)
+### Watchman (optional)
 
-To see the list of available AVDs, launch the "AVD Manager" from within Android Studio or run the following command in a terminal:
+Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install.html#build-install) to compile and install Watchman from source.
 
-```
-android avd
-```
+> [Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching
+changes in the filesystem. It is highly recommended you install it for better performance, but it's alright to skip this if you find the process to be tedious.
 
-You may follow the [Android Studio User Guide](https://developer.android.com/studio/run/managing-avds.html) to create a new AVD if needed.
+<block class="mac windows linux android" />
 
-> If you see "No system images installed for this target." under CPU/ABI, go back to your "SDK Manager" and click on "Show Package Details" under "SDK Platforms". You will then be able to install any missing system images, such as "Google APIs Intel Atom (x86)".
+## Starting the Android Virtual Device
 
-<block class="linux android" />
+![Android Studio AVD Manager](img/react-native-tools-avd.png)
 
-### Watchman (optional)
+You can see the list of available AVDs by opening the "AVD Manager" from within Android Studio. You can also run the following command in a terminal:
 
-Follow the [Watchman installation guide](https://facebook.github.io/watchman/docs/install.html#build-install) to compile and install Watchman from source.
+```
+android avd
+```
 
-> [Watchman](https://facebook.github.io/watchman/docs/install.html) is a tool by Facebook for watching
-changes in the filesystem. It is highly recommended you install it for better performance, but it's alright to skip this if you find the process to be tedious.
+Once in the "AVD Manager", select your AVD and click "Start...".
+
+> Android Studio should have set up an Android Virtual Device for you during installation, but it is very common to run into an issue where Android Studio fails to install the AVD. You may follow the [Android Studio User Guide](https://developer.android.com/studio/run/managing-avds.html) to create a new AVD manually if needed.
 
 <block class="mac ios android" />
 
@@ -296,19 +286,21 @@ react-native run-ios
 
 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.
+`react-native run-ios` is just one way to run your app. You can also run it directly from within Xcode or [Nuclide](https://nuclide.io/).
 
 <block class="mac android" />
 
-Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run `react-native run-android` inside the newly created folder.
+Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run `react-native run-android` inside the newly created folder:
 
 ```
 react-native init AwesomeProject
 cd AwesomeProject
 react-native run-android
 ```
 
-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.
+If everything is set up correctly, you should see your new app running in your AVD 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](https://nuclide.io/).
 
 <block class="mac ios android" />
 
@@ -370,7 +362,18 @@ Congratulations! You've successfully run and modified a React Native app.
 
 <center><img src="img/react-native-congratulations.png" width="150"></img></center>
 
-<block class="mac windows linux ios android" />
+<block class="mac ios" />
+
+## Now What?
+
+- If you want to add this new React Native code to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).
+
+- If you can't get this to work, see the [Troubleshooting](docs/troubleshooting.html#content) page.
+
+- If you're curious to learn more about React Native, continue on
+to the [Tutorial](docs/tutorial.html).
+
+<block class="windows linux mac android" />
 
 ## Now What?