[0.16.0-rc] Bump version numbers

2025-11-01 09:14:26 +00:00 · 2015-11-23 18:30:42 +00:00
1360 changed files with 34625 additions and 65452 deletions
@@ -1,9 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2
-
-[alias]
-  movies = //Examples/Movies/android/app:app
@@ -1 +0,0 @@
-Xmx512m -XX:+HeapDumpOnOutOfMemoryError
@@ -1,11 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2
@@ -19,7 +19,6 @@
    "__DEV__": true,
    "__dirname": false,
    "__fbBatchedBridgeConfig": false,
-    "alert": false,
    "cancelAnimationFrame": false,
    "clearImmediate": true,
    "clearInterval": false,
@@ -27,11 +26,8 @@
    "console": false,
    "document": false,
    "escape": false,
-    "Event": false,
-    "EventTarget": false,
    "exports": false,
    "fetch": false,
-    "FormData": false,
    "global": false,
    "jest": false,
    "Map": true,
@@ -47,29 +43,7 @@
    "setTimeout": false,
    "window": false,
    "XMLHttpRequest": false,
-    "pit": false,
-
-    // Flow global types.
-    "ReactComponent": false,
-    "ReactClass": false,
-    "ReactElement": false,
-    "ReactPropsCheckType": false,
-    "ReactPropsChainableTypeChecker": false,
-    "ReactPropTypes": false,
-    "SyntheticEvent": false,
-    "$Either": false,
-    "$All": false,
-    "$Tuple": false,
-    "$Supertype": false,
-    "$Subtype": false,
-    "$Shape": false,
-    "$Diff": false,
-    "$Keys": false,
-    "$Enum": false,
-    "$Exports": false,
-    "$FlowIssue": false,
-    "$FlowFixMe": false,
-    "$FixMe": false
+    "pit": false
  },

  "rules": {
@@ -107,12 +81,13 @@
    "curly": 1,                      // specify curly brace conventions for all control statements
    "default-case": 0,               // require default case in switch statements (off by default)
    "dot-notation": 1,               // encourages use of dot notation whenever possible
-    "eqeqeq": [1, "allow-null"],     // require the use of === and !==
+    "eqeqeq": 1,                     // require the use of === and !==
    "guard-for-in": 0,               // make sure for-in loops have an if statement (off by default)
    "no-alert": 1,                   // disallow the use of alert, confirm, and prompt
    "no-caller": 1,                  // disallow use of arguments.caller or arguments.callee
    "no-div-regex": 1,               // disallow division operators explicitly at beginning of regular expression (off by default)
    "no-else-return": 0,             // disallow else after a return in an if (off by default)
+    "no-empty-label": 1,             // disallow use of labels for anything other then loops and switches
    "no-eq-null": 0,                 // disallow comparisons to null without a type-checking operator (off by default)
    "no-eval": 1,                    // disallow use of eval()
    "no-extend-native": 1,           // disallow adding to native types
@@ -181,8 +156,6 @@
  // These rules are purely matters of style and are quite subjective.

    "key-spacing": 0,
-    "keyword-spacing": 1,            // enforce spacing before and after keywords
-    "jsx-quotes": [1, "prefer-double"],
    "comma-spacing": 0,
    "no-multi-spaces": 0,
    "brace-style": 0,                // enforce one true brace style (off by default)
@@ -206,9 +179,11 @@
    "quote-props": 0,                // require quotes around object literal property names (off by default)
    "semi": 1,                       // require or disallow use of semicolons instead of ASI
    "sort-vars": 0,                  // sort variables within the same declaration block (off by default)
+    "space-after-keywords": 1,       // require a space after certain keywords (off by default)
    "space-in-brackets": 0,          // require or disallow spaces inside brackets (off by default)
    "space-in-parens": 0,            // require or disallow spaces inside parentheses (off by default)
    "space-infix-ops": 1,            // require spaces around operators
+    "space-return-throw-case": 1,    // require a space after return, throw, and case
    "space-unary-ops": [1, { "words": true, "nonwords": false }], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
    "max-nested-callbacks": 0,       // specify the maximum depth callbacks can be nested (off by default)
    "one-var": 0,                    // allow just one var statement per function (off by default)
@@ -226,6 +201,7 @@

    "react/display-name": 0,
    "react/jsx-boolean-value": 0,
+    "react/jsx-quotes": [1, "double", "avoid-escape"],
    "react/jsx-no-undef": 1,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 0,
@@ -14,21 +14,17 @@

 # Ignore react and fbjs where there are overlaps, but don't ignore
 # anything that react-native relies on
-.*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/fetch.js
-.*/node_modules/fbjs/lib/ExecutionEnvironment.js
-.*/node_modules/fbjs/lib/ErrorUtils.js
-
-# Flow has a built-in definition for the 'react' module which we prefer to use
-# over the currently-untyped source
-.*/node_modules/react/react.js
-.*/node_modules/react/lib/React.js
-.*/node_modules/react/lib/ReactDOM.js
-
-.*/__mocks__/.*
-.*/__tests__/.*
-
-.*/commoner/test/source/widget/share.js
+.*/node_modules/fbjs-haste/.*/__tests__/.*
+.*/node_modules/fbjs-haste/__forks__/Map.js
+.*/node_modules/fbjs-haste/__forks__/Promise.js
+.*/node_modules/fbjs-haste/__forks__/fetch.js
+.*/node_modules/fbjs-haste/core/ExecutionEnvironment.js
+.*/node_modules/fbjs-haste/core/isEmpty.js
+.*/node_modules/fbjs-haste/crypto/crc32.js
+.*/node_modules/fbjs-haste/stubs/ErrorUtils.js
+.*/node_modules/react-haste/React.js
+.*/node_modules/react-haste/renderers/dom/ReactDOM.js
+.*/node_modules/react-haste/renderers/shared/event/eventPlugins/ResponderEventPlugin.js

 # Ignore commoner tests
 .*/node_modules/commoner/test/.*
@@ -50,21 +46,18 @@ Libraries/react-native/react-native-interface.js
 [options]
 module.system=haste

-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-
 munge_underscores=true

 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'

 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-8]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

 [version]
-0.21.0
+0.18.1
@@ -21,23 +21,14 @@ DerivedData
 *.xcuserstate
 project.xcworkspace

-# Gradle
-/build/
-/Examples/**/android/app/build/
-/ReactAndroid/build/
-
-# Buck
-.buckd
-buck-out
-/ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
-/ReactAndroid/src/main/jni/prebuilt/lib/x86/
+# Xcode, Gradle
+build/

 # Android
 .idea
 .gradle
 local.properties
 *.iml
-/android/

 # Node
 node_modules
@@ -1,21 +1,21 @@
 language: objective-c

-osx_image: xcode7.2
+osx_image: xcode7

 cache:
-  directories:
-    - node_modules
-    - .nvm
+    directories:
+        - node_modules
+        - .nvm

 install:
  - brew reinstall nvm
  - mkdir -p .nvm
  - export NVM_DIR="$PWD/.nvm"
  - source $(brew --prefix nvm)/nvm.sh
-  - nvm install 5
+  - nvm install 4
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
  - npm config set spin=false
-  - npm config set progress=false
+  - npm install -g flow-bin@`node -p "require('fs').readFileSync('.flowconfig', 'utf8').split('[version]')[1].trim()"`
  - npm install

 script:
@@ -23,20 +23,41 @@ script:
  if [ "$TEST_TYPE" = objc ]
  then

-    travis_retry ./scripts/objc-test.sh
+    ./scripts/objc-test.sh

  elif [ "$TEST_TYPE" = js ]
  then

-    npm install github@0.2.4
-    cat <(echo eslint; npm run lint --silent -- --format=json; echo flow; npm run flow --silent -- --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" node bots/code-analysis-bot.js
-    npm run flow && npm test
+    flow check && npm test -- '\/Libraries\/'

-  elif [ "$TEST_TYPE" = e2e-objc ]
+  elif [ "$TEST_TYPE" = packager ]
  then

-    travis_retry ./scripts/e2e-test.sh --ios
+    npm test -- '\/packager\/'

+  elif [ "$TEST_TYPE" = cli ]
+  then
+
+    npm test -- '\/(local|private|react-native)-cli\/'
+
+  elif [ "$TEST_TYPE" = build_website ]
+  then
+
+    cd website
+    $(which npm) install
+    ./setup.sh
+    if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then
+      # Automatically publish the website
+      echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
+      ./publish.sh
+    else
+      # Make sure the website builds without error
+      node server/generate.js
+    fi
+
+  elif [ "$TEST_TYPE" = e2e ]
+  then
+    ./scripts/e2e-test.sh
  else
    echo "Unknown test type: $TEST_TYPE"
    exit 1
@@ -46,16 +67,19 @@ env:
  matrix:
    - TEST_TYPE=objc
    - TEST_TYPE=js
-    - TEST_TYPE=e2e-objc
+    - TEST_TYPE=packager
+    - TEST_TYPE=cli
+    - TEST_TYPE=build_website
+    - TEST_TYPE=e2e
+  global:
+    # $GITHUB_TOKEN
+    - secure: "HlmG8M2DmBUSBh6KH1yVIe/8gR4iibg4WfcHq1x/xYQxGbvleq7NOo04V6eFHnl9cvZCu+PKH0841WLnGR7c4BBf47GVu/o16nXzggPumHKy++lDzxFPlJ1faMDfjg/5vjbAxRUe7D3y98hQSeGHH4tedc8LvTaFLVu7iiGqvjU="
+    # $APPETIZE_TOKEN
+    - secure: "egsvVSpszTzrNd6bN62DsVAzMiSZI/OHgdizfPryqvqWBf655ztE6XFQSEFNpuIAzSKDDF25ioT8iPfVsbC1iK6HDWHfmqYxML0L+OoU0gi+hV2oKUBFZDZ1fwSnFoWuBdNdMDpLlUxvJp6N1WyfNOB2dxuZUt8eTt48Hi3+Hpc="
+    # $S3_TOKEN
+    - secure: "lY8JZPA0A7zT7L5KF9BBg34XYWIeR/RJiEvE7l7oVr88KnEPtyd//79eHhhVKnUnav7zsk5QJwkcX0MxKTp/dp4G0Am+zOX+sfA8kQrJ+2/+FzFW7AEsW/kHByfaIEIly9DQvUFt4I4oMm8nQZysJLahDgNWglyI3RTuJp//hcY="

 branches:
  only:
    - master
    - /^.*-stable$/
-
-notifications:
-  email:
-    recipients:
-      - bestander@gmail.com
-    on_failure: change
-    on_success: change
@@ -17,30 +17,12 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 *Before* submitting a pull request, please make sure the following is done…

 1. Fork the repo and create your branch from `master`.
-2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
+2. If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. Add the copyright notice to the top of any new files you've added.
-5. Ensure tests pass on Travis and Circle CI.
-6. Make sure your code lints (`node linter.js <files touched>`).
-7. Squash your commits (`git rebase -i`).
-8. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
-
-#### Copyright Notice for files
-
-Copy and paste this to the top of your new file(s):
-
-```JS
-/**
- * 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.
- */
-```
-
-If you've added a new module, add a `@providesModule <moduleName>` at the end of the comment. This will allow the haste package manager to find it.
+4. Ensure tests pass on Travis.
+5. Make sure your code lints (`node linter.js <files touched>`).
+6. Squash your commits (`git rebase -i`).
+7. If you haven't already, complete the CLA.

 ### Contributor License Agreement (CLA)

@@ -73,7 +55,6 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe

 #### General

-* **Most important: Look around.** Match the style you see used in the rest of the project. This includes formatting, naming things in code, naming things in documentation.
 * Add trailing commas,
 * 2 spaces for indentation (no tabs)
 * "Attractive"
@@ -86,14 +67,6 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * Do not use the optional parameters of `setTimeout` and `setInterval`
 * 80 character line length

-#### JSX
-
-* Prefer `'` over `"` for string literal props
-* When wrapping opening tags over multiple lines, place one prop per line
-* `{}` of props should hug their values (no spaces)
-* Place the closing `>` of opening tags on the same line as the last prop
-* Place the closing `/>` of self-closing tags on their own line and left-align them with the opening `<`
-
 #### Objective-C

 * Space after `@property` declarations
@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-alert": 0
-  }
-}
@@ -53,8 +53,6 @@ class Board extends React.Component {
 }

 class Tile extends React.Component {
-  state: any;
-
  static _getPosition(index): number {
    return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
  }
@@ -149,7 +147,6 @@ class GameEndOverlay extends React.Component {
 class Game2048 extends React.Component {
  startX: number;
  startY: number;
-  state: any;

  constructor(props: {}) {
    super(props);
@@ -240,7 +237,7 @@ var styles = StyleSheet.create({
    marginBottom: 20,
  },
  tryAgain: {
-    backgroundColor: '#887761',
+    backgroundColor: '#887766',
    padding: 20,
    borderRadius: 5,
  },
@@ -282,7 +279,7 @@ var styles = StyleSheet.create({
    backgroundColor: '#eeeecc',
  },
  tile8: {
-    backgroundColor: '#ffbb87',
+    backgroundColor: '#ffbb88',
  },
  tile16: {
    backgroundColor: '#ff9966',
@@ -17,7 +17,7 @@
 'use strict';

 // NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
-//     with no modification except to format it for CommonJS and fix lint/flow errors
+//     with no modificiation except to format it for CommonJS and fix lint/flow errors

 var rotateLeft = function (matrix) {
  var rows = matrix.length;
@@ -18,6 +18,7 @@
 var React = require('react-native');
 var {
  Image,
+  PixelRatio,
  Platform,
  StyleSheet,
  Text,
@@ -98,7 +99,8 @@ var styles = StyleSheet.create({
  },
  cellBorder: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: StyleSheet.hairlineWidth,
+    // Trick to get the thinest line the device can display
+    height: 1 / PixelRatio.get(),
    marginLeft: 4,
  },
 });
@@ -18,6 +18,7 @@
 var React = require('react-native');
 var {
  Image,
+  PixelRatio,
  ScrollView,
  StyleSheet,
  Text,
@@ -151,7 +152,7 @@ var styles = StyleSheet.create({
  },
  separator: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
    marginVertical: 10,
  },
  castTitle: {
@@ -27,7 +27,7 @@ var {
 } = React;
 var TimerMixin = require('react-timer-mixin');

-var invariant = require('fbjs/lib/invariant');
+var invariant = require('invariant');
 var dismissKeyboard = require('dismissKeyboard');

 var MovieCell = require('./MovieCell');
@@ -316,7 +316,7 @@ var SearchScreen = React.createClass({
          onSearchChange={this.onSearchChange}
          isLoading={this.state.isLoading}
          onFocus={() =>
-            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo({ x: 0, y: 0 })}
+            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
        />
        <View style={styles.separator} />
        {content}
@@ -1,43 +0,0 @@
-include_defs('//ReactAndroid/DEFS')
-
-android_binary(
-  name = 'app',
-  manifest = 'src/main/AndroidManifest.xml',
-  keystore = '//keystores:debug',
-  deps = [
-    ':movies-lib',
-  ],
-)
-
-android_library(
-  name = 'movies-lib',
-  srcs = glob(['src/main/java/**/*.java']),
-  deps = [
-    react_native_target('java/com/facebook/csslayout:csslayout'),
-    react_native_target('java/com/facebook/react:react'),
-    react_native_target('java/com/facebook/react/devsupport:devsupport'),
-    react_native_target('java/com/facebook/react/modules/core:core'),
-    react_native_target('java/com/facebook/react/shell:shell'),
-    react_native_target('java/com/facebook/react/touch:touch'),
-    react_native_target('java/com/facebook/react/uimanager:uimanager'),
-    react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
-    react_native_target('java/com/facebook/react/views/image:image'),
-    react_native_target('java/com/facebook/react/views/recyclerview:recyclerview'),
-    react_native_target('java/com/facebook/react/views/scroll:scroll'),
-    react_native_target('java/com/facebook/react/views/text:text'),
-    react_native_target('java/com/facebook/react/views/view:view'),
-    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
-    react_native_target('jni/prebuilt:reactnative-libs'),
-    react_native_target('jni/prebuilt:android-jsc'),
-    react_native_dep('libraries/soloader/java/com/facebook/soloader:soloader'),
-    react_native_dep('third-party/java/jsr-305:jsr-305'),
-    ':res',
-  ],
-)
-
-
-android_resource(
-  name = 'res',
-  res = 'src/main/res',
-  package = 'com.facebook.react.movies',
-)
@@ -2,8 +2,6 @@
    package="com.facebook.react.movies">

    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:allowBackup="true"
@@ -11,42 +11,79 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+
 package com.facebook.react.movies;

-import com.facebook.react.ReactActivity;
-import com.facebook.react.ReactPackage;
+import android.app.Activity;
+import android.os.Bundle;
+import android.view.KeyEvent;
+
+import com.facebook.react.LifecycleState;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactRootView;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
 import com.facebook.react.shell.MainReactPackage;

-import java.util.Arrays;
-import java.util.List;
+public class MoviesActivity extends Activity implements DefaultHardwareBackBtnHandler {

-import javax.annotation.Nullable;
+  private ReactInstanceManager mReactInstanceManager;

-public class MoviesActivity extends ReactActivity {
  @Override
-  protected String getMainComponentName() {
-    return "MoviesApp";
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_main);
+
+    mReactInstanceManager = ReactInstanceManager.builder()
+        .setApplication(getApplication())
+        .setBundleAssetName("MoviesApp.android.bundle")
+        .setJSMainModuleName("Examples/Movies/MoviesApp.android")
+        .addPackage(new MainReactPackage())
+        .setUseDeveloperSupport(true)
+        .setInitialLifecycleState(LifecycleState.RESUMED)
+        .build();
+
+    ((ReactRootView) findViewById(R.id.react_root_view))
+        .startReactApplication(mReactInstanceManager, "MoviesApp", null);
  }

  @Override
-  protected @Nullable String getBundleAssetName() {
-    return "MoviesApp.android.bundle";
-  };
-
-  @Override
-  protected String getJSMainModuleName() {
-    return "Examples/Movies/MoviesApp.android";
+  public boolean onKeyUp(int keyCode, KeyEvent event) {
+    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+      mReactInstanceManager.showDevOptionsDialog();
+      return true;
+    }
+    return super.onKeyUp(keyCode, event);
  }

  @Override
-  protected boolean getUseDeveloperSupport() {
-    return true;
+  protected void onPause() {
+    super.onPause();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onPause();
+    }
  }

  @Override
-  protected List<ReactPackage> getPackages() {
-    return Arrays.<ReactPackage>asList(
-      new MainReactPackage()
-    );
+  protected void onResume() {
+    super.onResume();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onResume(this, this);
+    }
+  }
+
+  @Override
+  public void onBackPressed() {
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onBackPressed();
+    } else {
+      super.onBackPressed();
+    }
+  }
+
+  @Override
+  public void invokeDefaultOnBackPressed() {
+    super.onBackPressed();
  }
 }
@@ -89,6 +89,7 @@ class Board {
        }
      }
    }
+
    return this.winner() === null;
  }
 }
@@ -305,7 +306,7 @@ var styles = StyleSheet.create({
    textAlign: 'center',
  },
  newGame: {
-    backgroundColor: '#887765',
+    backgroundColor: '#887766',
    padding: 20,
    borderRadius: 5,
  },
@@ -20,7 +20,6 @@ var {
  ActionSheetIOS,
  StyleSheet,
  Text,
-  UIManager,
  View,
 } = React;

@@ -28,7 +27,7 @@ var BUTTONS = [
  'Option 0',
  'Option 1',
  'Option 2',
-  'Delete',
+  'Destruct',
  'Cancel',
 ];
 var DESTRUCTIVE_INDEX = 3;
@@ -66,39 +65,6 @@ var ActionSheetExample = React.createClass({
  }
 });

-var ActionSheetTintExample = React.createClass({
-  getInitialState() {
-    return {
-      clicked: 'none',
-    };
-  },
-
-  render() {
-    return (
-      <View>
-        <Text onPress={this.showActionSheet} style={style.button}>
-          Click to show the ActionSheet
-        </Text>
-        <Text>
-          Clicked button: {this.state.clicked}
-        </Text>
-      </View>
-    );
-  },
-
-  showActionSheet() {
-    ActionSheetIOS.showActionSheetWithOptions({
-      options: BUTTONS,
-      cancelButtonIndex: CANCEL_INDEX,
-      destructiveButtonIndex: DESTRUCTIVE_INDEX,
-      tintColor: 'green',
-    },
-    (buttonIndex) => {
-      this.setState({ clicked: BUTTONS[buttonIndex] });
-    });
-  }
-});
-
 var ShareActionSheetExample = React.createClass({
  getInitialState() {
    return {
@@ -121,14 +87,13 @@ var ShareActionSheetExample = React.createClass({

  showShareActionSheet() {
    ActionSheetIOS.showShareActionSheetWithOptions({
-      url: this.props.url,
+      url: 'https://code.facebook.com',
      message: 'message to go with the shared url',
      subject: 'a subject to go in the email heading',
-      excludedActivityTypes: [
-        'com.apple.UIKit.activity.PostToTwitter'
-      ]
    },
-    (error) => alert(error),
+    (error) => {
+      console.error(error);
+    },
    (success, method) => {
      var text;
      if (success) {
@@ -141,50 +106,6 @@ var ShareActionSheetExample = React.createClass({
  }
 });

-var ShareScreenshotExample = React.createClass({
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
-
-  render() {
-    return (
-      <View>
-        <Text onPress={this.showShareActionSheet} style={style.button}>
-          Click to show the Share ActionSheet
-        </Text>
-        <Text>
-          {this.state.text}
-        </Text>
-      </View>
-    );
-  },
-
-  showShareActionSheet() {
-    // Take the snapshot (returns a temp file uri)
-    UIManager.takeSnapshot('window').then((uri) => {
-      // Share image data
-      ActionSheetIOS.showShareActionSheetWithOptions({
-        url: uri,
-        excludedActivityTypes: [
-          'com.apple.UIKit.activity.PostToTwitter'
-        ]
-      },
-      (error) => alert(error),
-      (success, method) => {
-        var text;
-        if (success) {
-          text = `Shared via ${method}`;
-        } else {
-          text = 'You didn\'t share';
-        }
-        this.setState({text});
-      });
-    }).catch((error) => alert(error));
-  }
-});
-
 var style = StyleSheet.create({
  button: {
    marginBottom: 10,
@@ -199,26 +120,8 @@ exports.examples = [
    title: 'Show Action Sheet',
    render(): ReactElement { return <ActionSheetExample />; }
  },
-  {
-    title: 'Show Action Sheet with tinted buttons',
-    render(): ReactElement { return <ActionSheetTintExample />; }
-  },
  {
    title: 'Show Share Action Sheet',
-    render(): ReactElement {
-      return <ShareActionSheetExample url="https://code.facebook.com" />;
-    }
-  },
-  {
-    title: 'Share Local Image',
-    render(): ReactElement {
-      return <ShareActionSheetExample url="bunny.png" />;
-    }
-  },
-  {
-    title: 'Share Screenshot',
-    render(): ReactElement {
-      return <ShareScreenshotExample />;
-    }
+    render(): ReactElement { return <ShareActionSheetExample />; }
  }
 ];
@@ -1,136 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- */
-
-'use strict';
-
-var React = require('react-native');
-var {
-  Alert,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-
-var UIExplorerBlock = require('./UIExplorerBlock');
-
-// corporate ipsum > lorem ipsum
-var alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' +
-                   'catalysts for change. Dynamically revolutionize.';
-
-/**
- * Simple alert examples.
- */
-var SimpleAlertExampleBlock = React.createClass({
-
-  render: function() {
-    return (
-      <View>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            alertMessage,
-          )}>
-          <View style={styles.button}>
-            <Text>Alert with message and default button</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            alertMessage,
-            [
-              {text: 'OK', onPress: () => console.log('OK Pressed!')},
-            ]
-          )}>
-          <View style={styles.button}>
-            <Text>Alert with one button</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            alertMessage,
-            [
-              {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
-              {text: 'OK', onPress: () => console.log('OK Pressed!')},
-            ]
-          )}>
-          <View style={styles.button}>
-            <Text>Alert with two buttons</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            null,
-            [
-              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
-              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
-              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
-            ]
-          )}>
-          <View style={styles.button}>
-            <Text>Alert with three buttons</Text>
-          </View>
-        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Foo Title',
-            alertMessage,
-            '..............'.split('').map((dot, index) => ({
-              text: 'Button ' + index,
-              onPress: () => console.log('Pressed ' + index)
-            }))
-          )}>
-          <View style={styles.button}>
-            <Text>Alert with too many buttons</Text>
-          </View>
-        </TouchableHighlight>
-      </View>
-    );
-  },
-});
-
-var AlertExample = React.createClass({
-  statics: {
-    title: 'Alert',
-    description: 'Alerts display a concise and informative message ' +
-    'and prompt the user to make a decision.',
-  },
-  render: function() {
-    return (
-      <UIExplorerBlock title={'Alert'}>
-        <SimpleAlertExampleBlock />
-      </UIExplorerBlock>
-    );
-  }
-});
-
-var styles = StyleSheet.create({
-  wrapper: {
-    borderRadius: 5,
-    marginBottom: 5,
-  },
-  button: {
-    backgroundColor: '#eeeeee',
-    padding: 10,
-  },
-});
-
-module.exports = {
-  AlertExample,
-  SimpleAlertExampleBlock,
-};
@@ -24,87 +24,103 @@ var {
  AlertIOS,
 } = React;

-var { SimpleAlertExampleBlock } = require('./AlertExample');
-
 exports.framework = 'React';
 exports.title = 'AlertIOS';
 exports.description = 'iOS alerts and action sheets';
 exports.examples = [{
  title: 'Alerts',
-  render() {
-    return <SimpleAlertExampleBlock />;
-  }
-},
-{
-  title: 'Prompt Options',
-  render(): ReactElement {
-    return <PromptOptions />;
-  }
-},
-{
-  title: 'Prompt Types',
  render() {
    return (
      <View>
-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Plain Text Entry')}>
-
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg'
+          )}>
          <View style={styles.button}>
-            <Text>
-              plain-text
-            </Text>
+            <Text>Alert with message and default button</Text>
          </View>
-
        </TouchableHighlight>
-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Secure Text', null, null, 'secure-text')}>
-
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            null,
+            null,
+            [
+              {text: 'Button', onPress: () => console.log('Button Pressed!')},
+            ]
+          )}>
          <View style={styles.button}>
-            <Text>
-              secure-text
-            </Text>
+            <Text>Alert with only one button</Text>
          </View>
-
        </TouchableHighlight>
-        <TouchableHighlight
-          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Login & Password', null, null, 'login-password')}>
-
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+            ]
+          )}>
          <View style={styles.button}>
-            <Text>
-              login-password
-            </Text>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            null,
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with 3 buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            '..............'.split('').map((dot, index) => ({
+              text: 'Button ' + index,
+              onPress: () => console.log('Pressed ' + index)
+            }))
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with too many buttons</Text>
          </View>
-
        </TouchableHighlight>
      </View>
    );
  }
+},
+{
+  title: 'Prompt',
+  render(): React.Component {
+    return <PromptExample />
+  }
 }];

-class PromptOptions extends React.Component {
-  state: any;
-  customButtons: Array<Object>;
-
+class PromptExample extends React.Component {
  constructor(props) {
    super(props);

-    // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below
-    this.saveResponse = this.saveResponse.bind(this);
-
-    this.customButtons = [{
-      text: 'Custom OK',
-      onPress: this.saveResponse
-    }, {
-      text: 'Custom Cancel',
-      style: 'cancel',
-    }];
-
+    this.promptResponse = this.promptResponse.bind(this);
    this.state = {
      promptValue: undefined,
    };
+
+    this.title = 'Type a value';
+    this.defaultValue = 'Default value';
+    this.buttons = [{
+      text: 'Custom cancel',
+    }, {
+      text: 'Custom OK',
+      onPress: this.promptResponse
+    }];
  }

  render() {
@@ -116,7 +132,7 @@ class PromptOptions extends React.Component {

        <TouchableHighlight
          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse)}>
+          onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}>

          <View style={styles.button}>
            <Text>
@@ -127,7 +143,7 @@ class PromptOptions extends React.Component {

        <TouchableHighlight
          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons)}>
+          onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}>

          <View style={styles.button}>
            <Text>
@@ -138,22 +154,22 @@ class PromptOptions extends React.Component {

        <TouchableHighlight
          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Type a value', null, this.saveResponse, undefined, 'Default value')}>
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}>

          <View style={styles.button}>
            <Text>
-              prompt with title, callback & default value
+              prompt with title, default value & callback
            </Text>
          </View>
        </TouchableHighlight>

        <TouchableHighlight
          style={styles.wrapper}
-          onPress={() => AlertIOS.prompt('Type a value', null, this.customButtons, 'login-password', 'admin@site.com')}>
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}>

          <View style={styles.button}>
            <Text>
