Add link to the survey at the bottom of the page

Summary: ![simulator screen shot may 11 2016 3 03 14 pm](https://cloud.githubusercontent.com/assets/197597/15198889/3374abe6-178f-11e6-95e5-378004ea45aa.png) <img width="1333" alt="screen shot 2016-05-11 at 3 03 25 pm" src="https://cloud.githubusercontent.com/assets/197597/15198886/2e545a8a-178f-11e6-8fd1-975ca700e49b.png"> Closes https://github.com/facebook/react-native/pull/7524 Reviewed By: JoelMarcey Differential Revision: D3293684 Pulled By: vjeux fbshipit-source-id: c0e7d138040eae49c6b7f7398de8d50f0ed2f564
Revert "Add docs survey link to site header"
2025-11-01 09:14:26 +00:00 · 2016-05-12 15:43:12 -07:00 · 2016-05-11 14:33:58 -07:00 · 2016-05-11 12:19:39 -07:00 · 2016-05-10 12:39:55 -07:00 · 2016-05-10 12:39:42 -07:00
1135 changed files with 42751 additions and 31143 deletions
@@ -4,3 +4,7 @@

 [maven_repositories]
  central = https://repo1.maven.org/maven2
+
+[alias]
+  movies = //Examples/Movies/android/app:app
+  uiexplorer = //Examples/UIExplorer/android/app:app
@@ -107,13 +107,12 @@
    "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,                     // require the use of === and !==
+    "eqeqeq": [1, "allow-null"],     // 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
@@ -148,11 +147,6 @@
    "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
    "yoda": 1,                       // require or disallow Yoda conditions

-  // Strict Mode
-  // These rules relate to using strict mode.
-
-    "strict": [2, "global"],         // require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
-
  // Variables
  // These rules have to do with variable declarations.

@@ -182,6 +176,8 @@
  // 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)
@@ -205,11 +201,9 @@
    "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)
@@ -227,7 +221,6 @@

    "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,
@@ -15,11 +15,8 @@
 # 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/Promise.js
 .*/node_modules/fbjs/lib/fetch.js
 .*/node_modules/fbjs/lib/ExecutionEnvironment.js
-.*/node_modules/fbjs/lib/isEmpty.js
-.*/node_modules/fbjs/lib/crc32.js
 .*/node_modules/fbjs/lib/ErrorUtils.js

 # Flow has a built-in definition for the 'react' module which we prefer to use
@@ -28,6 +25,11 @@
 .*/node_modules/react/lib/React.js
 .*/node_modules/react/lib/ReactDOM.js

+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*

@@ -40,14 +42,42 @@
 # Ignore Website
 .*/website/.*

+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
 [include]

 [libs]
 Libraries/react-native/react-native-interface.js
+flow/

 [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'
@@ -57,9 +87,9 @@ 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\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy

 [version]
-0.21.0
+0.23.0
@@ -24,17 +24,23 @@ project.xcworkspace
 # Gradle
 /build/
 /Examples/**/android/app/build/
+/Examples/**/android/app/gradle/
+/Examples/**/android/app/gradlew
+/Examples/**/android/app/gradlew.bat
 /ReactAndroid/build/

 # Buck
 .buckd
 buck-out
+/ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
+/ReactAndroid/src/main/jni/prebuilt/lib/x86/

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

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

-osx_image: xcode7.2
-
-cache:
-    directories:
-        - node_modules
-        - .nvm
+osx_image: xcode7.3

 install:
-  - brew reinstall nvm
-  - mkdir -p .nvm
-  - export NVM_DIR="$PWD/.nvm"
+  - brew update
+  - brew reinstall nvm xctool
+  - mkdir -p /Users/travis/build/facebook/.nvm
+  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
  - source $(brew --prefix nvm)/nvm.sh
-  - nvm install 5
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.0
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
  - npm config set spin=false
-  - npm install -g flow-bin@`node -p "require('fs').readFileSync('.flowconfig', 'utf8').split('[version]')[1].trim()"`
+  - npm config set progress=false
  - npm install

 script:
- |
-  if [ "$TEST_TYPE" = objc ]
-  then
-
-    ./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; flow --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" node bots/code-analysis-bot.js
-    flow check && npm test -- '\/Libraries\/'
-
-  elif [ "$TEST_TYPE" = packager ]
-  then
-
-    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
-  fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then travis_retry node ./scripts/run-ci-e2e-tests.js --ios --js; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi

 env:
  matrix:
+    - TEST_TYPE=e2e-objc
    - TEST_TYPE=objc
    - TEST_TYPE=js
-    - 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,13 +17,19 @@ 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. If you've added code that should be tested, add tests!
+2. **Describe your test plan in your commit.** 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).
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+```
+$ cd website
+$ npm install && npm start
+go to: http://localhost:8079/react-native/index.html
+```
+5. Add the copyright notice to the top of any new files you've added.
+6. Ensure tests pass on Travis and Circle CI.
+7. Make sure your code lints (`node linter.js <files touched>`).
+8. Squash your commits (`git rebase -i`).
+9. If you haven't already, sign the [CLA](https://code.facebook.com/cla).

 #### Copyright Notice for files

@@ -73,6 +79,7 @@ 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"
@@ -16,13 +16,14 @@
 */
 'use strict';

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

 var Animated = require('Animated');
 var GameBoard = require('GameBoard');
@@ -53,6 +54,8 @@ 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);
  }
@@ -147,6 +150,7 @@ class GameEndOverlay extends React.Component {
 class Game2048 extends React.Component {
  startX: number;
  startY: number;
+  state: any;

  constructor(props: {}) {
    super(props);
@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  Platform,
@@ -24,7 +25,7 @@ var {
  TouchableHighlight,
  TouchableNativeFeedback,
  View
-} = React;
+} = ReactNative;

 var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;

 var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
@@ -16,7 +16,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  AppRegistry,
  BackAndroid,
@@ -24,7 +25,7 @@ var {
  StyleSheet,
  ToolbarAndroid,
  View,
-} = React;
+} = ReactNative;

 var MovieScreen = require('./MovieScreen');
 var SearchScreen = require('./SearchScreen');
@@ -16,12 +16,13 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  AppRegistry,
  NavigatorIOS,
  StyleSheet,
-} = React;
+} = ReactNative;

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

@@ -35,6 +35,21 @@ Open the Movies app in your emulator.

 See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.

