[0.45.0] Bump version numbers

Update ListView Basics to use FlatList, SectionList.
Summary: The new list views, FlatList and SectionList, are recommended over ListView. Built website on localhost and verified the guide is rendered correctly. ![screencapture-localhost-8079-react-native-docs-using-a-listview-html-1495834607096](https://cloud.githubusercontent.com/assets/165856/26513523/c5d2913a-4220-11e7-8c8d-68bb12c75736.png) Closes https://github.com/facebook/react-native/pull/14210 Differential Revision: D5149151 Pulled By: hramos fbshipit-source-id: f28f02ee8893c4723c73d610b96ccda51cc31410
2025-11-01 09:14:26 +00:00 · 2017-06-07 12:53:53 +02:00 · 2017-06-06 11:20:37 -07:00 · 2017-06-06 11:14:08 +02:00 · 2017-06-06 11:07:49 +02:00 · 2017-06-02 10:22:41 -07:00
56 changed files with 1088 additions and 665 deletions
@@ -74,7 +74,7 @@ const DataDetectorTypes = [
 * import React, { Component } from 'react';
 * import { AppRegistry, TextInput } from 'react-native';
 *
- * class UselessTextInput extends Component {
+ * export default class UselessTextInput extends Component {
 *   constructor(props) {
 *     super(props);
 *     this.state = { text: 'Useless Placeholder' };
@@ -91,7 +91,7 @@ const DataDetectorTypes = [
 *   }
 * }
 *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
 * AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
 * ```
 *
@@ -117,7 +117,7 @@ const DataDetectorTypes = [
 *   }
 * }
 *
- * class UselessTextInputMultiline extends Component {
+ * export default class UselessTextInputMultiline extends Component {
 *   constructor(props) {
 *     super(props);
 *     this.state = {
@@ -145,7 +145,7 @@ const DataDetectorTypes = [
 *   }
 * }
 *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
 * AppRegistry.registerComponent(
 *  'AwesomeProject',
 *  () => UselessTextInputMultiline
@@ -41,7 +41,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 * import React, { Component } from 'react';
 * import { AppRegistry, View, Image } from 'react-native';
 *
- * class DisplayAnImage extends Component {
+ * export default class DisplayAnImage extends Component {
 *   render() {
 *     return (
 *       <View>
@@ -57,7 +57,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 *   }
 * }
 *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
 * AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);
 * ```
 *
@@ -74,7 +74,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 *   }
 * });
 *
- * class DisplayAnImageWithStyle extends Component {
+ * export default class DisplayAnImageWithStyle extends Component {
 *   render() {
 *     return (
 *       <View>
@@ -87,7 +87,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 *   }
 * }
 *
- * // App registration and rendering
+ * // skip these lines if using Create React Native App
 * AppRegistry.registerComponent(
 *   'DisplayAnImageWithStyle',
 *   () => DisplayAnImageWithStyle
@@ -96,7 +96,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
 *
 * ### GIF and WebP support on Android
 *
- * By default, GIF and WebP are not supported on Android.
+ * When building your own native code, GIF and WebP are not supported by default on Android.
 *
 * You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.
 *
@@ -119,7 +119,7 @@ class XMLHttpRequest extends EventTarget(...XHR_EVENTS) {
  status: number = 0;
  timeout: number = 0;
  responseURL: ?string;
-  withCredentials: boolean = false
+  withCredentials: boolean = true

  upload: XMLHttpRequestEventTarget = new XMLHttpRequestEventTarget();

@@ -57,7 +57,7 @@ const viewConfig = {
 * import React, { Component } from 'react';
 * import { AppRegistry, Text, StyleSheet } from 'react-native';
 *
- * class TextInANest extends Component {
+ * export default class TextInANest extends Component {
 *   constructor(props) {
 *     super(props);
 *     this.state = {
@@ -90,7 +90,7 @@ const viewConfig = {
 *   },
 * });
 *
- * // App registration and rendering
+ * // skip this line if using Create React Native App
 * AppRegistry.registerComponent('TextInANest', () => TextInANest);
 * ```
 */
@@ -1,4 +1,4 @@
-VERSION_NAME=1000.0.0-master
+VERSION_NAME=0.45.0
 GROUP=com.facebook.react

 POM_NAME=ReactNative
@@ -14,7 +14,7 @@ React Native supports a few keyboard shortcuts in the iOS Simulator. They are de

 ## Accessing the In-App Developer Menu

-You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the **`Command`**`⌘` + **`D`** keyboard shortcut when your app is running in the iPhone Simulator, or **`Command`**`⌘` + **`M`** when running in an Android emulator.
+You can access the developer menu by shaking your device or by selecting "Shake Gesture" inside the Hardware menu in the iOS Simulator. You can also use the `⌘D` keyboard shortcut when your app is running in the iOS Simulator, or `⌘M` when running in an Android emulator.

 ![](img/DeveloperMenu.png)

@@ -22,7 +22,7 @@ You can access the developer menu by shaking your device or by selecting "Shake

 ## Reloading JavaScript

-Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press **`Command`**`⌘` + **`R`** in the iOS Simulator, or press **`R`** twice on Android emulators.
+Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press `⌘R` in the iOS Simulator, or tap `R` twice on Android emulators.

 ### Automatic reloading

@@ -61,7 +61,7 @@ In CI/Xcode, YellowBoxes can also be disabled by setting the `IS_TESTING` enviro

 To debug the JavaScript code in Chrome, select "Debug JS Remotely" from the Developer Menu. This will open a new tab at [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui).

-Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (**`Command`**`⌘` + **`Option`**`⌥` + **`I`** on Mac, **`Ctrl`** + **`Shift`** + **`I`** on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.
+Select `Tools → Developer Tools` from the Chrome Menu to open the [Developer Tools](https://developer.chrome.com/devtools). You may also access the DevTools using keyboard shortcuts (`⌘⌥I` on macOS, `Ctrl` `Shift` `I` on Windows). You may also want to enable [Pause On Caught Exceptions](http://stackoverflow.com/questions/2233339/javascript-is-there-a-way-to-get-chrome-to-break-on-all-errors/17324511#17324511) for a better debugging experience.

 > Note: the React Developer Tools Chrome extension does not work with React Native, but you can use its standalone version instead. Read [this section](docs/debugging.html#react-developer-tools) to learn how.

@@ -75,7 +75,7 @@ The debugger will receive a list of all project roots, separated by a space. For

 ## React Developer Tools

-With React Native 0.43 or higher, you can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally:
+You can use [the standalone version of React Developer Tools](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) to debug the React component hierarchy. To use it, install the `react-devtools` package globally:

 ```
 npm install -g react-devtools
@@ -91,11 +91,11 @@ react-devtools

 It should connect to your simulator within a few seconds.

-> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
+> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. Add the `react-devtools` package to your project using `npm install --save-dev react-devtools`, then add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.

 ### Integration with React Native Inspector

-You can open the [in-app developer menu](#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

 ![React Native Inspector](img/Inspector.gif)

@@ -109,7 +109,7 @@ You can choose "Hide Inspector" in the same menu to exit this mode.

 When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

-First, follow the [instructions for debugging in Chrome](docs/debugging.html#chrome-developer-tools) to open the Chrome console.
+First, follow the instructions for debugging in Chrome to open the Chrome console.

 Make sure that the dropdown in the top left corner of the Chrome console says `debuggerWorker.js`. **This step is essential.**

@@ -138,8 +138,6 @@ You can enable a performance overlay to help you debug performance problems by s

 ## Accessing console logs

-Note: if you're using Create React Native App, these already appear in the same terminal output as the packager.
-
 You can display the console logs for an iOS or Android app by using the following commands in a terminal while the app is running:

 ```
@@ -149,9 +147,11 @@ $ react-native log-android

 You may also access these through `Debug → Open System Log...` in the iOS Simulator or by running `adb logcat *:S ReactNative:V ReactNativeJS:V` in a terminal while an Android app is running on a device or emulator.

+> If you're using Create React Native App, console logs already appear in the same terminal output as the packager.
+
 ## Debugging on a device with Chrome Developer Tools

-Note: if you're using Create React Native App, this is configured for you already.
+> If you're using Create React Native App, this is configured for you already.

 On iOS devices, open the file [`RCTWebSocketExecutor.m`](https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/RCTWebSocketExecutor.m) and change "localhost" to the IP address of your computer, then select "Debug JS Remotely" from the Developer Menu.

@@ -201,8 +201,8 @@ Alternatively, select "Dev Settings" from the Developer Menu, then update the "D

 4. Run  ```react-native run-android ```

-5. In a new chrome tab, open : ```chrome://inspect```, click on 'Inspect device' (the one followed by "Powered by Stetho")
+5. In a new Chrome tab, open: ```chrome://inspect```, then click on 'Inspect device' (the one followed by "Powered by Stetho").

 ## Debugging native code

-When working with native code (e.g. when writing native modules) you can launch the app from Android Studio or Xcode and take advantage of the debugging features (setup breakpoints, etc.) as you would in case of building a standard native app.
+When working with native code, such as when writing native modules, you can launch the app from Android Studio or Xcode and take advantage of the native debugging features (setting up breakpoints, etc.) as you would in case of building a standard native app.
@@ -7,118 +7,209 @@ permalink: docs/getting-started.html
 next: tutorial
 ---

-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](docs/tutorial.html).
+<style>
+  .toggler li {
+    display: inline-block;
+    position: relative;
+    top: 1px;
+    padding: 10px;
+    margin: 0px 2px 0px 2px;
+    border: 1px solid #05A5D1;
+    border-bottom-color: transparent;
+    border-radius: 3px 3px 0px 0px;
+    color: #05A5D1;
+    background-color: transparent;
+    font-size: 0.99em;
+    cursor: pointer;
+  }
+  .toggler li:first-child {
+    margin-left: 0;
+  }
+  .toggler li:last-child {
+    margin-right: 0;
+  }
+  .toggler ul {
+    width: 100%;
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+    border-bottom: 1px solid #05A5D1;
+    cursor: default;
+  }
+  @media screen and (max-width: 960px) {
+    .toggler li,
+    .toggler li:first-child,
+    .toggler li:last-child {
+      display: block;
+      border-bottom-color: #05A5D1;
+      border-radius: 3px;
+      margin: 2px 0px 2px 0px;
+    }
+    .toggler ul {
+      border-bottom: 0;
+    }
+  }
+  .toggler a {
+    display: inline-block;
+    padding: 10px 5px;
+    margin: 2px;
+    border: 1px solid #05A5D1;
+    border-radius: 3px;
+    text-decoration: none !important;
+  }
+  .display-guide-quickstart .toggler .button-quickstart,
+  .display-guide-native .toggler .button-native,
+  .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-guide-quickstart.display-platform-ios.display-os-mac .quickstart.ios.mac,
+  .display-guide-quickstart.display-platform-ios.display-os-linux .quickstart.ios.linux,
+  .display-guide-quickstart.display-platform-ios.display-os-windows .quickstart.ios.windows,
+  .display-guide-quickstart.display-platform-android.display-os-mac .quickstart.android.mac,
+  .display-guide-quickstart.display-platform-android.display-os-linux .quickstart.android.linux,
+  .display-guide-quickstart.display-platform-android.display-os-windows .quickstart.android.windows,    .display-guide-native.display-platform-ios.display-os-mac .native.ios.mac,
+  .display-guide-native.display-platform-ios.display-os-linux .native.ios.linux,
+  .display-guide-native.display-platform-ios.display-os-windows .native.ios.windows,
+  .display-guide-native.display-platform-android.display-os-mac .native.android.mac,
+  .display-guide-native.display-platform-android.display-os-linux .native.android.linux,
+  .display-guide-native.display-platform-android.display-os-windows .native.android.windows {
+    display: block;
+  }
+</style>

-## Quick Start
+This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the [Tutorial](docs/tutorial.html).

-[Create React Native App](https://github.com/react-community/create-react-native-app) is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code.
+<div class="toggler">
+  <ul role="tablist" >
+    <li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="display('guide', 'quickstart')">
+      Quick Start
+    </li>
+    <li id="native" class="button-native" aria-selected="false" role="tab" tabindex="-1" aria-controls="nativetab" onclick="display('guide', 'native')">
+      Building Projects with Native Code
+    </li>
+  </ul>
+</div>

-No Xcode or Android Studio installation is required. Assuming that you have Node installed, you can run the following commands to create a new React Native project called "AwesomeProject":
+<block class="quickstart mac windows linux ios android" />
+
+[Create React Native App](https://github.com/react-community/create-react-native-app) is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see [Caveats](docs/getting-started.html#caveats)).
+
+Assuming that you have [Node](https://nodejs.org/en/download/) installed, you can use npm to install the `create-react-native-app` command line utility:

 ```
 npm install -g create-react-native-app
+```
+
+Then run the following commands to create a new React Native project called "AwesomeProject":
+
+```
 create-react-native-app AwesomeProject
+
 cd AwesomeProject
 npm start
 ```

 This will start a development server for you, and print a QR code in your terminal.

-Install the [Expo](https://expo.io) client app on your iOS or Android phone, make sure your phone is on the same network as your computer, and scan the QR code in your terminal to open your project. Create React Native App also has a [user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md) you can reference if you have questions specific to the tool.
+## Running your React Native application

-Once you've created your project and opened it in the Expo client app, you can proceed to the [Tutorial](docs/tutorial.html).
+Install the [Expo](https://expo.io) client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.
+
+### Modifying your app
+
+Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.
+
+### That's it!
+
+Congratulations! You've successfully run and modified your first React Native app.
+
+<center><img src="img/react-native-congratulations.png" width="150"></img></center>
+
+## Now what?
+
+- Create React Native App also has a [user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md) you can reference if you have questions specific to the tool.
+
+- If you can't get this to work, see the [Troubleshooting](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#troubleshooting) section in the README for Create React Native App.
+
+If you're curious to learn more about React Native, continue on
+to the [Tutorial](docs/tutorial.html).
+
+### Running your app on a simulator or virtual device
+
+Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.
+
+Once you've set these up, you can launch your app on on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only).

 ### Caveats

-Because you don't build any native code with Create React Native App, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.
+Because you don't build any native code when using Create React Native App to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.

-If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "[eject](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)" eventually to create your own native builds. If you do eject, the native build instructions below will be required to continue working on your project.
+If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "[eject](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#ejecting-from-create-react-native-app)" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.

-If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. See below for instructions on configuring a native build environment for React Native.
+Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported.

-<hr style="margin-top:25px"/>
+If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native.

-## Building Projects with Native Code
+<block class="native mac windows linux ios android" />

-Follow these instructions if you need to build native code in your project. For example, if you "ejected" from Create React Native app, or if you are integrating React Native into an existing application, you'll need this section.
+<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="docs/getting-started.html" onclick="display('guide', 'quickstart')">Create React Native App</a>, you'll need this section.</p>

 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.

 <div class="toggler">
-  <style>
-    .toggler a {
-      display: inline-block;
-      padding: 10px 5px;
-      margin: 2px;
-      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>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>
-  <br />
  <span>Development OS:</span>
  <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>
+  <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
+  <span>Target 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>
 </div>

-<block class="linux windows ios" />
+<block class="native linux windows ios" />

 ## Unsupported

-<div>Unfortunately, Apple only lets you develop for iOS on a Mac. If you want to build an iOS app but you don't have a Mac yet, you can try starting with the <a href="" onclick="display('platform', 'android')">Android</a> instructions instead.</div>
+<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="docs/getting-started.html" onclick="display('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Create React Native App instead.</p></blockquote>

-<center><img src="img/react-native-sorry-not-supported.png" width="150"></img></center>
+<block class="native mac ios" />

-<block class="mac ios" />
-
-## Installing Dependencies
+## Installing dependencies

 You will need Node, Watchman, the React Native command line interface, and Xcode.

-<block class="mac android" />
+While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.

-## Installing Dependencies
+<block class="native mac android" />
+
+## Installing dependencies

 You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.

-<block class="linux android" />
+<block class="native linux android" />

-## Installing Dependencies
+## Installing dependencies

 You will need Node, the React Native command line interface, a JDK, and Android Studio.

-<block class="windows android" />
+<block class="native windows android" />

-## Installing Dependencies
+## Installing dependencies

 You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.

-<block class="mac ios android" />
+<block class="native mac windows linux android" />
+
+While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.
+
+<block class="native mac ios android" />

 ### Node, Watchman

@@ -133,21 +224,21 @@ If you have already installed Node on your system, make sure it is version 4 or

 [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.

-<block class="linux android" />
+<block class="native linux android" />

 ### Node

-Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 4 or newer.
+Follow the [installation instructions for your Linux distribution](https://nodejs.org/en/download/package-manager/) to install Node 6 or newer.

-<block class='windows android' />
+<block class='native windows android' />

 ### Node, Python2, JDK

 We recommend installing Node and Python2 via [Chocolatey](https://chocolatey.org), a popular package manager for Windows.

-Android Studio, which we will install next, requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) which can be installed using Chocolatey.
+React Native also requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html), as well as Python 2. Both can be installed using Chocolatey.

-Open a Command Prompt as Administrator, then run:
+Open an Administrator Command Prompt (right click Command Prompt and select "Run as Administrator"), then run the following commands:

 ```
 choco install nodejs.install
@@ -157,9 +248,9 @@ choco install jdk8

 If you have already installed Node on your system, make sure it is version 4 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.

-> You can find additional installation options on [Node.js's Downloads page](https://nodejs.org/en/download/).
+> You can find additional installation options on [Node's Downloads page](https://nodejs.org/en/download/).

-<block class="mac ios android" />
+<block class="native mac ios android" />

 ### The React Native CLI

@@ -173,13 +264,13 @@ npm install -g react-native-cli

 > If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`.

-<block class="windows linux android" />
+<block class="native windows linux android" />

 ### The React Native CLI

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

-Run the following command in a Terminal:
+Run the following command in a Command Prompt or shell:

 ```
 npm install -g react-native-cli
@@ -187,7 +278,7 @@ npm install -g react-native-cli

 > If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`.

-<block class="mac ios" />
+<block class="native mac ios" />

 ### Xcode

@@ -195,60 +286,68 @@ The easiest way to install Xcode is via the [Mac App Store](https://itunes.apple

 If you have already installed Xcode on your system, make sure it is version 8 or higher.

+#### Command Line Tools
+
 You will also need to install the Xcode Command Line Tools. Open Xcode, then choose "Preferences..." from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

 ![Xcode Command Line Tools](img/XcodeCommandLineTools.png)

-<block class="mac linux windows android" />
+<block class="native mac linux android" />

-### Android Development Environment
+### Java Development Kit
+
+React Native requires a recent version of the Java SE Development Kit (JDK). [Download and install JDK 8 or newer](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) if needed.
+
+<block class="native mac linux windows android" />
+
+### Android development environment

 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="mac linux android" />
+<block class="native mac windows linux android" />

-> Android Studio requires a recent version of the [Java SE Development Kit (JDK)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). Go ahead and install JDK 8 or newer if needed.
+#### 1. Install Android Studio

-<block class="mac linux windows android" />
+[Download and install Android Studio](https://developer.android.com/studio/index.html). Choose a "Custom" setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked:

-#### 1. Download and install Android Studio
-
-Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps. [Download Android Studio](https://developer.android.com/studio/index.html), then follow the [installation instructions](https://developer.android.com/studio/install.html). Choose `Custom` installation when prompted by the Setup Wizard, and proceed to the next step.
-
-<block class="mac windows android" />
-
-#### 2. Install the AVD and HAXM
-
-Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose `Custom` installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:
+<block class="native mac windows android" />

 - `Android SDK`
 - `Android SDK Platform`
 - `Performance (Intel ® HAXM)`
 - `Android Virtual Device`

-Then, click "Next" to install all of these components.
-
-> If you've already installed Android Studio before, you can still install HAXM ([Windows](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows)|[Mac](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x)) without performing a custom installation.
-
-<block class="linux android" />
-
-#### 2. Install the AVD and configure VM acceleration
-
-Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose `Custom` installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:
+<block class="native linux android" />

 - `Android SDK`
 - `Android SDK Platform`
 - `Android Virtual Device`

-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.
+<block class="native mac windows linux android" />

-<block class="mac linux windows android" />
+Then, click "Next" to install all of these components.

-#### 3. Install the Android 6.0 (Marshmallow) SDK
+> If the checkboxes are grayed out, you will have a chance to install these components later on.

-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" > "SDK Manager" in the "Welcome to Android Studio" screen.
+Once setup has finalized and you're presented with the Welcome screen, proceed to the next step.

-> The SDK Manager can also be found within the Android Studio "Preferences" menu, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+#### 2. Install the Android SDK
+
+Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the `Android 6.0 (Marshmallow)` SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.
+
+The SDK Manager can be accessed from the "Welcome to Android Studio" screen. Click on "Configure", then select "SDK Manager".
+
+<block class="native mac android" />
+
+![Android Studio Welcome](img/AndroidStudioWelcomeMacOS.png)
+
+<block class="native windows android" />
+
+![Android Studio Welcome](img/AndroidStudioWelcomeWindows.png)
+
+<block class="native mac windows linux android" />
+
+> The SDK Manager can also be found within the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.

 Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the `Android 6.0 (Marshmallow)` entry, then make sure the following items are all checked:

@@ -257,58 +356,89 @@ Select the "SDK Platforms" tab from within the SDK Manager, then check the box n
 - `Intel x86 Atom_64 System Image`
 - `Google APIs Intel x86 Atom_64 System Image`

-![Android SDK Manager](img/AndroidSDKManager.png)
+<block class="native mac android" />

-Next, select the "SDK Tools" tab 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.
+![Android SDK Manager](img/AndroidSDKManagerMacOS.png)
+
+<block class="native windows android" />
+
+![Android SDK Manager](img/AndroidSDKManagerWindows.png)
+
+<block class="native windows mac linux android" />
+
+Next, select the "SDK Tools" tab 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 `23.0.1` is selected.
+
+<block class="native mac android" />
+
+![Android SDK Manager - 23.0.1 Build Tools](img/AndroidSDKManagerSDKToolsMacOS.png)
+
+<block class="native windows android" />
+
+![Android SDK Manager - 23.0.1 Build Tools](img/AndroidSDKManagerSDKToolsWindows.png)
+
+<block class="native windows mac linux android" />

 Finally, click "Apply" to download and install the Android SDK and related build tools.

-<block class="mac windows linux android" />
+<block class="native mac android" />

-#### 4. Set up the ANDROID_HOME environment variable
+![Android SDK Manager - Installs](img/AndroidSDKManagerInstallsMacOS.png)

-The React Native command line interface requires the `ANDROID_HOME` environment variable to be set up.
+<block class="native windows android" />

-<block class="mac android" />
+![Android SDK Manager - Installs](img/AndroidSDKManagerInstallsWindows.png)

-Add the following lines to your `~/.profile` (or equivalent) config file:
+<block class="native mac windows linux android" />
+
+#### 3. Configure the ANDROID_HOME environment variable
+
+The React Native tools require some environment variables to be set up in order to build apps with native code.
+
+<block class="native mac linux android" />
+
+Add the following lines to your `$HOME/.bash_profile` config file:
+
+<block class="native mac android" />

 ```
-export ANDROID_HOME=${HOME}/Library/Android/sdk
-export PATH=${PATH}:${ANDROID_HOME}/tools
-export PATH=${PATH}:${ANDROID_HOME}/platform-tools
+export ANDROID_HOME=$HOME/Library/Android/sdk
+export PATH=$PATH:$ANDROID_HOME/tools
+export PATH=$PATH:$ANDROID_HOME/platform-tools
 ```

-Type `source ~/.profile` to load the config into your current shell.
-
-> 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" />
-
-Add the following lines to your `~/.profile` (or equivalent) config file:
+<block class="native linux android" />

 ```
-export ANDROID_HOME=${HOME}/Android/Sdk
-export PATH=${PATH}:${ANDROID_HOME}/tools
-export PATH=${PATH}:${ANDROID_HOME}/platform-tools
+export ANDROID_HOME=$HOME/Android/Sdk
+export PATH=$PATH:$ANDROID_HOME/tools
+export PATH=$PATH:$ANDROID_HOME/platform-tools
 ```

-Type `source ~/.profile` to load the config into your current shell.
+<block class="native mac linux android" />

-> Please make sure you export the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio.
+> `.bash_profile` is specific to `bash`. If you're using another shell, you will need to edit the appropriate shell-specific config file.

-<block class="windows android" />
+Type `source $HOME/.bash_profile` to load the config into your current shell. Verify that ANDROID_HOME has been added to your path by running `echo $PATH`.

-Go to **Control Panel** → **System and Security** → **System** → **Change settings** →
-**Advanced System Settings** → **Environment variables** → **New**, then enter the path to your Android SDK.
+> Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.

-![env variable](img/react-native-android-sdk-environment-variable-windows.png)
+<block class="native windows android" />

-Restart the Command Prompt to apply the new environment variable.
+Open the System pane under **System and Security** in the Control Panel, then click on **Change settings...**. Open the **Advanced** tab and click on **Environment Variables...**. Click on **New...** to create a new `ANDROID_HOME` user variable that points to the path to your Android SDK:

-> Please make sure you export the correct path for `ANDROID_HOME` if you did not install the Android SDK using Android Studio.
+![ANDROID_HOME Environment Variable](img/AndroidEnvironmentVariableANDROID_HOME.png)

-<block class="linux android" />
+The SDK is installed, by default, at the following location:
+
+```
+c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
+```
+
+You can find the actual location of the SDK in the Android Studio "Preferences" dialog, under **Appearance & Behavior** → **System Settings** → **Android SDK**.
+
+Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.
+
+<block class="native linux android" />

 ### Watchman (optional)

@@ -317,35 +447,93 @@ Follow the [Watchman installation guide](https://facebook.github.io/watchman/doc
 > [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.

-<block class="mac windows linux android" />
+<block class="native mac ios" />

-## Starting the Android Virtual Device
+## Creating a new application
+
+Use the React Native command line interface to generate a new React Native project called "AwesomeProject":
+
+```
+react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding iOS support to an existing React Native project (see [Platform Specific Code](docs/platform-specific-code.html)).
+
+<block class="native mac windows linux android" />
+
+## Creating a new application
+
+Use the React Native command line interface to generate a new React Native project called "AwesomeProject":
+
+```
+react-native init AwesomeProject
+```
+
+This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see [Platform Specific Code](docs/platform-specific-code.html)).
+
+<block class="native mac windows linux android" />
+
+## Preparing the Android device
+
+You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer.
+
+Either way, you will need to prepare the device to run Android apps for development.
+
+### Using a physical device
+
+If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions [here](docs/running-on-device.html).
+
+### Using a virtual device
+
+You can see the list of available Android Virtual Devices (AVDs) by opening the "AVD Manager" from within Android Studio. Look for an icon that looks like this:

 ![Android Studio AVD Manager](img/react-native-tools-avd.png)

-You can see the list of available AVDs by opening the "AVD Manager" from within Android Studio.
+If you have just installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next".

-Once in the "AVD Manager", select your AVD and click "Edit...". Choose "Android 6.0 - API Level 23" under Device, and "Intel Atom (x86_64)" under CPU/ABI. Click OK, then select your new AVD and click "Start...", and finally, "Launch".
+<block class="native windows android" />

-![Android AVD Configuration](img/AndroidAVDConfiguration.png)
+![Android Studio AVD Manager](img/CreateAVDWindows.png)

-> It is very common to run into an issue where Android Studio fails to create a default 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="native mac android" />

-### Using a real device
+![Android Studio AVD Manager](img/CreateAVDMacOS.png)

-If you have a physical Android device, you can use it for development in place of an AVD. Plug it in to your computer using a USB cable and [enable USB debugging](https://developer.android.com/training/basics/firstapp/running-app.html) before proceeding to the next step.
+<block class="native mac windows linux android" />

-<block class="mac ios android" />
+Select the "x86 Images" tab, then look for the **Marshmallow** API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

-## Testing your React Native Installation
+<block class="native linux android" />

-<block class="mac ios" />
+> We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager.

-Use the React Native command line interface to generate a new React Native project called "AwesomeProject", then run `react-native run-ios` inside the newly created folder.
+<block class="native windows android" />
+
+![Install HAXM](img/CreateAVDx86Windows.png)
+
+> If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows) to set it up, then go back to the AVD Manager.
+
+![AVD List](img/AVDManagerWindows.png)
+
+<block class="native mac android" />
+
+![Install HAXM](img/CreateAVDx86MacOS.png)
+
+> If you don't have HAXM installed, follow [these instructions](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x) to set it up, then go back to the AVD Manager.
+
+![AVD List](img/AVDManagerMacOS.png)
+
+<block class="native mac windows linux android" />
+
+Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step.
+
+<block class="native mac ios" />
+
+## Running your React Native application
+
+Run `react-native run-ios` inside your React Native project folder:

 ```
-# skip this first command if you ejected from Create React Native App
-react-native init AwesomeProject
 cd AwesomeProject
 react-native run-ios
 ```
@@ -356,40 +544,65 @@ 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](https://nuclide.io/).

-<block class="mac android" />
+> If you can't get this to work, see the [Troubleshooting](docs/troubleshooting.html#content) page.

-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:
+### Running on a device
+
+The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](docs/running-on-device.html).
+
+<block class="native mac windows linux android" />
+
+## Running your React Native application
+
+Run `react-native run-android` inside your React Native project folder:

 ```
-# skip this first command if you ejected from Create React Native App
-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.

-![AwesomeProject on Android](img/AndroidSuccess.png)
+<block class="native mac android" />
+
+![AwesomeProject on Android](img/AndroidSuccessMacOS.png)
+
+<block class="native windows android" />
+
+![AwesomeProject on Android](img/AndroidSuccessWindows.png)
+
+<block class="native mac windows linux android" />

 `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" />
+> If you can't get this to work, see the [Troubleshooting](docs/troubleshooting.html#content) page.
+
+<block class="native mac ios android" />

 ### Modifying your app

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

-<block class="mac ios" />
+<block class="native mac ios" />

 - 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!
+- Hit `⌘R` in your iOS Simulator to reload the app and see your changes!

-<block class="mac android" />
+<block class="native mac android" />

 - 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!
+- Press the `R` key twice or select `Reload` from the Developer Menu (`⌘M`) to see your changes!

-<block class="mac ios android" />
+<block class="native windows linux android" />
+
+### 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 (`⌘M`) to see your changes!
+
+<block class="native mac ios android" />

 ### That's it!

@@ -397,73 +610,34 @@ Congratulations! You've successfully run and modified your first React Native ap

 <center><img src="img/react-native-congratulations.png" width="150"></img></center>

-<block class="windows android" />
-
-## Testing your React Native Installation
-
-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:
-
-```
-# skip this first command if you ejected from Create React Native App
-react-native init AwesomeProject
-cd AwesomeProject
-react-native run-android
-```
-
-<block class="linux android" />
-
-## Testing your React Native Installation
-
-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.
-
-```
-# skip this first command if you ejected from Create React Native App
-react-native init AwesomeProject
-cd AwesomeProject
-react-native run-android
-```
-
-<block class="windows linux android" />
-
-If everything is set up correctly, you should see your new app running in your Android emulator shortly.
-
-![AwesomeProject on Android](img/AndroidSuccess.png)
-
-<block class="windows linux android" />
-
-### 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!
+<block class="native windows linux android" />

 ### That's it!

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

 <center><img src="img/react-native-congratulations.png" width="150"></img></center>

-<block class="mac ios" />
+<block class="native mac ios" />

-## Now What?
+## Now what?
+
+- Turn on [Live Reload](docs/debugging.html#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes!

 - 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
+If you're curious to learn more about React Native, continue on
 to the [Tutorial](docs/tutorial.html).

-<block class="windows linux mac android" />
+<block class="native windows linux mac android" />

-## Now What?
+## Now what?
+
+- Turn on [Live Reload](docs/debugging.html#reloading-javascript) in the Developer Menu. Your app will now reload automatically whenever you save any changes!

 - 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
+If you're curious to learn more about React Native, continue on
 to the [Tutorial](docs/tutorial.html).

 <script>
@@ -527,6 +701,7 @@ if (window.location.hash !== '' && window.location.hash !== 'content') { // cont
            break; // assume we don't have anything.
          }
          // We would have broken out if both targetPlatform and devOS hadn't been filled.
+          display('guide', 'native');
          display('os', devOS);
          display('platform', targetPlatform);
          foundHash = true;
@@ -541,6 +716,7 @@ if (window.location.hash !== '' && window.location.hash !== 'content') { // cont
 if (!foundHash) {
  var isMac = navigator.platform === 'MacIntel';
  var isWindows = navigator.platform === 'Win32';
+  display('guide', 'quickstart');
  display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
  display('platform', isMac ? 'ios' : 'android');
 }
@@ -18,7 +18,7 @@ as "🍕🍕🍕".
 import React, { Component } from 'react';
 import { AppRegistry, Text, TextInput, View } from 'react-native';

-class PizzaTranslator extends Component {
+export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
@@ -40,6 +40,7 @@ class PizzaTranslator extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
 ```

@@ -56,7 +56,7 @@ A common pattern to many mobile apps is the scrollable list of items. Users inte

 ScrollViews can scroll vertically or horizontally, and can be configured to allow paging through views using swiping gestures by using the `pagingEnabled` props. Swiping horizontally between views can also be implemented on Android using the [ViewPagerAndroid](docs/viewpagerandroid.html) component.

-A [ListView](docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. It can also display section headers and footers, similar to `UITableView`s on iOS.
+A [FlatList](docs/using-a-listview.html) is a special kind of ScrollView that is best suited for displaying long vertical lists of items. If you want to display section headers and footers, similar to `UITableView`s on iOS, then [SectionList](docs/using-a-listview.html) is the way to go.

 ### Pinch-to-zoom

@@ -18,7 +18,7 @@ The simplest way to set the dimensions of a component is by adding a fixed `widt
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';

-class FixedDimensionsBasics extends Component {
+export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
@@ -30,6 +30,7 @@ class FixedDimensionsBasics extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);
 ```

@@ -45,7 +46,7 @@ Use `flex` in a component's style to have the component expand and shrink dynami
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';

-class FlexDimensionsBasics extends Component {
+export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
@@ -60,6 +61,7 @@ class FlexDimensionsBasics extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
 ```

@@ -9,102 +9,176 @@ next: running-on-device
 previous: testing
 ---

-<div class="integration-toggler">
 <style>
-.integration-toggler a {
-  display: inline-block;
-  padding: 10px 5px;
-  margin: 2px;
-  border: 1px solid #05A5D1;
-  border-radius: 3px;
-  text-decoration: none !important;
-}
-.display-platform-objc .integration-toggler .button-objc,
-.display-platform-swift .integration-toggler .button-swift,
-.display-platform-android .integration-toggler .button-android {
-  background-color: #05A5D1;
-  color: white;
-}
-block { display: none; }
-.display-platform-objc .objc,
-.display-platform-swift .swift,
-.display-platform-android .android {
-  display: block;
-}</style>
-<span>Platform:</span>
-<a href="javascript:void(0);" class="button-objc" onclick="display('platform', 'objc')">Objective-C</a>
-<a href="javascript:void(0);" class="button-swift" onclick="display('platform', 'swift')">Swift</a>
-<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
+  .toggler li {
+    display: inline-block;
+    position: relative;
+    top: 1px;
+    padding: 10px;
+    margin: 0px 2px 0px 2px;
+    border: 1px solid #05A5D1;
+    border-bottom-color: transparent;
+    border-radius: 3px 3px 0px 0px;
+    color: #05A5D1;
+    background-color: transparent;
+    font-size: 0.99em;
+    cursor: pointer;
+  }
+  .toggler li:first-child {
+    margin-left: 0;
+  }
+  .toggler li:last-child {
+    margin-right: 0;
+  }
+  .toggler ul {
+    width: 100%;
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+    border-bottom: 1px solid #05A5D1;
+    cursor: default;
+  }
+  @media screen and (max-width: 960px) {
+    .toggler li,
+    .toggler li:first-child,
+    .toggler li:last-child {
+      display: block;
+      border-bottom-color: #05A5D1;
+      border-radius: 3px;
+      margin: 2px 0px 2px 0px;
+    }
+    .toggler ul {
+      border-bottom: 0;
+    }
+  }
+  .toggler a {
+    display: inline-block;
+    padding: 10px 5px;
+    margin: 2px;
+    border: 1px solid #05A5D1;
+    border-radius: 3px;
+    text-decoration: none !important;
+  }
+  .display-platform-objc .toggler .button-objc,
+  .display-platform-swift .toggler .button-swift,
+  .display-platform-android .toggler .button-android {
+    background-color: #05A5D1;
+    color: white;
+  }
+  block { display: none; }
+  .display-platform-objc .objc,
+  .display-platform-swift .swift,
+  .display-platform-android .android {
+    display: block;
+  }
+</style>
+
+React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
+
+The specific steps are different depending on what platform you're targeting.
+
+<div class="toggler">
+  <ul role="tablist" >
+    <li id="objc" class="button-objc" aria-selected="false" role="tab" tabindex="0" aria-controls="objctab" onclick="display('platform', 'objc')">
+      iOS (Objective-C)
+    </li>
+    <li id="swift" class="button-swift" aria-selected="false" role="tab" tabindex="0" aria-controls="swifttab" onclick="display('platform', 'swift')">
+      iOS (Swift)
+    </li>
+    <li id="android" class="button-android" aria-selected="false" role="tab" tabindex="0" aria-controls="androidtab" onclick="display('platform', 'android')">
+      Android (Java)
+    </li>
+  </ul>
 </div>

-<block class="android" />
-
-> This section will be updated shortly showing an integration into a more real world application such as the 2048 app that was used for Objective-C and Swift.
-
 <block class="objc swift android" />

 ## Key Concepts

-React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
-
 <block class="objc swift" />

 The keys to integrating React Native components into your iOS application are to:

-1. Understand what React Native components you want to integrate.
-2. Create a `Podfile` with `subspec`s for all the React Native components you will need for your integration.
-3. Create your actual React Native components in JavaScript.
-4. Add a new event handler that creates a `RCTRootView` that points to your React Native component and its `AppRegistry` name that you defined in `index.ios.js`.
-5. Start the React Native server and run your native application.
-6. Optionally add more React Native components.
-7. [Debug](/react-native/releases/next/docs/debugging.html).
-8. Prepare for [deployment](docs/running-on-device.html) (e.g., via the `react-native-xcode.sh` script).
-9. Deploy and Profit!
+1. Set up React Native dependencies and directory structure.
+2. Understand what React Native components you will use in your app.
+3. Add these components as dependencies using CocoaPods.
+4. Develop your React Native components in JavaScript.
+5. Add a `RCTRootView` to your iOS app. This view will serve as the container for your React Native component.
+6. Start the React Native server and run your native application.
+7. Verify that the React Native aspect of your application works as expected.

 <block class="android" />

 The keys to integrating React Native components into your Android application are to:

-1. Understand what React Native components you want to integrate.
-2. Install `react-native` in your Android application root directory to create `node_modules/` directory.
-3. Create your actual React Native components in JavaScript.
-4. Add `com.facebook.react:react-native:+` and a `maven` pointing to the `react-native` binaries in `node_modules/` to your `build.gradle` file.
-4. Create a custom React Native specific `Activity` that creates a `ReactRootView`.
-5. Start the React Native server and run your native application.
-6. Optionally add more React Native components.
-7. [Debug](/react-native/releases/next/docs/debugging.html).
-8. [Prepare](/react-native/releases/next/docs/signed-apk-android.html) for [deployment](docs/running-on-device.html).
-9. Deploy and Profit!
+1. Set up React Native dependencies and directory structure.
+2. Develop your React Native components in JavaScript.
+3. Add a `ReactRootView` to your Android app. This view will serve as the container for your React Native component.
+4. Start the React Native server and run your native application.
+5. Verify that the React Native aspect of your application works as expected.

 <block class="objc swift android" />

 ## Prerequisites

+<block class="objc swift" />
+
+Follow the instructions for building apps with native code from the [Getting Started guide](docs/getting-started.html) to configure your development environment for building React Native apps for iOS.
+
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing iOS project to a `/ios` subfolder.
+
 <block class="android" />

-The [Android Getting Started guide](docs/getting-started.html) will install the appropriate prerequisites (e.g., `npm`) for React Native on the Android target platform and your chosen development environment.
+Follow the instructions for building apps with native code from the [Getting Started guide](docs/getting-started.html) to configure your development environment for building React Native apps for Android.

-> To ensure a smooth experience, make sure your `android` project is under `$root/android`.
+### 1. Set up directory structure
+
+To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to a `/android` subfolder.
+
+<block class="objc swift android" />
+
+### 2. Install JavaScript dependencies
+
+Go to the root directory for your project and create a new `package.json` file with the following contents:
+
+```bash
+{
+  "name": "MyReactNativeApp",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node node_modules/react-native/local-cli/cli.js start"
+  }
+}
+```
+
+Next, you will install the `react` and `react-native` packages. Open a terminal or command prompt, then navigate to the root directory for your project and type the following commands:
+
+```bash
+$ npm install --save react react-native
+```
+
+This will create a new `/node_modules` folder in your project's root directory. This folder stores all the JavaScript dependencies required to build your project.

 <block class="objc swift" />

-### General
+### 3. Install CocoaPods

-First, follow the [Getting Started guide](docs/getting-started.html) for your development environment and the iOS target platform to install the prerequisites for React Native.
+[CocoaPods](http://cocoapods.org) is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.

-> To ensure a smooth experience, make sure your `iOS` project is under `$root/ios`.
-
-### CocoaPods
-
-[CocoaPods](http://cocoapods.org) is a package management tool for iOS and Mac development. We use it to add the actual React Native framework code locally into your current project.
+We recommend installing CocoaPods using [Homebrew](http://brew.sh/).

 ```bash
-$ sudo gem install cocoapods
+$ brew install cocoapods
 ```

-> It is technically possible not to use CocoaPods, but this requires manual library and linker additions that overly complicates this process.
+> It is technically possible not to use CocoaPods, but that would require manual library and linker additions that would overly complicate this process.

-## Our Sample App
+<block class="objc swift" />
+
+## Adding React Native to your app

 <block class="objc" />

@@ -118,90 +192,19 @@ Assume the [app for integration](https://github.com/JoelMarcey/swift-2048) is a

 ![Before RN Integration](img/react-native-existing-app-integration-ios-before.png)

-## Package Dependencies
+### Configuring CocoaPods dependencies

-React Native integration requires both the React and React Native node modules. The React Native Framework will provide the code to allow your application integration to happen.
+Before you integrate React Native into your application, you will want to decide what parts of the React Native framework you would like to integrate. We will use CocoaPods to specify which of these "subspecs" your app will depend on.

+The list of supported `subspec`s is available in [`/node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `<Text>` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `<Image>` elements), then you will need the `RCTImage` `subspec`.

-### `package.json`
-
-We will add the package dependencies to a `package.json` file. Create this file in the root of your project if it does not exist.
-
-> Normally with React Native projects, you will put files like `package.json`, `index.ios.js`, etc. in the root directory of your project and then have your iOS specific native code in a subdirectory like `ios/` where your Xcode project is located (e.g., `.xcodeproj`).
-
-Below is an example of what your `package.json` file should minimally contain.
-
-> Version numbers will vary according to your needs. Normally the latest versions for both [React](https://github.com/facebook/react/releases) and [React Native](https://github.com/facebook/react-native/releases) will be sufficient.
-
-<block class="objc" />
+You can specify which `subspec`s your app will depend on in a `Podfile` file. The easiest way to create a `Podfile` is by running the CocoaPods `init` command in the `/ios` subfolder of your project:

 ```bash
-{
-  "name": "NumberTileGame",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
-  },
-  "dependencies": {
-    "react": "15.0.2",
-    "react-native": "0.26.1"
-  }
-}
-```
-
-<block class="swift" />
-
-```bash
-{
-  "name": "swift-2048",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
-  },
-  "dependencies": {
-    "react": "15.0.2",
-    "react-native": "0.26.1"
-  }
-}
-```
-
-<block class="objc swift" />
-
-### Packages Installation
-
-Install the React and React Native modules via the Node package manager. The Node modules will be installed into a `node_modules/` directory in the root of your project.
-
-```bash
-# From the directory containing package.json project, install the modules
-# The modules will be installed in node_modules/
-$ npm install
-```
-
-## React Native Framework
-
-The React Native Framework was installed as Node module in your project [above](#package-dependencies). We will now install a CocoaPods `Podfile` with the components you want to use from the framework itself.
-
-### Subspecs
-
-Before you integrate React Native into your application, you will want to decide what parts of the React Native Framework you would like to integrate. That is where `subspec`s come in. When you create your `Podfile`, you are going to specify React Native library dependencies that you will want installed so that your application can use those libraries. Each library will become a `subspec` in the `Podfile`.
-
-
-The list of supported `subspec`s are in [`node_modules/react-native/React.podspec`](https://github.com/facebook/react-native/blob/master/React.podspec). They are generally named by functionality. For example, you will generally always want the `Core` `subspec`. That will get you the `AppRegistry`, `StyleSheet`, `View` and other core React Native libraries. If you want to add the React Native `Text` library (e.g., for `<Text>` elements), then you will need the `RCTText` `subspec`. If you want the `Image` library (e.g., for `<Image>` elements), then you will need the `RCTImage` `subspec`.
-
-#### Podfile
-
-After you have used Node to install the React and React Native frameworks into the `node_modules` directory, and you have decided on what React Native elements you want to integrate, you are ready to create your `Podfile` so you can install those components for use in your application.
-
-The easiest way to create a `Podfile` is by using the CocoaPods `init` command in the native iOS code directory of your project:
-
-```bash
-## In the directory where your native iOS code is located (e.g., where your `.xcodeproj` file is located)
 $ pod init
 ```

-The `Podfile` will be created and saved in the *iOS* directory (e.g., `ios/`) of your current project and will contain a boilerplate setup that you will tweak for your integration purposes. In the end, `Podfile` should look something similar to this:
+The `Podfile` will contain a boilerplate setup that you will tweak for your integration purposes. In the end, `Podfile` should look something similar to this:

 <block class="objc" />

@@ -253,8 +256,6 @@ end

 <block class="objc swift" />

-#### Pod Installation
-
 After you have created your `Podfile`, you are ready to install the React Native pod.

 ```bash
@@ -280,26 +281,21 @@ Pod installation complete! There are 3 dependencies from the Podfile and 1 total

 <block class="objc swift" />

-## Code Integration
+### Code integration

-Now that we have a package foundation, we will actually modify the native application to integrate React Native into the application. For our 2048 app, we will add a "High Score" screen in React Native.
+Now we will actually modify the native iOS application to integrate React Native. For our 2048 sample app, we will add a "High Score" screen in React Native.

-### The React Native component
+#### The React Native component

 The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.

-#### Create a `index.ios.js` file
+##### 1. Create a `index.ios.js` file

-First, create an empty `index.ios.js` file. For ease, I am doing this in the root of the project.
+First, create an empty `index.ios.js` file in the root of your React Native project.

-> `index.ios.js` is the starting point for React Native applications on iOS. And it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in `index.ios.js`
+`index.ios.js` is the starting point for React Native applications on iOS, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in `index.ios.js`.

-```bash
-# In root of your project
-$ touch index.ios.js
-```
-
-#### Add Your React Native Code
+##### 2. Add your React Native code

 In your `index.ios.js`, create your component. In our sample here, we will add simple `<Text>` component within a styled `<View>`

@@ -357,19 +353,19 @@ AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

 > `RNHighScores` is the name of your module that will be used when you add a view to React Native from within your iOS application.

-## The Magic: `RCTRootView`
+#### The Magic: `RCTRootView`

 Now that your React Native component is created via `index.ios.js`, you need to add that component to a new or existing `ViewController`. The easiest path to take is to optionally create an event path to your component and then add that component to an existing `ViewController`.

 We will tie our React Native component with a new native view in the `ViewController` that will actually host it called `RCTRootView` .

-### Create an Event Path
+##### 1. Create an Event Path

 You can add a new link on the main game menu to go to the "High Score" React Native page.

 ![Event Path](img/react-native-add-react-native-integration-link.png)

-#### Event Handler
+##### 2. Event Handler

 We will now add an event handler from the menu link. A method will be added to the main `ViewController` of your application. This is where `RCTRootView` comes into play.

@@ -450,7 +446,7 @@ import React
 }
 ```

-> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L93) to create a bridge and then use `RCTRootView initWithBridge`.
+> Note that `RCTRootView bundleURL` starts up a new JSC VM. To save resources and simplify the communication between RN views in different parts of your native app, you can have multiple views powered by React Native that are associated with a single JS runtime. To do that, instead of using `RCTRootView bundleURL`, use [`RCTBridge initWithBundleURL`](https://github.com/facebook/react-native/blob/master/React/Base/RCTBridge.h#L89) to create a bridge and then use `RCTRootView initWithBridge`.

 <block class="objc" />

@@ -462,7 +458,7 @@ import React

 <block class="objc swift" />

-#### Wire Up
+##### 3. Wire Up

 Wire up the new link in the main menu to the newly added event handler method.

@@ -470,11 +466,11 @@ Wire up the new link in the main menu to the newly added event handler method.

 > One of the easier ways to do this is to open the view in the storyboard and right click on the new link. Select something such as the `Touch Up Inside` event, drag that to the storyboard and then select the created method from the list provided.

-## Test Your Integration
+### Test your integration

-You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the `index.ios.bundle` packager and the server running on `localhost` to serve it.
+You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the `index.ios.bundle` package and the server running on `localhost` to serve it.

-### App Transport Security
+##### 1. Add App Transport Security exception

 Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's `Info.plist` (or equivalent) file.

@@ -492,14 +488,17 @@ Apple has blocked implicit cleartext HTTP resource loading. So we need to add th
 </dict>
 ```

-### Run the Packager
+> App Transport Security is good for your users. Make sure to re-enable it prior to releasing your app for production.
+
+##### 2. Run the packager
+
+To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:

 ```bash
-# From the root of your project, where the `node_modules` directory is located.
 $ npm start
 ```

-### Run the App
+##### 3. Run the app

 If you are using Xcode or your favorite editor, build and run your native iOS application as normal. Alternatively, you can run the app from the command line using:

@@ -524,27 +523,75 @@ Here is the *React Native* high score screen:

 <block class="objc" />

-You can examine the code that added the React Native screen on [GitHub](https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585).
+You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/iOS-2048/commit/9ae70c7cdd53eb59f5f7c7daab382b0300ed3585).

 <block class="swift" />

-You can examine the code that added the React Native screen on [GitHub](https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229).
+You can examine the code that added the React Native screen to our sample app on [GitHub](https://github.com/JoelMarcey/swift-2048/commit/13272a31ee6dd46dc68b1dcf4eaf16c1a10f5229).

 <block class="android" />

-## Add JS to your app
+## Adding React Native to your app

-In your app's root folder, run:
+### Configuring maven

-    $ npm init
-    $ npm install --save react react-native
-    $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
+Add the React Native dependency to your app's `build.gradle` file:

-This creates a node module for your app and adds the `react-native` npm dependency. Now open the newly created `package.json` file and add this under `scripts`:
+```
+dependencies {
+    ...
+    compile "com.facebook.react:react-native:+" // From node_modules.
+}
+```

-    "start": "node node_modules/react-native/local-cli/cli.js start"
+> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.

-Copy & paste the following code to `index.android.js` in your root folder — it's a barebones React Native app:
+Add an entry for the local React Native maven directory to `build.gradle`. Be sure to add it to the "allprojects" block:
+
+```
+allprojects {
+    repositories {
+        ...
+        maven {
+            // All of React Native (JS, Android binaries) is installed from npm
+            url "$rootDir/node_modules/react-native/android"
+        }
+    }
+    ...
+}
+```
+
+> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
+
+### Configuring permissions
+
+Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:
+
+    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+
+This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.
+
+### Code integration
+
+Now we will actually modify the native Android application to integrate React Native.
+
+#### The React Native component
+
+The first bit of code we will write is the actual React Native code for the new "High Score" screen that will be integrated into our application.
+
+##### 1. Create a `index.android.js` file
+
+First, create an empty `index.android.js` file in the root of your React Native project.
+
+`index.android.js` is the starting point for React Native applications on Android, and it is always required. It can be a small file that `require`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it. In our case, we will just put everything in `index.android.js`.
+
+##### 2. Add your React Native code
+
+In your `index.android.js`, create your component. In our sample here, we will add simple `<Text>` component within a styled `<View>`:

 ```js
 'use strict';
@@ -581,46 +628,36 @@ var styles = StyleSheet.create({
 AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
 ```

-## Prepare your current app
+##### 3. Configure permissions for development error overlay

-In your app's `build.gradle` file add the React Native dependency:
-```
-dependencies {
-    ...
-    compile "com.facebook.react:react-native:+" // From node_modules.
+If your app is targeting the Android `API level 23` or greater, make sure you have the `overlay` permission enabled for the development build. You can check it with `Settings.canDrawOverlays(this);`. This is required in dev builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be achieved by adding the following code to the Activity file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a field of the class which would be responsible for passing the result back to the Activity.
+
+```java
+if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+    if (!Settings.canDrawOverlays(this)) {
+        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
+                                   Uri.parse("package:" + getPackageName()));
+        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
+    }
 }
 ```

-> If you want to ensure that you are always using a specific React Native version in your native build, replace `+` with an actual React Native version you've downloaded from `npm`.
+Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.

-In your project's `build.gradle` file add an entry for the local React Native maven directory. Be sure to add it to the "allprojects" block:
-
-```
-allprojects {
-    repositories {
-        ...
-        maven {
-            // All of React Native (JS, Android binaries) is installed from npm
-            url "$rootDir/node_modules/react-native/android"
+```java
+@Override
+protected void onActivityResult(int requestCode, int resultCode, Intent data) {
+    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            if (!Settings.canDrawOverlays(this)) {
+                // SYSTEM_ALERT_WINDOW permission not granted...
+            }
        }
    }
-    ...
 }
 ```

-> Make sure that the path is correct! You shouldn’t run into any “Failed to resolve: com.facebook.react:react-native:0.x.x" errors after running Gradle sync in Android Studio.
-
-Next, make sure you have the Internet permission in your `AndroidManifest.xml`:
-
-    <uses-permission android:name="android.permission.INTERNET" />
-
-If you need to access to the `DevSettingsActivity` add to your `AndroidManifest.xml`:
-
-    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-
-This is only really used in dev mode when reloading JavaScript from the development server, so you can strip this in release builds if you need to.
-
-## Add native code
+#### The Magic: `ReactRootView`

 You need to add some native code in order to start the React Native runtime and get it to render something. To do this, we're going to create an `Activity` that creates a `ReactRootView`, starts a React application inside it and sets it as the main content view.

@@ -668,8 +705,6 @@ We need set the theme of `MyReactActivity` to `Theme.AppCompat.Light.NoActionBar
 </activity>
 ```

-
-
 > A `ReactInstanceManager` can be shared amongst multiple activities and/or fragments. You will want to make your own `ReactFragment` or `ReactActivity` and have a singleton *holder* that holds a `ReactInstanceManager`. When you need the `ReactInstanceManager` (e.g., to hook up the `ReactInstanceManager` to the lifecycle of those Activities or Fragments) use the one provided by the singleton.

 Next, we need to pass some activity lifecycle callbacks down to the `ReactInstanceManager`:
@@ -733,49 +768,42 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {

 Now your activity is ready to run some JavaScript code.

-### Configure permissions for development error overlay
+### Test your integration

-If your app is targeting the Android `API level 23` or greater, make sure you have the `overlay` permission enabled for the development build. You can check it with `Settings.canDrawOverlays(this);`. This is required in dev builds because react native development errors must be displayed above all the other windows. Due to the new permissions system introduced in the API level 23, the user needs to approve it. This can be achieved by adding the following code to the Activity file in the onCreate() method. OVERLAY_PERMISSION_REQ_CODE is a field of the class which would be responsible for passing the result back to the Activity.
+You have now done all the basic steps to integrate React Native with your current application. Now we will start the React Native packager to build the `index.android.bundle` package and the server running on localhost to serve it.

-```java
-if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-    if (!Settings.canDrawOverlays(this)) {
-        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
-                                   Uri.parse("package:" + getPackageName()));
-        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
-    }
-}
+##### 1. Run the packager
+
+To run your app, you need to first start the development server. To do this, simply run the following command in the root directory of your React Native project:
+
+```bash
+$ npm start
 ```

-Finally, the `onActivityResult()` method (as shown in the code below) has to be overridden to handle the permission Accepted or Denied cases for consistent UX.
+##### 2. Run the app

-```java
-@Override
-protected void onActivityResult(int requestCode, int resultCode, Intent data) {
-    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            if (!Settings.canDrawOverlays(this)) {
-                // SYSTEM_ALERT_WINDOW permission not granted...
-            }
-        }
-    }
-}
-```
-
-## Run your app
-
-To run your app, you need to first start the development server. To do this, simply run the following command in your root folder:
-
-    $ npm start
-
-Now build and run your Android app as normal (`./gradlew installDebug` from command-line; in Android Studio just create debug build as usual).
-
-> If you are using Android Studio for your builds and not the Gradle Wrapper directly, make sure you install [watchman](https://facebook.github.io/watchman/) before running `npm start`. It will prevent the packager from crashing due to conflicts between Android Studio and the React Native packager.
+Now build and run your Android app as normal.

 Once you reach your React-powered activity inside the app, it should load the JavaScript code from the development server and display:

 ![Screenshot](img/EmbeddedAppAndroid.png)

+### Creating a release build in Android Studio
+
+You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which’ll be included with your native Android app:
+
+    $ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
+
+Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist!
+
+Now just create a release build of your native app from within Android Studio as usual and you should be good to go!
+
+<block class="objc swift android" />
+
+### Now what?
+
+At this point you can continue developing your app as usual. Refer to our [debugging](/docs/debugging.html) and [deployment](docs/running-on-device.html) docs to learn more about working with React Native.
+
 <script>
 // Convert <div>...<span><block /></span>...</div>
 // Into <div>...<block />...</div>
@@ -844,15 +872,3 @@ if (!foundHash) {
  display('platform', isMac ? 'objc' : 'android');
 }
 </script>
-
-<block class="android" />
-
-## Creating a release build in Android Studio
-
-You can use Android Studio to create your release builds too! It’s as easy as creating release builds of your previously-existing native Android app. There’s just one additional step, which you’ll have to do before every release build. You need to execute the following to create a React Native bundle, which’ll be included with your native Android app:
-
-    $ react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
-
-Don’t forget to replace the paths with correct ones and create the assets folder if it doesn’t exist!
-
-Now just create a release build of your native app from within Android Studio as usual and you should be good to go!
@@ -22,7 +22,7 @@ Adding `flexDirection` to a component's `style` determines the **primary axis**
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';

-class FlexDirectionBasics extends Component {
+export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
@@ -35,6 +35,7 @@ class FlexDirectionBasics extends Component {
  }
 };

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
 ```

@@ -46,7 +47,7 @@ Adding `justifyContent` to a component's style determines the **distribution** o
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';

-class JustifyContentBasics extends Component {
+export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
@@ -64,6 +65,7 @@ class JustifyContentBasics extends Component {
  }
 };

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);
 ```

@@ -77,7 +79,7 @@ Adding `alignItems` to a component's style determines the **alignment** of child
 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';

-class AlignItemsBasics extends Component {
+export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
@@ -97,6 +99,7 @@ class AlignItemsBasics extends Component {
  }
 };

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
 ```

@@ -8,11 +8,11 @@ next: images
 previous: animations
 ---

-This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use [React Navigation](docs/navigation.html#react-navigation).
+This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use [React Navigation](docs/navigation.html#react-navigation). React Navigation provides an easy to use navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both iOS and Android. As this is a JavaScript implementation, it provides the greatest amount of configurability as well as flexibility when integrating with state management libraries such as [redux](https://reactnavigation.org/docs/guides/redux).

-If you are only targeting iOS and would like to stick to the native look and feel, check out [NavigatorIOS](docs/navigation.html#navigatorios).
+If you're only targeting iOS, you may want to also check out [NavigatorIOS](docs/navigation.html#navigatorios) as a way of providing a native look and feel with minimal configuration, as it provides a wrapper around the native `UINavigationController` class. This component will not work on Android, however.

-If you're targeting both iOS and Android, the following libraries provide native navigation on both platforms: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation).
+If you'd like to achieve a native look and feel on both iOS and Android, or you're integrating React Native into an app that already manages navigation natively, the following libraries provide native navigation on both platforms: [native-navigation](http://airbnb.io/native-navigation/), [react-native-navigation](https://github.com/wix/react-native-navigation).

 ## React Navigation

@@ -66,7 +66,7 @@ For a complete intro to React Navigation, follow the [React Navigation Getting S

 ## NavigatorIOS

-If you are targeting iOS only, you may also want to consider using [`NavigatorIOS`](docs/navigatorios.html). It looks and feels just like [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), because it is actually built on top of it.
+`NavigatorIOS` looks and feels just like [`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), because it is actually built on top of it.

 ![](img/NavigationStack-NavigatorIOS.gif)

@@ -17,7 +17,7 @@ create an image, you can use a prop named `source` to control what image it show
 import React, { Component } from 'react';
 import { AppRegistry, Image } from 'react-native';

-class Bananas extends Component {
+export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
@@ -28,6 +28,7 @@ class Bananas extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('Bananas', () => Bananas);
 ```

@@ -49,7 +50,7 @@ class Greeting extends Component {
  }
 }

-class LotsOfGreetings extends Component {
+export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
@@ -61,6 +62,7 @@ class LotsOfGreetings extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
 ```

@@ -9,7 +9,7 @@ next: upgrading
 previous: integration-with-existing-apps
 ---

-It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device.
+It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.

 <div class="toggler">
  <style>
@@ -39,18 +39,21 @@ It's always a good idea to test your app on an actual device before releasing it
      display: block;
    }
  </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')">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>
+  <span>Target 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>
+
 </div>

 <block class="linux windows ios" />

-A Mac is required in order to build your app for iOS devices.
+## Running your app on iOS devices
+
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](docs/getting-started.html) to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.

 <block class="mac ios" />

@@ -58,13 +61,25 @@ A Mac is required in order to build your app for iOS devices.

 Register for a [Apple developer account](https://developer.apple.com/) if you don't have one yet.

-Connect your device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file within it using Xcode.
+### 1. Plug in your device via USB

-Select your app in the Project Navigator and look for the "General" tab. Go to "Signing" and make sure your Apple developer account is selected.
+Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file within it using Xcode.

-Open the "Product" menu from Xcode's menubar, then go to "Destination". Look for and select your device from the list. Xcode will then register your device for development.
+If this is your first time running an app on your iOS device, you may need to register your device for development. Open the **Product** menu from Xcode's menubar, then go to **Destination**. Look for and select your device from the list. Xcode will then register your device for development.

-If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar. You can now press the **Build and run** button or select "Run" from the "Product" menu. Your app will launch on your device shortly.
+### 2. Configure code signing
+
+Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.
+
+![](img/RunningOnDeviceCodeSigning.png)
+
+Repeat this step for the Tests target in your project.
+
+### 3. Build and Run your app
+
+If everything is set up correctly, your device will be listed as the build target in the Xcode toolbar, and it will also appear in the Devices pane (`⇧⌘2`). You can now press the **Build and run** button (`⌘R`) or select **Run** from the **Product** menu. Your app will launch on your device shortly.
+
+![](img/RunningOnDeviceReady.png)

 > If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs.

@@ -162,7 +177,9 @@ $ react-native run-android

 ## Connecting to the development server

-You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Enable Live reloading from the [Developer menu](docs/debugging.html#accessing-the-in-app-developer-menu) and your app will reload whenever your JavaScript code has changed.
+You can also iterate quickly on a device using the development server. You only have to be on the same Wi-Fi network as your computer. Shake your device to open the [Developer menu](docs/debugging.html#accessing-the-in-app-developer-menu), then enable Live Reload. Your app will reload whenever your JavaScript code has changed.
+
+![](img/DeveloperMenu.png)

 > If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case.

@@ -176,7 +193,7 @@ You can also iterate quickly on a device by connecting to the development server

 <block class="mac windows linux android" />

-You can use this method if your device is running Android 5.0 (Lollipop), it has USB debugging enabled, and it is connected via USB to your development machine.
+You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

 <block class="mac windows linux android" />

@@ -222,25 +239,33 @@ You can now enable Live reloading from the [Developer menu](docs/debugging.html#

 You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.

-Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. To do this, go to **Product** → **Scheme** → **Edit Scheme (cmd + <)**, make sure you're in the **Run** tab from the side, and set the Build Configuration dropdown to `Release`.
+### 1. Enable App Transport Security

-Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also load the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
+App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server. ATS is disabled for `localhost` by default in React Native projects in order to make development easier.
+
+You should re-enable ATS prior to building your app for production by removing the `localhost` entry from the `NSExceptionDomains` dictionary in your `Info.plist` file in the `ios/` folder. You can also re-enable ATS from within Xcode by opening your target properties under the Info pane and editing the App Transport Security Settings entry.
+
+> If your application needs to access HTTP resources on production, see [this post](http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/) to learn how to configure ATS on your project.
+
+### 2. Configure release scheme
+
+Building an app for distribution in the App Store requires using the `Release` scheme in Xcode. Apps built for `Release` will automatically disable the in-app Developer menu, which will prevent your users from inadvertently accessing the menu in production. It will also bundle the JavaScript locally, so you can put the app on a device and test whilst not connected to the computer.
+
+To configure your app to be built using the `Release` scheme, go to **Product** → **Scheme** → **Edit Scheme**. Select the **Run** tab in the sidebar, then set the Build Configuration dropdown to `Release`.
+
+![](img/ConfigureReleaseScheme.png)
+
+### 3. Build app for release
+
+You can now build your app for release by tapping `⌘B` or selecting **Product** → **Build** from the menu bar. Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.

-> Hint
->
 > You can also use the `React Native CLI` to perform this operation using the option `--configuration` with the value `Release` (e.g. `react-native run-ios --configuration Release`).

-Once built for release, you'll be able to distribute the app to beta testers and submit the app to the App Store.
+<block class="mac windows linux android" />

-### App Transport Security
+## Building your app for production

-App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.
-
-ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the `NSAllowsArbitraryLoads` entry from your `Info.plist` file in the `ios/` folder.
-
-To learn more about how to configure ATS on your own Xcode projects, see [this post on ATS][cats].
-
-[cats]: http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/
+You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](docs/signed-apk-android.html) to learn more.

 <script>
 // Convert <div>...<span><block /></span>...</div>
@@ -39,7 +39,7 @@ class Blink extends Component {
  }
 }

-class BlinkApp extends Component {
+export default class BlinkApp extends Component {
  render() {
    return (
      <View>
@@ -52,12 +52,13 @@ class BlinkApp extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
 ```

-In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly. 
+In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly.

 When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.

-State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html). 
+State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html).
 At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to [learn about Style](docs/style.html).
@@ -18,7 +18,7 @@ As a component grows in complexity, it is often cleaner to use `StyleSheet.creat
 import React, { Component } from 'react';
 import { AppRegistry, StyleSheet, Text, View } from 'react-native';

-class LotsOfStyles extends Component {
+export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
@@ -42,6 +42,7 @@ const styles = StyleSheet.create({
  },
 });

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('LotsOfStyles', () => LotsOfStyles);
 ```

@@ -8,7 +8,7 @@ Both iOS and Android allow you to display formatted text by annotating ranges of
 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';

-class BoldAndBeautiful extends Component {
+export default class BoldAndBeautiful extends Component {
  render() {
    return (
      <Text style={{fontWeight: 'bold'}}>
@@ -21,6 +21,7 @@ class BoldAndBeautiful extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BoldAndBeautiful', () => BoldAndBeautiful);
 ```

@@ -40,7 +41,7 @@ On iOS, you can nest views within your Text component. Here's an example:
 import React, { Component } from 'react';
 import { AppRegistry, Text, View } from 'react-native';

-class BlueIsCool extends Component {
+export default class BlueIsCool extends Component {
  render() {
    return (
      <Text>
@@ -52,6 +53,7 @@ class BlueIsCool extends Component {
  }
 }

+// skip this line if using Create React Native App
 AppRegistry.registerComponent('BlueIsCool', () => BlueIsCool);
 ```

@@ -21,7 +21,7 @@ In accordance with the ancient traditions of our people, we must first build an
 import React, { Component } from 'react';
 import { AppRegistry, Text } from 'react-native';

-class AwesomeProject extends Component {
+export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
@@ -29,7 +29,8 @@ class AwesomeProject extends Component {
  }
 }

-AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
 ```

 If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `index.ios.js` or `index.android.js` file to create a real app on your local machine.
@@ -47,7 +48,7 @@ is a built-in component that just displays some text.

 So this code is defining `HelloWorldApp`, a new `Component`, and it's registering it with the `AppRegistry`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a `render` function which returns some JSX to render.

-The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running.
+The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running. If you have a project from Create React Native App, this is handled for you and it's not necessary to call AppRegistry in your code.

 ## This App Doesn't Do Very Much

@@ -1,61 +1,66 @@
 ---
 id: upgrading
-title: Upgrading
+title: Upgrading to new React Native versions
 layout: docs
 category: Guides
 permalink: docs/upgrading.html
-banner: ejected
 next: native-modules-ios
 previous: understanding-cli
 ---

-Upgrading to new versions of React Native will give you access to more APIs, views, developer tools
-and other goodies. Because React Native projects are essentially made up of an Android project, an
-iOS project and a JavaScript project, all combined under an npm package, upgrading can be rather
-tricky. But we try to make it easy for you. Here's what you need to do to upgrade from an older
-version of React Native:
+Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it easy for you. The instructions are a bit different depending on whether you used `create-react-native-app` or `react-native init` to create your project.

-## Upgrade based on Git
+## Create React Native App projects

-**IMPORTANT:** You don't have to install the new version of React Native, it will be installed automatically.
+Upgrading your Create React Native App project to a new version of React Native requires updating the `react-native`, `react`, and `expo` package versions in your `package.json` file. Please refer to [this document](https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md) to find out what versions are supported. You will also need to set the correct `sdkVersion` in your `app.json` file.

-The module `react-native-git-upgrade` provides a one-step operation to upgrade the source files with
-a minimum of conflicts. Under the hood, it consists in 2 phases:
+See the [CRNA user guide](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md#updating-to-new-releases) for up-to-date information about upgrading your project.
+
+## Projects built with native code
+
+<div class="banner-crna-ejected">
+  <h3>Projects with Native Code Only</h3>
+  <p>
+    This section only applies to projects made with <code>react-native init</code> or to those made with Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository.
+  </p>
+</div>
+
+Because React Native projects built with native code are essentially made up of an Android project, an iOS project, and a JavaScript project, upgrading can be rather tricky. Here's what you need to do to upgrade from an older version of React Native.
+
+### Upgrade based on Git
+
+The module `react-native-git-upgrade` provides a one-step operation to upgrade the source files with a minimum of conflicts. Under the hood, it consists in 2 phases:

 * First, it computes a Git patch between both old and new template files,
 * Then, the patch is applied on the user's sources.

-### 1. Install Git
-Your project doesn't have to be handled by the Git versioning system (could be Mercurial, SVN or none)
-but Git has to be installed and available in the `PATH`. You can download Git here:
-https://git-scm.com/downloads
+> **IMPORTANT:** You don't have to install the new version of the `react-native` package, it will be installed automatically.

-### 2. Install the `react-native-git-upgrade` module
+#### 1. Install Git

-It's a CLI tool and must be installed globally:
+While your project does not have to be handled by the Git versioning system -- you can use Mercurial, SVN, or nothing -- you will still need to [install Git](https://git-scm.com/downloads) on your system in order to use `react-native-git-upgrade`. Git will also need to be available in the `PATH`.
+
+#### 2. Install the `react-native-git-upgrade` module
+
+The `react-native-git-upgrade` module provides a CLI and must be installed globally:

 ```sh
 $ npm install -g react-native-git-upgrade
 ```

-### 3. Run the command
+#### 3. Run the command

-Run the command to start the process:
+Run the following command to start the process of upgrading to the latest version:

 ```sh
 $ react-native-git-upgrade
-# Upgrade React Native to the latest version
-
-# Or:
-
-$ react-native-git-upgrade X.Y.Z
-# Upgrade React Native to the X.Y.Z version
 ```

-The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git
-3-way merge have failed, depending on the version and how you modified your sources.
+> You may specify a React Native version by passing an argument: `react-native-git-upgrade X.Y`

-### 4. Resolve the conflicts
+The templates are upgraded in a optimized way. You still may encounter conflicts but only where the Git 3-way merge have failed, depending on the version and how you modified your sources.
+
+#### 4. Resolve the conflicts

 Conflicted files include delimiters which make very clear where the changes come from. For example:

@@ -84,15 +89,13 @@ Conflicted files include delimiters which make very clear where the changes come

 You can think of "ours" as "your team" and "theirs" as "the React Native dev team".

-## Alternative
+### Alternative

 Use this only in case the above didn't work.

-### 1. Upgrade the `react-native` dependency
+#### 1. Upgrade the `react-native` dependency

-Note the latest version of the `react-native` npm package from here (or use `npm info react-native` to check):
-
-* https://www.npmjs.com/package/react-native
+Note the latest version of the `react-native` npm package [from here](https://www.npmjs.com/package/react-native) (or use `npm info react-native` to check).

 Now install that version of `react-native` in your project with `npm install --save`:

@@ -108,7 +111,7 @@ $ npm install --save react@R
 # where R is the new version of react from the peerDependency warning you saw
 ```

-### 2. Upgrade your project templates
+#### 2. Upgrade your project templates

 The new npm package may contain updates to the files that are normally generated when you
 run `react-native init`, like the iOS and the Android sub-projects.
@@ -126,10 +129,8 @@ This will check your files against the latest template and perform the following

 * If there is a new file in the template, it is simply created.
 * If a file in the template is identical to your file, it is skipped.
-* If a file is different in your project than the template, you will be prompted; you have options
-  to keep your file or overwrite it with the template version.
+* If a file is different in your project than the template, you will be prompted; you have options to keep your file or overwrite it with the template version.

-
-# Manual Upgrades
+##  Manual Upgrades

 Some upgrades require manual steps, e.g. 0.13 to 0.14, or 0.28 to 0.29. Be sure to check the [release notes](https://github.com/facebook/react-native/releases) when upgrading so that you can identify any manual changes your particular project may require.
@@ -1,6 +1,6 @@
 ---
 id: using-a-listview
-title: Using a ListView
+title: Using List Views
 layout: docs
 category: The Basics
 permalink: docs/using-a-listview.html
@@ -8,45 +8,102 @@ next: network
 previous: using-a-scrollview
 ---

-The `ListView` component displays a scrolling list of changing, but similarly structured, data.
+React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either [FlatList](docs/flatlist.html) or [SectionList](docs/sectionlist.html).

-`ListView` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](docs/using-a-scrollview.html), the `ListView` only renders elements that are currently showing on the screen, not all the elements at once.
+The `FlatList` component displays a scrolling list of changing, but similarly structured, data. `FlatList` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](docs/using-a-scrollview.html), the `FlatList` only renders elements that are currently showing on the screen, not all the elements at once.

-The `ListView` component requires two props: `dataSource` and `renderRow`. `dataSource` is the source of information for the list. `renderRow` takes one item from the source and returns a formatted component to render.
+The `FlatList` component requires two props: `data` and `renderItem`. `data` is the source of information for the list. `renderItem` takes one item from the source and returns a formatted component to render.

-This example creates a simple `ListView` of hardcoded data. It first initializes the `dataSource` that will be used to populate the `ListView`. Each item in the `dataSource` is then rendered as a `Text` component. Finally it renders the `ListView` and all `Text` components.
+This example creates a simple `FlatList` of hardcoded data. Each item in the `data` props is rendered as a `Text` component. The `FlatListBasics` component then renders the `FlatList` and all `Text` components.

-> A `rowHasChanged` function is required to use `ListView`. Here we just say a row has changed if the row we are on is not the same as the previous row.
-
-```ReactNativeWebPlayer
+```SnackPlayer?name=FlatList%20Basics
 import React, { Component } from 'react';
-import { AppRegistry, ListView, Text, View } from 'react-native';
+import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

-class ListViewBasics extends Component {
-  // Initialize the hardcoded data
-  constructor(props) {
-    super(props);
-    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-    this.state = {
-      dataSource: ds.cloneWithRows([
-        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
-      ])
-    };
-  }
+export default class FlatListBasics extends Component {
  render() {
    return (
-      <View style={{flex: 1, paddingTop: 22}}>
-        <ListView
-          dataSource={this.state.dataSource}
-          renderRow={(rowData) => <Text>{rowData}</Text>}
+      <View style={styles.container}>
+        <FlatList
+          data={[
+            {key: 'Devin'},
+            {key: 'Jackson'},
+            {key: 'James'},
+            {key: 'Joel'},
+            {key: 'John'},
+            {key: 'Jillian'},
+            {key: 'Jimmy'},
+            {key: 'Julie'},
+          ]}
+          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
 }

-// App registration and rendering
-AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
+const styles = StyleSheet.create({
+  container: {
+   flex: 1,
+   paddingTop: 22
+  },
+  item: {
+    padding: 10,
+    fontSize: 18,
+    height: 44,
+  },
+})
+
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);
 ```

-One of the most common uses for a `ListView` is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](docs/network.html).
+If you want to render a set of data broken into logical sections, maybe with section headers, then a `SectionList` is the way to go.
+
+```SnackPlayer?name=SectionList%20Basics
+import React, { Component } from 'react';
+import { AppRegistry, SectionList, StyleSheet, Text, View } from 'react-native';
+
+export default class SectionListBasics extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <SectionList
+          sections={[
+            {title: 'D', data: ['Devin']},
+            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
+          ]}
+          renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
+          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+   flex: 1,
+   paddingTop: 22
+  },
+  sectionHeader: {
+    paddingTop: 2,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 2,
+    fontSize: 14,
+    fontWeight: 'bold',
+    backgroundColor: 'rgba(247,247,247,1.0)',
+  },
+  item: {
+    padding: 10,
+    fontSize: 18,
+    height: 44,
+  },
+})
+
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('AwesomeProject', () => SectionListBasics);
+```
+
+One of the most common uses for a list view is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](docs/network.html).
@@ -16,7 +16,7 @@ This example creates a vertical `ScrollView` with both images and text mixed tog
 import React, { Component } from 'react';
 import { AppRegistry, ScrollView, Image, Text } from 'react-native'

-class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
+export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
@@ -56,10 +56,10 @@ class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  }
 }

-
+// skip these lines if using Create React Native App
 AppRegistry.registerComponent(
  'IScrolledDownAndWhatHappenedNextShockedMe',
  () => IScrolledDownAndWhatHappenedNextShockedMe);
 ```

-`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a `ListView` instead. So let's [learn about the ListView](docs/using-a-listview.html) next.
+`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a `FlatList` instead. So let's [learn about list views](docs/using-a-listview.html) next.
@@ -1,6 +1,6 @@
 {
  "name": "react-native",
-  "version": "1000.0.0",
+  "version": "0.45.0",
  "description": "A framework for building native apps using React",
  "license": "BSD-3-Clause",
  "repository": {
@@ -107,7 +107,8 @@
    "React",
    "ReactAndroid",
    "ReactCommon",
-    "README.md"
+    "README.md",
+    "third-party-podspecs"
  ],
  "scripts": {
    "test": "jest",
@@ -170,7 +171,7 @@
    "graceful-fs": "^4.1.3",
    "image-size": "^0.3.5",
    "inquirer": "^0.12.0",
-    "jest-haste-map": "19.0.0",
+    "jest-haste-map": "^20.0.4",
    "joi": "^6.6.1",
    "json-stable-stringify": "^1.0.1",
    "json5": "^0.4.0",
@@ -232,4 +233,4 @@
    "shelljs": "0.6.0",
    "sinon": "^2.0.0-pre.2"
  }
-}
+}
@@ -25,7 +25,7 @@
    "graceful-fs": "^4.1.3",
    "image-size": "^0.3.5",
    "imurmurhash": "^0.1.4",
-    "jest-haste-map": "18.0.0",
+    "jest-haste-map": "^20.0.4",
    "joi": "^6.6.1",
    "json-stable-stringify": "^1.0.1",
    "json5": "^0.4.0",
@@ -105,7 +105,7 @@ class DependencyGraph extends EventEmitter {
    return new JestHasteMap({
      extensions: opts.sourceExts.concat(opts.assetExts),
      forceNodeFilesystemAPI: opts.forceNodeFilesystemAPI,
-      ignorePattern: {test: opts.ignoreFilePath},
+      ignorePattern: opts.ignoreFilePath,
      maxWorkers: opts.maxWorkerCount,
      mocksPattern: '',
      name: 'react-native-packager-' + JEST_HASTE_MAP_CACHE_BREAKER,
@@ -5152,7 +5152,7 @@ describe('DependencyGraph', function() {
      });
    });

-    it('should recover from multiple modules with the same name (but this is broken right now)', async () => {
+    it('should recover from multiple modules with the same name', async () => {
      const root = '/root';
      console.warn = jest.fn();
      const filesystem = setMockFileSystem({
@@ -5201,17 +5201,11 @@ describe('DependencyGraph', function() {
        await triggerAndProcessWatchEvent(dgraph, 'change', root + '/b.js');
      }

-      // This verifies that it is broken right now. Instead of throwing it should
-      // return correct results. Once this is fixed in `jest-haste`, remove
-      // the whole try catch and verify results are matching a snapshot.
-      try {
-        await getOrderedDependenciesAsJSON(dgraph, root + '/index.js');
-        throw new Error('expected `getOrderedDependenciesAsJSON` to fail');
-      } catch (error) {
-        if (error.type !== 'UnableToResolveError') {
-          throw error;
-        }
-      }
+      const deps = await getOrderedDependenciesAsJSON(
+        dgraph,
+        root + '/index.js',
+      );
+      expect(deps).toMatchSnapshot();
    });

  });
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependencyGraph file watch updating should recover from multiple modules with the same name 1`] = `
+Array [
+  Object {
+    "dependencies": Array [
+      "a",
+      "b",
+    ],
+    "id": "index",
+    "isAsset": false,
+    "isJSON": false,
+    "isPolyfill": false,
+    "path": "/root/index.js",
+    "resolution": undefined,
+  },
+  Object {
+    "dependencies": Array [],
+    "id": "a",
+    "isAsset": false,
+    "isJSON": false,
+    "isPolyfill": false,
+    "path": "/root/a.js",
+    "resolution": undefined,
+  },
+  Object {
+    "dependencies": Array [],
+    "id": "b",
+    "isAsset": false,
+    "isJSON": false,
+    "isPolyfill": false,
+    "path": "/root/b.js",
+    "resolution": undefined,
+  },
+]
+`;
@@ -15,8 +15,10 @@ var React = require('React');

 const PropTypes = require('prop-types');

-const LatestSDKVersion = '15.0.0';
+const LatestSDKVersion = '16.0.0';
 var ReactNativeToExpoSDKVersionMap = {
+  '0.44': '17.0.0',
+  '0.43': '16.0.0',
  '0.42': '15.0.0',
  '0.41': '14.0.0',
 };
@@ -51,8 +53,12 @@ var SnackPlayer = React.createClass({
  render() {
    var code = encodeURIComponent(this.props.children);
    var params = this.parseParams(this.props.params);
-    var platform = params.platform ? params.platform : 'ios';
-    var name = params.name ? decodeURIComponent(params.name) : 'Example';
+    var platform = params.platform
+      ? params.platform
+      : 'ios';
+    var name = params.name
+      ? decodeURIComponent(params.name)
+      : 'Example';
    var description = params.description
      ? decodeURIComponent(params.description)
      : 'Example usage';
@@ -60,16 +66,22 @@ var SnackPlayer = React.createClass({
    var optionalProps = {};
    var { version } = this.context;
    if (version === 'next') {
-      optionalProps['data-snack-sdk-version'] = LatestSDKVersion;
+      optionalProps[
+        'data-snack-sdk-version'
+      ] = LatestSDKVersion;
    } else {
-      optionalProps['data-snack-sdk-version'] = ReactNativeToExpoSDKVersionMap[
-        version
-      ] || LatestSDKVersion;
+      optionalProps[
+        'data-snack-sdk-version'
+      ] = ReactNativeToExpoSDKVersionMap[version] ||
+        LatestSDKVersion;
    }

    return (
      <div className="snack-player">
-        <div className="mobile-friendly-snack" style={{ display: 'none' }}>
+        <div
+          className="mobile-friendly-snack"
+          style={{ display: 'none' }}
+        >
          <Prism>
            {this.props.children}
          </Prism>
@@ -77,7 +89,8 @@ var SnackPlayer = React.createClass({

        <div
          className="desktop-friendly-snack"
-          style={{ marginTop: 15, marginBottom: 15 }}>
+          style={{ marginTop: 15, marginBottom: 15 }}
+        >
          <div
            data-snack-name={name}
            data-snack-description={description}
@@ -14,7 +14,9 @@ var Site = require('Site');

 module.exports = React.createClass({
  render: function() {
-    var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS || '').split(',');
+    var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS ||
+      '')
+      .split(',');
    var latestVersion = Metadata.config.RN_LATEST_VERSION;

    var versions = [
@@ -24,22 +26,31 @@ module.exports = React.createClass({
        release: null,
        type: 'master',
      },
-    ].concat(availableDocs.map((version) => {
-      const isLatest =  latestVersion === version;
-      const isRC = latestVersion < version;
+    ].concat(
+      availableDocs.map(version => {
+        const isLatest = latestVersion === version;
+        const isRC = latestVersion < version;

-      var title = version;
-      if (isRC) {
-        title += '-RC';
-      }
+        var title = version;
+        if (isRC) {
+          title += '-RC';
+        }

-      return {
-        title: title,
-        path: isLatest ? '/react-native' : '/react-native/releases/' + version,
-        release: 'https://github.com/facebook/react-native/releases/tag/v' + version + '.0' + (isRC ? '-rc.0' : ''),
-        type: isLatest ? 'latest' : (isRC ? 'release-candidate' : 'release'),
-      };
-    }));
+        return {
+          title: title,
+          path: isLatest
+            ? '/react-native'
+            : '/react-native/releases/' + version,
+          release: 'https://github.com/facebook/react-native/releases/tag/v' +
+            version +
+            '.0' +
+            (isRC ? '-rc.0' : ''),
+          type: isLatest
+            ? 'latest'
+            : isRC ? 'release-candidate' : 'release',
+        };
+      })
+    );

    if (!latestVersion) {
      versions = [
@@ -58,9 +69,11 @@ module.exports = React.createClass({
    var masters = versions.filter(function(version) {
      return version.type === 'master';
    });
-    var releaseCandidates = versions.filter(function(version) {
-      return version.type === 'release-candidate';
-    });
+    var releaseCandidates = versions.filter(
+      function(version) {
+        return version.type === 'release-candidate';
+      }
+    );
    var releases = versions.filter(function(version) {
      return version.type === 'release';
    });
@@ -68,66 +81,144 @@ module.exports = React.createClass({
    // Note: Our Algolia DocSearch box supports version-specific queries. If you will be drastically changing the way versions are listed in this page, make sure https://github.com/algolia/docsearch-configs/blob/master/configs/react-native-versions.json is updated accordingly.

    return (
-      <Site section="versions" title="React Native Versions">
-        <section className="content wrap documentationContent nosidebar">
+      <Site
+        section="versions"
+        title="React Native Versions"
+      >
+        <section
+          className="content wrap documentationContent nosidebar"
+        >
          <div className="inner-content">
            <h1>React Native Versions</h1>
-            <p>React Native follows a monthly release train. Every month, a new branch created off master enters the <a href="versions.html#rc">Release Candidate</a> phase, and the previous Release Candidate branch is released and considered <a href="versions.html#latest">stable</a>.</p>
+            <p>
+              React Native follows a monthly release train. Every month, a new branch created off master enters the
+              {' '}
+              <a href="versions.html#rc">
+                Release Candidate
+              </a>
+              {' '}
+              phase, and the previous Release Candidate branch is released and considered
+              {' '}
+              <a href="versions.html#latest">stable</a>
+              .
+            </p>
+            <p>
+              If you have an existing project that uses React Native, read the release notes to learn about new features and fixes. You can follow
+              {' '}
+              <a href="/react-native/docs/upgrading.html">
+                our guide to upgrade your app
+              </a>
+              {' '}
+              to the latest version.
+            </p>
            <a name="latest" />
-            <h3>Current Version (Stable)</h3>
+            <h3>Current version (Stable)</h3>
            <table className="versions">
              <tbody>
-                {latests.map((version) =>
+                {latests.map(version => (
                  <tr>
                    <th>{version.title}</th>
-                    <td><a href={version.path}>Documentation</a></td>
-                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                    <td>
+                      <a href={version.path}>
+                        Documentation
+                      </a>
+                    </td>
+                    <td>
+                      {version.release &&
+                        <a href={version.release}>
+                          Release Notes
+                        </a>}
+                    </td>
                  </tr>
-                )}
+                ))}
              </tbody>
            </table>
-            <p>This is the version that is configured automatically when you run <code>react-native init</code>. We highly recommend using the current version of React Native when starting a new project.</p>
-            <p>If you have an existing project that uses React Native, read the release notes to learn about new features and fixes. You can follow <a href="/react-native/docs/upgrading.html">our guide to upgrade your app</a> to the latest version.</p>
+            <p>
+              This is the version that is configured automatically when you create a new project using
+              {' '}
+              <code>react-native init</code>
+              .
+            </p>
            <a name="rc" />
-            <h3>Pre-release Versions</h3>
+            <h3>Pre-release versions</h3>
            <table className="versions">
              <tbody>
-                {masters.map((version) =>
+                {masters.map(version => (
                  <tr>
                    <th>master</th>
-                    <td><a href={version.path}>Documentation</a></td>
-                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                    <td>
+                      <a href={version.path}>
+                        Documentation
+                      </a>
+                    </td>
+                    <td>
+                      {version.release &&
+                        <a href={version.release}>
+                          Release Notes
+                        </a>}
+                    </td>
                  </tr>
-                )}
-                {releaseCandidates.map((version) =>
+                ))}
+                {releaseCandidates.map(version => (
                  <tr>
                    <th>{version.title}</th>
-                    <td><a href={version.path}>Documentation</a></td>
-                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                    <td>
+                      <a href={version.path}>
+                        Documentation
+                      </a>
+                    </td>
+                    <td>
+                      {version.release &&
+                        <a href={version.release}>
+                          Release Notes
+                        </a>}
+                    </td>
                  </tr>
-                )}
+                ))}
              </tbody>
            </table>
-            <p>For those who live on the bleeding edge. Only recommended if you're actively contributing code to React Native, or if you need to verify how your application behaves in an upcoming release.</p>
+            <p>
+              To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
+            </p>

            <a name="archive" />
-            <h3>Past Versions</h3>
+            <h3>Past versions</h3>
            <table className="versions">
              <tbody>
-                {releases.map((version) =>
+                {releases.map(version => (
                  <tr>
                    <th>{version.title}</th>
-                    <td><a href={version.path}>Documentation</a></td>
-                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                    <td>
+                      <a href={version.path}>
+                        Documentation
+                      </a>
+                    </td>
+                    <td>
+                      {version.release &&
+                        <a href={version.release}>
+                          Release Notes
+                        </a>}
+                    </td>
                  </tr>
-                )}
+                ))}
              </tbody>
            </table>
-            <p>You can find past versions of React Native <a href="https://github.com/facebook/react-native/releases">on GitHub</a>. The release notes can be useful if you would like to learn when a specific feature or fix was released.</p>
-            <p>You can also view the docs for a particular version of React Native by clicking on the Docs link next to the release in this page. You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.</p>
+            <p>
+              You can find past versions of React Native
+              {' '}
+              <a
+                href="https://github.com/facebook/react-native/releases"
+              >
+                on GitHub
+              </a>
+              . The release notes can be useful if you would like to learn when a specific feature or fix was released.
+            </p>
+            <p>
+              You can also view the docs for a particular version of React Native by clicking on the Docs link next to the release in this page. You can come back to this page and switch the version of the docs you're reading at any time by clicking on the version number at the top of the page.
+            </p>
          </div>
        </section>
      </Site>
    );
-  }
+  },
 });
Author	SHA1	Message	Date
Mike Grabowski	1a72de8a6d	[0.45.0] Bump version numbers	2017-06-07 12:53:53 +02:00
Hector Ramos	3fc67a4391	Update ListView Basics to use FlatList, SectionList. Summary: The new list views, FlatList and SectionList, are recommended over ListView. Built website on localhost and verified the guide is rendered correctly. ![screencapture-localhost-8079-react-native-docs-using-a-listview-html-1495834607096](https://cloud.githubusercontent.com/assets/165856/26513523/c5d2913a-4220-11e7-8c8d-68bb12c75736.png) Closes https://github.com/facebook/react-native/pull/14210 Differential Revision: D5149151 Pulled By: hramos fbshipit-source-id: f28f02ee8893c4723c73d610b96ccda51cc31410	2017-06-06 11:20:37 -07:00
Mike Grabowski	446ff94cfe	[0.45.0-rc.3] Bump version numbers	2017-06-06 11:14:08 +02:00
Jean RegisserandMike Grabowski	1ea4002b72	Ship third-party-podspecs in the npm package Summary: Hi, Today I upgraded from RN 0.44 to 0.45.0-rc.0 and noticed I add to include either `CxxBridge` or `BatchedBridge` in the React subspecs in my Podfile to get my project to compile again (https://github.com/facebook/react-native/issues/13010). Adding `BatchedBridge` works fine. However I wanted to try `CxxBridge` as described in https://github.com/facebook/react-native/commit/5aca739cc25949eebc04a0309c2944f92b5b5391 but couldn't do it since the required `third-party-podspecs` folder with `Folly.podspec`, `GLog.podspec` and `DoubleConversion.podspec` hadn't been included in the npm release. So here is the fix for that. It should be included in the next 0.45.0-rc release. Let me know what you think. Closes https://github.com/facebook/react-native/pull/13922 Differential Revision: D5051477 Pulled By: javache fbshipit-source-id: e5c527f1ee9c84734d3e3a3d85ec3f1e5d648bef	2017-06-06 11:07:49 +02:00
Héctor RamosandHector Ramos	be67788759	Clarify pros/cons on different navigation libraries Summary: Closes https://github.com/facebook/react-native/pull/14292 Differential Revision: D5165551 Pulled By: hramos fbshipit-source-id: a50c1c1eb8d4e7de619b73e1baf621dc11e00abc	2017-06-02 10:22:41 -07:00
Mike Grabowski	fa40f5521d	[0.45.0-rc.2] Bump version numbers	2017-05-26 15:52:02 +02:00
Mike GrabowskiandGitHub	d38f18987d	Merge pull request #14208 from rozele/0.45-stable packager: upgrade jest-haste-map version	2017-05-26 15:51:38 +02:00
Jean LauliacandEric Rozell	a35cf5cb32	packager: upgrade jest-haste-map version Summary: This allows us to get the new fix for recovery on duplicate modules. Reviewed By: cpojer Differential Revision: D5128975 fbshipit-source-id: 5a2b60430bbca1806a97798c482af8522366e071	2017-05-26 09:40:30 -04:00
Mike Grabowski	9d479ceb92	[0.45.0-rc.1] Bump version numbers	2017-05-26 09:59:08 +02:00
Mike Grabowski	3ef62a4fe9	Merge branch '0.45-stable' of github.com:facebook/react-native into 0.45-stable	2017-05-26 09:58:54 +02:00
Daniel ZlotinandMike Grabowski	7c3918b747	XMLHttpRequest withCredentials defaults to "true" Summary: see https://github.com/facebook/react-native/issues/14063 Closes https://github.com/facebook/react-native/pull/14064 Differential Revision: D5117654 Pulled By: ericvicenti fbshipit-source-id: 7c3d376f5251e3b28c34383c5b58658e17d6c032	2017-05-26 09:56:35 +02:00
Hector Ramos	671c46a5e5	Additional doc improvements Summary: Mostly cleaning up running on device, integrating with existing apps guides. Closes https://github.com/facebook/react-native/pull/14165 Differential Revision: D5125590 Pulled By: hramos fbshipit-source-id: 9239b41a67ab92789e6e409f2715c2cf179fa5f6	2017-05-25 11:00:44 -07:00
Hector Ramos	b91e04f61f	Expand Getting Started, Debugging, Running on Device guides. Summary: - Clarified PATH instructions. - Expand running on device instructions for iOS. - Add Android production release instructions. - Misc. cleanup. Closes https://github.com/facebook/react-native/pull/14142 Differential Revision: D5116072 Pulled By: hramos fbshipit-source-id: d95274f61a9b26282977d43d3307b726a6b93704	2017-05-25 11:00:35 -07:00
Hector Ramos	ff6189b9be	Update Getting Started, Upgrading for CRNA Summary: Restored the version lag caveat in the Getting Started, and updated the Upgrading guide to account for CRNA. Additionally, updated the release versions page to account for the new release cycle (e.g. release candidates are encouraged). Closes https://github.com/facebook/react-native/pull/14112 Differential Revision: D5112224 Pulled By: hramos fbshipit-source-id: d544c5178484c27f1ed6dee3479bcd94e5e81982	2017-05-25 11:00:05 -07:00
Hector Ramos	55501c3ba8	Add tabs to Getting Started and update Android Studio steps Summary: There are two ways to get started with React Native: using CRNA, or by building native code. The latter requires a set of dependencies that also need to be installed even by people who use CRNA if they have ejected. There needs to be a clear demarcation between the two approaches as well as clear instructions as to which steps are of interest to CRNA using parties or people adding RN to an existing app. Separating the two approaches entirely by using tabs can achieve this purpose. Built and tested the website on Chrome on macOS. Have not yet tested other browsers or OS configurations. ![screencapture-localhost-8079-react-native-docs-getting-started-html-1494974542733](https://cloud.githubusercontent.com/assets/165856/26131374/77258b0c-3a4e-11e7-9a17-074610ca33d1.png) ![screencapture-localhost-8079-react-native-docs-getting-started-html-1494974580882](https://cloud.githubusercontent.com/assets/165856/26131370/73806990-3a4e-11e7-9e67-73c519b050da.png) This is a work in progress. Feedback is appreciated. I am not yet happy with the different sets of tabs/buttons, for example. Closes https://github.com/facebook/react-native/pull/14005 Differential Revision: D5096426 Pulled By: hramos fbshipit-source-id: cdbf19b148ec87f2f2dfdced345084d0bbff4c26	2017-05-25 10:59:47 -07:00
Adam PerryandHector Ramos	2f9ece4e63	Update examples in docs and address version lag of CRNA Summary: cc hramos Pretty sure I've hit all of the places where AppRegistry is called in CRNA-pastable examples. Let me know whether you think we need to approach the version lag differently, I figure a caveat is as natural a place to call it out as any. If you end up finding anything else that needs tweaking before cherry picking, I'm happy to push that up here too. Closes https://github.com/facebook/react-native/pull/13744 Differential Revision: D5071038 Pulled By: hramos fbshipit-source-id: 4a4a6f2a73079aca627f17d75a4e4b395ecbd4a8	2017-05-25 10:59:20 -07:00
Héctor RamosandHector Ramos	5c6a168a28	Updated Android Studio steps Summary: Clarified some steps unique to the Windows installer. Closes https://github.com/facebook/react-native/pull/13983 Differential Revision: D5065884 Pulled By: hramos fbshipit-source-id: ab47ad7e7fcf10f8b44ab209807d661c465b76a3	2017-05-25 10:58:39 -07:00
Mike Grabowski	65683a6940	[0.45.0-rc.0] Bump version numbers	2017-05-11 12:00:55 +02:00