-              prompt with title, custom buttons, login/password & default value
+              prompt with title, default value & custom buttons
            </Text>
          </View>
        </TouchableHighlight>
@@ -161,8 +177,13 @@ class PromptOptions extends React.Component {
    );
  }

-  saveResponse(promptValue) {
-    this.setState({ promptValue: JSON.stringify(promptValue) });
+  prompt() {
+    // Flow's apply support is broken: #7035621
+    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
+  }
+
+  promptResponse(promptValue) {
+    this.setState({ promptValue });
  }
 }

@@ -39,8 +39,6 @@ exports.examples = [
      'mounts.',
    render: function() {
      class FadeInView extends React.Component {
-        state: any;
-
        constructor(props) {
          super(props);
          this.state = {
@@ -68,8 +66,6 @@ exports.examples = [
        }
      }
      class FadeInExample extends React.Component {
-        state: any;
-
        constructor(props) {
          super(props);
          this.state = {
@@ -199,7 +195,6 @@ exports.examples = [
          {['Composite', 'Easing', 'Animations!'].map(
            (text, ii) => (
              <Animated.View
-                key={text}
                style={[styles.content, {
                  left: this.anims[ii]
                }]}>
@@ -32,10 +32,6 @@ var CIRCLE_MARGIN = 18;
 var NUM_CIRCLES = 30;

 class Circle extends React.Component {
-  state: any;
-  props: any;
-  longTimer: number;
-
  _onLongPress: () => void;
  _toggleIsActive: () => void;
  constructor(props: Object): void {
@@ -160,13 +156,6 @@ class Circle extends React.Component {
 }

 class AnExApp extends React.Component {
-  state: any;
-  props: any;
-
-  static title = 'Animated - Gratuitous App';
-  static description = 'Bunch of Animations - tap a circle to ' +
-    'open a view with more animations, or longPress and drag to reorder circles.';
-
  _onMove: (position: Point) => void;
  constructor(props: any): void {
    super(props);
@@ -277,6 +266,10 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
  }
 }

+AnExApp.title = 'Animated - Gratuitous App';
+AnExApp.description = 'Bunch of Animations - tap a circle to ' +
+  'open a view with more animations, or longPress and drag to reorder circles.';
+
 var styles = StyleSheet.create({
  container: {
    flex: 1,
@@ -36,8 +36,6 @@ var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {  // static positions
 });

 class AnExBobble extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    this.state = {};
@@ -97,7 +95,6 @@ class AnExBobble extends React.Component {
          return (
            <Animated.Image
              {...handlers}
-              key={i}
              source={{uri: BOBBLE_IMGS[j]}}
              style={[styles.circle, {
                backgroundColor: randColor(),                             // re-renders are obvious
@@ -26,8 +26,6 @@ var {
 } = React;

 class AnExChained extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -79,7 +77,6 @@ class AnExChained extends React.Component {
          return (
            <Animated.Image
              {...handlers}
-              key={i}
              source={{uri: CHAIN_IMGS[j]}}
              style={[styles.sticker, {
                transform: this.state.stickers[j].getTranslateTransform(), // simple conversion
@@ -12,7 +12,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @providesModule AnExScroll
- * @flow
 */
 'use strict';

@@ -27,7 +26,12 @@ var {
 } = React;

 class AnExScroll extends React.Component {
-  state: any = { scrollX: new Animated.Value(0) };
+  constructor(props) {
+    super(props);
+    this.state = {
+      scrollX: new Animated.Value(0),
+    };
+  }

  render() {
    var width = this.props.panelWidth;
@@ -31,8 +31,6 @@ var AnExScroll = require('./AnExScroll');
 var AnExTilt = require('./AnExTilt');

 class AnExSet extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    function randColor() {
@@ -26,8 +26,6 @@ var {
 } = React;

 class AnExTilt extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -1,80 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule AppStateExample
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  AppState,
-  Text,
-  View
-} = React;
-
-var AppStateSubscription = React.createClass({
-  getInitialState() {
-    return {
-      appState: AppState.currentState,
-      previousAppStates: [],
-    };
-  },
-  componentDidMount: function() {
-    AppState.addEventListener('change', this._handleAppStateChange);
-  },
-  componentWillUnmount: function() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
-  },
-  _handleAppStateChange: function(appState) {
-    var previousAppStates = this.state.previousAppStates.slice();
-    previousAppStates.push(this.state.appState);
-    this.setState({
-      appState,
-      previousAppStates,
-    });
-  },
-  render() {
-    if (this.props.showCurrentOnly) {
-      return (
-        <View>
-          <Text>{this.state.appState}</Text>
-        </View>
-      );
-    }
-    return (
-      <View>
-        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
-      </View>
-    );
-  }
-});
-
-exports.title = 'AppState';
-exports.description = 'app background status';
-exports.examples = [
-  {
-    title: 'AppState.currentState',
-    description: 'Can be null on app initialization',
-    render() { return <Text>{AppState.currentState}</Text>; }
-  },
-  {
-    title: 'Subscribed AppState:',
-    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
-  },
-  {
-    title: 'Previous states:',
-    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
-  },
-];
@@ -80,7 +80,7 @@ var BasicStorageExample = React.createClass({
        </Text>
        <Text>{' '}</Text>
        <Text>Messages:</Text>
-        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
+        {this.state.messages.map((m) => <Text>{m}</Text>)}
      </View>
    );
  },
@@ -98,34 +98,6 @@ var styles = StyleSheet.create({
    marginRight: 10,
    backgroundColor: 'lightgrey',
  },
-  border9: {
-    borderWidth: 10,
-    borderTopLeftRadius: 10,
-    borderBottomRightRadius: 20,
-    borderColor: 'black',
-  },
-  border10: {
-    borderWidth: 10,
-    backgroundColor: 'white',
-    borderTopLeftRadius: 10,
-    borderBottomRightRadius: 20,
-    borderColor: 'black',
-    elevation: 10,
-  },
-  border11: {
-    width: 0,
-    height: 0,
-    borderStyle: 'solid',
-    overflow: 'hidden',
-    borderTopWidth: 50,
-    borderRightWidth: 0,
-    borderBottomWidth: 50,
-    borderLeftWidth: 100,
-    borderTopColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'red',
-  },
 });

 exports.title = 'Border';
@@ -208,26 +180,4 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Corner Radii',
-    description: 'borderTopLeftRadius & borderBottomRightRadius',
-    render() {
-      return <View style={[styles.box, styles.border9]} />;
-    }
-  },
-  {
-    title: 'Corner Radii / Elevation',
-    description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
-    platform: 'android',
-    render() {
-      return <View style={[styles.box, styles.border10]} />;
-    }
-  },
-  {
-    title: 'CSS Trick - Triangle',
-    description: 'create a triangle by manipulating border colors and widths',
-    render() {
-      return <View style={[styles.border11]} />;
-    }
-  },
 ];
@@ -1,85 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  Image,
-  StyleSheet,
-  View
-} = React;
-
-var styles = StyleSheet.create({
-  box: {
-    width: 100,
-    height: 100,
-    borderWidth: 2,
-  },
-  shadow1: {
-    shadowOpacity: 0.5,
-    shadowRadius: 3,
-    shadowOffset: {width: 2, height: 2},
-  },
-  shadow2: {
-    shadowOpacity: 1.0,
-    shadowColor: 'red',
-    shadowRadius: 0,
-    shadowOffset: {width: 3, height: 3},
-  },
-});
-
-exports.title = 'Box Shadow';
-exports.description = 'Demonstrates some of the shadow styles available to Views.';
-exports.examples = [
-  {
-    title: 'Basic shadow',
-    description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}',
-    render() {
-      return <View style={[styles.box, styles.shadow1]} />;
-    }
-  },
-  {
-    title: 'Colored shadow',
-    description: 'shadowColor: \'red\', shadowRadius: 0',
-    render() {
-      return <View style={[styles.box, styles.shadow2]} />;
-    }
-  },
-  {
-    title: 'Shaped shadow',
-    description: 'borderRadius: 50',
-    render() {
-      return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
-    }
-  },
-  {
-    title: 'Image shadow',
-    description: 'Image shadows are derived exactly from the pixels.',
-    render() {
-      return <Image
-        source={require('./hawk.png')}
-        style={[styles.box, styles.shadow1, {borderWidth: 0, overflow: 'visible'}]}
-      />;
-    }
-  },
-  {
-    title: 'Child shadow',
-    description: 'For views without an opaque background color, shadow will be derived from the subviews.',
-    render() {
-      return <View style={[styles.box, styles.shadow1, {backgroundColor: 'transparent'}]}>
-        <View style={[styles.box, {width: 80, height: 80, borderRadius: 40, margin: 8, backgroundColor: 'red'}]}/>
-      </View>;
-    }
-  },
-];
@@ -15,25 +15,24 @@
 */
 'use strict';

-const React = require('react-native');
-const {
+var React = require('react-native');
+var {
  CameraRoll,
  Image,
  SliderIOS,
  StyleSheet,
-  Switch,
+  SwitchIOS,
  Text,
  View,
  TouchableOpacity
 } = React;

-const CameraRollView = require('./CameraRollView');
+var CameraRollView = require('./CameraRollView.ios');
+var AssetScaledImageExampleView = require('./AssetScaledImageExample');

-const AssetScaledImageExampleView = require('./AssetScaledImageExample');
+var CAMERA_ROLL_VIEW = 'camera_roll_view';

-const CAMERA_ROLL_VIEW = 'camera_roll_view';
-
-const CameraRollExample = React.createClass({
+var CameraRollExample = React.createClass({

  getInitialState() {
    return {
@@ -46,7 +45,7 @@ const CameraRollExample = React.createClass({
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          onValueChange={this._onSwitchChange}
          value={this.state.bigImages} />
        <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
@@ -66,24 +65,22 @@ const CameraRollExample = React.createClass({
  },

  loadAsset(asset){
-    if (this.props.navigator) {
-      this.props.navigator.push({
-        title: 'Camera Roll Image',
-        component: AssetScaledImageExampleView,
-        backButtonTitle: 'Back',
-        passProps: { asset: asset },
-      });
-    }
+    this.props.navigator.push({
+      title: 'Camera Roll Image',
+      component: AssetScaledImageExampleView,
+      backButtonTitle: 'Back',
+      passProps: { asset: asset },
+    });
  },

  _renderImage(asset) {
-    const imageSize = this.state.bigImages ? 150 : 75;
-    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const location = asset.node.location.longitude ?
+    var imageSize = this.state.bigImages ? 150 : 75;
+    var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
+    var location = asset.node.location.longitude ?
      JSON.stringify(asset.node.location) : 'Unknown location';
    return (
-      <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
-        <View style={styles.row}>
+      <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }>
+        <View key={asset} style={styles.row}>
          <Image
            source={asset.node.image}
            style={imageStyle}
@@ -100,9 +97,9 @@ const CameraRollExample = React.createClass({
  },

  _onSliderChange(value) {
-    const options = CameraRoll.GroupTypesOptions;
-    const index = Math.floor(value * options.length * 0.99);
-    const groupTypes = options[index];
+    var options = CameraRoll.GroupTypesOptions;
+    var index = Math.floor(value * options.length * 0.99);
+    var groupTypes = options[index];
    if (groupTypes !== this.state.groupTypes) {
      this.setState({groupTypes: groupTypes});
    }
@@ -114,7 +111,7 @@ const CameraRollExample = React.createClass({
  }
 });

-const styles = StyleSheet.create({
+var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flex: 1,
@@ -22,7 +22,6 @@ var {
  CameraRoll,
  Image,
  ListView,
-  Platform,
  StyleSheet,
  View,
 } = React;
@@ -140,10 +139,6 @@ var CameraRollView = React.createClass({
      groupTypes: this.props.groupTypes,
      assetType: this.props.assetType,
    };
-    if (Platform.OS === "android") {
-      // not supported in android
-      delete fetchParams.groupTypes;
-    }
    if (this.state.lastCursor) {
      fetchParams.after = this.state.lastCursor;
    }
@@ -1,65 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  Clipboard,
-  View,
-  Text,
-} = React;
-
-var ClipboardExample = React.createClass({
-  getInitialState() {
-    return {
-      content: 'Content will appear here'
-    };
-  },
-
-  async _setClipboardContent(){
-    Clipboard.setString('Hello World');
-    try {
-      var content = await Clipboard.getString();
-      this.setState({content});
-    } catch (e) {
-      this.setState({content:e.message});
-    }
-  },
-
-  render() {
-    return (
-      <View>
-        <Text onPress={this._setClipboardContent} style={{color: 'blue'}}>
-          Tap to put "Hello World" in the clipboard
-        </Text>
-        <Text style={{color: 'red', marginTop: 20}}>
-          {this.state.content}
-        </Text>
-      </View>
-    );
-  }
-});
-
-exports.title = 'Clipboard';
-exports.description = 'Show Clipboard contents.';
-exports.examples = [
-  {
-    title: 'Clipboard.setString() and getString()',
-    render() {
-      return <ClipboardExample/>;
-    }
-  }
-];
@@ -1,117 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  DatePickerAndroid,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-} = React;
-
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
-
-var DatePickerAndroidExample = React.createClass({
-
-  statics: {
-    title: 'DatePickerAndroid',
-    description: 'Standard Android date picker dialog',
-  },
-
-  getInitialState() {
-    return {
-      presetDate: new Date(2020, 4, 5),
-      allDate: new Date(2020, 4, 5),
-      simpleText: 'pick a date',
-      minText: 'pick a date, no earlier than today',
-      maxText: 'pick a date, no later than today',
-      presetText: 'pick a date, preset to 2020/5/5',
-      allText: 'pick a date between 2020/5/1 and 2020/5/10',
-    };
-  },
-
-  async showPicker(stateKey, options) {
-    try {
-      var newState = {};
-      const {action, year, month, day} = await DatePickerAndroid.open(options);      
-      if (action === DatePickerAndroid.dismissedAction) {
-        newState[stateKey + 'Text'] = 'dismissed';
-      } else {
-        var date = new Date(year, month, day);
-        newState[stateKey + 'Text'] = date.toLocaleDateString();
-        newState[stateKey + 'Date'] = date;
-      }
-      this.setState(newState);
-    } catch ({code, message}) {
-      console.warn(`Error in example '${stateKey}': `, message);
-    }
-  },
-
-  render() {
-    return (
-      <UIExplorerPage title="DatePickerAndroid">
-        <UIExplorerBlock title="Simple date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'simple', {date: this.state.simpleDate})}>
-            <Text style={styles.text}>{this.state.simpleText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Date picker with pre-set date">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
-            <Text style={styles.text}>{this.state.presetText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Date picker with minDate">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'min', {
-              date: this.state.minDate,
-              minDate: new Date(),
-            })}>
-            <Text style={styles.text}>{this.state.minText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Date picker with maxDate">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'max', {
-              date: this.state.maxDate,
-              maxDate: new Date(),
-            })}>
-            <Text style={styles.text}>{this.state.maxText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Date picker with all options">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'all', {
-              date: this.state.allDate,
-              minDate: new Date(2020, 4, 1),
-              maxDate: new Date(2020, 4, 10),
-            })}>
-            <Text style={styles.text}>{this.state.allText}</Text>
-          </TouchableWithoutFeedback>
-          </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  },
-});
-
-var styles = StyleSheet.create({
-  text: {
-    color: 'black',
-  },
-});
-
-module.exports = DatePickerAndroidExample;
@@ -18,6 +18,7 @@

 export type Example = {
  title: string,
+  /* $FlowFixMe(>=0.16.0) */
  render: () => ?ReactElement<any, any, any>,
  description?: string,
  platform?: string;
@@ -49,15 +49,11 @@ var GeolocationExample = React.createClass({

  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        var initialPosition = JSON.stringify(position);
-        this.setState({initialPosition});
-      },
+      (initialPosition) => this.setState({initialPosition}),
      (error) => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
-    this.watchID = navigator.geolocation.watchPosition((position) => {
-      var lastPosition = JSON.stringify(position);
+    this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
      this.setState({lastPosition});
    });
  },
@@ -71,11 +67,11 @@ var GeolocationExample = React.createClass({
      <View>
        <Text>
          <Text style={styles.title}>Initial position: </Text>
-          {this.state.initialPosition}
+          {JSON.stringify(this.state.initialPosition)}
        </Text>
        <Text>
          <Text style={styles.title}>Current position: </Text>
-          {this.state.lastPosition}
+          {JSON.stringify(this.state.lastPosition)}
        </Text>
      </View>
    );
@@ -35,7 +35,6 @@ var ImageCapInsetsExample = React.createClass({
          <Image
            source={require('image!story-background')}
            style={styles.storyBackground}
-            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
          />
        </View>
@@ -46,7 +45,6 @@ var ImageCapInsetsExample = React.createClass({
          <Image
            source={require('image!story-background')}
            style={styles.storyBackground}
-            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
          />
        </View>
@@ -68,6 +66,7 @@ var styles = StyleSheet.create({
    width: 250,
    height: 150,
    borderWidth: 1,
+    resizeMode: Image.resizeMode.stretch,
  },
  text: {
    fontSize: 13.5,
@@ -20,16 +20,15 @@ var React = require('react-native');
 var {
  CameraRoll,
  Image,
-  ImageEditor,
  NativeModules,
-  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
-  UIManager,
  View,
 } = React;
+var ImageEditingManager = NativeModules.ImageEditingManager;
+var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;

 var PAGE_SIZE = 20;

@@ -43,17 +42,14 @@ type ImageSize = {
  height: number;
 };

-type ImageCropData = {
+type TransformData = {
  offset: ImageOffset;
  size: ImageSize;
-  displaySize?: ?ImageSize;
-  resizeMode?: ?any;
-};
+}

 class SquareImageCropper extends React.Component {
-  state: any;
  _isMounted: boolean;
-  _transformData: ImageCropData;
+  _transformData: TransformData;

  constructor(props) {
    super(props);
@@ -67,21 +63,22 @@ class SquareImageCropper extends React.Component {
    this._fetchRandomPhoto();
  }

-  async _fetchRandomPhoto() {
-    try {
-      const data = await CameraRoll.getPhotos({first: PAGE_SIZE});
-      if (!this._isMounted) {
-        return;
-      }
-      var edges = data.edges;
-      var edge = edges[Math.floor(Math.random() * edges.length)];
-      var randomPhoto = edge && edge.node && edge.node.image;
-      if (randomPhoto) {
-        this.setState({randomPhoto});
-      }
-    } catch (error) {
-      console.warn("Can't get a photo from camera roll", error);
-    }
+  _fetchRandomPhoto() {
+    CameraRoll.getPhotos(
+      {first: PAGE_SIZE},
+      (data) => {
+        if (!this._isMounted) {
+          return;
+        }
+        var edges = data.edges;
+        var edge = edges[Math.floor(Math.random() * edges.length)];
+        var randomPhoto = edge && edge.node && edge.node.image;
+        if (randomPhoto) {
+          this.setState({randomPhoto});
+        }
+      },
+      (error) => undefined
+    );
  }

  componentWillUnmount() {
@@ -169,7 +166,7 @@ class SquareImageCropper extends React.Component {
  }

  _crop() {
-    ImageEditor.cropImage(
+    ImageEditingManager.cropImage(
      this.state.randomPhoto.uri,
      this._transformData,
      (croppedImageURI) => this.setState({croppedImageURI}),
@@ -189,49 +186,29 @@ class SquareImageCropper extends React.Component {
 }

 class ImageCropper extends React.Component {
-  _contentOffset: ImageOffset;
-  _maximumZoomScale: number;
-  _minimumZoomScale: number;
  _scaledImageSize: ImageSize;
-  _horizontal: boolean;
+  _contentOffset: ImageOffset;

  componentWillMount() {
    // Scale an image to the minimum size that is large enough to completely
    // fill the crop box.
    var widthRatio = this.props.image.width / this.props.size.width;
    var heightRatio = this.props.image.height / this.props.size.height;
-    this._horizontal = widthRatio > heightRatio;
-    if (this._horizontal) {
-      this._scaledImageSize = {
-        width: this.props.image.width / heightRatio,
-        height: this.props.size.height,
-      };
-    } else {
+    if (widthRatio < heightRatio) {
      this._scaledImageSize = {
        width: this.props.size.width,
        height: this.props.image.height / widthRatio,
      };
-      if (Platform.OS === 'android') {
-        // hack to work around Android ScrollView a) not supporting zoom, and
-        // b) not supporting vertical scrolling when nested inside another
-        // vertical ScrollView (which it is, when displayed inside UIExplorer)
-        this._scaledImageSize.width *= 2;
-        this._scaledImageSize.height *= 2;
-        this._horizontal = true;
-      }
+    } else {
+      this._scaledImageSize = {
+        width: this.props.image.width / heightRatio,
+        height: this.props.size.height,
+      };
    }
    this._contentOffset = {
      x: (this._scaledImageSize.width - this.props.size.width) / 2,
      y: (this._scaledImageSize.height - this.props.size.height) / 2,
    };
-    this._maximumZoomScale = Math.min(
-      this.props.image.width / this._scaledImageSize.width,
-      this.props.image.height / this._scaledImageSize.height
-    );
-    this._minimumZoomScale = Math.max(
-      this.props.size.width / this._scaledImageSize.width,
-      this.props.size.height / this._scaledImageSize.height 
-    );
    this._updateTransformData(
      this._contentOffset,
      this._scaledImageSize,
@@ -253,7 +230,7 @@ class ImageCropper extends React.Component {
    var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
    var sizeRatioY = croppedImageSize.height / scaledImageSize.height;

-    var cropData: ImageCropData = {
+    this.props.onTransformDataChange && this.props.onTransformDataChange({
      offset: {
        x: this.props.image.width * offsetRatioX,
        y: this.props.image.height * offsetRatioY,
@@ -262,20 +239,23 @@ class ImageCropper extends React.Component {
        width: this.props.image.width * sizeRatioX,
        height: this.props.image.height * sizeRatioY,
      },
-    };
-    this.props.onTransformDataChange && this.props.onTransformDataChange(cropData);
+    });
  }

  render() {
+    var decelerationRate =
+      RCTScrollViewConsts && RCTScrollViewConsts.DecelerationRate ?
+        RCTScrollViewConsts.DecelerationRate.Fast :
+        0;
+
    return (
      <ScrollView
        alwaysBounceVertical={true}
        automaticallyAdjustContentInsets={false}
        contentOffset={this._contentOffset}
-        decelerationRate="fast"
-        horizontal={this._horizontal}
-        maximumZoomScale={this._maximumZoomScale}
-        minimumZoomScale={this._minimumZoomScale}
+        decelerationRate={decelerationRate}
+        horizontal={true}
+        maximumZoomScale={3.0}
        onMomentumScrollEnd={this._onScroll.bind(this)}
        onScrollEndDrag={this._onScroll.bind(this)}
        showsHorizontalScrollIndicator={false}
@@ -290,8 +270,8 @@ class ImageCropper extends React.Component {
 }

 exports.framework = 'React';
-exports.title = 'ImageEditor';
-exports.description = 'Cropping and scaling with ImageEditor';
+exports.title = 'ImageEditingManager';
+exports.description = 'Cropping and scaling with ImageEditingManager';
 exports.examples = [{
  title: 'Image Cropping',
  render() {
@@ -28,46 +28,9 @@ var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACS

 var ImageCapInsetsExample = require('./ImageCapInsetsExample');

-var NetworkImageCallbackExample = React.createClass({
-  getInitialState: function() {
-    return {
-      events: [],
-      mountTime: new Date(),
-    };
-  },
-
-  componentWillMount() {
-    this.setState({mountTime: new Date()});
-  },
-
-  render: function() {
-    var { mountTime } = this.state;
-
-    return (
-      <View>
-        <Image
-          source={this.props.source}
-          style={[styles.base, {overflow: 'visible'}]}
-          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
-          onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)}
-        />
-
-        <Text style={{marginTop: 20}}>
-          {this.state.events.join('\n')}
-        </Text>
-      </View>
-    );
-  },
-
-  _loadEventFired(event) {
-    this.setState((state) => {
-      return state.events = [...state.events, event];
-    });
-  }
-});
-
 var NetworkImageExample = React.createClass({
+  watchID: (null: ?number),
+
  getInitialState: function() {
    return {
      error: false,
@@ -95,38 +58,6 @@ var NetworkImageExample = React.createClass({
  }
 });

-var ImageSizeExample = React.createClass({
-  getInitialState: function() {
-    return {
-      width: 0,
-      height: 0,
-    };
-  },
-  componentDidMount: function() {
-    Image.getSize(this.props.source.uri, (width, height) => {
-      this.setState({width, height});
-    });
-  },
-  render: function() {
-    return (
-      <View style={{flexDirection: 'row'}}>
-        <Image
-          style={{
-            width: 60,
-            height: 60,
-            backgroundColor: 'transparent',
-            marginRight: 10,
-          }}
-          source={this.props.source} />
-        <Text>
-          Actual dimensions:{'\n'}
-          Width: {this.state.width}, Height: {this.state.height}
-        </Text>
-      </View>
-    );
-  },
-});
-
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -148,27 +79,19 @@ exports.examples = [
  },
  {
    title: 'Plain Static Image',
-    description: 'Static assets should be placed in the source code tree, and ' +
-    'required in the same way as JavaScript modules.',
+    description: 'Static assets should be required by prefixing with `image!` ' +
+      'and are located in the app bundle.',
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image source={require('./uie_thumb_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_thumb_selected.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
+          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
+          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
        </View>
      );
    },
  },
-  {
-    title: 'Image Loading Events',
-    render: function() {
-      return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
-      );
-    },
-  },
  {
    title: 'Error Handler',
    render: function() {
@@ -187,20 +110,6 @@ exports.examples = [
    },
    platform: 'ios',
  },
-  {
-    title: 'defaultSource',
-    description: 'Show a placeholder image when a network image is loading',
-    render: function() {
-      return (
-        <Image
-          defaultSource={require('./bunny.png')}
-          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
-          style={styles.base}
-        />
-      );
-    },
-    platform: 'ios',
-  },
  {
    title: 'Border Color',
    render: function() {
@@ -334,19 +243,19 @@ exports.examples = [
        <View>
          <View style={styles.horizontal}>
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
            />
          </View>
@@ -452,13 +361,6 @@ exports.examples = [
    },
    platform: 'ios',
  },
-  {
-    title: 'Image Size',
-    render: function() {
-      return <ImageSizeExample source={fullImage} />; 
-    },
-    platform: 'ios',
-  },
 ];

 var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
@@ -15,7 +15,7 @@

 var React = require('react-native');
 var {
-  Linking,
+  IntentAndroid,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
@@ -30,9 +30,9 @@ var OpenURLButton = React.createClass({
  },

  handleClick: function() {
-    Linking.canOpenURL(this.props.url).then(supported => {
+    IntentAndroid.canOpenURL(this.props.url, (supported) => {
      if (supported) {
-        Linking.openURL(this.props.url);
+        IntentAndroid.openURL(this.props.url);
      } else {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
@@ -54,8 +54,8 @@ var OpenURLButton = React.createClass({
 var IntentAndroidExample = React.createClass({

  statics: {
-    title: 'Linking',
-    description: 'Shows how to use Linking to open URLs.',
+    title: 'IntentAndroid',
+    description: 'Shows how to use Android Intents to open URLs.',
  },

  render: function() {
@@ -64,9 +64,7 @@ var IntentAndroidExample = React.createClass({
        <OpenURLButton url={'https://www.facebook.com'} />
        <OpenURLButton url={'http://www.facebook.com'} />
        <OpenURLButton url={'http://facebook.com'} />
-        <OpenURLButton url={'fb://notifications'} />
        <OpenURLButton url={'geo:37.484847,-122.148386'} />
-        <OpenURLButton url={'tel:9876543210'} />
      </UIExplorerBlock>
    );
  },
@@ -24,30 +24,19 @@ var {
  View,
 } = React;

-type Layout = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
 type LayoutEvent = {
  nativeEvent: {
-    layout: Layout,
+    layout: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
  };
 };

-type State = {
-  containerStyle?: { width: number },
-  extraText?: string,
-  imageLayout?: Layout,
-  textLayout?: Layout,
-  viewLayout?: Layout,
-  viewStyle: { margin: number },
-};
-
 var LayoutEventExample = React.createClass({
-  getInitialState(): State {
+  getInitialState: function() {
    return {
      viewStyle: {
        margin: 20,
@@ -21,7 +21,6 @@ var {
  ListView,
  TouchableHighlight,
  StyleSheet,
-  RecyclerViewBackedScrollView,
  Text,
  View,
 } = React;
@@ -30,7 +29,7 @@ var UIExplorerPage = require('./UIExplorerPage');

 var ListViewSimpleExample = React.createClass({
  statics: {
-    title: '<ListView>',
+    title: '<ListView> - Simple',
    description: 'Performant, scrollable list of data.'
  },

@@ -50,14 +49,12 @@ var ListViewSimpleExample = React.createClass({
  render: function() {
    return (
      <UIExplorerPage
-        title={this.props.navigator ? null : '<ListView>'}
+        title={this.props.navigator ? null : '<ListView> - Simple'}
        noSpacer={true}
        noScroll={true}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
-          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
        />
      </UIExplorerPage>
    );
@@ -65,7 +62,9 @@ var ListViewSimpleExample = React.createClass({

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var rowHash = Math.abs(hashCode(rowData));
-    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
+    var imgSource = {
+      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
+    };
    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
        <View>
@@ -75,6 +74,7 @@ var ListViewSimpleExample = React.createClass({
              {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
            </Text>
          </View>
+          <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
@@ -98,18 +98,18 @@ var ListViewSimpleExample = React.createClass({
 });

 var THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
+  'Thumbnails/like.png',
+  'Thumbnails/dislike.png',
+  'Thumbnails/call.png',
+  'Thumbnails/fist.png',
+  'Thumbnails/bandaged.png',
+  'Thumbnails/flowers.png',
+  'Thumbnails/heart.png',
+  'Thumbnails/liking.png',
+  'Thumbnails/party.png',
+  'Thumbnails/poke.png',
+  'Thumbnails/superlike.png',
+  'Thumbnails/victory.png',
  ];
 var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';

@@ -26,18 +26,18 @@ var {
 } = React;

 var THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
+  'Thumbnails/like.png',
+  'Thumbnails/dislike.png',
+  'Thumbnails/call.png',
+  'Thumbnails/fist.png',
+  'Thumbnails/bandaged.png',
+  'Thumbnails/flowers.png',
+  'Thumbnails/heart.png',
+  'Thumbnails/liking.png',
+  'Thumbnails/party.png',
+  'Thumbnails/poke.png',
+  'Thumbnails/superlike.png',
+  'Thumbnails/victory.png',
 ];

 var ListViewGridLayoutExample = React.createClass({
@@ -67,9 +67,6 @@ var ListViewGridLayoutExample = React.createClass({
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
-        initialListSize={21}
-        pageSize={3} // should be a multiple of the no. of visible cells per row
-        scrollRenderAheadDistance={500}
        renderRow={this._renderRow}
      />
    );
@@ -77,7 +74,9 @@ var ListViewGridLayoutExample = React.createClass({

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var rowHash = Math.abs(hashCode(rowData));
-    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
+    var imgSource = {
+      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
+    };
    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
        <View>
@@ -11,7 +11,6 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @provides ListViewPagingExample
 * @flow
 */
 'use strict';
@@ -27,25 +26,21 @@ var {
  View,
 } = React;

-var NativeModules = require('NativeModules');
-var {
-  UIManager,
-} = NativeModules;
-
+var PAGE_SIZE = 4;
 var THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
-];
+  'Thumbnails/like.png',
+  'Thumbnails/dislike.png',
+  'Thumbnails/call.png',
+  'Thumbnails/fist.png',
+  'Thumbnails/bandaged.png',
+  'Thumbnails/flowers.png',
+  'Thumbnails/heart.png',
+  'Thumbnails/liking.png',
+  'Thumbnails/party.png',
+  'Thumbnails/poke.png',
+  'Thumbnails/superlike.png',
+  'Thumbnails/victory.png',
+  ];
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;

@@ -53,10 +48,6 @@ var Thumb = React.createClass({
  getInitialState: function() {
    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
  },
-  componentWillMount: function() {
-    UIManager.setLayoutAnimationEnabledExperimental &&
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-  },
  _getThumbIdx: function() {
    return Math.floor(Math.random() * THUMB_URLS.length);
  },
@@ -73,9 +64,9 @@ var Thumb = React.createClass({
      <TouchableOpacity
        onPress={this._onPressThumb}
        style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
        {this.state.dir === 'column' ?
          <Text>
            Oooo, look at this new text!  So awesome it may just be crazy.
@@ -181,8 +172,8 @@ var ListViewPagingExample = React.createClass({
        renderSectionHeader={this.renderSectionHeader}
        renderRow={this.renderRow}
        initialListSize={10}
-        pageSize={4}
-        scrollRenderAheadDistance={500}
+        pageSize={PAGE_SIZE}
+        scrollRenderAheadDistance={2000}
      />
    );
  },
@@ -17,13 +17,10 @@

 var React = require('react-native');
 var {
-  Image,
  MapView,
-  PropTypes,
  StyleSheet,
  Text,
  TextInput,
-  TouchableOpacity,
  View,
 } = React;

@@ -37,20 +34,22 @@ var regionText = {
 var MapRegionInput = React.createClass({

  propTypes: {
-    region: PropTypes.shape({
-      latitude: PropTypes.number.isRequired,
-      longitude: PropTypes.number.isRequired,
-      latitudeDelta: PropTypes.number,
-      longitudeDelta: PropTypes.number,
+    region: React.PropTypes.shape({
+      latitude: React.PropTypes.number.isRequired,
+      longitude: React.PropTypes.number.isRequired,
+      latitudeDelta: React.PropTypes.number.isRequired,
+      longitudeDelta: React.PropTypes.number.isRequired,
    }),
-    onChange: PropTypes.func.isRequired,
+    onChange: React.PropTypes.func.isRequired,
  },

-  getInitialState() {
+  getInitialState: function() {
    return {
      region: {
        latitude: 0,
        longitude: 0,
+        latitudeDelta: 0,
+        longitudeDelta: 0,
      }
    };
  },
@@ -92,9 +91,7 @@ var MapRegionInput = React.createClass({
            {'Latitude delta'}
          </Text>
          <TextInput
-            value={
-              region.latitudeDelta == null ? '' : String(region.latitudeDelta)
-            }
+            value={'' + region.latitudeDelta}
            style={styles.textInput}
            onChange={this._onChangeLatitudeDelta}
            selectTextOnFocus={true}
@@ -105,9 +102,7 @@ var MapRegionInput = React.createClass({
            {'Longitude delta'}
          </Text>
          <TextInput
-            value={
-              region.longitudeDelta == null ? '' : String(region.longitudeDelta)
-            }
+            value={'' + region.longitudeDelta}
            style={styles.textInput}
            onChange={this._onChangeLongitudeDelta}
            selectTextOnFocus={true}
@@ -140,12 +135,10 @@ var MapRegionInput = React.createClass({

  _change: function() {
    this.setState({
-      region: {
-        latitude: parseFloat(regionText.latitude),
-        longitude: parseFloat(regionText.longitude),
-        latitudeDelta: parseFloat(regionText.latitudeDelta),
-        longitudeDelta: parseFloat(regionText.longitudeDelta),
-      },
+      latitude: parseFloat(regionText.latitude),
+      longitude: parseFloat(regionText.longitude),
+      latitudeDelta: parseFloat(regionText.latitudeDelta),
+      longitudeDelta: parseFloat(regionText.longitudeDelta),
    });
    this.props.onChange(this.state.region);
  },
@@ -156,10 +149,10 @@ var MapViewExample = React.createClass({

  getInitialState() {
    return {
+      mapRegion: null,
+      mapRegionInput: null,
+      annotations: null,
      isFirstLoad: true,
-      mapRegion: undefined,
-      mapRegionInput: undefined,
-      annotations: [],
    };
  },

@@ -170,12 +163,12 @@ var MapViewExample = React.createClass({
          style={styles.map}
          onRegionChange={this._onRegionChange}
          onRegionChangeComplete={this._onRegionChangeComplete}
-          region={this.state.mapRegion}
-          annotations={this.state.annotations}
+          region={this.state.mapRegion || undefined}
+          annotations={this.state.annotations || undefined}
        />
        <MapRegionInput
          onChange={this._onRegionInputChanged}
-          region={this.state.mapRegionInput}
+          region={this.state.mapRegionInput || undefined}
        />
      </View>
    );
@@ -215,42 +208,6 @@ var MapViewExample = React.createClass({

 });

-var AnnotationExample = React.createClass({
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      annotations: [],
-      mapRegion: undefined,
-    };
-  },
-
-  render() {
-    if (this.state.isFirstLoad) {
-      var onRegionChangeComplete = (region) => {
-        this.setState({
-          isFirstLoad: false,
-          annotations: [{
-            longitude: region.longitude,
-            latitude: region.latitude,
-            ...this.props.annotation,
-          }],
-        });
-      };
-    }
-
-    return (
-      <MapView
-        style={styles.map}
-        onRegionChangeComplete={onRegionChangeComplete}
-        region={this.state.mapRegion}
-        annotations={this.state.annotations}
-      />
-    );
-  },
-
-});
-
 var styles = StyleSheet.create({
  map: {
    height: 150,
@@ -285,123 +242,12 @@ exports.description = 'Base component to display maps';
 exports.examples = [
  {
    title: 'Map',
-    render() {
-      return <MapViewExample />;
-    }
+    render(): ReactElement { return <MapViewExample />; }
  },
  {
-    title: 'showsUserLocation + followUserLocation',
+    title: 'Map shows user location',
    render() {
-      return (
-        <MapView
-          style={styles.map}
-          showsUserLocation={true}
-          followUserLocation={true}
-        />
-      );
+      return  <MapView style={styles.map} showsUserLocation={true} />;
    }
-  },
-  {
-    title: 'Callout example',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        title: 'More Info...',
-        rightCalloutView: (
-          <TouchableOpacity
-            onPress={() => {
-              alert('You Are Here');
-            }}>
-            <Image
-              style={{width:30, height:30}}
-              source={require('./uie_thumb_selected.png')}
-            />
-          </TouchableOpacity>
-        ),
-      }}/>;
-    }
-  },
-  {
-    title: 'Annotation focus example',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        title: 'More Info...',
-        onFocus: () => {
-          alert('Annotation gets focus');
-        },
-        onBlur: () => {
-          alert('Annotation lost focus');
-        }
-      }}/>;
-    }
-  },
-  {
-    title: 'Draggable pin',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        draggable: true,
-        onDragStateChange: (event) => {
-          console.log('Drag state: ' + event.state);
-        },
-      }}/>;
-    }
-  },
-  {
-    title: 'Custom pin color',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        title: 'You Are Purple',
-        tintColor: MapView.PinColors.PURPLE,
-      }}/>;
-    }
-  },
-  {
-    title: 'Custom pin image',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        title: 'Thumbs Up!',
-        image: require('image!uie_thumb_big'),
-      }}/>;
-    }
-  },
-  {
-    title: 'Custom pin view',
-    render() {
-      return <AnnotationExample style={styles.map} annotation={{
-        title: 'Thumbs Up!',
-        view: <View style={{
-          alignItems: 'center',
-        }}>
-          <Text style={{fontWeight: 'bold', color: '#f007'}}>
-            Thumbs Up!
-          </Text>
-          <Image
-            style={{width: 90, height: 65, resizeMode: 'cover'}}
-            source={require('image!uie_thumb_big')}
-          />
-        </View>,
-      }}/>;
-    }
-  },
-  {
-    title: 'Custom overlay',
-    render() {
-      return <MapView
-        style={styles.map}
-        region={{
-          latitude: 39.06,
-          longitude: -95.22,
-        }}
-        overlays={[{
-          coordinates:[
-            {latitude: 32.47, longitude: -107.85},
-            {latitude: 45.13, longitude: -94.48},
-            {latitude: 39.27, longitude: -83.25},
-            {latitude: 32.47, longitude: -107.85},
-          ],
-          strokeColor: '#f007',
-          lineWidth: 3,
-        }]}
-      />;
-    }
-  },
+  }
 ];
@@ -1,164 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity
-} = React;
-
-var _getRandomRoute = function() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var BreadcrumbNavSample = React.createClass({
-
-  componentWillMount: function() {
-    this._navBarRouteMapper = {
-      rightContentForRoute: function(route, navigator) {
-        return null;
-      },
-      titleContentForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => navigator.push(_getRandomRoute())}>
-            <Text style={styles.titleText}>{route.title}</Text>
-          </TouchableOpacity>
-        );
-      },
-      iconForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={() => { navigator.popToRoute(route); }}
-            style={styles.crumbIconPlaceholder}
-          />
-        );
-      },
-      separatorForRoute: function(route, navigator) {
-        return (
-          <TouchableOpacity
-            onPress={navigator.pop}
-            style={styles.crumbSeparatorPlaceholder}
-          />
-        );
-      }
-    };
-  },
-
-  _renderScene: function(route, navigator) {
-    return (
-      <ScrollView style={styles.scene}>
-        <NavButton
-          onPress={() => { navigator.push(_getRandomRoute()); }}
-          text="Push"
-        />
-        <NavButton
-          onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]); }}
-          text="Reset w/ 2 scenes"
-        />
-        <NavButton
-          onPress={() => { navigator.popToTop(); }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => { navigator.replace(_getRandomRoute()); }}
-          text="Replace"
-        />
-        <NavButton
-          onPress={() => { this.props.navigator.pop(); }}
-          text="Close breadcrumb example"
-        />
-      </ScrollView>
-    );
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        style={styles.container}
-        initialRoute={_getRandomRoute()}
-        renderScene={this._renderScene}
-        navigationBar={
-          <Navigator.BreadcrumbNavigationBar
-            routeMapper={this._navBarRouteMapper}
-          />
-        }
-      />
-    );
-  },
-
-
-
-});
-
-var styles = StyleSheet.create({
-  scene: {
-    paddingTop: 50,
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  container: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  titleText: {
-    fontSize: 18,
-    color: '#666666',
-    textAlign: 'center',
-    fontWeight: 'bold',
-    lineHeight: 32,
-  },
-  crumbIconPlaceholder: {
-    flex: 1,
-    backgroundColor: '#666666',
-  },
-  crumbSeparatorPlaceholder: {
-    flex: 1,
-    backgroundColor: '#aaaaaa',
-  },
-});
-
-module.exports = BreadcrumbNavSample;
@@ -1,218 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-  TabBarIOS,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-
-var _getRandomRoute = function() {
-  return {
-    randNumber: Math.ceil(Math.random() * 1000),
-  };
-};
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var ROUTE_STACK = [
-  _getRandomRoute(),
-  _getRandomRoute(),
-  _getRandomRoute(),
-];
-var INIT_ROUTE_INDEX = 1;
-
-class JumpingNavBar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tabIndex: props.initTabIndex,
-    };
-  }
-  handleWillFocus(route) {
-    var tabIndex = ROUTE_STACK.indexOf(route);
-    this.setState({ tabIndex, });
-  }
-  render() {
-    return (
-      <View style={styles.tabs}>
-        <TabBarIOS>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_notification')}
-            selected={this.state.tabIndex === 0}
-            onPress={() => {
-              this.props.onTabIndex(0);
-              this.setState({ tabIndex: 0, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_list')}
-            selected={this.state.tabIndex === 1}
-            onPress={() => {
-              this.props.onTabIndex(1);
-              this.setState({ tabIndex: 1, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-          <TabBarIOS.Item
-            icon={require('image!tabnav_settings')}
-            selected={this.state.tabIndex === 2}
-            onPress={() => {
-              this.props.onTabIndex(2);
-              this.setState({ tabIndex: 2, });
-            }}>
-            <View />
-          </TabBarIOS.Item>
-        </TabBarIOS>
-      </View>
-    );
-  }
-}
-
-var JumpingNavSample = React.createClass({
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        ref={(navigator) => {
-          this._navigator = navigator;
-        }}
-        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
-        initialRouteStack={ROUTE_STACK}
-        renderScene={this.renderScene}
-        configureScene={() => ({
-          ...Navigator.SceneConfigs.HorizontalSwipeJump,
-        })}
-        navigationBar={
-          <JumpingNavBar
-            ref={(navBar) => { this.navBar = navBar; }}
-            initTabIndex={INIT_ROUTE_INDEX}
-            routeStack={ROUTE_STACK}
-            onTabIndex={(index) => {
-              this._navigator.jumpTo(ROUTE_STACK[index]);
-            }}
-          />
-        }
-      />
-    );
-  },
-
-  renderScene: function(route, navigator) {
-    var backBtn;
-    var forwardBtn;
-    if (ROUTE_STACK.indexOf(route) !== 0) {
-      backBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpBack();
-          }}
-          text="jumpBack"
-        />
-      );
-    }
-    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
-      forwardBtn = (
-        <NavButton
-          onPress={() => {
-            navigator.jumpForward();
-          }}
-          text="jumpForward"
-        />
-      );
-    }
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>#{route.randNumber}</Text>
-        {backBtn}
-        {forwardBtn}
-        <NavButton
-          onPress={() => {
-            navigator.jumpTo(ROUTE_STACK[1]);
-          }}
-          text="jumpTo middle route"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Exit Navigation Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Came from jumping example',
-            });
-          }}
-          text="Nav Menu"
-        />
-      </ScrollView>
-    );
-  },
-});
-
-var styles = StyleSheet.create({
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  appContainer: {
-    overflow: 'hidden',
-    backgroundColor: '#dddddd',
-    flex: 1,
-  },
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-  tabs: {
-    height: 50,
-  }
-});
-
-module.exports = JumpingNavSample;
@@ -1,212 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} = React;
-
-var BreadcrumbNavSample = require('./BreadcrumbNavSample');
-var NavigationBarSample = require('./NavigationBarSample');
-var JumpingNavSample = require('./JumpingNavSample');
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-class NavMenu extends React.Component {
-  render() {
-    return (
-      <ScrollView style={styles.scene}>
-        <Text style={styles.messageText}>{this.props.message}</Text>
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe right to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
-            });
-          }}
-          text="Float in from right"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({
-              message: 'Swipe down to dismiss',
-              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
-            });
-          }}
-          text="Float in from bottom"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.pop();
-          }}
-          text="Pop"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.popToTop();
-          }}
-          text="Pop to top"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'navbar' });
-          }}
-          text="Navbar Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'jumping' });
-          }}
-          text="Jumping Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.navigator.push({ id: 'breadcrumbs' });
-          }}
-          text="Breadcrumbs Example"
-        />
-        <NavButton
-          onPress={() => {
-            this.props.onExampleExit();
-          }}
-          text="Exit <LegacyNavigator> Example"
-        />
-      </ScrollView>
-    );
-  }
-}
-
-var TabBarExample = React.createClass({
-
-  statics: {
-    title: '<LegacyNavigator> (Experimental)',
-    description: 'Experimental navigator that ports the API of the current ' +
-      'Navigator component',
-  },
-
-  renderScene: function(route, nav) {
-    switch (route.id) {
-      case 'navbar':
-        return <NavigationBarSample navigator={nav} />;
-      case 'breadcrumbs':
-        return <BreadcrumbNavSample navigator={nav} />;
-      case 'jumping':
-        return <JumpingNavSample navigator={nav} />;
-      default:
-        return (
-          <NavMenu
-            message={route.message}
-            navigator={nav}
-            onExampleExit={this.props.onExampleExit}
-          />
-        );
-    }
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        ref={this._setNavigatorRef}
-        style={styles.container}
-        initialRoute={{ message: 'First Scene', }}
-        renderScene={this.renderScene}
-        configureScene={(route) => {
-          if (route.sceneConfig) {
-            return route.sceneConfig;
-          }
-          return Navigator.SceneConfigs.FloatFromBottom;
-        }}
-      />
-    );
-  },
-
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  _setNavigatorRef: function(navigator) {
-    if (navigator !== this._navigator) {
-      this._navigator = navigator;
-
-      if (navigator) {
-        var callback = (event) => {
-          console.log(
-            `TabBarExample: event ${event.type}`,
-            {
-              route: JSON.stringify(event.data.route),
-              target: event.target,
-              type: event.type,
-            }
-          );
-        };
-        // Observe focus change events from the owner.
-        this._listeners = [
-          navigator.navigationContext.addListener('willfocus', callback),
-          navigator.navigationContext.addListener('didfocus', callback),
-        ];
-      }
-    }
-  },
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  container: {
-    flex: 1,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#ccc',
-  }
-});
-
-TabBarExample.external = true;
-
-module.exports = TabBarExample;
@@ -1,201 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-} = React;
-
-var Navigator = NavigationExperimental.LegacyNavigator;
-
-class NavButton extends React.Component {
-  render() {
-    return (
-      <TouchableHighlight
-        style={styles.button}
-        underlayColor="#B5B5B5"
-        onPress={this.props.onPress}>
-        <Text style={styles.buttonText}>{this.props.text}</Text>
-      </TouchableHighlight>
-    );
-  }
-}
-
-var NavigationBarRouteMapper = {
-
-  LeftButton: function(route, navigator, index, navState) {
-    if (index === 0) {
-      return null;
-    }
-
-    var previousRoute = navState.routeStack[index - 1];
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.pop()}
-        style={styles.navBarLeftButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          {previousRoute.title}
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  RightButton: function(route, navigator, index, navState) {
-    return (
-      <TouchableOpacity
-        onPress={() => navigator.push(newRandomRoute())}
-        style={styles.navBarRightButton}>
-        <Text style={[styles.navBarText, styles.navBarButtonText]}>
-          Next
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-
-  Title: function(route, navigator, index, navState) {
-    return (
-      <Text style={[styles.navBarText, styles.navBarTitleText]}>
-        {route.title} [{index}]
-      </Text>
-    );
-  },
-
-};
-
-function newRandomRoute() {
-  return {
-    title: '#' + Math.ceil(Math.random() * 1000),
-  };
-}
-
-var NavigationBarSample = React.createClass({
-
-  componentWillMount: function() {
-    var navigator = this.props.navigator;
-
-    var callback = (event) => {
-      console.log(
-        `NavigationBarSample : event ${event.type}`,
-        {
-          route: JSON.stringify(event.data.route),
-          target: event.target,
-          type: event.type,
-        }
-      );
-    };
-
-    // Observe focus change events from this component.
-    this._listeners = [
-      navigator.navigationContext.addListener('willfocus', callback),
-      navigator.navigationContext.addListener('didfocus', callback),
-    ];
-  },
-
-  componentWillUnmount: function() {
-    this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
-
-  render: function() {
-    return (
-      <Navigator
-        debugOverlay={false}
-        style={styles.appContainer}
-        initialRoute={newRandomRoute()}
-        renderScene={(route, navigator) => (
-          <ScrollView style={styles.scene}>
-            <Text style={styles.messageText}>{route.content}</Text>
-            <NavButton
-              onPress={() => {
-                navigator.immediatelyResetRouteStack([
-                  newRandomRoute(),
-                  newRandomRoute(),
-                  newRandomRoute(),
-                ]);
-              }}
-              text="Reset w/ 3 scenes"
-            />
-            <NavButton
-              onPress={() => {
-                this.props.navigator.pop();
-              }}
-              text="Exit NavigationBar Example"
-            />
-          </ScrollView>
-        )}
-        navigationBar={
-          <Navigator.NavigationBar
-            routeMapper={NavigationBarRouteMapper}
-            style={styles.navBar}
-          />
-        }
-      />
-    );
-  },
-
-});
-
-var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
-  button: {
-    backgroundColor: 'white',
-    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#CDCDCD',
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  navBar: {
-    backgroundColor: 'white',
-  },
-  navBarText: {
-    fontSize: 16,
-    marginVertical: 10,
-  },
-  navBarTitleText: {
-    color: '#373E4D',
-    fontWeight: '500',
-    marginVertical: 9,
-  },
-  navBarLeftButton: {
-    paddingLeft: 10,
-  },
-  navBarRightButton: {
-    paddingRight: 10,
-  },
-  navBarButtonText: {
-    color: '#5890FF',
-  },
-  scene: {
-    flex: 1,
-    paddingTop: 20,
-    backgroundColor: '#EAEAEA',
-  },
-});
-
-module.exports = NavigationBarSample;
@@ -1,141 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  Animated,
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-} = React;
-var NavigationExampleRow = require('./NavigationExampleRow');
-var {
-  AnimatedView: NavigationAnimatedView,
-  Card: NavigationCard,
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
-  Header: NavigationHeader,
-} = NavigationExperimental;
-
-const NavigationBasicReducer = NavigationReducer.StackReducer({
-  getPushedReducerForAction: (action) => {
-    if (action.type === 'push') {
-      return (state) => state || {key: action.key};
-    }
-    return null;
-  },
-  getReducerForState: (initialState) => (state) => state || initialState,
-  initialState: {
-    key: 'AnimatedExampleStackKey',
-    index: 0,
-    children: [
-      {key: 'First Route'},
-    ],
-  },
-});
-
-class NavigationAnimatedExample extends React.Component {
-  componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
-    this._renderCard = this._renderCard.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-    this._renderHeader = this._renderHeader.bind(this);
-  }
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        persistenceKey="NavigationAnimExampleState"
-        renderNavigation={this._renderNavigation}
-      />
-    );
-  }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-  _renderNavigation(navigationState, onNavigate) {
-    if (!navigationState) {
-      return null;
-    }
-    return (
-      <NavigationAnimatedView
-        navigationState={navigationState}
-        style={styles.animatedView}
-        renderOverlay={this._renderHeader}
-        setTiming={(pos, navState) => {
-          Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
-        }}
-        renderScene={this._renderCard}
-      />
-    );
-  }
-
-  _renderHeader(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <NavigationHeader
-        {...props}
-        getTitle={state => state.key}
-      />
-    );
-  }
-
-  _renderCard(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <NavigationCard
-        {...props}
-        key={'card_' + props.scene.navigationState.key}
-        renderScene={this._renderScene}
-      />
-    );
-  }
-
-  _renderScene(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text={props.scene.navigationState.key}
-        />
-        <NavigationExampleRow
-          text="Push!"
-          onPress={() => {
-            props.onNavigate({
-              type: 'push',
-              key: 'Route #' + props.scenes.length,
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Animated Nav Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  animatedView: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: 64
-  },
-});
-
-module.exports = NavigationAnimatedExample;
@@ -1,100 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const React = require('react-native');
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-} = React;
-const NavigationExampleRow = require('./NavigationExampleRow');
-const {
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-const StackReducer = NavigationReducer.StackReducer;
-
-const NavigationBasicReducer = NavigationReducer.StackReducer({
-  getPushedReducerForAction: (action) => {
-    if (action.type === 'push') {
-      return (state) => state || {key: action.key};
-    }
-    return null;
-  },
-  getReducerForState: (initialState) => (state) => state || initialState,
-  initialState: {
-    key: 'BasicExampleStackKey',
-    index: 0,
-    children: [
-      {key: 'First Route'},
-    ],
-  },
-});
-
-const NavigationBasicExample = React.createClass({
-  render: function() {
-    return (
-      <NavigationRootContainer
-        reducer={NavigationBasicReducer}
-        persistenceKey="NavigationBasicExampleState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navState, onNavigate) => {
-          if (!navState) { return null; }
-          return (
-            <ScrollView style={styles.topView}>
-              <NavigationExampleRow
-                text={`Current page: ${navState.children[navState.index].key}`}
-              />
-              <NavigationExampleRow
-                text={`Push page #${navState.children.length}`}
-                onPress={() => {
-                  onNavigate({ type: 'push', key: 'page #' + navState.children.length });
-                }}
-              />
-              <NavigationExampleRow
-                text="pop"
-                onPress={() => {
-                  onNavigate(NavigationRootContainer.getBackAction());
-                }}
-              />
-              <NavigationExampleRow
-                text="Exit Basic Nav Example"
-                onPress={this.props.onExampleExit}
-              />
-            </ScrollView>
-          );
-        }}
-      />
-    );
-  },
-
-  handleBackAction: function() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  },
-
-});
-
-const styles = StyleSheet.create({
-  topView: {
-    backgroundColor: '#E9E9EF',
-    flex: 1,
-    paddingTop: 30,
-  },
-});
-
-module.exports = NavigationBasicExample;
@@ -1,152 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationRootContainer = require('NavigationRootContainer');
-const React = require('react-native');
-
-const {
-  NavigationExperimental,
-  StyleSheet,
-  ScrollView,
-} = React;
-
-const NavigationCardStack = NavigationExperimental.CardStack;
-const NavigationStateUtils = NavigationExperimental.StateUtils;
-
-function reduceNavigationState(initialState) {
-  return (currentState, action) => {
-    switch (action.type) {
-      case 'RootContainerInitialAction':
-        return initialState;
-
-      case 'push':
-        return NavigationStateUtils.push(currentState, {key: action.key});
-
-      case 'back':
-      case 'pop':
-        return currentState.index > 0 ?
-          NavigationStateUtils.pop(currentState) :
-          currentState;
-
-      default:
-        return currentState;
-    }
-  };
-}
-
-const ExampleReducer = reduceNavigationState({
-  index: 0,
-  key: 'exmaple',
-  children: [{key: 'First Route'}],
-});
-
-class NavigationCardStackExample extends React.Component {
-
-  constructor(props, context) {
-    super(props, context);
-    this.state = {isHorizontal: true};
-  }
-
-  componentWillMount() {
-    this._renderNavigation = this._renderNavigation.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-    this._toggleDirection = this._toggleDirection.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleReducer}
-        renderNavigation={this._renderNavigation}
-        style={styles.main}
-      />
-    );
-  }
-
-  _renderNavigation(navigationState, onNavigate) {
-    return (
-      <NavigationCardStack
-        direction={this.state.isHorizontal ? 'horizontal' : 'vertical'}
-        navigationState={navigationState}
-        onNavigate={onNavigate}
-        renderScene={this._renderScene}
-        style={styles.main}
-      />
-    );
-  }
-
-  _renderScene(/*NavigationSceneRendererProps*/ props) {
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text={
-            this.state.isHorizontal ?
-            'direction = "horizontal"' :
-            'direction = "vertical"'
-          }
-          onPress={this._toggleDirection}
-        />
-        <NavigationExampleRow
-          text={'route = ' + props.scene.navigationState.key}
-        />
-        <NavigationExampleRow
-          text="Push Route"
-          onPress={() => {
-            props.onNavigate({
-              type: 'push',
-              key: 'Route ' + props.scenes.length,
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Pop Route"
-          onPress={() => {
-            props.onNavigate({
-              type: 'pop',
-            });
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Card Stack Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-
-  _toggleDirection() {
-    this.setState({
-      isHorizontal: !this.state.isHorizontal,
-    });
-  }
-
-  _onNavigate(action) {
-    if (action && action.type === 'back') {
-      this._pop();
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  main: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: 64
-  },
-});
-
-module.exports = NavigationCardStackExample;
@@ -1,294 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-const React = require('react-native');
-const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationExampleTabBar = require('./NavigationExampleTabBar');
-
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  View,
-} = React;
-
-const {
-  AnimatedView: NavigationAnimatedView,
-  CardStack: NavigationCardStack,
-  Container: NavigationContainer,
-  Header: NavigationHeader,
-  Reducer: NavigationReducer,
-  RootContainer: NavigationRootContainer,
-  View: NavigationView,
-} = NavigationExperimental;
-
-
-import type {
-  NavigationParentState,
-  NavigationSceneRenderer,
-  NavigationSceneRendererProps,
-} from 'NavigationTypeDefinition';
-
-type Action = {
-  isExitAction?: boolean,
-};
-
-const ExampleExitAction = () => ({
-  isExitAction: true,
-});
-
-ExampleExitAction.match = (action: Action) => (
-  action && action.isExitAction === true
-);
-
-const PageAction = (type) => ({
-  type,
-  isPageAction: true,
-});
-
-PageAction.match = (action) => (
-  action && action.isPageAction === true
-);
-
-const ExampleProfilePageAction = (type) => ({
-  ...PageAction(type),
-  isProfilePageAction: true,
-});
-
-ExampleProfilePageAction.match = (action) => (
-  action && action.isProfilePageAction === true
-);
-
-const ExampleInfoAction = () => PageAction('InfoPage');
-
-const ExampleNotifProfileAction = () => ExampleProfilePageAction('NotifProfilePage');
-
-const _jsInstanceUniqueId = '' + Date.now();
-
-let _uniqueIdCount = 0;
-
-function pageStateActionMap(action) {
-  return {
-    key: 'page-' + _jsInstanceUniqueId + '-' + (_uniqueIdCount++),
-    type: action.type,
-  };
-}
-
-const ExampleAppReducer = NavigationReducer.TabsReducer({
-  key: 'AppNavigationState',
-  initialIndex: 0,
-  tabReducers: [
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'notifs',
-        index: 0,
-        children: [
-          {key: 'base', type: 'NotifsPage'},
-        ],
-      },
-    }),
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'settings',
-        index: 0,
-        children: [
-          {key: 'base', type: 'SettingsPage'},
-        ],
-      },
-    }),
-    NavigationReducer.StackReducer({
-      getPushedReducerForAction: (action) => {
-        if (PageAction.match(action) || ExampleProfilePageAction.match(action)) {
-          return (state) => (state || pageStateActionMap(action));
-        }
-        return null;
-      },
-      initialState: {
-        key: 'profile',
-        index: 0,
-        children: [
-          {key: 'base', type: 'ProfilePage'},
-        ],
-      },
-    }),
-  ],
-});
-
-function stateTypeTitleMap(pageState) {
-  switch (pageState.type) {
-    case 'ProfilePage':
-      return 'Profile Page';
-    case 'NotifsPage':
-      return 'Notifications';
-    case 'SettingsPage':
-      return 'Settings';
-    case 'InfoPage':
-      return 'Info Page';
-    case 'NotifProfilePage':
-      return 'Page in Profile';
-  }
-}
-
-class ExampleTabScreen extends React.Component {
-  _renderCard: NavigationSceneRenderer;
-  _renderHeader: NavigationSceneRenderer;
-  _renderScene: NavigationSceneRenderer;
-
-  componentWillMount() {
-    this._renderHeader = this._renderHeader.bind(this);
-    this._renderScene = this._renderScene.bind(this);
-  }
-
-  render() {
-    return (
-      <NavigationCardStack
-        style={styles.tabContent}
-        navigationState={this.props.navigationState}
-        renderOverlay={this._renderHeader}
-        renderScene={this._renderScene}
-      />
-    );
-  }
-  _renderHeader(props: NavigationSceneRendererProps) {
-    return (
-      <NavigationHeader
-        {...props}
-        getTitle={state => stateTypeTitleMap(state)}
-      />
-    );
-  }
-
-  _renderScene(props: NavigationSceneRendererProps) {
-    const {onNavigate} = props;
-    return (
-      <ScrollView style={styles.scrollView}>
-        <NavigationExampleRow
-          text="Open page"
-          onPress={() => {
-            onNavigate(ExampleInfoAction());
-          }}
-        />
-        <NavigationExampleRow
-          text="Open a page in the profile tab"
-          onPress={() => {
-            onNavigate(ExampleNotifProfileAction());
-          }}
-        />
-        <NavigationExampleRow
-          text="Exit Composition Example"
-          onPress={() => {
-            onNavigate(ExampleExitAction());
-          }}
-        />
-      </ScrollView>
-    );
-  }
-}
-ExampleTabScreen = NavigationContainer.create(ExampleTabScreen);
-
-class NavigationCompositionExample extends React.Component {
-  navRootContainer: NavigationRootContainer;
-
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleAppReducer}
-        persistenceKey="NavigationCompositionState"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={this.renderApp.bind(this)}
-      />
-    );
-  }
-  handleBackAction(): boolean {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-  renderApp(navigationState: NavigationParentState, onNavigate: Function) {
-    if (!navigationState) {
-      return null;
-    }
-    return (
-      <View style={styles.topView}>
-        <ExampleMainView
-          navigationState={navigationState}
-          onExampleExit={this.props.onExampleExit}
-        />
-        <NavigationExampleTabBar
-          tabs={navigationState.children}
-          index={navigationState.index}
-        />
-      </View>
-    );
-  }
-}
-
-class ExampleMainView extends React.Component {
-  render() {
-    return (
-      <NavigationView
-        navigationState={this.props.navigationState}
-        style={styles.tabsContent}
-        renderScene={(tabState, index) => (
-          <ExampleTabScreen
-            key={tabState.key}
-            navigationState={tabState}
-            onNavigate={this._handleNavigation.bind(this, tabState.key)}
-          />
-        )}
-      />
-    );
-  }
-  _handleNavigation(tabKey, action) {
-    if (ExampleExitAction.match(action)) {
-      this.props.onExampleExit();
-      return;
-    }
-    this.props.onNavigate(action);
-  }
-}
-ExampleMainView = NavigationContainer.create(ExampleMainView);
-
-const styles = StyleSheet.create({
-  topView: {
-    flex: 1,
-  },
-  tabsContent: {
-    flex: 1,
-  },
-  scrollView: {
-    marginTop: 64
-  },
-  tabContent: {
-    flex: 1,
-  },
-});
-
-module.exports = NavigationCompositionExample;
@@ -1,65 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  Text,
-  PixelRatio,
-  StyleSheet,
-  View,
-  TouchableHighlight,
-} = React;
-
-var NavigationExampleRow = React.createClass({
-  render: function() {
-    if (this.props.onPress) {
-      return (
-        <TouchableHighlight
-          style={styles.row}
-          underlayColor="#D0D0D0"
-          onPress={this.props.onPress}>
-          <Text style={styles.buttonText}>
-            {this.props.text}
-          </Text>
-        </TouchableHighlight>
-      );
-    }
-    return (
-      <View style={styles.row}>
-        <Text style={styles.rowText}>
-          {this.props.text}
-        </Text>
-      </View>
-    );
-  },
-});
-
-const styles = StyleSheet.create({
-  row: {
-    padding: 15,
-    backgroundColor: 'white',
-    borderBottomWidth: 1 / PixelRatio.get(),
-    borderBottomColor: '#CDCDCD',
-  },
-  rowText: {
-    fontSize: 17,
-  },
-  buttonText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-});
-
-module.exports = NavigationExampleRow;
@@ -1,81 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} = React;
-const {
-  Container: NavigationContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-const {
-  JumpToAction,
-} = NavigationReducer.TabsReducer;
-
-var NavigationExampleTabBar = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.tabBar}>
-        {this.props.tabs.map(this._renderTab)}
-      </View>
-    );
-  },
-  _renderTab: function(tab, index) {
-    var textStyle = [styles.tabButtonText];
-    if (this.props.index === index) {
-      textStyle.push(styles.selectedTabButtonText);
-    }
-    return (
-      <TouchableOpacity
-        style={styles.tabButton}
-        key={tab.key}
-        onPress={() => {
-          this.props.onNavigate(JumpToAction(index));
-        }}>
-        <Text style={textStyle}>
-          {tab.key}
-        </Text>
-      </TouchableOpacity>
-    );
-  },
-});
-
-NavigationExampleTabBar = NavigationContainer.create(NavigationExampleTabBar);
-
-const styles = StyleSheet.create({
-  tabBar: {
-    height: 50,
-    flexDirection: 'row',
-  },
-  tabButton: {
-    flex: 1,
-  },
-  tabButtonText: {
-    paddingTop: 20,
-    textAlign: 'center',
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  selectedTabButtonText: {
-    color: 'blue',
-  },
-});
-
-module.exports = NavigationExampleTabBar;
@@ -1,152 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-var React = require('react-native');
-var {
-  AsyncStorage,
-  ScrollView,
-  StyleSheet,
-  View,
-} = React;
-var NavigationExampleRow = require('./NavigationExampleRow');
-
-/*
- * Heads up! This file is not the real navigation example- only a utility to switch between them.
- *
- * To learn how to use the Navigation API, take a look at the following example files:
- */
-var EXAMPLES = {
-  'Tabs': require('./NavigationTabsExample'),
-  'Basic': require('./NavigationBasicExample'),
-  'Animated Example': require('./NavigationAnimatedExample'),
-  'Composition': require('./NavigationCompositionExample'),
-  'Card Stack Example': require('./NavigationCardStackExample'),
-  'Tic Tac Toe': require('./NavigationTicTacToeExample'),
-};
-
-var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
-
-var NavigationExperimentalExample = React.createClass({
-  statics: {
-    title: 'Navigation (Experimental)',
-    description: 'Upcoming navigation APIs and animated navigation views',
-    external: true,
-  },
-
-  getInitialState: function() {
-    return {
-      example: null,
-    };
-  },
-
-  componentDidMount() {
-    AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
-      if (err || !example || !EXAMPLES[example]) {
-        this.setState({
-          example: 'menu',
-        });
-        return;
-      }
-      this.setState({
-        example,
-      });
-    });
-  },
-
-  setExample: function(example) {
-    this.setState({
-      example,
-    });
-    AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
-  },
-
-  _renderMenu: function() {
-    var exitRow = null;
-    if (this.props.onExampleExit) {
-      exitRow = (
-        <NavigationExampleRow
-          text="Exit Navigation Examples"
-          onPress={this.props.onExampleExit}
-        />
-      );
-    }
-    return (
-      <View style={styles.menu}>
-        <ScrollView>
-          {this._renderExampleList()}
-          {exitRow}
-        </ScrollView>
-      </View>
-    );
-  },
-
-  _renderExampleList: function() {
-    return Object.keys(EXAMPLES).map(exampleName => (
-      <NavigationExampleRow
-        key={exampleName}
-        text={exampleName}
-        onPress={() => {
-          this.setExample(exampleName);
-        }}
-      />
-    ));
-  },
-
-  _exitInnerExample: function() {
-    this.setExample('menu');
-  },
-
-  handleBackAction: function() {
-    const wasHandledByExample = (
-      this.exampleRef &&
-      this.exampleRef.handleBackAction &&
-      this.exampleRef.handleBackAction()
-    );
-    if (wasHandledByExample) {
-      return true;
-    }
-    if (this.state.example && this.state.example !== 'menu') {
-      this._exitInnerExample();
-      return true;
-    }
-    return false;
-  },
-
-  render: function() {
-    if (this.state.example === 'menu') {
-      return this._renderMenu();
-    }
-    if (EXAMPLES[this.state.example]) {
-      var Component = EXAMPLES[this.state.example];
-      return (
-        <Component
-          onExampleExit={this._exitInnerExample}
-          ref={exampleRef => { this.exampleRef = exampleRef; }}
-        />
-      );
-    }
-    return null;
-  },
-});
-
-const styles = StyleSheet.create({
-  menu: {
-    backgroundColor: '#E9E9EF',
-    flex: 1,
-    marginTop: 20,
-  },
-});
-
-module.exports = NavigationExperimentalExample;
@@ -1,111 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-'use strict';
-
-const React = require('react-native');
-const {
-  NavigationExperimental,
-  ScrollView,
-  StyleSheet,
-  View,
-} = React;
-const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
-  Reducer: NavigationReducer,
-} = NavigationExperimental;
-
-const NavigationExampleRow = require('./NavigationExampleRow');
-const NavigationExampleTabBar = require('./NavigationExampleTabBar');
-
-class ExmpleTabPage extends React.Component {
-  render() {
-    const currentTabRoute = this.props.tabs[this.props.index];
-    return (
-      <ScrollView style={styles.tabPage}>
-        <NavigationExampleRow
-          text={`Current Tab is: ${currentTabRoute.key}`}
-        />
-        {this.props.tabs.map((tab, index) => (
-          <NavigationExampleRow
-            key={tab.key}
-            text={`Go to ${tab.key}`}
-            onPress={() => {
-              this.props.onNavigate(NavigationReducer.TabsReducer.JumpToAction(index));
-            }}
-          />
-        ))}
-        <NavigationExampleRow
-          text="Exit Tabs Example"
-          onPress={this.props.onExampleExit}
-        />
-      </ScrollView>
-    );
-  }
-}
-ExmpleTabPage = NavigationContainer.create(ExmpleTabPage);
-
-const ExampleTabsReducer = NavigationReducer.TabsReducer({
-  tabReducers: [
-    (lastRoute) => lastRoute || {key: 'one'},
-    (lastRoute) => lastRoute || {key: 'two'},
-    (lastRoute) => lastRoute || {key: 'three'},
-  ],
-});
-
-class NavigationTabsExample extends React.Component {
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={ExampleTabsReducer}
-        persistenceKey="NAV_EXAMPLE_STATE_TABS"
-        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
-        renderNavigation={(navigationState) => {
-          if (!navigationState) { return null; }
-          return (
-            <View style={styles.topView}>
-              <ExmpleTabPage
-                tabs={navigationState.children}
-                index={navigationState.index}
-                onExampleExit={this.props.onExampleExit}
-              />
-              <NavigationExampleTabBar
-                tabs={navigationState.children}
-                index={navigationState.index}
-              />
-            </View>
-          );
-        }}
-      />
-    );
-  }
-  handleBackAction() {
-    return (
-      this.navRootContainer &&
-      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  topView: {
-    flex: 1,
-    paddingTop: 30,
-  },
-  tabPage: {
-    backgroundColor: '#E9E9EF',
-  },
-});
-
-module.exports = NavigationTabsExample;
@@ -1,314 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule NavigationTicTacToeExample
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  NavigationExperimental,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-const {
-  Container: NavigationContainer,
-  RootContainer: NavigationRootContainer,
-} = NavigationExperimental;
-
-type GameGrid = Array<Array<?string>>;
-
-const evenOddPlayerMap = ['O', 'X'];
-const rowLeterMap = ['a', 'b', 'c'];
-
-function parseGame(game: string): GameGrid {
-  const gameTurns = game ? game.split('-') : [];
-  const grid = Array(3);
-  for (let i = 0; i < 3; i++) {
-    const row = Array(3);
-    for (let j = 0; j < 3; j++) {
-      const turnIndex = gameTurns.indexOf(rowLeterMap[i]+j);
-      if (turnIndex === -1) {
-        row[j] = null;
-      } else {
-        row[j] = evenOddPlayerMap[turnIndex % 2];
-      }
-    }
-    grid[i] = row;
-  }
-  return grid;
-}
-
-function playTurn(game: string, row: number, col: number): string {
-  const turn = rowLeterMap[row] + col;
-  return game ? (game + '-' + turn) : turn;
-}
-
-function getWinner(gameString: string): ?string {
-  const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
-    if (game[i][0] !== null && game[i][0] === game[i][1] &&
-        game[i][0] === game[i][2]) {
-      return game[i][0];
-    }
-  }
-  for (var i = 0; i < 3; i++) {
-    if (game[0][i] !== null && game[0][i] === game[1][i] &&
-        game[0][i] === game[2][i]) {
-      return game[0][i];
-    }
-  }
-  if (game[0][0] !== null && game[0][0] === game[1][1] &&
-      game[0][0] === game[2][2]) {
-    return game[0][0];
-  }
-  if (game[0][2] !== null && game[0][2] === game[1][1] &&
-      game[0][2] === game[2][0]) {
-    return game[0][2];
-  }
-  return null;
-}
-
-function isGameOver(gameString: string): boolean {
-  if (getWinner(gameString)) {
-    return true;
-  }
-  const game = parseGame(gameString);
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
-      if (game[i][j] === null) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
-
-class Cell extends React.Component {
-  props: any;
-  cellStyle() {
-    switch (this.props.player) {
-      case 'X':
-        return styles.cellX;
-      case 'O':
-        return styles.cellO;
-      default:
-        return null;
-    }
-  }
-  textStyle() {
-    switch (this.props.player) {
-      case 'X':
-        return styles.cellTextX;
-      case 'O':
-        return styles.cellTextO;
-      default:
-        return {};
-    }
-  }
-  render() {
-    return (
-      <TouchableHighlight
-        onPress={this.props.onPress}
-        underlayColor="transparent"
-        activeOpacity={0.5}>
-        <View style={[styles.cell, this.cellStyle()]}>
-          <Text style={[styles.cellText, this.textStyle()]}>
-            {this.props.player}
-          </Text>
-        </View>
-      </TouchableHighlight>
-    );
-  }
-}
-
-function GameEndOverlay(props) {
-  if (!isGameOver(props.game)) {
-    return <View />;
-  }
-  const winner = getWinner(props.game);
-  return (
-    <View style={styles.overlay}>
-      <Text style={styles.overlayMessage}>
-        {winner ? winner + ' wins!' : 'It\'s a tie!'}
-      </Text>
-      <TouchableHighlight
-        onPress={() => props.onNavigate(GameActions.Reset())}
-        underlayColor="transparent"
-        activeOpacity={0.5}>
-        <View style={styles.newGame}>
-          <Text style={styles.newGameText}>New Game</Text>
-        </View>
-      </TouchableHighlight>
-    </View>
-  );
-}
-GameEndOverlay = NavigationContainer.create(GameEndOverlay);
-
-function TicTacToeGame(props) {
-  var rows = parseGame(props.game).map((cells, row) =>
-    <View key={'row' + row} style={styles.row}>
-      {cells.map((player, col) =>
-        <Cell
-          key={'cell' + col}
-          player={player}
-          onPress={() => props.onNavigate(GameActions.Turn(row, col))}
-        />
-      )}
-    </View>
-  );
-  return (
-    <View style={styles.container}>
-      <Text
-        style={styles.closeButton}
-        onPress={props.onExampleExit}>
-        Close
-      </Text>
-      <Text style={styles.title}>EXTREME T3</Text>
-      <View style={styles.board}>
-        {rows}
-      </View>
-      <GameEndOverlay
-        game={props.game}
-      />
-    </View>
-  );
-}
-TicTacToeGame = NavigationContainer.create(TicTacToeGame);
-
-const GameActions = {
-  Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
-  Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
-};
-
-function GameReducer(lastGame: ?string, action: Object): string {
-  if (!lastGame) {
-    lastGame = '';
-  }
-  if (action.type === 'TicTacToeResetAction') {
-    return '';
-  }
-  if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
-    return playTurn(lastGame, action.row, action.col);
-  }
-  return lastGame;
-}
-
-class NavigationTicTacToeExample extends React.Component {
-  static GameView = TicTacToeGame;
-  static GameReducer = GameReducer;
-  static GameActions = GameActions;
-  render() {
-    return (
-      <NavigationRootContainer
-        reducer={GameReducer}
-        persistenceKey="TicTacToeGameState"
-        renderNavigation={(game) => (
-          <TicTacToeGame
-            game={game}
-            onExampleExit={this.props.onExampleExit}
-          />
-        )}
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  closeButton: {
-    position: 'absolute',
-    left: 10,
-    top: 30,
-    fontSize: 14,
-  },
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white'
-  },
-  title: {
-    fontFamily: 'Chalkduster',
-    fontSize: 39,
-    marginBottom: 20,
-  },
-  board: {
-    padding: 5,
-    backgroundColor: '#47525d',
-    borderRadius: 10,
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  cell: {
-    width: 80,
-    height: 80,
-    borderRadius: 5,
-    backgroundColor: '#7b8994',
-    margin: 5,
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cellX: {
-    backgroundColor: '#72d0eb',
-  },
-  cellO: {
-    backgroundColor: '#7ebd26',
-  },
-  cellText: {
-    fontSize: 50,
-    fontFamily: 'AvenirNext-Bold',
-  },
-  cellTextX: {
-    color: '#19a9e5',
-  },
-  cellTextO: {
-    color: '#b9dc2f',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(221, 221, 221, 0.5)',
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  overlayMessage: {
-    fontSize: 40,
-    marginBottom: 20,
-    marginLeft: 20,
-    marginRight: 20,
-    fontFamily: 'AvenirNext-DemiBold',
-    textAlign: 'center',
-  },
-  newGame: {
-    backgroundColor: '#887766',
-    padding: 20,
-    borderRadius: 5,
-  },
-  newGameText: {
-    color: 'white',
-    fontSize: 20,
-    fontFamily: 'AvenirNext-DemiBold',
-  },
-});
-
-module.exports = NavigationTicTacToeExample;
@@ -15,6 +15,7 @@

 var React = require('react-native');
 var {
+  PixelRatio,
  Navigator,
  StyleSheet,
  ScrollView,
@@ -130,7 +131,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -16,6 +16,7 @@
 var React = require('react-native');
 var {
  Navigator,
+  PixelRatio,
  StyleSheet,
  ScrollView,
  TabBarIOS,
@@ -184,7 +185,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -16,6 +16,7 @@

 var React = require('react-native');
 var {
+  PixelRatio,
  Navigator,
  ScrollView,
  StyleSheet,
@@ -24,6 +25,8 @@ var {
  TouchableOpacity,
 } = React;

+var cssVar = require('cssVar');
+
 class NavButton extends React.Component {
  render() {
    return (
@@ -161,7 +164,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -176,7 +179,7 @@ var styles = StyleSheet.create({
    marginVertical: 10,
  },
  navBarTitleText: {
-    color: '#373E4D',
+    color: cssVar('fbui-bluegray-60'),
    fontWeight: '500',
    marginVertical: 9,
  },
@@ -187,7 +190,7 @@ var styles = StyleSheet.create({
    paddingRight: 10,
  },
  navBarButtonText: {
-    color: '#5890FF',
+    color: cssVar('fbui-accent-blue'),
  },
  scene: {
    flex: 1,
@@ -10,14 +10,13 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule NavigatorExample
- */
+*/
 'use strict';

 var React = require('react-native');
 var {
  Navigator,
+  PixelRatio,
  ScrollView,
  StyleSheet,
  Text,
@@ -191,7 +190,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -16,7 +16,7 @@
 var React = require('react-native');
 var {
  NavigatorIOS,
-  StatusBar,
+  StatusBarIOS,
  StyleSheet,
  Text,
  View
@@ -45,7 +45,7 @@ var NavigatorIOSColors = React.createClass({

  render: function() {
    // Set StatusBar with light contents to get better contrast
-    StatusBar.setBarStyle('light-content');
+    StatusBarIOS.setStyle('light-content');

    return (
      <NavigatorIOS
@@ -55,7 +55,7 @@ var NavigatorIOSColors = React.createClass({
          title: '<NavigatorIOS>',
          rightButtonTitle: 'Done',
          onRightButtonPress: () => {
-            StatusBar.setBarStyle('default');
+            StatusBarIOS.setStyle('default');
            this.props.onExampleExit();
          },
          passProps: {
@@ -15,12 +15,12 @@
 */
 'use strict';

-const React = require('react-native');
-const ViewExample = require('./ViewExample');
-const createExamplePage = require('./createExamplePage');
-const {
+var React = require('react-native');
+var ViewExample = require('./ViewExample');
+var createExamplePage = require('./createExamplePage');
+var {
  AlertIOS,
-  NavigatorIOS,
+  PixelRatio,
  ScrollView,
  StyleSheet,
  Text,
@@ -28,7 +28,8 @@ const {
  View,
 } = React;

-const EmptyPage = React.createClass({
+var EmptyPage = React.createClass({
+
  render: function() {
    return (
      <View style={styles.emptyPage}>
@@ -38,24 +39,41 @@ const EmptyPage = React.createClass({
      </View>
    );
  },
+
 });

-const NavigatorIOSExamplePage = React.createClass({
+var NavigatorIOSExample = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+  },
+
  render: function() {
    var recurseTitle = 'Recurse Navigation';
-    if (!this.props.depth || this.props.depth === 1) {
+    if (!this.props.topExampleRoute) {
      recurseTitle += ' - more examples here';
    }
    return (
      <ScrollView style={styles.list}>
+        <View style={styles.line}/>
+        <View style={styles.group}>
+          <View style={styles.row}>
+            <Text style={styles.rowNote}>
+              See &lt;UIExplorerApp&gt; for top-level usage.
+            </Text>
+          </View>
+        </View>
+        <View style={styles.line}/>
+        <View style={styles.groupSpace}/>
        <View style={styles.line}/>
        <View style={styles.group}>
          {this._renderRow(recurseTitle, () => {
            this.props.navigator.push({
              title: NavigatorIOSExample.title,
-              component: NavigatorIOSExamplePage,
+              component: NavigatorIOSExample,
              backButtonTitle: 'Custom Back',
-              passProps: {depth: this.props.depth ? this.props.depth + 1 : 1},
+              passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
            });
          })}
          {this._renderRow('Push View Example', () => {
@@ -105,39 +123,40 @@ const NavigatorIOSExamplePage = React.createClass({
          {this._renderRow('Pop to top', () => {
            this.props.navigator.popToTop();
          })}
-          {this._renderReplace()}
+          {this._renderRow('Replace here', () => {
+            var prevRoute = this.props.route;
+            this.props.navigator.replace({
+              title: 'New Navigation',
+              component: EmptyPage,
+              rightButtonTitle: 'Undo',
+              onRightButtonPress: () => this.props.navigator.replace(prevRoute),
+              passProps: {
+                text: 'The component is replaced, but there is currently no ' +
+                  'way to change the right button or title of the current route',
+              }
+            });
+          })}
          {this._renderReplacePrevious()}
          {this._renderReplacePreviousAndPop()}
-          {this._renderRow('Exit NavigatorIOS Example', this.props.onExampleExit)}
+          {this._renderPopToTopNavExample()}
        </View>
        <View style={styles.line}/>
      </ScrollView>
    );
  },

-  _renderReplace: function() {
-    if (!this.props.depth) {
-      // this is to avoid replacing the top of the stack
+  _renderPopToTopNavExample: function() {
+    if (!this.props.topExampleRoute) {
      return null;
    }
-    return this._renderRow('Replace here', () => {
-      var prevRoute = this.props.route;
-      this.props.navigator.replace({
-        title: 'New Navigation',
-        component: EmptyPage,
-        rightButtonTitle: 'Undo',
-        onRightButtonPress: () => this.props.navigator.replace(prevRoute),
-        passProps: {
-          text: 'The component is replaced, but there is currently no ' +
-            'way to change the right button or title of the current route',
-        }
-      });
+    return this._renderRow('Pop to top NavigatorIOSExample', () => {
+      this.props.navigator.popToRoute(this.props.topExampleRoute);
    });
  },

  _renderReplacePrevious: function() {
-    if (!this.props.depth || this.props.depth < 2) {
-      // this is to avoid replacing the top of the stack
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
      return null;
    }
    return this._renderRow('Replace previous', () => {
@@ -153,8 +172,8 @@ const NavigatorIOSExamplePage = React.createClass({
  },

  _renderReplacePreviousAndPop: function() {
-    if (!this.props.depth || this.props.depth < 2) {
-      // this is to avoid replacing the top of the stack
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
      return null;
    }
    return this._renderRow('Replace previous and pop', () => {
@@ -185,34 +204,7 @@ const NavigatorIOSExamplePage = React.createClass({
  },
 });

-const NavigatorIOSExample = React.createClass({
-  statics: {
-    title: '<NavigatorIOS>',
-    description: 'iOS navigation capabilities',
-    external: true,
-  },
-
-  render: function() {
-    const {onExampleExit} = this.props;
-    return (
-      <NavigatorIOS
-        style={styles.container}
-        initialRoute={{
-          title: NavigatorIOSExample.title,
-          component: NavigatorIOSExamplePage,
-          passProps: {onExampleExit},
-        }}
-        itemWrapperStyle={styles.itemWrapper}
-        tintColor="#008888"
-      />
-    );
-  },
-});
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+var styles = StyleSheet.create({
  customWrapperStyle: {
    backgroundColor: '#bbdddd',
  },
@@ -235,7 +227,7 @@ const styles = StyleSheet.create({
  },
  line: {
    backgroundColor: '#bbbbbb',
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
  },
  row: {
    backgroundColor: 'white',
@@ -244,7 +236,7 @@ const styles = StyleSheet.create({
    paddingVertical: 15,
  },
  separator: {
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
    backgroundColor: '#bbbbbb',
    marginLeft: 15,
  },
@@ -15,84 +15,83 @@
 */
 'use strict';

-const React = require('react-native');
-const {
+var React = require('react-native');
+var {
  NetInfo,
  Text,
-  View,
-  TouchableWithoutFeedback,
+  View
 } = React;

-const ConnectionInfoSubscription = React.createClass({
+var ReachabilitySubscription = React.createClass({
  getInitialState() {
    return {
-      connectionInfoHistory: [],
+      reachabilityHistory: [],
    };
  },
  componentDidMount: function() {
    NetInfo.addEventListener(
-        'change',
-        this._handleConnectionInfoChange
+      'change',
+      this._handleReachabilityChange
    );
  },
  componentWillUnmount: function() {
    NetInfo.removeEventListener(
-        'change',
-        this._handleConnectionInfoChange
+      'change',
+      this._handleReachabilityChange
    );
  },
-  _handleConnectionInfoChange: function(connectionInfo) {
-    const connectionInfoHistory = this.state.connectionInfoHistory.slice();
-    connectionInfoHistory.push(connectionInfo);
+  _handleReachabilityChange: function(reachability) {
+    var reachabilityHistory = this.state.reachabilityHistory.slice();
+    reachabilityHistory.push(reachability);
    this.setState({
-      connectionInfoHistory,
+      reachabilityHistory,
    });
  },
  render() {
    return (
-        <View>
-          <Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text>
-        </View>
+      <View>
+        <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
+      </View>
    );
  }
 });

-const ConnectionInfoCurrent = React.createClass({
+var ReachabilityCurrent = React.createClass({
  getInitialState() {
    return {
-      connectionInfo: null,
+      reachability: null,
    };
  },
  componentDidMount: function() {
    NetInfo.addEventListener(
-        'change',
-        this._handleConnectionInfoChange
+      'change',
+      this._handleReachabilityChange
    );
    NetInfo.fetch().done(
-        (connectionInfo) => { this.setState({connectionInfo}); }
+      (reachability) => { this.setState({reachability}); }
    );
  },
  componentWillUnmount: function() {
    NetInfo.removeEventListener(
-        'change',
-        this._handleConnectionInfoChange
+      'change',
+      this._handleReachabilityChange
    );
  },
-  _handleConnectionInfoChange: function(connectionInfo) {
+  _handleReachabilityChange: function(reachability) {
    this.setState({
-      connectionInfo,
+      reachability,
    });
  },
  render() {
    return (
-        <View>
-          <Text>{this.state.connectionInfo}</Text>
-        </View>
+      <View>
+        <Text>{this.state.reachability}</Text>
+      </View>
    );
  }
 });

-const IsConnected = React.createClass({
+var IsConnected = React.createClass({
  getInitialState() {
    return {
      isConnected: null,
@@ -100,17 +99,17 @@ const IsConnected = React.createClass({
  },
  componentDidMount: function() {
    NetInfo.isConnected.addEventListener(
-        'change',
-        this._handleConnectivityChange
+      'change',
+      this._handleConnectivityChange
    );
    NetInfo.isConnected.fetch().done(
-        (isConnected) => { this.setState({isConnected}); }
+      (isConnected) => { this.setState({isConnected}); }
    );
  },
  componentWillUnmount: function() {
    NetInfo.isConnected.removeEventListener(
-        'change',
-        this._handleConnectivityChange
+      'change',
+      this._handleConnectivityChange
    );
  },
  _handleConnectivityChange: function(isConnected) {
@@ -120,37 +119,9 @@ const IsConnected = React.createClass({
  },
  render() {
    return (
-        <View>
-          <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
-        </View>
-    );
-  }
-});
-
-const IsConnectionExpensive = React.createClass({
-  getInitialState() {
-    return {
-      isConnectionExpensive: (null : ?boolean),
-    };
-  },
-  _checkIfExpensive() {
-    NetInfo.isConnectionExpensive().then(
-        isConnectionExpensive => { this.setState({isConnectionExpensive}); }
-    );
-  },
-  render() {
-    return (
-        <View>
-          <TouchableWithoutFeedback onPress={this._checkIfExpensive}>
-            <View>
-              <Text>Click to see if connection is expensive:
-                {this.state.isConnectionExpensive === true ? 'Expensive' :
-                this.state.isConnectionExpensive === false ? 'Not expensive'
-                : 'Unknown'}
-              </Text>
-            </View>
-          </TouchableWithoutFeedback>
-        </View>
+      <View>
+        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
+      </View>
    );
  }
 });
@@ -164,19 +135,13 @@ exports.examples = [
    render(): ReactElement { return <IsConnected />; }
  },
  {
-    title: 'NetInfo.update',
-    description: 'Asynchronously load and observe connectionInfo',
-    render(): ReactElement { return <ConnectionInfoCurrent />; }
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Asynchronously load and observe iOS reachability',
+    render(): ReactElement { return <ReachabilityCurrent />; }
  },
  {
-    title: 'NetInfo.updateHistory',
-    description: 'Observed updates to connectionInfo',
-    render(): ReactElement { return <ConnectionInfoSubscription />; }
-  },
-  {
-    platform: 'android',
-    title: 'NetInfo.isConnectionExpensive (Android)',
-    description: 'Asynchronously check isConnectionExpensive',
-    render(): ReactElement { return <IsConnectionExpensive />; }
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Observed updates to iOS reachability',
+    render(): ReactElement { return <ReachabilitySubscription />; }
  },
 ];
@@ -11,7 +11,7 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @flow weak
+ * @flow-weak
 */
 'use strict';

@@ -79,8 +79,7 @@ var PanResponderExample = React.createClass({
  },

  _highlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
+    this.circle && this.circle.setNativeProps({
      style: {
        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
      }
@@ -88,8 +87,7 @@ var PanResponderExample = React.createClass({
  },

  _unHighlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
+    this.circle && this.circle.setNativeProps({
      style: {
        backgroundColor: processColor(CIRCLE_COLOR)
      }
@@ -1,138 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-const React = require('react-native');
-const StyleSheet = require('StyleSheet');
-const UIExplorerBlock = require('UIExplorerBlock');
-const UIExplorerPage = require('UIExplorerPage');
-
-const {
-  Picker,
-  Text,
-  TouchableWithoutFeedback,
-} = React;
-const Item = Picker.Item;
-
-const PickerExample = React.createClass({
-
-  statics: {
-    title: '<Picker>',
-    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
-  },
-
-  getInitialState: function() {
-    return {
-      selected1: 'key1',
-      selected2: 'key1',
-      selected3: 'key1',
-      color: 'red',
-      mode: Picker.MODE_DIALOG,
-    };
-  },
-
-  render: function() {
-    return (
-      <UIExplorerPage title="<Picker>">
-        <UIExplorerBlock title="Basic Picker">
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.selected1}
-            onValueChange={this.onValueChange.bind(this, 'selected1')}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Disabled picker">
-          <Picker style={styles.picker} enabled={false} selectedValue={this.state.selected1}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Dropdown Picker">
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.selected2}
-            onValueChange={this.onValueChange.bind(this, 'selected2')}
-            mode="dropdown">
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Picker with prompt message">
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.selected3}
-            onValueChange={this.onValueChange.bind(this, 'selected3')}
-            prompt="Pick one, just one">
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Picker with no listener">
-          <Picker style={styles.picker}>
-            <Item label="hello" value="key0" />
-            <Item label="world" value="key1" />
-          </Picker>
-          <Text>
-            Cannot change the value of this picker because it doesn't update selectedValue.
-          </Text>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Colorful pickers">
-          <Picker
-            style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
-            selectedValue={this.state.color}
-            onValueChange={this.onValueChange.bind(this, 'color')}
-            mode="dropdown">
-            <Item label="red" color="red" value="red" />
-            <Item label="green" color="green" value="green" />
-            <Item label="blue" color="blue" value="blue" />
-          </Picker>
-          <Picker
-            style={styles.picker}
-            selectedValue={this.state.color}
-            onValueChange={this.onValueChange.bind(this, 'color')}
-            mode="dialog">
-            <Item label="red" color="red" value="red" />
-            <Item label="green" color="green" value="green" />
-            <Item label="blue" color="blue" value="blue" />
-          </Picker>
-        </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  },
-
-  changeMode: function() {
-    const newMode = this.state.mode === Picker.MODE_DIALOG
-        ? Picker.MODE_DROPDOWN
-        : Picker.MODE_DIALOG;
-    this.setState({mode: newMode});
-  },
-
-  onValueChange: function(key: string, value: string) {
-    const newState = {};
-    newState[key] = value;
-    this.setState(newState);
-  },
-});
-
-var styles = StyleSheet.create({
-  picker: {
-    width: 100,
-  },
-});
-
-module.exports = PickerExample;
@@ -87,21 +87,24 @@ var PickerExample = React.createClass({
              key={carMake}
              value={carMake}
              label={CAR_MAKES_AND_MODELS[carMake].name}
-            />
-          ))}
+              />
+            )
+          )}
        </PickerIOS>
        <Text>Please choose a model of {make.name}:</Text>
        <PickerIOS
          selectedValue={this.state.modelIndex}
          key={this.state.carMake}
          onValueChange={(modelIndex) => this.setState({modelIndex})}>
-          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
-            <PickerItemIOS
-              key={this.state.carMake + '_' + modelIndex}
-              value={modelIndex}
-              label={modelName}
-            />
-          ))}
+          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
+            (modelName, modelIndex) => (
+              <PickerItemIOS
+                key={this.state.carmake + '_' + modelIndex}
+                value={modelIndex}
+                label={modelName}
+              />
+            ))
+          }
        </PickerIOS>
        <Text>You selected: {selectionString}</Text>
      </View>
@@ -109,34 +112,6 @@ var PickerExample = React.createClass({
  },
 });

-var PickerStyleExample = React.createClass({
-  getInitialState: function() {
-    return {
-      carMake: 'cadillac',
-      modelIndex: 0,
-    };
-  },
-
-  render: function() {
-    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
-    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
-    return (
-      <PickerIOS
-        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
-        selectedValue={this.state.carMake}
-        onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
-        {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
-          <PickerItemIOS
-            key={carMake}
-            value={carMake}
-            label={CAR_MAKES_AND_MODELS[carMake].name}
-          />
-        ))}
-      </PickerIOS>
-    );
-  },
-});
-
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';
 exports.description = 'Render lists of selectable options with UIPickerView.';
@@ -146,10 +121,4 @@ exports.examples = [
  render: function(): ReactElement {
    return <PickerExample />;
  },
-},
-{
-  title: '<PickerIOS> with custom styling',
-  render: function(): ReactElement {
-    return <PickerStyleExample />;
-  },
 }];
@@ -60,10 +60,6 @@ var ProgressBarAndroidExample = React.createClass({
          <ProgressBar />
        </UIExplorerBlock>

-        <UIExplorerBlock title="Normal ProgressBar">
-          <ProgressBar styleAttr="Normal" />
-        </UIExplorerBlock>
-
        <UIExplorerBlock title="Small ProgressBar">
          <ProgressBar styleAttr="Small" />
        </UIExplorerBlock>
@@ -84,8 +84,6 @@ class NotificationExample extends React.Component {
 }

 class NotificationPermissionExample extends React.Component {
-  state: any;
-
  constructor(props) {
    super(props);
    this.state = {permissions: null};
@@ -128,7 +126,7 @@ exports.description = 'Apple PushNotification and badge value';
 exports.examples = [
 {
  title: 'Badge Number',
-  render(): ReactElement {
+  render(): React.Component {
    PushNotificationIOS.requestPermissions();

    return (
@@ -147,13 +145,13 @@ exports.examples = [
 },
 {
  title: 'Push Notifications',
-  render(): ReactElement {
+  render(): React.Component {
    return <NotificationExample />;
  }
 },
 {
  title: 'Notifications Permissions',
-  render(): ReactElement {
+  render(): React.Component {
    return <NotificationPermissionExample />;
  }
 }];
@@ -82,7 +82,7 @@ exports.description = 'Examples that show useful methods when embedding React Na
 exports.examples = [
 {
  title: 'Updating app properties in runtime',
-  render(): ReactElement {
+  render(): React.Component {
    return (
      <AppPropertiesUpdateExample/>
    );
@@ -90,7 +90,7 @@ exports.examples = [
 },
 {
  title: 'RCTRootView\'s size flexibility',
-  render(): ReactElement {
+  render(): React.Component {
    return (
      <RootViewSizeFlexibilityExample/>
    );
@@ -1,125 +0,0 @@
-/**
-* The examples provided by Facebook are for non-commercial testing and
-* evaluation purposes only.
-*
-* Facebook reserves all rights not expressly granted.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
-* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
-* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*
-*/
-'use strict';
-
-const React = require('react-native');
-const {
-  ScrollView,
-  StyleSheet,
-  RefreshControl,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} = React;
-
-const styles = StyleSheet.create({
-  row: {
-    borderColor: 'grey',
-    borderWidth: 1,
-    padding: 20,
-    backgroundColor: '#3a5795',
-    margin: 5,
-  },
-  text: {
-    alignSelf: 'center',
-    color: '#fff',
-  },
-  scrollview: {
-    flex: 1,
-  },
-});
-
-const Row = React.createClass({
-  _onClick: function() {
-    this.props.onClick(this.props.data);
-  },
-  render: function() {
-    return (
-     <TouchableWithoutFeedback onPress={this._onClick} >
-        <View style={styles.row}>
-          <Text style={styles.text}>
-            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
-          </Text>
-        </View>
-      </TouchableWithoutFeedback>
-    );
-  },
-});
-
-const RefreshControlExample = React.createClass({
-  statics: {
-    title: '<RefreshControl>',
-    description: 'Adds pull-to-refresh support to a scrollview.'
-  },
-
-  getInitialState() {
-    return {
-      isRefreshing: false,
-      loaded: 0,
-      rowData: Array.from(new Array(20)).map(
-        (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
-    };
-  },
-
-  _onClick(row) {
-    row.clicks++;
-    this.setState({
-      rowData: this.state.rowData,
-    });
-  },
-
-  render() {
-    const rows = this.state.rowData.map((row, ii) => {
-      return <Row key={ii} data={row} onClick={this._onClick}/>;
-    });
-    return (
-      <ScrollView
-        style={styles.scrollview}
-        refreshControl={
-          <RefreshControl
-            refreshing={this.state.isRefreshing}
-            onRefresh={this._onRefresh}
-            tintColor="#ff0000"
-            title="Loading..."
-            colors={['#ff0000', '#00ff00', '#0000ff']}
-            progressBackgroundColor="#ffff00"
-          />
-        }>
-        {rows}
-      </ScrollView>
-    );
-  },
-
-  _onRefresh() {
-    this.setState({isRefreshing: true});
-    setTimeout(() => {
-      // prepend 10 items
-      const rowData = Array.from(new Array(10))
-      .map((val, i) => ({
-        text: 'Loaded row ' + (+this.state.loaded + i),
-        clicks: 0,
-      }))
-      .concat(this.state.rowData);
-
-      this.setState({
-        loaded: this.state.loaded + 10,
-        isRefreshing: false,
-        rowData: rowData,
-      });
-    }, 5000);
-  },
-});
-
-module.exports = RefreshControlExample;
@@ -1,77 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-const React = require('react-native');
-const {
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  View,
-} = React;
-
-class RootViewSizeFlexibilityExampleApp extends React.Component {
-  state: any;
-
-  constructor(props: {toggled: boolean}) {
-    super(props);
-    this.state = { toggled: false };
-  }
-
-  _onPressButton() {
-    this.setState({ toggled: !this.state.toggled });
-  }
-
-  render() {
-    const viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer;
-
-    return (
-      <TouchableHighlight onPress={this._onPressButton.bind(this)}>
-        <View style={viewStyle}>
-          <View style={styles.center}>
-            <Text style={styles.whiteText}>
-              React Native Button
-            </Text>
-          </View>
-        </View>
-      </TouchableHighlight>
-    );
-  }
-
-}
-
-const styles = StyleSheet.create({
-  bigContainer: {
-    flex: 1,
-    height: 60,
-    backgroundColor: 'gray',
-  },
-  smallContainer: {
-    flex: 1,
-    height: 40,
-    backgroundColor: 'gray',
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  whiteText: {
-    color: 'white',
-  }
-});
-
-module.exports = RootViewSizeFlexibilityExampleApp;
@@ -19,8 +19,6 @@ var React = require('react-native');
 var {
  ScrollView,
  StyleSheet,
-  Text,
-  TouchableOpacity,
  View,
  Image
 } = React;
@@ -33,45 +31,27 @@ exports.examples = [
  title: '<ScrollView>',
  description: 'To make content scrollable, wrap it within a <ScrollView> component',
  render: function() {
-    var _scrollView: ScrollView;
    return (
-      <View>
-        <ScrollView
-          ref={(scrollView) => { _scrollView = scrollView; }}
-          automaticallyAdjustContentInsets={false}
-          onScroll={() => { console.log('onScroll!'); }}
-          scrollEventThrottle={200}
-          style={styles.scrollView}>
-          {THUMBS.map(createThumbRow)}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollTo({y: 0}); }}>
-          <Text>Scroll to top</Text>
-        </TouchableOpacity>
-      </View>
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        onScroll={() => { console.log('onScroll!'); }}
+        scrollEventThrottle={200}
+        style={styles.scrollView}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
    );
  }
 }, {
  title: '<ScrollView> (horizontal = true)',
  description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
  render: function() {
-    var _scrollView: ScrollView;
    return (
-      <View>
-        <ScrollView
-          ref={(scrollView) => { _scrollView = scrollView; }}
-          automaticallyAdjustContentInsets={false}
-          horizontal={true}
-          style={[styles.scrollView, styles.horizontalScrollView]}>
-          {THUMBS.map(createThumbRow)}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollTo({x: 0}); }}>
-          <Text>Scroll to start</Text>
-        </TouchableOpacity>
-      </View>
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        horizontal={true}
+        style={[styles.scrollView, styles.horizontalScrollView]}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
    );
  }
 }];
@@ -13,18 +13,17 @@
 *
 * @flow
 */
+
 'use strict';

-const React = require('react-native');
-const {
-  Text,
-  View,
-} = React;
+var React = require('React');
+var Text = require('Text');
+var View = require('View');

-class SetPropertiesExampleApp extends React.Component {
+var SetPropertiesExampleApp = React.createClass({

-  render() {
-    const wrapperStyle = {
+  render: function() {
+    var wrapperStyle = {
      backgroundColor: this.props.color,
      flex: 1,
      alignItems: 'center',
@@ -38,8 +37,7 @@ class SetPropertiesExampleApp extends React.Component {
        </Text>
      </View>
    );
-  }
-
-}
+  },
+});

 module.exports = SetPropertiesExampleApp;
@@ -83,39 +83,5 @@ exports.examples = [
    render(): ReactElement {
      return <SliderExample step={0.25} />;
    }
-  },
-  {
-    title: 'Custom min/max track tint color',
-    render(): ReactElement {
-      return (
-        <SliderExample
-          minimumTrackTintColor={'red'}
-          maximumTrackTintColor={'green'}
-        />
-      );
-    }
-  },
-  {
-    title: 'Custom thumb image',
-    render(): ReactElement {
-      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
-    }
-  },
-  {
-    title: 'Custom track image',
-    render(): ReactElement {
-      return <SliderExample trackImage={require('./slider.png')} />;
-    }
-  },
-  {
-    title: 'Custom min/max track image',
-    render(): ReactElement {
-      return (
-        <SliderExample
-          minimumTrackImage={require('./slider-left.png')}
-          maximumTrackImage={require('./slider-right.png')}
-        />
-      );
-    }
-  },
+  }
 ];
@@ -1,73 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  Image,
-  StyleSheet,
-  Text,
-  UIManager,
-  View,
-} = React;
-
-var ScreenshotExample = React.createClass({
-  getInitialState() {
-    return {
-      uri: undefined,
-    };
-  },
-
-  render() {
-    return (
-      <View>
-        <Text onPress={this.takeScreenshot} style={style.button}>
-          Click to take a screenshot
-        </Text>
-        <Image style={style.image} source={{uri: this.state.uri}}/>
-      </View>
-    );
-  },
-
-  takeScreenshot() {
-    UIManager
-      .takeSnapshot('window', {format: 'jpeg', quality: 0.8}) // See UIManager.js for options
-      .then((uri) => this.setState({uri}))
-      .catch((error) => alert(error));
-  }
-});
-
-var style = StyleSheet.create({
-  button: {
-    marginBottom: 10,
-    fontWeight: '500',
-  },
-  image: {
-    flex: 1,
-    height: 300,
-    resizeMode: 'contain',
-    backgroundColor: 'black',
-  },
-});
-
-exports.title = 'Snapshot / Screenshot';
-exports.description = 'API to capture images from the screen.';
-exports.examples = [
-  {
-    title: 'Take screenshot',
-    render(): ReactElement { return <ScreenshotExample />; }
-  },
-];
@@ -1,311 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-const React = require('react-native');
-const {
-  StyleSheet,
-  View,
-  Text,
-  TouchableHighlight,
-  StatusBar,
-} = React;
-
-type BarStyle = 'default' | 'light-content';
-type ShowHideTransition = 'fade' | 'slide';
-
-type State = {
-  animated: boolean,
-  backgroundColor: string,
-  hidden?: boolean,
-  showHideTransition: ShowHideTransition,
-  translucent?: boolean,
-  barStyle?: BarStyle,
-  networkActivityIndicatorVisible?: boolean
-};
-
-exports.framework = 'React';
-exports.title = '<StatusBar>';
-exports.description = 'Component for controlling the status bar';
-
-const colors = [
-  '#ff0000',
-  '#00ff00',
-  '#0000ff',
-];
-
-const barStyles = [
-  'default',
-  'light-content',
-];
-
-const showHideTransitions = [
-  'fade',
-  'slide',
-];
-
-function getValue(values: Array<any>, index: number): any {
-  return values[index % values.length];
-}
-
-const StatusBarExample = React.createClass({
-  getInitialState(): State {
-    return {
-      animated: true,
-      backgroundColor: getValue(colors, 0),
-      showHideTransition: getValue(showHideTransitions, 0),
-    };
-  },
-
-  _colorIndex: 0,
-  _barStyleIndex: 0,
-  _showHideTransitionIndex: 0,
-
-  render() {
-    return (
-      <View>
-        <StatusBar
-          backgroundColor={this.state.backgroundColor}
-          translucent={this.state.translucent}
-          hidden={this.state.hidden}
-          showHideTransition={this.state.showHideTransition}
-          animated={this.state.animated}
-          barStyle={this.state.barStyle}
-          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
-        />
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({animated: !this.state.animated})}>
-            <View style={styles.button}>
-              <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({hidden: !this.state.hidden})}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => this.setState({
-              networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
-            })}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._showHideTransitionIndex++;
-              this.setState({
-                showHideTransition:
-                getValue(showHideTransitions, this._showHideTransitionIndex),
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>
-                showHideTransition:
-                '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              this.setState({backgroundColor: getValue(colors, this._colorIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this.setState({
-                translucent: !this.state.translucent,
-                backgroundColor: !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black',
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-      </View>
-    );
-  },
-});
-
-const StatusBarStaticExample = React.createClass({
-  _colorIndex: 0,
-  _barStyleIndex: 0,
-  _showHideTransitionIndex: 0,
-
-  getInitialState() {
-    return {
-      backgroundColor: getValue(colors, 0),
-      barStyle: getValue(barStyles, 0),
-      hidden: false,
-      networkActivityIndicatorVisible: false,
-      translucent: false,
-    };
-  },
-
-  render() {
-    return (
-      <View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const hidden = !this.state.hidden;
-              StatusBar.setHidden(hidden, 'slide');
-              this.setState({hidden});
-            }}>
-            <View style={styles.button}>
-              <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>iOS</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._barStyleIndex++;
-              const barStyle = getValue(barStyles, this._barStyleIndex);
-              StatusBar.setBarStyle(barStyle, true);
-              this.setState({barStyle});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const networkActivityIndicatorVisible = !this.state.networkActivityIndicatorVisible;
-              StatusBar.setNetworkActivityIndicatorVisible(networkActivityIndicatorVisible);
-              this.setState({networkActivityIndicatorVisible});
-            }}>
-            <View style={styles.button}>
-              <Text>
-                networkActivityIndicatorVisible:
-                {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <Text style={styles.title}>Android</Text>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              this._colorIndex++;
-              const backgroundColor = getValue(colors, this._colorIndex);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({backgroundColor});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-        <View>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => {
-              const translucent = !this.state.translucent;
-              const backgroundColor = !this.state.translucent ? 'rgba(0, 0, 0, 0.4)' : 'black';
-              StatusBar.setTranslucent(translucent);
-              StatusBar.setBackgroundColor(backgroundColor, true);
-              this.setState({
-                translucent,
-                backgroundColor,
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-      </View>
-    );
-  },
-});
-
-exports.examples = [{
-  title: 'StatusBar',
-  render() {
-    return <StatusBarExample />;
-  },
-}, {
-  title: 'StatusBar static API',
-  render() {
-    return <StatusBarStaticExample />;
-  },
-}];
-
-var styles = StyleSheet.create({
-  wrapper: {
-    borderRadius: 5,
-    marginBottom: 5,
-  },
-  button: {
-    borderRadius: 5,
-    backgroundColor: '#eeeeee',
-    padding: 10,
-  },
-  title: {
-    marginTop: 16,
-    marginBottom: 8,
-    fontWeight: 'bold',
-  }
-});
@@ -33,7 +33,7 @@ exports.examples = [{
    return (
      <View>
        {['default', 'light-content'].map((style) =>
-          <TouchableHighlight key={style} style={styles.wrapper}
+          <TouchableHighlight style={styles.wrapper}
            onPress={() => StatusBarIOS.setStyle(style)}>
            <View style={styles.button}>
              <Text>setStyle('{style}')</Text>
@@ -49,7 +49,7 @@ exports.examples = [{
    return (
      <View>
        {['default', 'light-content'].map((style) =>
-          <TouchableHighlight key={style} style={styles.wrapper}
+          <TouchableHighlight style={styles.wrapper}
            onPress={() => StatusBarIOS.setStyle(style, true)}>
            <View style={styles.button}>
              <Text>setStyle('{style}', true)</Text>
@@ -65,7 +65,7 @@ exports.examples = [{
    return (
      <View>
        {['none', 'fade', 'slide'].map((animation) =>
-          <View key={animation}>
+          <View>
            <TouchableHighlight style={styles.wrapper}
              onPress={() => StatusBarIOS.setHidden(true, animation)}>
              <View style={styles.button}>
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('React');
+
+var SwitchAndroid = require('SwitchAndroid');
+var Text = require('Text');
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var SwitchAndroidExample = React.createClass({
+  statics: {
+    title: '<SwitchAndroid>',
+    description: 'Standard Android two-state toggle component.'
+  },
+
+  getInitialState : function() {
+    return {
+      trueSwitchIsOn: true,
+      falseSwitchIsOn: false,
+      colorTrueSwitchIsOn: true,
+      colorFalseSwitchIsOn: false,
+      eventSwitchIsOn: false,
+    };
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="<SwitchAndroid>">
+        <UIExplorerBlock title="Switches can be set to true or false">
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.falseSwitchIsOn} />
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
+            value={this.state.trueSwitchIsOn} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Switches can be disabled">
+          <SwitchAndroid
+            disabled={true}
+            style={{marginBottom: 10}}
+            value={true} />
+          <SwitchAndroid
+            disabled={true}
+            value={false} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Change events can be detected">
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Switches are controlled components">
+          <SwitchAndroid />
+          <SwitchAndroid value={true} />
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  }
+});
+
+module.exports = SwitchAndroidExample;
@@ -17,7 +17,7 @@

 var React = require('react-native');
 var {
-  Switch,
+  SwitchIOS,
  Text,
  View
 } = React;
@@ -32,11 +32,11 @@ var BasicSwitchExample = React.createClass({
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom: 10}}
          value={this.state.falseSwitchIsOn} />
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>
@@ -48,11 +48,11 @@ var DisabledSwitchExample = React.createClass({
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          disabled={true}
          style={{marginBottom: 10}}
          value={true} />
-        <Switch
+        <SwitchIOS
          disabled={true}
          value={false} />
      </View>
@@ -70,14 +70,14 @@ var ColorSwitchExample = React.createClass({
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
          onTintColor="#00ff00"
          style={{marginBottom: 10}}
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorFalseSwitchIsOn} />
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
          onTintColor="#00ff00"
          thumbTintColor="#0000ff"
@@ -99,22 +99,22 @@ var EventSwitchExample = React.createClass({
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <View>
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchIsOn} />
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchIsOn} />
            <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
        </View>
        <View>
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchRegressionIsOn} />
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchRegressionIsOn} />
@@ -125,7 +125,10 @@ var EventSwitchExample = React.createClass({
  }
 });

-var examples = [
+exports.title = '<SwitchIOS>';
+exports.displayName = 'SwitchExample';
+exports.description = 'Native boolean input';
+exports.examples = [
  {
    title: 'Switches can be set to true or false',
    render(): ReactElement { return <BasicSwitchExample />; }
@@ -134,24 +137,16 @@ var examples = [
    title: 'Switches can be disabled',
    render(): ReactElement { return <DisabledSwitchExample />; }
  },
+  {
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSwitchExample />; }
+  },
  {
    title: 'Change events can be detected',
    render(): ReactElement { return <EventSwitchExample />; }
  },
  {
    title: 'Switches are controlled components',
-    render(): ReactElement { return <Switch />; }
+    render(): ReactElement { return <SwitchIOS />; }
  }
 ];
-
-if (React.Platform.OS === 'ios') {
-  examples.push({
-    title: 'Custom colors can be provided',
-    render(): ReactElement { return <ColorSwitchExample />; }
-  });
-}
-
-exports.title = '<Switch>';
-exports.displayName = 'SwitchExample';
-exports.description = 'Native boolean input';
-exports.examples = examples;
@@ -365,11 +365,6 @@ var TextExample = React.createClass({
            This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
          </Text>
        </UIExplorerBlock>
-        <UIExplorerBlock title="Text shadow">
-          <Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
-            Demo text shadow
-          </Text>
-        </UIExplorerBlock>
      </UIExplorerPage>
    );
  }
@@ -419,18 +419,7 @@ exports.examples = [
    return (
      <View>
        <Text>
-          This text contains an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
-        </Text>
-      </View>
-    );
-  },
-}, {
-  title: 'Text shadow',
-  render: function() {
-    return (
-      <View>
-        <Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
-          Demo text shadow
+          This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
        </Text>
      </View>
    );
@@ -72,29 +72,6 @@ var TextEventsExample = React.createClass({
  }
 });

-class AutoExpandingTextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {text: '', height: 0};
-  }
-  render() {
-    return (
-      <TextInput
-        {...this.props}
-        multiline={true}
-        onChange={(event) => {
-          this.setState({
-            text: event.nativeEvent.text,
-            height: event.nativeEvent.contentSize.height,
-          });
-        }}
-        style={[styles.default, {height: Math.max(35, this.state.height)}]}
-        value={this.state.text}
-      />
-    );
-  }
-}
-
 class RewriteExample extends React.Component {
  constructor(props) {
    super(props);
@@ -178,60 +155,6 @@ class TokenizedTextExample extends React.Component {
  }
 }

-var BlurOnSubmitExample = React.createClass({
-  focusNextField(nextField) {
-    this.refs[nextField].focus();
-  },
-
-  render: function() {
-    return (
-      <View>
-        <TextInput
-          ref="1"
-          style={styles.singleLine}
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
-          blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('2')}
-        />
-        <TextInput
-          ref="2"
-          style={styles.singleLine}
-          keyboardType="email-address"
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
-          blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('3')}
-        />
-        <TextInput
-          ref="3"
-          style={styles.singleLine}
-          keyboardType="url"
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
-          blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('4')}
-        />
-        <TextInput
-          ref="4"
-          style={styles.singleLine}
-          keyboardType="numeric"
-          placeholder="blurOnSubmit = false"
-          blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('5')}
-        />
-        <TextInput
-          ref="5"
-          style={styles.singleLine}
-          keyboardType="numbers-and-punctuation"
-          placeholder="blurOnSubmit = true"
-          returnKeyType="done"
-        />
-      </View>
-    );
-  }
-});
-
 var styles = StyleSheet.create({
  multiline: {
    height: 60,
@@ -262,13 +185,7 @@ exports.examples = [
  {
    title: 'Auto-focus',
    render: function() {
-      return (
-        <TextInput
-          autoFocus={true}
-          style={styles.singleLine}
-          accessibilityLabel="I am the accessibility label for text input"
-        />
-      );
+      return <TextInput autoFocus={true} style={styles.singleLine} />;
    }
  },
  {
@@ -325,7 +242,6 @@ exports.examples = [
        'default',
        'email-address',
        'numeric',
-        'phone-pad',
      ];
      var examples = keyboardTypes.map((type) => {
        return (
@@ -340,10 +256,6 @@ exports.examples = [
      return <View>{examples}</View>;
    }
  },
-  {
-    title: 'Blur on submit',
-    render: function(): ReactElement { return <BlurOnSubmitExample />; },
-  },
  {
    title: 'Event handling',
    render: function(): ReactElement { return <TextEventsExample />; },
@@ -386,11 +298,6 @@ exports.examples = [
              Darker backgroundColor
            </Text>
          </TextInput>
-          <TextInput
-            defaultValue="Highlight Color is red"
-            selectionColor={'red'}
-            style={styles.singleLine}>
-          </TextInput>
        </View>
      );
    }
@@ -440,19 +347,25 @@ exports.examples = [
            placeholder="multiline, aligned top-left"
            placeholderTextColor="red"
            multiline={true}
-            style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]}
+            textAlign="start"
+            textAlignVertical="top"
+            style={styles.multiline}
          />
          <TextInput
            autoCorrect={true}
            placeholder="multiline, aligned center"
            placeholderTextColor="green"
            multiline={true}
-            style={[styles.multiline, {textAlign: "center", textAlignVertical: "center"}]}
+            textAlign="center"
+            textAlignVertical="center"
+            style={[styles.multiline]}
          />
          <TextInput
            autoCorrect={true}
            multiline={true}
-            style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}>
+            textAlign="end"
+            textAlignVertical="bottom"
+            style={[styles.multiline, {color: 'blue'}]}>
            <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
          </TextInput>
        </View>
@@ -477,20 +390,6 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Auto-expanding',
-    render: function() {
-      return (
-        <View>
-          <AutoExpandingTextInput
-            placeholder="height increases with content"
-            enablesReturnKeyAutomatically={true}
-            returnKeyType="done"
-          />
-        </View>
-      );
-    }
-  },
  {
    title: 'Attributed text',
    render: function() {
@@ -96,34 +96,7 @@ var TextEventsExample = React.createClass({
  }
 });

-class AutoExpandingTextInput extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = {text: '', height: 0};
-  }
-  render() {
-    return (
-      <TextInput
-        {...this.props}
-        multiline={true}
-        onChange={(event) => {
-          this.setState({
-            text: event.nativeEvent.text,
-            height: event.nativeEvent.contentSize.height,
-          });
-        }}
-        style={[styles.default, {height: Math.max(35, this.state.height)}]}
-        value={this.state.text}
-      />
-    );
-  }
-}
-
 class RewriteExample extends React.Component {
-  state: any;
-
  constructor(props) {
    super(props);
    this.state = {text: ''};
@@ -152,32 +125,7 @@ class RewriteExample extends React.Component {
  }
 }

-class RewriteExampleInvalidCharacters extends React.Component {
-  state: any;
-
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          onChangeText={(text) => {
-            this.setState({text: text.replace(/\s/g, '')});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-      </View>
-    );
-  }
-}
-
 class TokenizedTextExample extends React.Component {
-  state: any;
-
  constructor(props) {
    super(props);
    this.state = {text: 'Hello #World'};
@@ -210,7 +158,7 @@ class TokenizedTextExample extends React.Component {
    //highlight hashtags
    parts = parts.map((text) => {
      if (/^#/.test(text)) {
-        return <Text key={text} style={styles.hashtag}>{text}</Text>;
+        return <Text style={styles.hashtag}>{text}</Text>;
      } else {
        return text;
      }
@@ -233,52 +181,52 @@ class TokenizedTextExample extends React.Component {

 var BlurOnSubmitExample = React.createClass({
  focusNextField(nextField) {
-    this.refs[nextField].focus();
+    this.refs[nextField].focus()
  },

  render: function() {
    return (
      <View>
        <TextInput
-          ref="1"
+          ref='1'
          style={styles.default}
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
          blurOnSubmit={false}
          onSubmitEditing={() => this.focusNextField('2')}
        />
        <TextInput
-          ref="2"
+          ref='2'
          style={styles.default}
-          keyboardType="email-address"
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
+          keyboardType='email-address'
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
          blurOnSubmit={false}
          onSubmitEditing={() => this.focusNextField('3')}
        />
        <TextInput
-          ref="3"
+          ref='3'
          style={styles.default}
-          keyboardType="url"
-          placeholder="blurOnSubmit = false"
-          returnKeyType="next"
+          keyboardType='url'
+          placeholder='blurOnSubmit = false'
+          returnKeyType='next'
          blurOnSubmit={false}
          onSubmitEditing={() => this.focusNextField('4')}
        />
        <TextInput
-          ref="4"
+          ref='4'
          style={styles.default}
-          keyboardType="numeric"
-          placeholder="blurOnSubmit = false"
+          keyboardType='numeric'
+          placeholder='blurOnSubmit = false'
          blurOnSubmit={false}
          onSubmitEditing={() => this.focusNextField('5')}
        />
        <TextInput
-          ref="5"
+          ref='5'
          style={styles.default}
-          keyboardType="numbers-and-punctuation"
-          placeholder="blurOnSubmit = true"
-          returnKeyType="done"
+          keyboardType='numbers-and-punctuation'
+          placeholder='blurOnSubmit = true'
+          returnKeyType='done'
        />
      </View>
    );
@@ -356,13 +304,7 @@ exports.examples = [
  {
    title: 'Auto-focus',
    render: function() {
-      return (
-        <TextInput
-          autoFocus={true}
-          style={styles.default}
-          accessibilityLabel="I am the accessibility label for text input"
-        />
-      );
+      return <TextInput autoFocus={true} style={styles.default} />;
    }
  },
  {
@@ -371,12 +313,6 @@ exports.examples = [
      return <RewriteExample />;
    }
  },
-  {
-    title: 'Live Re-Write (no spaces allowed)',
-    render: function() {
-      return <RewriteExampleInvalidCharacters />;
-    }
-  },
  {
    title: 'Auto-capitalize',
    render: function() {
@@ -550,25 +486,6 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Colored highlight/cursor for text input',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            style={styles.default}
-            selectionColor={"green"}
-            defaultValue="Highlight me"
-          />
-          <TextInput
-            style={styles.default}
-            selectionColor={"rgba(86, 76, 205, 1)"}
-            defaultValue="Highlight me"
-          />
-        </View>
-      );
-    }
-  },
  {
    title: 'Clear button mode',
    render: function () {
@@ -627,27 +544,6 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Blur on submit',
-    render: function(): ReactElement { return <BlurOnSubmitExample />; },
-  },
-  {
-    title: 'Multiline blur on submit',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            style={styles.multiline}
-            placeholder="blurOnSubmit = true"
-            returnKeyType="next"
-            blurOnSubmit={true}
-            multiline={true}
-            onSubmitEditing={event => alert(event.nativeEvent.text)}
-          />
-        </View>
-      );
-    }
-  },
  {
    title: 'Multiline',
    render: function() {
@@ -686,24 +582,14 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Auto-expanding',
-    render: function() {
-      return (
-        <View>
-          <AutoExpandingTextInput
-            placeholder="height increases with content"
-            enablesReturnKeyAutomatically={true}
-            returnKeyType="done"
-          />
-        </View>
-      );
-    }
-  },
  {
    title: 'Attributed text',
    render: function() {
      return <TokenizedTextExample />;
    }
  },
+  {
+    title: 'Blur on submit',
+    render: function(): ReactElement { return <BlurOnSubmitExample />; },
+  },
 ];
@@ -1,112 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  TimePickerAndroid,
-  StyleSheet,
-  Text,
-  TouchableWithoutFeedback,
-} = React;
-
-var UIExplorerBlock = require('./UIExplorerBlock');
-var UIExplorerPage = require('./UIExplorerPage');
-
-var TimePickerAndroidExample = React.createClass({
-
-  statics: {
-    title: 'TimePickerAndroid',
-    description: 'Standard Android time picker dialog',
-  },
-
-  getInitialState() {
-    // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time
-    // picked by the user and makes it so the next time they open it the hour and minute they picked
-    // before is displayed.
-    return {
-      isoFormatText: 'pick a time (24-hour format)',
-      presetHour: 4,
-      presetMinute: 4,
-      presetText: 'pick a time, default: 4:04AM',
-      simpleText: 'pick a time',
-    };
-  },
-
-  async showPicker(stateKey, options) {
-    try {
-      const {action, minute, hour} = await TimePickerAndroid.open(options);
-      var newState = {};
-      if (action === TimePickerAndroid.timeSetAction) {
-        newState[stateKey + 'Text'] = _formatTime(hour, minute);
-        newState[stateKey + 'Hour'] = hour;
-        newState[stateKey + 'Minute'] = minute;
-      } else if (action === TimePickerAndroid.dismissedAction) {
-        newState[stateKey + 'Text'] = 'dismissed';
-      }
-      this.setState(newState);
-    } catch ({code, message}) {
-      console.warn(`Error in example '${stateKey}': `, message);
-    }
-  },
-
-  render() {
-    return (
-      <UIExplorerPage title="TimePickerAndroid">
-        <UIExplorerBlock title="Simple time picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'simple')}>
-            <Text style={styles.text}>{this.state.simpleText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Time picker with pre-set time">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'preset', {
-              hour: this.state.presetHour,
-              minute: this.state.presetMinute,
-            })}>
-            <Text style={styles.text}>{this.state.presetText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-
-        <UIExplorerBlock title="Time picker with 24-hour time format">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'isoFormat', {
-              hour: this.state.isoFormatHour,
-              minute: this.state.isoFormatMinute,
-              is24Hour: true,
-            })}>
-            <Text style={styles.text}>{this.state.isoFormatText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  },
-});
-
-/**
- * Returns e.g. '3:05'.
- */
-function _formatTime(hour, minute) {
-  return hour + ':' + (minute < 10 ? '0' + minute : minute);
-}
-
-var styles = StyleSheet.create({
-  text: {
-    color: 'black',
-  },
-});
-
-module.exports = TimePickerAndroidExample;
-
@@ -171,20 +171,9 @@ exports.examples = [
          }
          return (
            <View>
-              {this.state.showTimer && this._renderTimer()}
+              {timer}
              <UIExplorerButton onPress={this._toggleTimer}>
-                {this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
-              </UIExplorerButton>
-            </View>
-          );
-        },
-
-        _renderTimer: function() {
-          return (
-            <View>
-              <TimerTester ref="interval" dt={25} type="setInterval" />
-              <UIExplorerButton onPress={() => this.refs.interval.clear() }>
-                Clear interval
+                {toggleText}
              </UIExplorerButton>
            </View>
          );
@@ -23,9 +23,6 @@ var {
  Text,
  TouchableHighlight,
  TouchableOpacity,
-  UIManager,
-  Platform,
-  TouchableNativeFeedback,
  View,
 } = React;

@@ -57,7 +54,7 @@ exports.examples = [
            activeOpacity={1}
            animationVelocity={0}
            underlayColor="rgb(210, 230, 255)"
-            onPress={() => console.log('custom THW text - highlight')}>
+            onPress={() => console.log('custom THW text - hightlight')}>
            <View style={styles.wrapperCustom}>
              <Text style={styles.text}>
                Tap Here For Custom Highlight!
@@ -88,28 +85,7 @@ exports.examples = [
  render: function(): ReactElement {
    return <TouchableDelayEvents />;
  },
-}, {
-  title: '3D Touch / Force Touch',
-  description: 'iPhone 6s and 6s plus support 3D touch, which adds a force property to touches',
-  render: function(): ReactElement {
-    return <ForceTouchExample />;
-  },
-  platform: 'ios',
-}, {
-   title: 'Touchable Hit Slop',
-   description: '<Touchable*> components accept hitSlop prop which extends the touch area ' +
-     'without changing the view bounds.',
-   render: function(): ReactElement {
-     return <TouchableHitSlop />;
-   },
- }, {
-   title: 'Disabled Touchable*',
-   description: '<Touchable*> components accept disabled prop which prevents ' +
-     'any interaction with component',
-   render: function(): ReactElement {
-     return <TouchableDisabled />;
-   },
- }];
+}];

 var TextOnPressBox = React.createClass({
  getInitialState: function() {
@@ -157,21 +133,18 @@ var TouchableFeedbackEvents = React.createClass({
    return (
      <View testID="touchable_feedback_events">
        <View style={[styles.row, {justifyContent: 'center'}]}>
-          <TouchableOpacity
-            style={styles.wrapper}
-            testID="touchable_feedback_events_button"
-            accessibilityLabel="touchable feedback events"
-            accessibilityTraits="button"
-            accessibilityComponentType="button"
-            onPress={() => this._appendEvent('press')}
-            onPressIn={() => this._appendEvent('pressIn')}
-            onPressOut={() => this._appendEvent('pressOut')}
-            onLongPress={() => this._appendEvent('longPress')}>
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </TouchableOpacity>
-        </View>
+        <TouchableOpacity
+          style={styles.wrapper}
+          testID="touchable_feedback_events_button"
+          onPress={() => this._appendEvent('press')}
+          onPressIn={() => this._appendEvent('pressIn')}
+          onPressOut={() => this._appendEvent('pressOut')}
+          onLongPress={() => this._appendEvent('longPress')}>
+          <Text style={styles.button}>
+            Press Me
+          </Text>
+        </TouchableOpacity>
+      </View>
        <View testID="touchable_feedback_events_console" style={styles.eventLogBox}>
          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
        </View>
@@ -196,21 +169,21 @@ var TouchableDelayEvents = React.createClass({
    return (
      <View testID="touchable_delay_events">
        <View style={[styles.row, {justifyContent: 'center'}]}>
-          <TouchableOpacity
-            style={styles.wrapper}
-            testID="touchable_delay_events_button"
-            onPress={() => this._appendEvent('press')}
-            delayPressIn={400}
-            onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
-            delayPressOut={1000}
-            onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
-            delayLongPress={800}
-            onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </TouchableOpacity>
-        </View>
+        <TouchableOpacity
+          style={styles.wrapper}
+          testID="touchable_delay_events_button"
+          onPress={() => this._appendEvent('press')}
+          delayPressIn={400}
+          onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
+          delayPressOut={1000}
+          onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
+          delayLongPress={800}
+          onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
+          <Text style={styles.button}>
+            Press Me
+          </Text>
+        </TouchableOpacity>
+      </View>
        <View style={styles.eventLogBox} testID="touchable_delay_events_console">
          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
        </View>
@@ -225,148 +198,6 @@ var TouchableDelayEvents = React.createClass({
  },
 });

-var ForceTouchExample = React.createClass({
-  getInitialState: function() {
-    return {
-      force: 0,
-    };
-  },
-  _renderConsoleText: function() {
-    return View.forceTouchAvailable ?
-      'Force: ' + this.state.force.toFixed(3) :
-      '3D Touch is not available on this device';
-  },
-  render: function() {
-    return (
-      <View testID="touchable_3dtouch_event">
-        <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
-          <Text>{this._renderConsoleText()}</Text>
-        </View>
-        <View style={[styles.row, {justifyContent: 'center'}]}>
-          <View
-            style={styles.wrapper}
-            testID="touchable_3dtouch_button"
-            onStartShouldSetResponder={() => true}
-            onResponderMove={(event) => this.setState({force: event.nativeEvent.force})}
-            onResponderRelease={(event) => this.setState({force: 0})}>
-            <Text style={styles.button}>
-              Press Me
-            </Text>
-          </View>
-        </View>
-      </View>
-    );
-  },
-});
-
-var TouchableHitSlop = React.createClass({
-  getInitialState: function() {
-    return {
-      timesPressed: 0,
-    };
-  },
-  onPress: function() {
-    this.setState({
-      timesPressed: this.state.timesPressed + 1,
-    });
-  },
-  render: function() {
-    var log = '';
-    if (this.state.timesPressed > 1) {
-      log = this.state.timesPressed + 'x onPress';
-    } else if (this.state.timesPressed > 0) {
-      log = 'onPress';
-    }
-
-    return (
-      <View testID="touchable_hit_slop">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
-          <TouchableOpacity
-            onPress={this.onPress}
-            style={styles.hitSlopWrapper}
-            hitSlop={{top: 30, bottom: 30, left: 60, right: 60}}
-            testID="touchable_hit_slop_button">
-            <Text style={styles.hitSlopButton}>
-              Press Outside This View
-            </Text>
-          </TouchableOpacity>
-         </View>
-        <View style={styles.logBox}>
-          <Text>
-            {log}
-          </Text>
-        </View>
-      </View>
-    );
-  }
-});
-
-var TouchableDisabled = React.createClass({
-  render: function() {
-    return (
-      <View>
-        <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
-          <Text style={styles.disabledButton}>Disabled TouchableOpacity</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity disabled={false} style={[styles.row, styles.block]}>
-          <Text style={styles.button}>Enabled TouchableOpacity</Text>
-        </TouchableOpacity>
-
-        <TouchableHighlight
-          activeOpacity={1}
-          disabled={true}
-          animationVelocity={0}
-          underlayColor="rgb(210, 230, 255)"
-          style={[styles.row, styles.block]}
-          onPress={() => console.log('custom THW text - highlight')}>
-          <Text style={styles.disabledButton}>
-            Disabled TouchableHighlight
-          </Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight
-          activeOpacity={1}
-          animationVelocity={0}
-          underlayColor="rgb(210, 230, 255)"
-          style={[styles.row, styles.block]}
-          onPress={() => console.log('custom THW text - highlight')}>
-          <Text style={styles.button}>
-            Disabled TouchableHighlight
-          </Text>
-        </TouchableHighlight>
-
-        {Platform.OS === 'android' &&
-          <TouchableNativeFeedback
-            style={[styles.row, styles.block]}
-            onPress={() => console.log('custom TNF has been clicked')}
-            background={TouchableNativeFeedback.SelectableBackground()}>
-            <View>
-              <Text style={[styles.button, styles.nativeFeedbackButton]}>
-                Enabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
-        }
-
-        {Platform.OS === 'android' &&
-          <TouchableNativeFeedback
-            disabled={true}
-            style={[styles.row, styles.block]}
-            onPress={() => console.log('custom TNF has been clicked')}
-            background={TouchableNativeFeedback.SelectableBackground()}>
-            <View>
-              <Text style={[styles.disabledButton, styles.nativeFeedbackButton]}>
-                Disabled TouchableNativeFeedback
-              </Text>
-            </View>
-          </TouchableNativeFeedback>
-        }
-      </View>
-    );
-  }
-});
-
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};

 var styles = StyleSheet.create({
@@ -385,23 +216,9 @@ var styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
-  block: {
-    padding: 10,
-  },
  button: {
    color: '#007AFF',
  },
-  disabledButton: {
-    color: '#007AFF',
-    opacity: 0.5,
-  },
-  nativeFeedbackButton: {
-    textAlign: 'center',
-    margin: 10,
-  },
-  hitSlopButton: {
-    color: 'white',
-  },
  wrapper: {
    borderRadius: 8,
  },
@@ -409,14 +226,10 @@ var styles = StyleSheet.create({
    borderRadius: 8,
    padding: 6,
  },
-  hitSlopWrapper: {
-    backgroundColor: 'red',
-    marginVertical: 30,
-  },
  logBox: {
    padding: 20,
    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
+    borderWidth: 1 / PixelRatio.get(),
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
@@ -424,18 +237,10 @@ var styles = StyleSheet.create({
    padding: 10,
    margin: 10,
    height: 120,
-    borderWidth: StyleSheet.hairlineWidth,
+    borderWidth: 1 / PixelRatio.get(),
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
-  forceTouchBox: {
-    padding: 10,
-    margin: 10,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-    alignItems: 'center',
-  },
  textBlock: {
    fontWeight: '500',
    color: 'blue',
@@ -10,7 +10,6 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- * @flow
 */
 'use strict';

@@ -8,18 +8,12 @@

 /* Begin PBXBuildFile section */
 		1300627F1B59179B0043FE5A /* RCTGzipTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1300627E1B59179B0043FE5A /* RCTGzipTests.m */; };
-		13129DD41C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13129DD31C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m */; };
-		1323F1891C04AB9F0091BED0 /* bunny.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1851C04AB9F0091BED0 /* bunny.png */; };
-		1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1861C04AB9F0091BED0 /* flux@3x.png */; };
-		1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1871C04AB9F0091BED0 /* hawk.png */; };
-		1323F18C1C04AB9F0091BED0 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */; };
-		1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */ = {isa = PBXBuildFile; fileRef = 1323F18E1C04ABEB0091BED0 /* Thumbnails */; };
 		13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FE81AA91428003F314A /* libRCTImage.a */; };
 		134180011AA9153C003F314A /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FEF1AA914B8003F314A /* libRCTText.a */; };
 		1341802C1AA9178B003F314A /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1341802B1AA91779003F314A /* libRCTNetwork.a */; };
+		134366AF1BFD2C76000A2DE1 /* Thumbnails in Resources */ = {isa = PBXBuildFile; fileRef = 134366AE1BFD2C76000A2DE1 /* Thumbnails */; };
 		134454601AAFCABD003F0779 /* libRCTAdSupport.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1344545A1AAFCAAE003F0779 /* libRCTAdSupport.a */; };
 		134A8A2A1AACED7A00945AAE /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 134A8A251AACED6A00945AAE /* libRCTGeolocation.a */; };
-		134CB92A1C85A38800265FA6 /* RCTModuleInitTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 134CB9291C85A38800265FA6 /* RCTModuleInitTests.m */; };
 		138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 138D6A161B53CD440074A87E /* RCTShadowViewTests.m */; };
 		138DEE241B9EDFB6007F4EA5 /* libRCTCameraRoll.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 138DEE091B9EDDDB007F4EA5 /* libRCTCameraRoll.a */; };
 		1393D0381B68CD1300E1B601 /* RCTModuleMethodTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */; };
@@ -28,7 +22,6 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */; };
 		13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
 		13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
 		143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
@@ -36,7 +29,7 @@
 		147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
 		1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */; };
 		1497CFAD1B21F5E400C1F8F2 /* RCTBridgeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */; };
-		1497CFAE1B21F5E400C1F8F2 /* RCTJSCExecutorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */; settings = {COMPILER_FLAGS = "-fno-objc-arc"; }; };
+		1497CFAE1B21F5E400C1F8F2 /* RCTContextExecutorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */; settings = {COMPILER_FLAGS = "-fno-objc-arc"; }; };
 		1497CFAF1B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */; };
 		1497CFB01B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */; };
 		1497CFB11B21F5E400C1F8F2 /* RCTEventDispatcherTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */; };
@@ -57,10 +50,11 @@
 		14D6D7281B2222EF001FB087 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDED91B0651EA00C62182 /* libRCTWebSocket.a */; };
 		14D6D7291B2222EF001FB087 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
 		14DC67F41AB71881001358AB /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14DC67F11AB71876001358AB /* libRCTPushNotification.a */; };
-		272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; };
-		27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */; };
-		27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
+		272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; settings = {ASSET_TAGS = (); }; };
+		27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; settings = {ASSET_TAGS = (); }; };
+		27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */; settings = {ASSET_TAGS = (); }; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
+		3D36915B1BDA8CBB007B22D8 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
@@ -180,18 +174,12 @@
 /* Begin PBXFileReference section */
 		004D289E1AAF61C70097A701 /* UIExplorerUnitTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UIExplorerUnitTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		1300627E1B59179B0043FE5A /* RCTGzipTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTGzipTests.m; sourceTree = "<group>"; };
-		13129DD31C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModuleInitNotificationRaceTests.m; sourceTree = "<group>"; };
-		1323F1851C04AB9F0091BED0 /* bunny.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = bunny.png; sourceTree = "<group>"; };
-		1323F1861C04AB9F0091BED0 /* flux@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "flux@3x.png"; sourceTree = "<group>"; };
-		1323F1871C04AB9F0091BED0 /* hawk.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = hawk.png; sourceTree = "<group>"; };
-		1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = uie_thumb_big.png; sourceTree = "<group>"; };
-		1323F18E1C04ABEB0091BED0 /* Thumbnails */ = {isa = PBXFileReference; lastKnownFileType = folder; path = Thumbnails; sourceTree = "<group>"; };
 		13417FE31AA91428003F314A /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 		13417FEA1AA914B8003F314A /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		134180261AA91779003F314A /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
+		134366AE1BFD2C76000A2DE1 /* Thumbnails */ = {isa = PBXFileReference; lastKnownFileType = folder; path = Thumbnails; sourceTree = "<group>"; };
 		134454551AAFCAAE003F0779 /* RCTAdSupport.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAdSupport.xcodeproj; path = ../../Libraries/AdSupport/RCTAdSupport.xcodeproj; sourceTree = "<group>"; };
 		134A8A201AACED6A00945AAE /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
-		134CB9291C85A38800265FA6 /* RCTModuleInitTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModuleInitTests.m; sourceTree = "<group>"; };
 		138D6A161B53CD440074A87E /* RCTShadowViewTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTShadowViewTests.m; sourceTree = "<group>"; };
 		138DEE021B9EDDDB007F4EA5 /* RCTCameraRoll.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTCameraRoll.xcodeproj; path = ../../Libraries/CameraRoll/RCTCameraRoll.xcodeproj; sourceTree = "<group>"; };
 		1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModuleMethodTests.m; sourceTree = "<group>"; };
@@ -203,7 +191,6 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = UIExplorer/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = UIExplorer/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = UIExplorer/main.m; sourceTree = "<group>"; };
-		13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTURLUtilsTests.m; sourceTree = "<group>"; };
 		13CC9D481AEED2B90020D1C2 /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
 		13DB03471B5D2ED500C27245 /* RCTJSONTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSONTests.m; sourceTree = "<group>"; };
 		13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = "<group>"; };
@@ -220,7 +207,7 @@
 		144D21231B2204C5006DB32B /* RCTImageUtilTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageUtilTests.m; sourceTree = "<group>"; };
 		1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTAllocationTests.m; sourceTree = "<group>"; };
 		1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBridgeTests.m; sourceTree = "<group>"; };
-		1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSCExecutorTests.m; sourceTree = "<group>"; };
+		1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTContextExecutorTests.m; sourceTree = "<group>"; };
 		1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_NSURLTests.m; sourceTree = "<group>"; };
 		1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_UIFontTests.m; sourceTree = "<group>"; };
 		1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTEventDispatcherTests.m; sourceTree = "<group>"; };
@@ -240,10 +227,11 @@
 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
 		272E6B3B1BEA849E001FCF37 /* UpdatePropertiesExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = UpdatePropertiesExampleView.h; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h; sourceTree = "<group>"; };
 		272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = UpdatePropertiesExampleView.m; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m; sourceTree = "<group>"; };
-		27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTRootViewIntegrationTests.m; sourceTree = "<group>"; };
 		27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = FlexibleSizeExampleView.m; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m; sourceTree = "<group>"; };
 		27F441EA1BEBE5030039B79C /* FlexibleSizeExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = FlexibleSizeExampleView.h; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.h; sourceTree = "<group>"; };
+		27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTRootViewIntegrationTests.m; sourceTree = "<group>"; };
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
+		3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = uie_thumb_big.png; path = UIExplorer/Images.xcassets/uie_thumb_big.imageset/uie_thumb_big.png; sourceTree = SOURCE_ROOT; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
 		58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
 		83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
@@ -326,18 +314,6 @@
 			name = Libraries;
 			sourceTree = "<group>";
 		};
-		1323F18D1C04ABAC0091BED0 /* Supporting Files */ = {
-			isa = PBXGroup;
-			children = (
-				13B07FB61A68108700A75B9A /* Info.plist */,
-				1323F1851C04AB9F0091BED0 /* bunny.png */,
-				1323F1861C04AB9F0091BED0 /* flux@3x.png */,
-				1323F1871C04AB9F0091BED0 /* hawk.png */,
-				1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */,
-			);
-			name = "Supporting Files";
-			sourceTree = "<group>";
-		};
 		13417FE41AA91428003F314A /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -401,10 +377,10 @@
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				134366AE1BFD2C76000A2DE1 /* Thumbnails */,
+				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
-				1323F18E1C04ABEB0091BED0 /* Thumbnails */,
-				1323F18D1C04ABAC0091BED0 /* Supporting Files */,
 			);
 			name = UIExplorer;
 			sourceTree = "<group>";
@@ -412,10 +388,9 @@
 		143BC57C1B21E18100462512 /* UIExplorerUnitTests */ = {
 			isa = PBXGroup;
 			children = (
-				13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */,
 				1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */,
 				1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */,
-				1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */,
+				1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */,
 				1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */,
 				1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */,
 				1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */,
@@ -426,8 +401,6 @@
 				144D21231B2204C5006DB32B /* RCTImageUtilTests.m */,
 				13DB03471B5D2ED500C27245 /* RCTJSONTests.m */,
 				13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */,
-				134CB9291C85A38800265FA6 /* RCTModuleInitTests.m */,
-				13129DD31C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m */,
 				1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */,
 				138D6A161B53CD440074A87E /* RCTShadowViewTests.m */,
 				1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */,
@@ -475,6 +448,7 @@
 		143BC5971B21E3E100462512 /* Supporting Files */ = {
 			isa = PBXGroup;
 			children = (
+				3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */,
 				143BC5981B21E3E100462512 /* Info.plist */,
 			);
 			name = "Supporting Files";
@@ -858,13 +832,9 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */,
-				1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */,
-				1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */,
+				134366AF1BFD2C76000A2DE1 /* Thumbnails in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
-				1323F1891C04AB9F0091BED0 /* bunny.png in Resources */,
-				1323F18C1C04AB9F0091BED0 /* uie_thumb_big.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -872,6 +842,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				3D36915B1BDA8CBB007B22D8 /* uie_thumb_big.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -887,17 +858,14 @@
 				1393D0381B68CD1300E1B601 /* RCTModuleMethodTests.m in Sources */,
 				1300627F1B59179B0043FE5A /* RCTGzipTests.m in Sources */,
 				1497CFAF1B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m in Sources */,
-				1497CFAE1B21F5E400C1F8F2 /* RCTJSCExecutorTests.m in Sources */,
-				13129DD41C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m in Sources */,
+				1497CFAE1B21F5E400C1F8F2 /* RCTContextExecutorTests.m in Sources */,
 				1497CFAD1B21F5E400C1F8F2 /* RCTBridgeTests.m in Sources */,
-				134CB92A1C85A38800265FA6 /* RCTModuleInitTests.m in Sources */,
 				1497CFB11B21F5E400C1F8F2 /* RCTEventDispatcherTests.m in Sources */,
 				1497CFB31B21F5E400C1F8F2 /* RCTUIManagerTests.m in Sources */,
 				13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */,
 				1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */,
 				13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */,
 				138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */,
-				13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */,
 				8385CF041B87479200C6273E /* RCTImageLoaderHelpers.m in Sources */,
 				8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */,
 			);
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
   LastUpgradeVersion = "0700"
-   version = "1.3">
+   version = "1.8">
   <BuildAction
      parallelizeBuildables = "YES"
      buildImplicitDependencies = "YES">
@@ -51,10 +51,10 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
      <Testables>
         <TestableReference
            skipped = "NO">
@@ -90,11 +90,11 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
      debugServiceExtension = "internal"
@@ -113,10 +113,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
-      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -16,7 +16,6 @@

 #import "RCTBridge.h"
 #import "RCTJavaScriptLoader.h"
-#import "RCTLinkingManager.h"
 #import "RCTRootView.h"

@interface AppDelegate() <RCTBridgeDelegate>
@@ -81,14 +80,6 @@
  return sourceURL;
 }

-
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
-  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
-{
-  return [RCTLinkingManager application:application openURL:url
-                      sourceApplication:sourceApplication annotation:annotation];
-}
-
 - (void)loadSourceForBridge:(RCTBridge *)bridge
                  withBlock:(RCTSourceLoadBlock)loadCallback
 {
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="9059" systemVersion="15A284" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
    <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9049"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
    </dependencies>
    <objects>
@@ -14,20 +13,17 @@
            <subviews>
                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="  Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
                    <rect key="frame" x="20" y="439" width="441" height="21"/>
-                    <animations/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="UIExplorer" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                    <rect key="frame" x="20" y="140" width="441" height="43"/>
-                    <animations/>
                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                    <nil key="highlightedColor"/>
                </label>
            </subviews>
-            <animations/>
            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
            <constraints>
                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
@@ -1,6 +0,0 @@
-{
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x",
+      "filename" : "uie_comment_highlighted@2x.png"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x",
+      "filename" : "uie_comment_normal@2x.png"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/Show More
+++ b/Show More