Add missing PerfUtil image.

Summary: Fixes #14202. Closes https://github.com/facebook/react-native/pull/14211 Differential Revision: D5141377 Pulled By: hramos fbshipit-source-id: 9a1b76e94e8b775e84988f1b4bb018e01db8fdb2
[0.45.1] Bump version numbers
2025-11-01 09:14:26 +00:00 · 2017-07-10 15:25:32 -07:00 · 2017-06-09 14:47:45 -07:00 · 2017-06-09 14:47:18 -07:00 · 2017-06-09 14:47:12 -07:00 · 2017-06-09 14:47:05 -07:00
82 changed files with 1954 additions and 877 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.1
 GROUP=com.facebook.react

 POM_NAME=ReactNative
@@ -5,7 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/accessibility.html
 next: timers
-previous: debugging
+previous: animations
 ---

 ## Native App Accessibility (iOS and Android)
@@ -153,11 +153,11 @@ Start by following the `Point Gradle to your Android SDK` section of this page.
 ./gradlew ReactAndroid:installArchives
 ```

-This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout. 
+This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout.

 ## Testing

-If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Testing](docs/testing.html).
+If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](docs/testing.html).

 ## Troubleshooting

@@ -4,8 +4,8 @@ title: Animations
 layout: docs
 category: Guides
 permalink: docs/animations.html
-next: navigation
-previous: handling-touches
+next: accessibility
+previous: images
 ---

 Animations are very important to create a great user experience.
@@ -2,7 +2,7 @@
 id: building-for-apple-tv
 title: Building For Apple TV
 layout: docs
-category: Guides (Apple TV)
+category: Guides (iOS)
 permalink: docs/building-for-apple-tv.html
 banner: ejected
 next: native-modules-android
@@ -84,12 +84,10 @@ class Game2048 extends React.Component {

 ```

- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views.  The animations can be disabled or adjusted with new optional view properties. 
+- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views.  The animations can be disabled or adjusted with new optional view properties.

 - *Back navigation with the TV remote menu button*: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote.

 - *Known issues*:

  - [ListView scrolling](https://github.com/facebook/react-native/issues/12793).  The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components.  For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944).
-
-
@@ -1,11 +1,11 @@
 ---
 id: colors
-title: Colors
+title: Color Reference
 layout: docs
 category: Guides
 permalink: docs/colors.html
-next: platform-specific-code
-previous: images
+next: integration-with-existing-apps
+previous: direct-manipulation
 ---

 Components in React Native are [styled using JavaScript](docs/styles.html). Color properties usually match how [CSS works on the web](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
@@ -0,0 +1,235 @@
+---
+id: components
+title: Components and APIs
+layout: docs
+category: Guides
+permalink: docs/components-and-apis.html
+next: platform-specific-code
+previous: more-resources
+---
+
+React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
+
+- [Basic Components](docs/components-and-apis.html#basic-components)
+- [User Interface](docs/components-and-apis.html#user-interface)
+- [Lists Views](docs/components-and-apis.html#lists-views)
+- [iOS-specific](docs/components-and-apis.html#ios-components-and-apis)
+- [Android-specific](docs/components-and-apis.html#android-components-and-apis)
+- [Others](docs/components-and-apis.html#others)
+
+You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning [react-native](https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal), or check out [Awesome React Native](http://www.awesome-react-native.com/) for a curated list.
+
+## Basic Components
+
+Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
+
+<div class="component-grid component-grid-border">
+  <div class="component">
+    <h3><a href="docs/view.html">View</a></h3>
+    <p>The most fundamental component for building a UI.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/text.html">Text</a></h3>
+    <p>A component for displaying text.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/image.html">Image</a></h3>
+    <p>A component for displaying images.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/textinput.html">TextInput</a></h3>
+    <p>A component for inputting text into the app via a keyboard.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/scrollview.html">ScrollView</a></h3>
+    <p>Provides a scrolling container that can host multiple components and views.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/button.html">Button</a></h3>
+    <p>A basic button component for handling touches that should render nicely on any platform.</p>
+  </div>
+</div>
+
+## User Interface
+
+Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
+
+<div class="component-grid component-grid-border">
+  <div class="component">
+    <h3><a href="docs/picker.html">Picker</a></h3>
+    <p>Renders the native picker component on iOS and Android.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/slider.html">Slider</a></h3>
+    <p>A component used to select a single value from a range of values.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/switch.html">Switch</a></h3>
+    <p>Renders a boolean input.</p>
+  </div>
+</div>
+
+## List Views
+
+Unlike the more generic `ScrollView`, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.
+
+<div class="component-grid component-grid-border">
+  <div class="component">
+    <h3><a href="docs/flatlist.html">FlatList</a></h3>
+    <p>A component for rendering performant scrollable lists.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/sectionlist.html">SectionList</a></h3>
+    <p>Like <code>FlatList</code>, but for sectioned lists.</p>
+  </div>
+</div>
+
+## iOS Components and APIs
+
+Many of the following components provide wrappers for commonly used UIKit classes.
+
+<div class="component-grid component-grid-border">
+  <div class="component">
+    <h3><a href="docs/actionsheetios.html">ActionSheetIOS</a></h3>
+    <p>API to display an iOS action sheet or share sheet.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/adsupportios.html">AdSupportIOS</a></h3>
+    <p>API to access the "advertising identifier" on iOS.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/alertios.html">AlertIOS</a></h3>
+    <p>Create an iOS alert dialog with a message or create a prompt for user input.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/datepickerios.html">DatePickerIOS</a></h3>
+    <p>Renders a date/time picker (selector) on iOS.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/imagepickerios.html">ImagePickerIOS</a></h3>
+    <p>Renders a image picker on iOS.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/navigatorios.html">NavigatorIOS</a></h3>
+    <p>A wrapper around <code>UINavigationController</code>, enabling you to implement a navigation stack.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/progressviewios.html">ProgressViewIOS</a></h3>
+    <p>Renders a <code>UIProgressView</a></code> on iOS.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/pushnotificationios.html">PushNotificationIOS</a></h3>
+    <p>Handle push notifications for your app, including permission handling and icon badge number.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></h3>
+    <p>Renders a <code>UISegmentedControl</code> on iOS.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/tabbarios.html">TabBarIOS</a></h3>
+    <p>Renders a <code>UITabViewController</code> on iOS. Use with <a href="docs/tabbarios-item.html">TabBarIOS.Item</a>.</p>
+  </div>
+</div>
+
+## Android Components and APIs
+
+Many of the following components provide wrappers for commonly used Android classes.
+
+<div class="component-grid component-grid-border">
+  <div class="component">
+    <h3><a href="docs/backhandler.html">BackHandler</a></h3>
+    <p>Detect hardware button presses for back navigation.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/datepickerandroid.html">DatePickerAndroid</a></h3>
+    <p>Opens the standard Android date picker dialog.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></h3>
+    <p>Renders a <code>DrawerLayout</code> on Android.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/permissionsandroid.html">PermissionsAndroid</a></h3>
+    <p>Provides access to the permissions model introduced in Android M.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/progressbarandroid.html">ProgressBarAndroid</a></h3>
+    <p>Renders a <code>ProgressBar</code> on Android.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/timepickerandroid.html">TimePickerAndroid</a></h3>
+    <p>Opens the standard Android time picker dialog.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/toastandroid.html">ToastAndroid</a></h3>
+    <p>Create an Android Toast alert.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/toolbarandroid.html">ToolbarAndroid</a></h3>
+    <p>Renders a <code>Toolbar</code> on Android.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/viewpagerandroid.html">ViewPagerAndroid</a></h3>
+    <p>Container that allows to flip left and right between child views.</p>
+  </div>
+</div>
+
+
+## Others
+
+These components may come in handy for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left.
+
+<div class="component-grid">
+  <div class="component">
+    <h3><a href="docs/activityindicator.html">ActivityIndicator</a></h3>
+    <p>Displays a circular loading indicator.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/alert.html">Alert</a></h3>
+    <p>Launches an alert dialog with the specified title and message.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/cameraroll.html">CameraRoll</a></h3>
+    <p>Provides access to the local camera roll / gallery.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/clipboard.html">Clipboard</a></h3>
+    <p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/dimensions.html">Dimensions</a></h3>
+    <p>Provides an interface for getting device dimensions.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></h3>
+    <p>Provides a view that moves out of the way of the virtual keyboard automatically.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/linking.html">Linking</a></h3>
+    <p>Provides a general interface to interact with both incoming and outgoing app links.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/modal.html">Modal</a></h3>
+    <p>Provides a simple way to present content above an enclosing view.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/pixelratio.html">PixelRatio</a></h3>
+    <p>Provides access to the device pixel density.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/refreshcontrol.html">RefreshControl</a></h3>
+    <p>This component is used inside a <code>ScrollView</code> to add pull to refresh functionality.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/statusbar.html">StatusBar</a></h3>
+    <p>Component to control the app status bar.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/stylesheet.html">StyleSheet</a></h3>
+    <p>Provides an abstraction layer similar to CSS stylesheets.</p>
+  </div>
+  <div class="component">
+    <h3><a href="docs/webview.html">WebView</a></h3>
+    <p>A component that renders web content in a native view.</p>
+  </div>
+</div>
@@ -4,8 +4,8 @@ title: Debugging
 layout: docs
 category: Guides
 permalink: docs/debugging.html
-next: accessibility
-previous: platform-specific-code
+next: performance
+previous: timers
 ---

 ## Enabling Keyboard Shortcuts
@@ -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.
@@ -4,7 +4,7 @@ title: Direct Manipulation
 layout: docs
 category: Guides
 permalink: docs/direct-manipulation.html
-next: performance
+next: colors
 previous: javascript-environment
 ---

@@ -227,3 +227,43 @@ By [intelligently applying
 you can avoid the unnecessary overhead involved in reconciling unchanged
 component subtrees, to the point where it may be performant enough to
 use `setState` instead of `setNativeProps`.
+
+## Other native methods
+
+The methods described here are available on most of the default components provided by React Native. Note, however, that they are *not* available on composite components that aren't directly backed by a native view. This will generally include most components that you define in your own app.
+
+### measure(callback)
+
+Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments:
+
+* x
+* y
+* width
+* height
+* pageX
+* pageY
+
+Note that these measurements are not available until after the rendering has been completed in native. If you need the measurements as soon as possible, consider using the [`onLayout` prop](docs/view.html#onlayout) instead.
+
+### measureInWindow(callback)
+
+Determines the location of the given view in the window and returns the values via an async callback. If the React root view is embedded in another native view, this will give you the absolute coordinates. If successful, the callback will be called with the following arguments:
+
+* x
+* y
+* width
+* height
+
+### measureLayout(relativeToNativeNode, onSuccess, onFail)
+
+Like `measure()`, but measures the view relative an ancestor, specified as `relativeToNativeNode`. This means that the returned x, y are relative to the origin x, y of the ancestor view.
+
+As always, to obtain a native node handle for a component, you can use `ReactNative.findNodeHandle(component)`.
+
+### focus()
+
+Requests focus for the given input or view. The exact behavior triggered will depend on the platform and type of view.
+
+### blur()
+
+Removes focus from an input or view. This is the opposite of `focus()`.
@@ -4,7 +4,7 @@ title: Gesture Responder System
 layout: docs
 category: Guides
 permalink: docs/gesture-responder-system.html
-next: testing
+next: javascript-environment
 previous: performance
 ---

@@ -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');
 }
@@ -4,7 +4,7 @@ title: Handling Text Input
 layout: docs
 category: The Basics
 permalink: docs/handling-text-input.html
-next: using-a-scrollview
+next: handling-touches
 previous: flexbox
 ---

@@ -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);
 ```

@@ -2,41 +2,97 @@
 id: handling-touches
 title: Handling Touches
 layout: docs
-category: Guides
+category: The Basics
 permalink: docs/handling-touches.html
-next: animations
-previous: more-resources
+next: using-a-scrollview
+previous: handling-text-input
 ---

-Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.
+Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

-React Native provides components to handle common gestures, such as taps and swipes, as well as a comprehensive [gesture responder system](docs/gesture-responder-system.html) to allow for more advanced gesture recognition.
+## Displaying a basic button

-## Tappable Components
-
-You can use "Touchable" components when you want to capture a tapping gesture. They take a function through the `onPress` props which will be called when the touch begins and ends within the bounds of the component.
-
-Example:
+[Button](docs/button.html) provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

 ```javascript
-class MyButton extends Component {
+<Button
+  onPress={() => { Alert.alert('You tapped the button!')}}
+  title="Press Me"
+/>
+```
+
+This will render a blue label on iOS, and a blue rounded rectangle with white text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.
+
+![](img/Button.png)
+
+Go ahead and play around with the `Button` component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right, then click on "Tap to Play" to preview the app.
+
+```SnackPlayer?name=Button%20Basics
+import React, { Component } from 'react';
+import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';
+
+export default class ButtonBasics extends Component {
  _onPressButton() {
-    console.log("You tapped the button!");
+    Alert.alert('You tapped the button!')
  }

  render() {
    return (
-      <TouchableHighlight onPress={this._onPressButton}>
-        <Text>Button</Text>
-      </TouchableHighlight>
+      <View style={styles.container}>
+        <View style={styles.buttonContainer}>
+          <Button
+            onPress={this._onPressButton}
+            title="Press Me"
+          />
+        </View>
+        <View style={styles.buttonContainer}>
+          <Button
+            onPress={this._onPressButton}
+            title="Press Me"
+            color="#841584"
+          />
+        </View>
+        <View style={styles.alternativeLayoutButtonContainer}>
+          <Button
+            onPress={this._onPressButton}
+            title="This looks great!"
+          />
+          <Button
+            onPress={this._onPressButton}
+            title="OK!"
+            color="#841584"
+          />
+        </View>
+      </View>
    );
  }
 }
+
+const styles = StyleSheet.create({
+  container: {
+   flex: 1,
+   justifyContent: 'center',
+  },
+  buttonContainer: {
+    margin: 20
+  },
+  alternativeLayoutButtonContainer: {
+    margin: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  }
+})
+
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);
 ```

-Tappable components should provide feedback that show the user what is handling their touch, and what will happen when they lift their finger. The user should also be able to cancel a tap by dragging their finger away.

-Which component you use will depend on what kind of feedback you want to provide:
+## Touchables
+
+If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.
+
+Which "Touchable" component you use will depend on what kind of feedback you want to provide:

 - Generally, you can use [**TouchableHighlight**](docs/touchablehighlight.html) anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.

@@ -46,22 +102,82 @@ Which component you use will depend on what kind of feedback you want to provide

 - If you need to handle a tap gesture but you don't want any feedback to be displayed, use [**TouchableWithoutFeedback**](docs/touchablewithoutfeedback.html).

-### Long presses
+In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the `onLongPress` props of any of the "Touchable" components.

-In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the `onLongPress` props of any of the touchable components listed above.
+Let's see all of these in action:

-## Scrolling lists and swiping views
+```SnackPlayer?platform=android&name=Touchables
+import React, { Component } from 'react';
+import { Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

-A common pattern to many mobile apps is the scrollable list of items. Users interact with these using panning or swiping gestures. The [ScrollView](docs/using-a-scrollview.html) component displays a list of items that can be scrolled using these gestures.
+export default class Touchables extends Component {
+  _onPressButton() {
+    Alert.alert('You tapped the button!')
+  }

-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.
+  _onLongPressButton() {
+    Alert.alert('You long-pressed the button!')
+  }

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

-### Pinch-to-zoom
+  render() {
+    return (
+      <View style={styles.container}>
+        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>TouchableHighlight</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableOpacity onPress={this._onPressButton}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>TouchableOpacity</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableNativeFeedback
+            onPress={this._onPressButton}
+            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
+          </View>
+        </TouchableNativeFeedback>
+        <TouchableWithoutFeedback
+            onPress={this._onPressButton}
+            >
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
+          <View style={styles.button}>
+            <Text style={styles.buttonText}>Touchable with Long Press</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+}

-A ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out.
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 60,
+    alignItems: 'center'
+  },
+  button: {
+    marginBottom: 30,
+    width: 260,
+    alignItems: 'center',
+    backgroundColor: '#2196F3'
+  },
+  buttonText: {
+    padding: 20,
+    color: 'white'
+  }
+})

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

-If you want to allow a user to drag a view around the screen, or you want to implement your own custom pan/drag gesture, take a look at the [PanResponder](docs/panresponder.html) API or the [gesture responder system docs](docs/gesture-responder-system.html).
+## Scrolling lists, swiping pages, and pinch-to-zoom
+
+Another gesture commonly used in mobile apps is the swipe or pan. This gesture allows the user to scroll through a list of items, or swipe through pages of content. In order to handle these and other gestures, we'll learn [how to use a ScrollView](docs/using-a-scrollview.html) next.
@@ -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);
 ```

@@ -4,7 +4,7 @@ title: Images
 layout: docs
 category: Guides
 permalink: docs/images.html
-next:  colors
+next:  animations
 previous: navigation
 ---

@@ -96,9 +96,9 @@ Many of the images you will display in your app will not be available at compile
 ```

 ### Network Requests for Images
-  
+
  If you would like to set such things as the HTTP-Verb, Headers or a Body along with the image request, you may do this by defining these properties on the source object:
-  
+
  ```javascript
  <Image source={{
      uri: 'https://facebook.github.io/react/img/logo_og.png',
@@ -6,105 +6,179 @@ category: Guides
 permalink: docs/integration-with-existing-apps.html
 banner: ejected
 next: running-on-device
-previous: testing
+previous: colors
 ---

-<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!
@@ -5,7 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/javascript-environment.html
 next: direct-manipulation
-previous: timers
+previous: gesture-responder-system
 ---

 ## JavaScript Runtime
@@ -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);
 ```

@@ -4,8 +4,8 @@ title: More Resources
 layout: docs
 category: The Basics
 permalink: docs/more-resources.html
-next: handling-touches
-previous: networking
+next: components
+previous: network
 ---

 If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out.
@@ -16,7 +16,7 @@ If you're using React Native, you probably already know about [React](https://fa

 One common question is how to handle the "state" of your React Native application. The most popular library for this is [Redux](http://redux.js.org/). Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice [series of videos](https://egghead.io/courses/getting-started-with-redux) explaining it.

-If you're looking for a library that does a specific thing, check out [Awesome React Native](https://github.com/jondot/awesome-react-native), a curated list of components that also has demos, articles, and other stuff.
+If you're looking for a library that does a specific thing, check out [Awesome React Native](http://www.awesome-react-native.com/), a curated list of components that also has demos, articles, and other stuff.

 ## Example Apps

@@ -34,8 +34,6 @@ The folks who built the app for Facebook's F8 conference in 2016 also [open-sour

 [Expo](https://docs.expo.io) is a development environment plus application that focuses on letting you build React Native apps in the Expo development environment, without ever touching Xcode or Android Studio. If you wish React Native was even more JavaScripty and webby, check out Expo.

-[Deco](https://www.decosoftware.com/) is an all-in-one development environment specifically designed for React Native. It can automatically set up a new project, search for open source components, and insert them. You can also tweak your app graphically in real time. Check it out if you use macOS.
-
 ## Where React Native People Hang Out

 The [React Native Community](https://www.facebook.com/groups/react.native.community) Facebook group has thousands of developers, and it's pretty active. Come there to show off your project, or ask how other people solved similar problems.
@@ -46,4 +44,4 @@ The [React Twitter account](https://twitter.com/reactjs) covers both React and R

 There are a lot of [React Native Meetups](http://www.meetup.com/topics/react-native/) that happen around the world. Often there is React Native content in React meetups as well.

-Sometimes we have React conferences. We posted the [videos from React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY), and we'll probably have more conferences in the future, too. Stay tuned.
+Sometimes we have React conferences. We posted the [videos from React.js Conf 2017](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) and [React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY), and we'll probably have more conferences in the future, too. Stay tuned. You can also find a list of dedicated React Native conferences [here](http://www.awesome-react-native.com/#conferences).
@@ -6,7 +6,7 @@ category: Guides (Android)
 permalink: docs/native-modules-android.html
 banner: ejected
 next: native-components-android
-previous: communication-ios
+previous: building-for-apple-tv
 ---

 Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe you want to reuse some existing Java code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions.
@@ -1,18 +1,21 @@
 ---
 id: navigation
-title: Navigation
+title: Navigating Between Screens
 layout: docs
 category: Guides
 permalink: docs/navigation.html
 next: images
-previous: animations
+previous: platform-specific-code
 ---

-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).
+Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator.

-If you are only targeting iOS and would like to stick to the native look and feel, check out [NavigatorIOS](docs/navigation.html#navigatorios).
+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'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'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'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 +69,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)

@@ -160,7 +160,6 @@ var ws = new WebSocket('ws://host.com/path');

 ws.onopen = () => {
  // connection opened
-
  ws.send('something'); // send a message
 };

@@ -179,3 +178,7 @@ ws.onclose = (e) => {
  console.log(e.code, e.reason);
 };
 ```
+
+## High Five!
+
+If you've gotten here by reading linearly through the tutorial, then you are a pretty impressive human being. Congratulations. Next, you might want to check out [all the cool stuff the community does with React Native](docs/more-resources.html).
@@ -5,7 +5,7 @@ layout: docs
 category: Guides
 permalink: docs/performance.html
 next: gesture-responder-system
-previous: direct-manipulation
+previous: debugging
 ---

 A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps.
@@ -4,8 +4,8 @@ title: Platform Specific Code
 layout: docs
 category: Guides
 permalink: docs/platform-specific-code.html
-next: debugging
-previous: colors
+next: navigation
+previous: components
 ---

 When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.
@@ -72,8 +72,8 @@ On Android, the `Platform` module can also be used to detect the version of the
 ```javascript
 import { Platform } from 'react-native';

-if(Platform.Version === 21){
-  console.log('Running on Lollipop!');
+if (Platform.Version === 25) {
+  console.log('Running on Nougat!');
 }
 ```

@@ -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,9 @@ 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.
+
+If you used Create React Native App to set up your project, you can preview your app on a device by scanning the QR code with the Expo app. In order to build and run your app on a device, you will need to eject and install the native code dependencies from the [Getting Started guide](docs/getting-started.html).

 <div class="toggler">
  <style>
@@ -39,18 +41,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 +63,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 +179,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 +195,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 +241,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);
 ```

@@ -1,17 +1,15 @@
 ---
 id: testing
-title: Testing
+title: Running Tests and Contributing
 layout: docs
 category: Guides
 permalink: docs/testing.html
 next: understanding-cli
-previous: gesture-responder-system
+previous: upgrading
 ---

 This document is about running tests on React Native itself. If you're interested in testing a React Native app, check out the [React Native Tutorial](http://facebook.github.io/jest/docs/tutorial-react-native.html) on the Jest website.

-## Running Tests and Contributing
-
 The React Native repo has several tests you can run to verify you haven't caused a regression with your PR.  These tests are run with the [Travis](https://travis-ci.org/facebook/react-native/builds) and [CircleCI](https://circleci.com/gh/facebook/react-native) continuous integration systems, which will automatically annotate pull requests with the test results.

 Whenever you are fixing a bug or adding new functionality to React Native, you should add a test that covers it. Depending on the change you're making, there are different types of tests that may be appropriate.
@@ -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);
 ```

@@ -4,7 +4,7 @@ title: Timers
 layout: docs
 category: Guides
 permalink: docs/timers.html
-next: javascript-environment
+next: debugging
 previous: accessibility
 ---

@@ -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,26 +29,33 @@ 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.
+If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `App.js`, `index.ios.js`, or `index.android.js` file to create a real app on your local machine.

 ## What's going on here?

-Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.
+Some of the things in here might not look like JavaScript to you. Don't panic. _This is the future_.

-First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `from`, `class`, `extends`, and the `() =>` syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/docs/learn-es2015/) has a good overview of ES2015 features.
+First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `from`, `class`, `extends`, and the `() =>` syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/learn-es2015/) has a good overview of ES2015 features.

 The other unusual thing in this code example is `<Text>Hello world!</Text>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>`
 is a built-in component that just displays some text.

-## Component and AppRegistry
+## Components

-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.
+So this code is defining `HelloWorldApp`, a new `Component`. 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.
+<div class="banner-crna-ejected">
+  <h3>Projects With Native Code Only</h3>
+  <p>
+    In the particular example above, <code>HelloWorldApp</code> is registered with the <code>AppRegistry</code>. The <code>AppRegistry</code> just tells React Native which component is the root one for the whole application. It's included in these examples so you can paste the whole thing into your <code>index.ios.js</code> or <code>index.android.js</code> 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 <code>AppRegistry</code> in your code.
+  </p>
+</div>

-## This App Doesn't Do Very Much
+
+## This app doesn't do very much

 Good point. To make components do more interesting things, you need to [learn about Props](docs/props.html).
@@ -5,8 +5,8 @@ layout: docs
 category: Guides
 permalink: docs/understanding-cli.html
 banner: ejected
-next: integration-with-existing-apps
-previous: running-on-device
+next: native-modules-ios
+previous: testing
 ---

 Though you may have installed the `react-native-cli` via npm as a separate module, it is a shell for accessing the CLI embedded
@@ -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
+next: testing
+previous: running-on-device
 ---

-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, similar to `UITableView`s on iOS, then a [SectionList](docs/sectionlist.html) 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).
@@ -5,10 +5,10 @@ layout: docs
 category: The Basics
 permalink: docs/using-a-scrollview.html
 next: using-a-listview
-previous: handling-text-input
+previous: handling-touches
 ---

-The [`ScrollView`](docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).
+The [ScrollView](docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).

 This example creates a vertical `ScrollView` with both images and text mixed together.

@@ -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,14 @@ 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.
+ScrollViews 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 ScrollView with a single item can be used to allow the user to zoom content. Set up the `maximumZoomScale` and `minimumZoomScale` props and your user will be able to use pinch and expand gestures to zoom in and out.
+
+The 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,111 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @flow
- */
-'use strict';
-
-const path = require('path');
-const flatten = require('lodash').flatten;
-const android = require('./android');
-const findAssets = require('./findAssets');
-const ios = require('./ios');
-const windows = require('./windows');
-const wrapCommands = require('./wrapCommands');
-const findPlugins = require('./findPlugins');
-const findSymlinksPaths = require('../util/findSymlinksPaths');
-
-function getProjectPath() {
-  if (__dirname.match(/node_modules[\/\\]react-native[\/\\]local-cli[\/\\]core$/)) {
-    // Packager is running from node_modules.
-    // This is the default case for all projects created using 'react-native init'.
-    return path.resolve(__dirname, '../../../..');
-  } else if (__dirname.match(/Pods[\/\\]React[\/\\]packager$/)) {
-    // React Native was installed using CocoaPods.
-    return path.resolve(__dirname, '../../../..');
-  }
-  return path.resolve(__dirname, '../..');
-}
-
-const getRNPMConfig = (folder) =>
-  // $FlowFixMe non-literal require
-  require(path.join(folder, './package.json')).rnpm || {};
-
-const attachPackage = (command, pkg) => Array.isArray(command)
-  ? command.map(cmd => attachPackage(cmd, pkg))
-  : { ...command, pkg };
-
-const resolveSymlink = (roots) =>
-  roots.concat(
-    findSymlinksPaths(
-      path.join(getProjectPath(), 'node_modules'),
-      roots
-    )
-  );
-
-/**
- * Default configuration for the CLI.
- *
- * If you need to override any of this functions do so by defining the file
- * `rn-cli.config.js` on the root of your project with the functions you need
- * to tweak.
- */
-const config = {
-  getProjectCommands() {
-    const appRoot = process.cwd();
-    const plugins = findPlugins([appRoot])
-      .map(pathToCommands => {
-        const name = pathToCommands.split(path.sep)[0];
-
-        return attachPackage(
-          // $FlowFixMe non-literal require
-          require(path.join(appRoot, 'node_modules', pathToCommands)),
-          // $FlowFixMe non-literal require
-          require(path.join(appRoot, 'node_modules', name, 'package.json'))
-        );
-      });
-
-    return flatten(plugins);
-  },
-  getProjectConfig() {
-    const folder = process.cwd();
-    const rnpm = getRNPMConfig(folder);
-
-    return Object.assign({}, rnpm, {
-      ios: ios.projectConfig(folder, rnpm.ios || {}),
-      android: android.projectConfig(folder, rnpm.android || {}),
-      windows: windows.projectConfig(folder, rnpm.windows || {}),
-      assets: findAssets(folder, rnpm.assets),
-    });
-  },
-  getDependencyConfig(packageName: string) {
-    const folder = path.join(process.cwd(), 'node_modules', packageName);
-    const rnpm = getRNPMConfig(
-      path.join(process.cwd(), 'node_modules', packageName)
-    );
-
-    return Object.assign({}, rnpm, {
-      ios: ios.dependencyConfig(folder, rnpm.ios || {}),
-      android: android.dependencyConfig(folder, rnpm.android || {}),
-      windows: windows.dependencyConfig(folder, rnpm.windows || {}),
-      assets: findAssets(folder, rnpm.assets),
-      commands: wrapCommands(rnpm.commands),
-      params: rnpm.params || [],
-    });
-  },
-  getProjectRoots() {
-    const root = process.env.REACT_NATIVE_APP_ROOT;
-    if (root) {
-      return resolveSymlink([path.resolve(root)]);
-    }
-
-    return resolveSymlink([getProjectPath()]);
-  },
-};
-
-module.exports = config;
@@ -10,9 +10,15 @@
 */
 'use strict';

+const android = require('./android');
 const Config = require('../util/Config');
+const findPlugins = require('./findPlugins');
+const findAssets = require('./findAssets');
+const ios = require('./ios');
+const windows = require('./windows');
+const wrapCommands = require('./wrapCommands');

-const defaultConfig = require('./default.config');
+const flatten = require('lodash').flatten;
 const minimist = require('minimist');
 const path = require('path');

@@ -35,6 +41,61 @@ export type RNConfig = {
  getDependencyConfig(pkgName: string): Object,
 };

+const getRNPMConfig = (folder) =>
+  // $FlowFixMe non-literal require
+  require(path.join(folder, './package.json')).rnpm || {};
+
+const attachPackage = (command, pkg) => Array.isArray(command)
+  ? command.map(cmd => attachPackage(cmd, pkg))
+  : { ...command, pkg };
+
+const defaultRNConfig = {
+  getProjectCommands(): Array<CommandT> {
+    const appRoot = process.cwd();
+    const plugins = findPlugins([appRoot])
+      .map(pathToCommands => {
+        const name = pathToCommands.split(path.sep)[0];
+
+        return attachPackage(
+          // $FlowFixMe non-literal require
+          require(path.join(appRoot, 'node_modules', pathToCommands)),
+          // $FlowFixMe non-literal require
+          require(path.join(appRoot, 'node_modules', name, 'package.json'))
+        );
+      });
+
+    return flatten(plugins);
+  },
+
+  getProjectConfig(): Object {
+    const folder = process.cwd();
+    const rnpm = getRNPMConfig(folder);
+
+    return Object.assign({}, rnpm, {
+      ios: ios.projectConfig(folder, rnpm.ios || {}),
+      android: android.projectConfig(folder, rnpm.android || {}),
+      windows: windows.projectConfig(folder, rnpm.windows || {}),
+      assets: findAssets(folder, rnpm.assets),
+    });
+  },
+
+  getDependencyConfig(packageName: string) {
+    const folder = path.join(process.cwd(), 'node_modules', packageName);
+    const rnpm = getRNPMConfig(
+      path.join(process.cwd(), 'node_modules', packageName)
+    );
+
+    return Object.assign({}, rnpm, {
+      ios: ios.dependencyConfig(folder, rnpm.ios || {}),
+      android: android.dependencyConfig(folder, rnpm.android || {}),
+      windows: windows.dependencyConfig(folder, rnpm.windows || {}),
+      assets: findAssets(folder, rnpm.assets),
+      commands: wrapCommands(rnpm.commands),
+      params: rnpm.params || [],
+    });
+  },
+};
+
 /**
 * Loads the CLI configuration
 */
@@ -44,7 +105,7 @@ function getCliConfig(): RNConfig {
    ? Config.loadFile(path.resolve(__dirname, cliArgs.config))
    : Config.findOptional(__dirname);

-  return {...defaultConfig, ...config};
+  return {...defaultRNConfig, ...config};
 }

 module.exports = getCliConfig();
@@ -10,6 +10,8 @@
 */
 'use strict';

+const findSymlinksPaths = require('./findSymlinksPaths');
+
 const blacklist = require('../../packager/blacklist');
 const fs = require('fs');
 const invariant = require('fbjs/lib/invariant');
@@ -93,12 +95,38 @@ export type ConfigT = {
  transformVariants: () => TransformVariants,
 };

+function getProjectPath() {
+  if (__dirname.match(/node_modules[\/\\]react-native[\/\\]local-cli[\/\\]util$/)) {
+    // Packager is running from node_modules.
+    // This is the default case for all projects created using 'react-native init'.
+    return path.resolve(__dirname, '../../../..');
+  } else if (__dirname.match(/Pods[\/\\]React[\/\\]packager$/)) {
+    // React Native was installed using CocoaPods.
+    return path.resolve(__dirname, '../../../..');
+  }
+  return path.resolve(__dirname, '../..');
+}
+
+const resolveSymlink = (roots) =>
+  roots.concat(
+    findSymlinksPaths(
+      path.join(getProjectPath(), 'node_modules'),
+      roots
+    )
+  );
+
 const defaultConfig: ConfigT = {
  extraNodeModules: Object.create(null),
  getAssetExts: () => [],
  getBlacklistRE: () => blacklist(),
  getPlatforms: () => [],
-  getProjectRoots: () => [process.cwd()],
+  getProjectRoots: () => {
+    const root = process.env.REACT_NATIVE_APP_ROOT;
+    if (root) {
+      return resolveSymlink([path.resolve(root)]);
+    }
+    return resolveSymlink([getProjectPath()]);
+  },
  getProvidesModuleNodeModules: () => providesModuleNodeModules.slice(),
  getSourceExts: () => [],
  getTransformModulePath: () => path.resolve(__dirname, '../../packager/transformer'),
@@ -1,6 +1,6 @@
 {
  "name": "react-native",
-  "version": "1000.0.0",
+  "version": "0.45.1",
  "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}
@@ -0,0 +1,138 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+c+git+java+json+objectivec+powershell+jsx+swift */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
@@ -1699,6 +1699,51 @@ input#algolia-doc-search:focus {
 .buttons-unit.downloads {
  margin: 30px 0; }

+.component-grid {
+  max-width: 800px;
+}
+
+.component {
+  border: 1px solid #05A5D1;
+  border-radius: 3px;
+  margin: 0 auto 10px;
+  width: 100%;
+  display: inline-block;
+  background-color: white;
+}
+
+.component h3 {
+  font-size: 16px;
+  margin: 0;
+  padding: 0 10px;
+  background-color: #05A5D1;
+  color: white;
+}
+
+.component h3 a {
+  color: white;
+}
+
+.component p {
+  padding: 10px;
+  margin: 2px;
+}
+
+@media only screen and (min-device-width: 768px) {
+  .component-grid {
+    width: 768px;
+  }
+  .component-grid.component-grid-border {
+    border-bottom: 1px solid #f1eff0;
+  }
+  .component {
+    width: 30%;
+    height: 150px;
+    margin: 0 22px 22px auto;
+    vertical-align: top;
+  }
+}
+
 /** Showcase **/
 .home-showcase-section {
  max-width: 800px;
@@ -14,17 +14,19 @@ var Site = require('Site');

 var support = React.createClass({
  childContextTypes: {
-    permalink: PropTypes.string
+    permalink: PropTypes.string,
  },

  getChildContext: function() {
-    return {permalink: 'support.html'};
+    return { permalink: 'support.html' };
  },
  render: function() {
    return (
      <Site section="support" title="Help">

-        <section className="content wrap documentationContent helpSection nosidebar">
+        <section
+          className="content wrap documentationContent helpSection nosidebar"
+        >
          <div className="helpSection inner-content">
            <h1>Need help?</h1>
            <p>
@@ -41,13 +43,25 @@ var support = React.createClass({

                <ul>
                  <li className="help-list-entry">
-                    <a href="/react-native/docs/getting-started.html">Getting Started</a>
+                    <a
+                      href="/react-native/docs/getting-started.html"
+                    >
+                      Getting Started
+                    </a>
                  </li>
                  <li className="help-list-entry">
-                    <a href="/react-native/docs/tutorial.html">The Basics Tutorial</a>
+                    <a
+                      href="/react-native/docs/tutorial.html"
+                    >
+                      The Basics Tutorial
+                    </a>
                  </li>
                  <li className="help-list-entry">
-                    <a href="/react-native/docs/integration-with-existing-apps.html">Integration With Existing Apps</a>
+                    <a
+                      href="/react-native/docs/integration-with-existing-apps.html"
+                    >
+                      Integration With Existing Apps
+                    </a>
                  </li>
                </ul>
                <h2>Explore samples</h2>
@@ -57,10 +71,16 @@ var support = React.createClass({

                <ul>
                  <li className="help-list-entry">
-                    <a href="http://makeitopen.com/">Building the F8 2016 App</a>
+                    <a href="http://makeitopen.com/">
+                      Building the F8 2016 App
+                    </a>
                  </li>
                  <li className="help-list-entry">
-                    <a href="https://github.com/facebook/react-native/tree/master/RNTester">RNTester</a>
+                    <a
+                      href="http://www.awesome-react-native.com/#open-source-apps"
+                    >
+                      Open Source apps
+                    </a>
                  </li>
                  <li className="help-list-entry">
                    <a href="https://github.com/facebook/react-native/tree/master/Examples/Movies">Movies</a>
@@ -74,13 +94,23 @@ var support = React.createClass({

                <ul>
                  <li className="help-list-entry">
-                    <a href="https://twitter.com/reactnative">React Native on Twitter</a>
+                    <a
+                      href="https://twitter.com/reactnative"
+                    >
+                      React Native on Twitter
+                    </a>
                  </li>
                  <li className="help-list-entry">
-                    <a href="/react-native/blog/">News and Updates</a>
+                    <a href="/react-native/blog/">
+                      News and Updates
+                    </a>
                  </li>
                  <li className="help-list-entry">
-                    <a href="https://github.com/facebook/react-native/releases">Latest Releases</a>
+                    <a
+                      href="https://github.com/facebook/react-native/releases"
+                    >
+                      Latest Releases
+                    </a>
                  </li>
                </ul>
              </div>
@@ -95,19 +125,42 @@ var support = React.createClass({
                  <li className="help-list-entry">
                    <h3>Frequently Asked Questions</h3>
                    <p>
-                      Many React Native users are active on Stack Overflow. Browse <a href="http://stackoverflow.com/questions/tagged/react-native">existing questions</a>, or ask your own technical question.
+                      Many React Native users are active on Stack Overflow. Browse
+                      {' '}
+                      <a
+                        href="http://stackoverflow.com/questions/tagged/react-native"
+                      >
+                        existing questions
+                      </a>
+                      , or ask your own technical question.
                    </p>
                  </li>
                  <li className="help-list-entry">
                    <h3>React Native Community</h3>
                    <p>
-                      If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the <a href="https://www.facebook.com/groups/react.native.community">React Native Community</a> Facebook group. It has thousands of developers and almost all posts get a response.
+                      If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the
+                      {' '}
+                      <a
+                        href="https://www.facebook.com/groups/react.native.community"
+                      >
+                        React Native Community
+                      </a>
+                      {' '}
+                      Facebook group. It has thousands of developers and almost all posts get a response.
                    </p>
                  </li>
                  <li className="help-list-entry">
                    <h3>Reactiflux Chat</h3>
                    <p>
-                      If you need an answer right away, check out the <a href="https://discord.gg/0ZcbPKXt5bZjGY5n">#react-native</a> channel. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.
+                      If you need an answer right away, check out the
+                      {' '}
+                      <a
+                        href="https://discord.gg/0ZcbPKXt5bZjGY5n"
+                      >
+                        #react-native
+                      </a>
+                      {' '}
+                      channel. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.
                    </p>
                  </li>
                </ul>
@@ -123,21 +176,58 @@ var support = React.createClass({
                  <li className="help-list-entry">
                    <h3>Get Involved</h3>
                    <p>
-                      If you want to contribute, take a look at the list of <a href="https://github.com/facebook/react-native/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Task%22">good first tasks</a> on GitHub.
+                      If you want to contribute, take a look at the list of
+                      {' '}
+                      <a
+                        href="https://github.com/facebook/react-native/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Task%22"
+                      >
+                        good first tasks
+                      </a>
+                      {' '}
+                      on GitHub. If you want to find out more about what other people are working on, take a look at the
+                      {' '}
+                      <a
+                        href="https://github.com/facebook/react-native/wiki/Roadmap"
+                      >
+                        Roadmap
+                      </a>
+                      .
                    </p>
                  </li>

                  <li className="help-list-entry">
                    <h3>Feature Requests</h3>
                    <p>
-                      If you have a feature request, <a href="https://react-native.canny.io/feature-requests">add it to the list</a> or upvote a similar one. The voting system helps surface which issues are most important to the community.
+                      If you have a feature request, <a
+                        href="https://react-native.canny.io/feature-requests"
+                      >
+                        add it to the list
+                      </a>
+                      {' '}
+                      or upvote a similar one. The voting system helps surface which issues are most important to the community.
                    </p>
                  </li>

                  <li className="help-list-entry">
                    <h3>Report a Bug</h3>
                    <p>
-                      If you have discovered a bug in React Native, consider submitting a <a href="https://github.com/facebook/react-native/">pull request</a> with a fix. If you don't think you can fix it yourself, you can <a href="https://github.com/facebook/react-native/issues">open an issue</a> on GitHub.
+                      If you have discovered a bug in React Native, consider submitting a
+                      {' '}
+                      <a
+                        href="https://github.com/facebook/react-native/"
+                      >
+                        pull request
+                      </a>
+                      {' '}
+                      with a fix. If you don't think you can fix it yourself, you can
+                      {' '}
+                      <a
+                        href="https://github.com/facebook/react-native/issues"
+                      >
+                        open an issue
+                      </a>
+                      {' '}
+                      on GitHub.
                    </p>
                  </li>
                </ul>
@@ -148,7 +238,7 @@ var support = React.createClass({

      </Site>
    );
-  }
+  },
 });

 module.exports = support;
@@ -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
Hector Ramos	a8342a9673	Add missing PerfUtil image. Summary: Fixes #14202. Closes https://github.com/facebook/react-native/pull/14211 Differential Revision: D5141377 Pulled By: hramos fbshipit-source-id: 9a1b76e94e8b775e84988f1b4bb018e01db8fdb2	2017-07-10 15:25:32 -07:00
Hector Ramos	67e119ded8	[0.45.1] Bump version numbers	2017-06-09 14:47:45 -07:00
Adam MiskiewiczandHector Ramos	f1cc3ac75a	Remove unused default.config.js	2017-06-09 14:47:18 -07:00
Adam MiskiewiczandHector Ramos	39e0750223	Fix broken getProjectRoots default in local-cli	2017-06-09 14:47:12 -07:00
Hector Ramos	1668f90f8e	Fix sidebar ordering	2017-06-09 14:47:05 -07:00
Hector Ramos	c9e24899cb	New Handling Touches Tutorial Summary: Finally, a place where `Button` is properly introduced. This is based on the old Handling Touches guide, which has been simplified (with some content moved over to the scroll views tutorial). I've also updated the ordering of the guides into something that makes more sense to someone just getting started with React Native. Closes https://github.com/facebook/react-native/pull/14371 Differential Revision: D5201127 Pulled By: hramos fbshipit-source-id: 819192e2db9febb8a315f51693dae557752b6002	2017-06-09 14:46:58 -07:00
Hector Ramos	df15af6142	Add Components and APIs Overview Guide Summary: Essential components such as View, Text, and Button are easily overlooked amongst the long list of components and APIs due to a lack of categorization. The basic components are already introduced as part of the tutorial, but they may be missed by people who prefer scanning over the docs. Built website on localhost. Preview of the website as seem on Chrome on macOS: ![screencapture-localhost-8079-react-native-docs-components-and-apis-html-1496357491473](https://cloud.githubusercontent.com/assets/165856/26704237/902d0986-46e2-11e7-9624-17db692ae11e.png) Preview as seen on an iPhone Plus (via Chrome console): ![screen shot 2017-06-01 at 3 57 00 pm](https://cloud.githubusercontent.com/assets/165856/26704309/05c8ff7e-46e3-11e7-99ff-b7402f5265d4.png) Closes https://github.com/facebook/react-native/pull/14265 Differential Revision: D5192597 Pulled By: hramos fbshipit-source-id: f281a14230468458f3da674a82df263fb9f064f4	2017-06-09 14:46:51 -07:00
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