+### Running with Buck
+
+Follow the same setup as running with gradle.
+
+Install Buck from [here](https://buckbuild.com/setup/install.html).
+
+Run the following commands from the react-native folder:
+
+    ./gradlew :ReactAndroid:packageReactNdkLibsForBuck
+    buck fetch movies
+    buck install -r movies
+    ./packager/packager.sh
+
+_Note: The native libs are still built using gradle. Full build with buck is coming soon(tm)._
+
 ## Built from source

 Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.
@@ -16,7 +16,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  Platform,
@@ -25,7 +26,7 @@ var {
  StyleSheet,
  TouchableNativeFeedback,
  View,
-} = React;
+} = ReactNative;

 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;

@@ -16,13 +16,14 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ActivityIndicatorIOS,
  TextInput,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 var SearchBar = React.createClass({
  render: function() {
@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ActivityIndicatorIOS,
  ListView,
@@ -24,10 +25,10 @@ var {
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');

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

 var MovieCell = require('./MovieCell');
@@ -316,7 +317,7 @@ var SearchScreen = React.createClass({
          onSearchChange={this.onSearchChange}
          isLoading={this.state.isLoading}
          onFocus={() =>
-            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
+            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo({ x: 0, y: 0 })}
        />
        <View style={styles.separator} />
        {content}
@@ -0,0 +1,31 @@
+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 = [
+    ':res',
+    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    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:react'),
+    react_native_target('jni/prebuilt:android-jsc'),
+    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
+    react_native_target('jni/prebuilt:reactnative-libs'),
+  ],
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.facebook.react.movies',
+)
@@ -1,8 +1,15 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.movies">
+    package="com.facebook.react.movies"
+    android:versionCode="1"
+    android:versionName="1.0">

    <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"/>
+
+    <uses-sdk
+      android:minSdkVersion="16"
+      android:targetSdkVersion="22" />

    <application
      android:allowBackup="true"
@@ -11,79 +11,42 @@
 * 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 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.ReactActivity;
+import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;

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

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

+public class MoviesActivity extends ReactActivity {
  @Override
-  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);
+  protected String getMainComponentName() {
+    return "MoviesApp";
  }

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

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

  @Override
-  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();
+  protected List<ReactPackage> getPackages() {
+    return Arrays.<ReactPackage>asList(
+      new MainReactPackage()
+    );
  }
 }
@@ -15,10 +15,10 @@
 */
 'use strict';

-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
  StyleSheet,
-} = React;
+} = ReactNative;

 var MAX_VALUE = 200;

@@ -16,14 +16,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
-} = React;
+} = ReactNative;

 class Board {
  grid: Array<Array<number>>;
@@ -271,7 +272,6 @@ var styles = StyleSheet.create({
  // CELL TEXT

  cellText: {
-    borderRadius: 5,
    fontSize: 50,
    fontFamily: 'AvenirNext-Bold',
  },
@@ -305,7 +305,7 @@ var styles = StyleSheet.create({
    textAlign: 'center',
  },
  newGame: {
-    backgroundColor: '#887766',
+    backgroundColor: '#887765',
    padding: 20,
    borderRadius: 5,
  },
@@ -14,14 +14,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  StyleSheet,
  Text,
  View,
  ToastAndroid,
  TouchableWithoutFeedback,
-} = React;
+} = ReactNative;

 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
@@ -15,11 +15,12 @@
 */
 'use strict';

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

 var AccessibilityIOSExample = React.createClass({
  render() {
@@ -15,13 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ActionSheetIOS,
  StyleSheet,
  Text,
+  UIManager,
  View,
-} = React;
+} = ReactNative;

 var BUTTONS = [
  'Option 0',
@@ -98,7 +100,6 @@ var ActionSheetTintExample = React.createClass({
  }
 });

-
 var ShareActionSheetExample = React.createClass({
  getInitialState() {
    return {
@@ -121,16 +122,14 @@ var ShareActionSheetExample = React.createClass({

  showShareActionSheet() {
    ActionSheetIOS.showShareActionSheetWithOptions({
-      url: 'https://code.facebook.com',
+      url: this.props.url,
      message: 'message to go with the shared url',
      subject: 'a subject to go in the email heading',
      excludedActivityTypes: [
        'com.apple.UIKit.activity.PostToTwitter'
      ]
    },
-    (error) => {
-      console.error(error);
-    },
+    (error) => alert(error),
    (success, method) => {
      var text;
      if (success) {
@@ -143,6 +142,50 @@ 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,
@@ -163,6 +206,20 @@ exports.examples = [
  },
  {
    title: 'Show Share Action Sheet',
-    render(): ReactElement { return <ShareActionSheetExample />; }
+    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 />;
+    }
  }
 ];
@@ -15,12 +15,13 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ActivityIndicatorIOS,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');

 var ToggleAnimatingActivityIndicator = React.createClass({
@@ -15,13 +15,14 @@
 */
 'use strict';

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

 exports.framework = 'React';
 exports.title = 'Advertising ID';
@@ -15,14 +15,15 @@

 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Alert,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
-} = React;
+} = ReactNative;

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

@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  AlertIOS,
-} = React;
+} = ReactNative;

 var { SimpleAlertExampleBlock } = require('./AlertExample');

@@ -37,7 +38,7 @@ exports.examples = [{
 },
 {
  title: 'Prompt Options',
-  render(): React.Component {
+  render(): ReactElement {
    return <PromptOptions />;
  }
 },
@@ -85,9 +86,13 @@ exports.examples = [{
 }];

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

+    // $FlowFixMe this seems to be a Flow bug, `saveResponse` is defined below
    this.saveResponse = this.saveResponse.bind(this);

    this.customButtons = [{
@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  Easing,
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;
 var UIExplorerButton = require('./UIExplorerButton');

 exports.framework = 'React';
@@ -39,6 +40,8 @@ exports.examples = [
      'mounts.',
    render: function() {
      class FadeInView extends React.Component {
+        state: any;
+
        constructor(props) {
          super(props);
          this.state = {
@@ -66,6 +69,8 @@ exports.examples = [
        }
      }
      class FadeInExample extends React.Component {
+        state: any;
+
        constructor(props) {
          super(props);
          this.state = {
@@ -16,14 +16,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  LayoutAnimation,
  PanResponder,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 var AnExSet = require('AnExSet');

@@ -32,6 +33,10 @@ 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 {
@@ -156,6 +161,13 @@ 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);
@@ -266,10 +278,6 @@ 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,
@@ -16,14 +16,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  Image,
  PanResponder,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 var NUM_BOBBLES = 5;
 var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
@@ -36,6 +37,8 @@ var BOBBLE_SPOTS = [...Array(NUM_BOBBLES)].map((_, i) => {  // static positions
 });

 class AnExBobble extends React.Component {
+  state: any;
+
  constructor(props: Object) {
    super(props);
    this.state = {};
@@ -16,16 +16,19 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  Image,
  PanResponder,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 class AnExChained extends React.Component {
+  state: any;
+
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -12,10 +12,12 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @providesModule AnExScroll
+ * @flow
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  Image,
@@ -23,15 +25,10 @@ var {
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;

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

  render() {
    var width = this.props.panelWidth;
@@ -16,14 +16,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  PanResponder,
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;

 var AnExBobble = require('./AnExBobble');
 var AnExChained = require('./AnExChained');
@@ -31,6 +32,8 @@ var AnExScroll = require('./AnExScroll');
 var AnExTilt = require('./AnExTilt');

 class AnExSet extends React.Component {
+  state: any;
+
  constructor(props: Object) {
    super(props);
    function randColor() {
@@ -16,16 +16,19 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Animated,
  Image,
  PanResponder,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 class AnExTilt extends React.Component {
+  state: any;
+
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -16,12 +16,13 @@
 */
 'use strict';

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

 var AppStateSubscription = React.createClass({
  getInitialState() {
@@ -16,12 +16,13 @@
 */
 'use strict';

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

 var AppStateSubscription = React.createClass({
  getInitialState() {
@@ -15,13 +15,14 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  StyleSheet,
  View,
  ScrollView
-} = React;
+} = ReactNative;

 var AssetScaledImageExample = React.createClass({

@@ -15,13 +15,14 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  AsyncStorage,
  PickerIOS,
  Text,
  View
-} = React;
+} = ReactNative;
 var PickerItemIOS = PickerIOS.Item;

 var STORAGE_KEY = '@AsyncStorageExample:key';
@@ -13,11 +13,11 @@
 */
 'use strict';

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

 var styles = StyleSheet.create({
  box: {
@@ -98,6 +98,34 @@ 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';
@@ -180,4 +208,26 @@ 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]} />;
+    }
+  },
 ];
@@ -13,12 +13,12 @@
 */
 'use strict';

-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
  Image,
  StyleSheet,
  View
-} = React;
+} = ReactNative;

 var styles = StyleSheet.create({
  box: {
@@ -15,7 +15,8 @@
 */
 'use strict';

-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
  CameraRoll,
  Image,
@@ -25,7 +26,7 @@ const {
  Text,
  View,
  TouchableOpacity
-} = React;
+} = ReactNative;

 const CameraRollView = require('./CameraRollView');

@@ -16,7 +16,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ActivityIndicatorIOS,
  CameraRoll,
@@ -25,7 +26,7 @@ var {
  Platform,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;

 var groupByEveryN = require('groupByEveryN');
 var logError = require('logError');
@@ -148,7 +149,8 @@ var CameraRollView = React.createClass({
      fetchParams.after = this.state.lastCursor;
    }

-    CameraRoll.getPhotos(fetchParams, this._appendAssets, logError);
+    CameraRoll.getPhotos(fetchParams)
+      .then((data) => this._appendAssets(data), (e) => logError(e));
  },

  /**
@@ -15,12 +15,13 @@
 */
 'use strict';

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

 var ClipboardExample = React.createClass({
  getInitialState() {
@@ -13,13 +13,14 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  DatePickerAndroid,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
-} = React;
+} = ReactNative;

 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
@@ -46,7 +47,7 @@ var DatePickerAndroidExample = React.createClass({
  async showPicker(stateKey, options) {
    try {
      var newState = {};
-      const {action, year, month, day} = await DatePickerAndroid.open(options);      
+      const {action, year, month, day} = await DatePickerAndroid.open(options);
      if (action === DatePickerAndroid.dismissedAction) {
        newState[stateKey + 'Text'] = 'dismissed';
      } else {
@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  DatePickerIOS,
  StyleSheet,
  Text,
  TextInput,
  View,
-} = React;
+} = ReactNative;

 var DatePickerExample = React.createClass({
  getDefaultProps: function () {
@@ -18,7 +18,7 @@

 export type Example = {
  title: string,
-  render: () => ?ReactElement<any, any, any>,
+  render: () => ?ReactElement<any>,
  description?: string,
  platform?: string;
 };
@@ -17,12 +17,13 @@
 'use strict';


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

 exports.framework = 'React';
 exports.title = 'Geolocation';
@@ -16,13 +16,14 @@
 */
 'use strict';

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

 var ImageCapInsetsExample = React.createClass({
  render: function() {
@@ -16,7 +16,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  CameraRoll,
  Image,
@@ -29,7 +30,7 @@ var {
  TouchableHighlight,
  UIManager,
  View,
-} = React;
+} = ReactNative;

 var PAGE_SIZE = 20;

@@ -47,10 +48,11 @@ type ImageCropData = {
  offset: ImageOffset;
  size: ImageSize;
  displaySize?: ?ImageSize;
-  resizeMode?: ?any; 
+  resizeMode?: ?any;
 };

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

@@ -229,7 +231,7 @@ class ImageCropper extends React.Component {
    );
    this._minimumZoomScale = Math.max(
      this.props.size.width / this._scaledImageSize.width,
-      this.props.size.height / this._scaledImageSize.height 
+      this.props.size.height / this._scaledImageSize.height
    );
    this._updateTransformData(
      this._contentOffset,
@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-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.
+ *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -15,23 +22,28 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
+  Platform,
  StyleSheet,
  Text,
  View,
  ActivityIndicatorIOS
-} = React;
+} = ReactNative;

 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
+const IMAGE_PREFETCH_URL = 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now();
+var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);

 var NetworkImageCallbackExample = React.createClass({
  getInitialState: function() {
    return {
      events: [],
+      startLoadPrefetched: false,
      mountTime: new Date(),
    };
  },
@@ -50,9 +62,26 @@ var NetworkImageCallbackExample = React.createClass({
          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)`)}
+          onLoadEnd={() => {
+            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
+            this.setState({startLoadPrefetched: true}, () => {
+              prefetchTask.then(() => {
+                this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
+              }, error => {
+                this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
+              });
+            });
+          }}
        />
-
+        {this.state.startLoadPrefetched ?
+          <Image
+            source={this.props.prefetchedSource}
+            style={[styles.base, {overflow: 'visible'}]}
+            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
+            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
+          />
+          : null}
        <Text style={{marginTop: 20}}>
          {this.state.events.join('\n')}
        </Text>
@@ -165,7 +194,8 @@ exports.examples = [
    title: 'Image Loading Events',
    render: function() {
      return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
+          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
      );
    },
  },
@@ -381,37 +411,59 @@ exports.examples = [
      'rendered within the frame.',
    render: function() {
      return (
-        <View style={styles.horizontal}>
-          <View>
-            <Text style={[styles.resizeModeText]}>
-              Contain
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.contain}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Cover
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.cover}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Stretch
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.stretch}
-              source={fullImage}
-            />
-          </View>
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return (
+            <View key={index}>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Contain
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
+              </View>
+              <View style={styles.horizontal}>
+                <View>
+                  <Text style={[styles.resizeModeText]}>
+                    Stretch
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.stretch}
+                    source={image}
+                  />
+                </View>
+                { Platform.OS === 'android' ?
+                  <View style={styles.leftMargin}>
+                    <Text style={[styles.resizeModeText]}>
+                      Center
+                    </Text>
+                    <Image
+                      style={styles.resizeMode}
+                      resizeMode={Image.resizeMode.center}
+                      source={image}
+                    />
+                  </View>
+                : null }
+              </View>
+            </View>
+          );
+        })}
        </View>
      );
    },
@@ -455,7 +507,7 @@ exports.examples = [
  {
    title: 'Image Size',
    render: function() {
-      return <ImageSizeExample source={fullImage} />; 
+      return <ImageSizeExample source={fullImage} />;
    },
    platform: 'ios',
  },
@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  LayoutAnimation,
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;

 type Layout = {
  x: number;
@@ -15,12 +15,13 @@
 */
 'use strict';

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

 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
@@ -13,14 +13,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
-  IntentAndroid,
+  Linking,
  StyleSheet,
  Text,
  TouchableNativeFeedback,
  View,
-} = React;
+} = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');

 var OpenURLButton = React.createClass({
@@ -30,9 +31,9 @@ var OpenURLButton = React.createClass({
  },

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

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

  render: function() {
@@ -64,7 +65,9 @@ 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>
    );
  },
@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  ListView,
@@ -24,7 +25,7 @@ var {
  RecyclerViewBackedScrollView,
  Text,
  View,
-} = React;
+} = ReactNative;

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

@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  ListView,
@@ -23,7 +24,7 @@ var {
  StyleSheet,
  Text,
  View,
-} = React;
+} = ReactNative;

 var THUMB_URLS = [
  require('./Thumbnails/like.png'),
@@ -67,6 +68,9 @@ 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}
      />
    );
@@ -16,7 +16,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Image,
  LayoutAnimation,
@@ -25,14 +26,13 @@ var {
  Text,
  TouchableOpacity,
  View,
-} = React;
+} = ReactNative;

 var NativeModules = require('NativeModules');
 var {
  UIManager,
 } = NativeModules;

-var PAGE_SIZE = 4;
 var THUMB_URLS = [
  require('./Thumbnails/like.png'),
  require('./Thumbnails/dislike.png'),
@@ -182,8 +182,8 @@ var ListViewPagingExample = React.createClass({
        renderSectionHeader={this.renderSectionHeader}
        renderRow={this.renderRow}
        initialListSize={10}
-        pageSize={PAGE_SIZE}
-        scrollRenderAheadDistance={2000}
+        pageSize={4}
+        scrollRenderAheadDistance={500}
      />
    );
  },
@@ -15,17 +15,18 @@
 */
 'use strict';

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

 var regionText = {
  latitude: '0',
@@ -15,15 +15,16 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Modal,
  StyleSheet,
-  SwitchIOS,
+  Switch,
  Text,
  TouchableHighlight,
  View,
-} = React;
+} = ReactNative;

 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -96,7 +97,9 @@ var ModalExample = React.createClass({
        <Modal
          animated={this.state.animated}
          transparent={this.state.transparent}
-          visible={this.state.modalVisible}>
+          visible={this.state.modalVisible}
+          onRequestClose={() => {this._setModalVisible(false)}}
+          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
@@ -111,12 +114,12 @@ var ModalExample = React.createClass({

        <View style={styles.row}>
          <Text style={styles.rowTitle}>Animated</Text>
-          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
+          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
        </View>

        <View style={styles.row}>
          <Text style={styles.rowTitle}>Transparent</Text>
-          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
+          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
@@ -0,0 +1,165 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity
+} = ReactNative;
+
+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;
@@ -0,0 +1,219 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+  TabBarIOS,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+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;
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2013-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.
+ *
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+} = ReactNative;
+
+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(
+            `LegacyNavigator: 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;
@@ -0,0 +1,202 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+} = ReactNative;
+
+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;
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2013-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.
+ *
+ * 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');
+const ReactNative = require('react-native');
+
+const {
+  Animated,
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+} = ReactNative;
+
+const  NavigationExampleRow = require('./NavigationExampleRow');
+
+const  {
+  AnimatedView: NavigationAnimatedView,
+  Card: NavigationCard,
+  Header: NavigationHeader,
+  Reducer: NavigationReducer,
+  RootContainer: NavigationRootContainer,
+} = 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._renderCard = this._renderCard.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
+    this._renderNavigation = this._renderNavigation.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+    this._renderTitleComponent = this._renderTitleComponent.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}
+        applyAnimation={(pos, navState) => {
+          Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
+        }}
+        renderScene={this._renderCard}
+      />
+    );
+  }
+
+  _renderHeader(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader
+        {...props}
+        renderTitleComponent={this._renderTitleComponent}
+      />
+    );
+  }
+
+  _renderTitleComponent(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader.Title>
+        {props.scene.navigationState.key}
+      </NavigationHeader.Title>
+    );
+  }
+
+  _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: NavigationHeader.HEIGHT,
+  },
+});
+
+module.exports = NavigationAnimatedExample;
@@ -0,0 +1,101 @@
+/**
+ * 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');
+const ReactNative = require('react-native');
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+} = ReactNative;
+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;
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2013-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.
+ *
+ * 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 React = require('react');
+const ReactNative = require('react-native');
+
+const {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+} = ReactNative;
+
+const {
+  CardStack: NavigationCardStack,
+  StateUtils: NavigationStateUtils,
+  RootContainer: NavigationRootContainer,
+} = NavigationExperimental;
+
+function createReducer(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 = createReducer({
+  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,
+    });
+  }
+
+}
+
+const styles = StyleSheet.create({
+  main: {
+    flex: 1,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+});
+
+module.exports = NavigationCardStackExample;
@@ -0,0 +1,322 @@
+/**
+ * Copyright (c) 2013-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.
+ *
+ * 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');
+const ReactNative = require('react-native');
+const NavigationExampleRow = require('./NavigationExampleRow');
+const NavigationExampleTabBar = require('./NavigationExampleTabBar');
+
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+const {
+  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: any) {
+  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}
+        renderTitleComponent={this._renderTitleComponent}
+      />
+    );
+  }
+
+  _renderTitleComponent(props: NavigationSceneRendererProps) {
+    return (
+      <NavigationHeader.Title>
+        {stateTypeTitleMap(props.scene.navigationState)}
+      </NavigationHeader.Title>
+    );
+  }
+
+  _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 {
+  _renderScene: NavigationSceneRenderer;
+
+  componentWillMount() {
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  render() {
+    return (
+      <NavigationView
+        navigationState={this.props.navigationState}
+        style={styles.tabsContent}
+        renderScene={this._renderScene}
+      />
+    );
+  }
+
+  _renderScene(props: NavigationSceneRendererProps): ReactElement {
+    const {scene} = props;
+    return (
+      <ExampleTabScreen
+        key={'tab_screen' + scene.key}
+        navigationState={scene.navigationState}
+        onNavigate={this._handleNavigation.bind(this, scene.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: NavigationHeader.HEIGHT
+  },
+  tabContent: {
+    flex: 1,
+  },
+});
+
+module.exports = NavigationCompositionExample;
@@ -0,0 +1,66 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  Text,
+  PixelRatio,
+  StyleSheet,
+  View,
+  TouchableHighlight,
+} = ReactNative;
+
+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;
@@ -0,0 +1,82 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = ReactNative;
+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;
@@ -0,0 +1,153 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  AsyncStorage,
+  ScrollView,
+  StyleSheet,
+  View,
+} = ReactNative;
+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;
@@ -0,0 +1,112 @@
+/**
+ * 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');
+const ReactNative = require('react-native');
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  View,
+} = ReactNative;
+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;
@@ -0,0 +1,315 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+const {
+  Container: NavigationContainer,
+  RootContainer: NavigationRootContainer,
+} = NavigationExperimental;
+
+type GameGrid = Array<Array<?string>>;
+
+const evenOddPlayerMap = ['O', 'X'];
+const rowLetterMap = ['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(rowLetterMap[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 = rowLetterMap[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;
@@ -13,7 +13,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Navigator,
  StyleSheet,
@@ -21,7 +22,7 @@ var {
  Text,
  TouchableHighlight,
  TouchableOpacity
-} = React;
+} = ReactNative;

 var _getRandomRoute = function() {
  return {
@@ -13,7 +13,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Navigator,
  StyleSheet,
@@ -22,7 +23,7 @@ var {
  Text,
  TouchableHighlight,
  View,
-} = React;
+} = ReactNative;

 var _getRandomRoute = function() {
  return {
@@ -14,7 +14,8 @@
 'use strict';


-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  Navigator,
  ScrollView,
@@ -22,9 +23,7 @@ var {
  Text,
  TouchableHighlight,
  TouchableOpacity,
-} = React;
-
-var cssVar = require('cssVar');
+} = ReactNative;

 class NavButton extends React.Component {
  render() {
@@ -178,7 +177,7 @@ var styles = StyleSheet.create({
    marginVertical: 10,
  },
  navBarTitleText: {
-    color: cssVar('fbui-bluegray-60'),
+    color: '#373E4D',
    fontWeight: '500',
    marginVertical: 9,
  },
@@ -189,7 +188,7 @@ var styles = StyleSheet.create({
    paddingRight: 10,
  },
  navBarButtonText: {
-    color: cssVar('fbui-accent-blue'),
+    color: '#5890FF',
  },
  scene: {
    flex: 1,
@@ -10,17 +10,20 @@
 * 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 React = require('react');
+var ReactNative = require('react-native');
 var {
  Navigator,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
-} = React;
+} = ReactNative;
 var BreadcrumbNavSample = require('./BreadcrumbNavSample');
 var NavigationBarSample = require('./NavigationBarSample');
 var JumpingNavSample = require('./JumpingNavSample');
@@ -13,14 +13,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  NavigatorIOS,
-  StatusBarIOS,
+  StatusBar,
  StyleSheet,
  Text,
  View
-} = React;
+} = ReactNative;

 var EmptyPage = React.createClass({

@@ -45,7 +46,7 @@ var NavigatorIOSColors = React.createClass({

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

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

-var React = require('react-native');
-var ViewExample = require('./ViewExample');
-var createExamplePage = require('./createExamplePage');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const ViewExample = require('./ViewExample');
+const createExamplePage = require('./createExamplePage');
+const {
  AlertIOS,
+  NavigatorIOS,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
-} = React;
-
-var EmptyPage = React.createClass({
+} = ReactNative;

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

-var NavigatorIOSExample = React.createClass({
-
-  statics: {
-    title: '<NavigatorIOS>',
-    description: 'iOS navigation capabilities',
-  },
-
+const NavigatorIOSExamplePage = React.createClass({
  render: function() {
    var recurseTitle = 'Recurse Navigation';
-    if (!this.props.topExampleRoute) {
+    if (!this.props.depth || this.props.depth === 1) {
      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: NavigatorIOSExample,
+              component: NavigatorIOSExamplePage,
              backButtonTitle: 'Custom Back',
-              passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
+              passProps: {depth: this.props.depth ? this.props.depth + 1 : 1},
            });
          })}
          {this._renderRow('Push View Example', () => {
@@ -122,40 +106,39 @@ var NavigatorIOSExample = React.createClass({
          {this._renderRow('Pop to top', () => {
            this.props.navigator.popToTop();
          })}
-          {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._renderReplace()}
          {this._renderReplacePrevious()}
          {this._renderReplacePreviousAndPop()}
-          {this._renderPopToTopNavExample()}
+          {this._renderRow('Exit NavigatorIOS Example', this.props.onExampleExit)}
        </View>
        <View style={styles.line}/>
      </ScrollView>
    );
  },

-  _renderPopToTopNavExample: function() {
-    if (!this.props.topExampleRoute) {
+  _renderReplace: function() {
+    if (!this.props.depth) {
+      // this is to avoid replacing the top of the stack
      return null;
    }
-    return this._renderRow('Pop to top NavigatorIOSExample', () => {
-      this.props.navigator.popToRoute(this.props.topExampleRoute);
+    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',
+        }
+      });
    });
  },

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

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

-var styles = StyleSheet.create({
+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,
+  },
  customWrapperStyle: {
    backgroundColor: '#bbdddd',
  },
@@ -15,13 +15,14 @@
 */
 'use strict';

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

 const ConnectionInfoSubscription = React.createClass({
  getInitialState() {
@@ -134,8 +135,8 @@ const IsConnectionExpensive = React.createClass({
    };
  },
  _checkIfExpensive() {
-    NetInfo.isConnectionExpensive(
-        (isConnectionExpensive) => { this.setState({isConnectionExpensive}); }
+    NetInfo.isConnectionExpensive().then(
+        isConnectionExpensive => { this.setState({isConnectionExpensive}); }
    );
  },
  render() {
@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-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.
+ *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -15,17 +22,16 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  PanResponder,
  StyleSheet,
  View,
  processColor,
-} = React;
+} = ReactNative;

 var CIRCLE_SIZE = 80;
-var CIRCLE_COLOR = 'blue';
-var CIRCLE_HIGHLIGHT_COLOR = 'green';

 var PanResponderExample = React.createClass({

@@ -54,13 +60,14 @@ var PanResponderExample = React.createClass({
    this._circleStyles = {
      style: {
        left: this._previousLeft,
-        top: this._previousTop
+        top: this._previousTop,
+        backgroundColor: 'green',
      }
    };
  },

  componentDidMount: function() {
-    this._updatePosition();
+    this._updateNativeStyles();
  },

  render: function() {
@@ -79,24 +86,16 @@ var PanResponderExample = React.createClass({
  },

  _highlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'blue';
+    this._updateNativeStyles();
  },

  _unHighlight: function() {
-    const circle = this.circle;
-    circle && circle.setNativeProps({
-      style: {
-        backgroundColor: processColor(CIRCLE_COLOR)
-      }
-    });
+    this._circleStyles.style.backgroundColor = 'green';
+    this._updateNativeStyles();
  },

-  _updatePosition: function() {
+  _updateNativeStyles: function() {
    this.circle && this.circle.setNativeProps(this._circleStyles);
  },

@@ -116,7 +115,7 @@ var PanResponderExample = React.createClass({
  _handlePanResponderMove: function(e: Object, gestureState: Object) {
    this._circleStyles.style.left = this._previousLeft + gestureState.dx;
    this._circleStyles.style.top = this._previousTop + gestureState.dy;
-    this._updatePosition();
+    this._updateNativeStyles();
  },
  _handlePanResponderEnd: function(e: Object, gestureState: Object) {
    this._unHighlight();
@@ -130,7 +129,6 @@ var styles = StyleSheet.create({
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: CIRCLE_COLOR,
    position: 'absolute',
    left: 0,
    top: 0,
@@ -15,7 +15,8 @@
 */
 'use strict';

-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const StyleSheet = require('StyleSheet');
 const UIExplorerBlock = require('UIExplorerBlock');
 const UIExplorerPage = require('UIExplorerPage');
@@ -24,7 +25,7 @@ const {
  Picker,
  Text,
  TouchableWithoutFeedback,
-} = React;
+} = ReactNative;
 const Item = Picker.Item;

 const PickerExample = React.createClass({
@@ -44,8 +45,6 @@ const PickerExample = React.createClass({
    };
  },

-  displayName: 'Android Picker',
-
  render: function() {
    return (
      <UIExplorerPage title="<Picker>">
@@ -15,12 +15,13 @@
 */
 'use strict';

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

 var PickerItemIOS = PickerIOS.Item;

@@ -15,12 +15,13 @@
 */
 'use strict';

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

 var ExampleBox = React.createClass({
  getInitialState: function() {
@@ -182,7 +183,7 @@ var BoxOnlyExample = React.createClass({
 });

 type ExampleClass = {
-  Component: ReactClass<any, any, any>,
+  Component: ReactClass<any>,
  title: string,
  description: string,
 };
@@ -15,12 +15,13 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ProgressViewIOS,
  StyleSheet,
  View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');

 var ProgressViewExample = React.createClass({
@@ -1,128 +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,
-  PullToRefreshViewAndroid,
-  Text,
-  TouchableWithoutFeedback,
-  View,
-} = React;
-
-const styles = StyleSheet.create({
-  row: {
-    borderColor: 'grey',
-    borderWidth: 1,
-    padding: 20,
-    backgroundColor: '#3a5795',
-    margin: 5,
-  },
-  text: {
-    alignSelf: 'center',
-    color: '#fff',
-
-  },
-  layout: {
-    flex: 1,
-  },
-  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 PullToRefreshViewAndroidExample = React.createClass({
-  statics: {
-    title: '<PullToRefreshViewAndroid>',
-    description: 'Container that adds pull-to-refresh support to its child view.'
-  },
-
-  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 (
-      <PullToRefreshViewAndroid
-        style={styles.layout}
-        refreshing={this.state.isRefreshing}
-        onRefresh={this._onRefresh}
-        colors={['#ff0000', '#00ff00', '#0000ff']}
-        progressBackgroundColor={'#ffff00'}
-        >
-        <ScrollView style={styles.scrollview}>
-          {rows}
-        </ScrollView>
-      </PullToRefreshViewAndroid>
-    );
-  },
-
-  _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 = PullToRefreshViewAndroidExample;
@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  AlertIOS,
  PushNotificationIOS,
@@ -23,7 +24,7 @@ var {
  Text,
  TouchableHighlight,
  View,
-} = React;
+} = ReactNative;

 var Button = React.createClass({
  render: function() {
@@ -84,6 +85,8 @@ class NotificationExample extends React.Component {
 }

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

    return (
@@ -145,13 +148,13 @@ exports.examples = [
 },
 {
  title: 'Push Notifications',
-  render(): React.Component {
+  render(): ReactElement {
    return <NotificationExample />;
  }
 },
 {
  title: 'Notifications Permissions',
-  render(): React.Component {
+  render(): ReactElement {
    return <NotificationPermissionExample />;
  }
 }];
@@ -16,12 +16,13 @@

 'use strict';

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

 const requireNativeComponent = require('requireNativeComponent');

@@ -82,7 +83,7 @@ exports.description = 'Examples that show useful methods when embedding React Na
 exports.examples = [
 {
  title: 'Updating app properties in runtime',
-  render(): React.Component {
+  render(): ReactElement {
    return (
      <AppPropertiesUpdateExample/>
    );
@@ -90,7 +91,7 @@ exports.examples = [
 },
 {
  title: 'RCTRootView\'s size flexibility',
-  render(): React.Component {
+  render(): ReactElement {
    return (
      <RootViewSizeFlexibilityExample/>
    );
@@ -35,6 +35,21 @@ Open the UIExplorer app in your emulator.

 See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-android.html) in case you want to use a physical device.

+### Running with Buck
+
+Follow the same setup as running with gradle.
+
+Install Buck from [here](https://buckbuild.com/setup/install.html).
+
+Run the following commands from the react-native folder:
+
+    ./gradlew :ReactAndroid:packageReactNdkLibsForBuck
+    buck fetch uiexplorer
+    buck install -r uiexplorer
+    ./packager/packager.sh
+
+_Note: The native libs are still built using gradle. Full build with buck is coming soon(tm)._
+
 ## Built from source

 Building the app on both iOS and Android means building the React Native framework from source. This way you're running the latest native and JS code the way you see it in your clone of the github repo.
@@ -14,7 +14,8 @@
 */
 'use strict';

-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
  ScrollView,
  StyleSheet,
@@ -22,7 +23,7 @@ const {
  Text,
  TouchableWithoutFeedback,
  View,
-} = React;
+} = ReactNative;

 const styles = StyleSheet.create({
  row: {
@@ -93,6 +94,7 @@ const RefreshControlExample = React.createClass({
            onRefresh={this._onRefresh}
            tintColor="#ff0000"
            title="Loading..."
+            titleColor="#00ff00"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
@@ -0,0 +1,78 @@
+/**
+ * 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');
+const ReactNative = require('react-native');
+const {
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = ReactNative;
+
+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;
@@ -15,7 +15,8 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ScrollView,
  StyleSheet,
@@ -23,7 +24,7 @@ var {
  TouchableOpacity,
  View,
  Image
-} = React;
+} = ReactNative;

 exports.displayName = (undefined: ?string);
 exports.title = '<ScrollView>';
@@ -15,13 +15,14 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity
-} = React;
+} = ReactNative;

 var NUM_ITEMS = 20;

@@ -15,13 +15,14 @@
 */
 'use strict';

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

 var BasicSegmentedControlExample = React.createClass({
  render() {
@@ -13,17 +13,19 @@
 *
 * @flow
 */
-
 'use strict';

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

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

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

 module.exports = SetPropertiesExampleApp;
@@ -0,0 +1,170 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  Slider,
+  Text,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+var SliderExample = React.createClass({
+  getDefaultProps() {
+    return {
+      value: 0,
+    }
+  },
+
+  getInitialState() {
+    return {
+      value: this.props.value,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value && +this.state.value.toFixed(3)}
+        </Text>
+        <Slider
+          {...this.props}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var SlidingCompleteExample = React.createClass({
+  getInitialState() {
+    return {
+      slideCompletionValue: 0,
+      slideCompletionCount: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <SliderExample
+          {...this.props}
+          onSlidingComplete={(value) => this.setState({
+              slideCompletionValue: value,
+              slideCompletionCount: this.state.slideCompletionCount + 1})} />
+        <Text>
+          Completions: {this.state.slideCompletionCount} Value: {this.state.slideCompletionValue}
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<Slider>';
+exports.displayName = 'SliderExample';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'Default settings',
+    render(): ReactElement {
+      return <SliderExample />;
+    }
+  },
+  {
+    title: 'Initial value: 0.5',
+    render(): ReactElement {
+      return <SliderExample value={0.5} />;
+    }
+  },
+  {
+    title: 'minimumValue: -1, maximumValue: 2',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumValue={-1}
+          maximumValue={2}
+        />
+      );
+    }
+  },
+  {
+    title: 'step: 0.25',
+    render(): ReactElement {
+      return <SliderExample step={0.25} />;
+    }
+  },
+  {
+    title: 'onSlidingComplete',
+    render(): ReactElement {
+      return (
+        <SlidingCompleteExample />
+      );
+    }
+  },
+  {
+    title: 'Custom min/max track tint color',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom thumb image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
+    }
+  },
+  {
+    title: 'Custom track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    platform: 'ios',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
+];
@@ -15,13 +15,14 @@
 */
 'use strict';

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

 var SliderExample = React.createClass({
  getInitialState() {
@@ -0,0 +1,74 @@
+/**
+ * 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');
+var ReactNative = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  Text,
+  UIManager,
+  View,
+} = ReactNative;
+
+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 />; }
+  },
+];
@@ -15,27 +15,15 @@
 */
 'use strict';

-const React = require('react-native');
+const React = require('react');
+const ReactNative = require('react-native');
 const {
+  StatusBar,
  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
-};
+  View,
+} = ReactNative;

 exports.framework = 'React';
 exports.title = '<StatusBar>';
@@ -57,21 +45,169 @@ const showHideTransitions = [
  'slide',
 ];

-const StatusBarExample = React.createClass({
-  getInitialState(): State {
+function getValue<T>(values: Array<T>, index: number): T {
+  return values[index % values.length];
+}
+
+const StatusBarHiddenExample = React.createClass({
+  getInitialState() {
    return {
      animated: true,
-      backgroundColor: this._getValue(colors, 0),
-      showHideTransition: this._getValue(showHideTransitions, 0),
+      hidden: false,
+      showHideTransition: getValue(showHideTransitions, 0),
+    };
+  },
+
+  _showHideTransitionIndex: 0,
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  _onChangeHidden() {
+    this.setState({hidden: !this.state.hidden});
+  },
+
+  _onChangeTransition() {
+    this._showHideTransitionIndex++;
+    this.setState({
+      showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex),
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          hidden={this.state.hidden}
+          showHideTransition={this.state.showHideTransition}
+          animated={this.state.animated}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeHidden}>
+          <View style={styles.button}>
+            <Text>hidden: {this.state.hidden ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated (ios only): {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTransition}>
+          <View style={styles.button}>
+            <Text>
+              showHideTransition (ios only):
+              '{getValue(showHideTransitions, this._showHideTransitionIndex)}'
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarStyleExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      barStyle: getValue(barStyles, this._barStyleIndex),
+    };
+  },
+
+  _barStyleIndex: 0,
+
+  _onChangeBarStyle() {
+    this._barStyleIndex++;
+    this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          animated={this.state.animated}
+          barStyle={this.state.barStyle}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBarStyle}>
+          <View style={styles.button}>
+            <Text>style: '{getValue(barStyles, this._barStyleIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarNetworkActivityExample = React.createClass({
+  getInitialState() {
+    return {
+      networkActivityIndicatorVisible: false,
+    };
+  },
+
+  _onChangeNetworkIndicatorVisible() {
+    this.setState({
+      networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeNetworkIndicatorVisible}>
+          <View style={styles.button}>
+            <Text>
+              networkActivityIndicatorVisible:
+              {this.state.networkActivityIndicatorVisible ? 'true' : 'false'}
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarBackgroundColorExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      backgroundColor: getValue(colors, 0),
    };
  },

  _colorIndex: 0,
-  _barStyleIndex: 0,
-  _showHideTransitionIndex: 0,

-  _getValue(values: Array<any>, index: number): any {
-    return values[index % values.length];
+  _onChangeBackgroundColor() {
+    this._colorIndex++;
+    this.setState({backgroundColor: getValue(colors, this._colorIndex)});
+  },
+
+  _onChangeAnimated() {
+    this.setState({animated: !this.state.animated});
  },

  render() {
@@ -79,115 +215,242 @@ const StatusBarExample = React.createClass({
      <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: this._getValue(barStyles, this._barStyleIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>style: '{this._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:
-                this._getValue(showHideTransitions, this._showHideTransitionIndex),
-              });
-            }}>
-            <View style={styles.button}>
-              <Text>
-                showHideTransition:
-                '{this._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: this._getValue(colors, this._colorIndex)});
-            }}>
-            <View style={styles.button}>
-              <Text>backgroundColor: '{this._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>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeBackgroundColor}>
+          <View style={styles.button}>
+            <Text>backgroundColor: '{getValue(colors, this._colorIndex)}'</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeAnimated}>
+          <View style={styles.button}>
+            <Text>animated: {this.state.animated ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
      </View>
    );
  },
 });

-exports.examples = [{
-  title: 'Status Bar',
-  render() {
-    return <StatusBarExample />;
+
+const StatusBarTranslucentExample = React.createClass({
+  getInitialState() {
+    return {
+      translucent: false,
+    };
  },
+
+  _onChangeTranslucent() {
+    this.setState({
+      translucent: !this.state.translucent,
+    });
+  },
+
+  render() {
+    return (
+      <View>
+        <StatusBar
+          translucent={this.state.translucent}
+        />
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this._onChangeTranslucent}>
+          <View style={styles.button}>
+            <Text>translucent: {this.state.translucent ? 'true' : 'false'}</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarStaticIOSExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true, 'slide');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true, 'slide')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false, 'fade');
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false, 'fade')</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('default', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('default', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBarStyle('light-content', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBarStyle('light-content', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setNetworkActivityIndicatorVisible(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(false)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const StatusBarStaticAndroidExample = React.createClass({
+  render() {
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(true);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setHidden(false);
+          }}>
+          <View style={styles.button}>
+            <Text>setHidden(false)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#ff00ff', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#ff00ff', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setBackgroundColor('#00ff00', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setBackgroundColor('#00ff00', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(true);
+            StatusBar.setBackgroundColor('rgba(0, 0, 0, 0.4)', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(true) and setBackgroundColor('rgba(0, 0, 0, 0.4)', true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => {
+            StatusBar.setTranslucent(false);
+            StatusBar.setBackgroundColor('black', true);
+          }}>
+          <View style={styles.button}>
+            <Text>setTranslucent(false) and setBackgroundColor('black', true)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+});
+
+const examples = [{
+  title: 'StatusBar hidden',
+  render() {
+    return <StatusBarHiddenExample />;
+  },
+}, {
+  title: 'StatusBar style',
+  render() {
+    return <StatusBarStyleExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar network activity indicator',
+  render() {
+    return <StatusBarNetworkActivityExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarBackgroundColorExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar background color',
+  render() {
+    return <StatusBarTranslucentExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar static API',
+  render() {
+    return <StatusBarStaticIOSExample />;
+  },
+  platform: 'ios',
+}, {
+  title: 'StatusBar static API',
+  render() {
+    return <StatusBarStaticAndroidExample />;
+  },
+  platform: 'android',
+}, {
+  title: 'StatusBar dimensions',
+  render() {
+    return (
+      <View>
+        <Text>Height: {StatusBar.currentHeight} pts</Text>
+      </View>
+    );
+  },
+  platform: 'android',
 }];

+exports.examples = examples;
+
 var styles = StyleSheet.create({
  wrapper: {
    borderRadius: 5,
@@ -15,14 +15,15 @@
 */
 'use strict';

-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  StatusBarIOS,
-} = React;
+} = ReactNative;

 exports.framework = 'React';
 exports.title = 'StatusBarIOS';
@@ -15,12 +15,14 @@
 */
 'use strict';

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

 var BasicSwitchExample = React.createClass({
  getInitialState() {
@@ -144,7 +146,7 @@ var examples = [
  }
 ];

-if (React.Platform.OS === 'ios') {
+if (Platform.OS === 'ios') {
  examples.push({
    title: 'Custom colors can be provided',
    render(): ReactElement { return <ColorSwitchExample />; }
@@ -15,13 +15,14 @@
 */
 'use strict';

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

 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';

--- a/Show More
+++ b/Show More