[0.26.3] Bump version numbers

Made react installed via reac-native init strict to unbreak 15.1.0
[0.26.2] Bump version numbers
2025-11-01 09:14:26 +00:00 · 2016-06-01 18:55:55 +02:00 · 2016-06-01 18:55:44 +02:00 · 2016-05-24 16:31:47 +01:00 · 2016-05-24 16:30:59 +01:00 · 2016-05-23 12:25:23 +01:00
2569 changed files with 52646 additions and 164399 deletions
@@ -9,6 +9,3 @@ end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
-
-[*.gradle]
-indent_size = 4
@@ -21,7 +21,6 @@
    "__fbBatchedBridgeConfig": false,
    "alert": false,
    "cancelAnimationFrame": false,
-    "cancelIdleCallback": false,
    "clearImmediate": true,
    "clearInterval": false,
    "clearTimeout": false,
@@ -41,7 +40,6 @@
    "process": false,
    "Promise": true,
    "requestAnimationFrame": true,
-    "requestIdleCallback": true,
    "require": false,
    "Set": true,
    "setImmediate": true,
@@ -221,24 +219,19 @@
    "no-bitwise": 1,                 // disallow use of bitwise operators (off by default)
    "no-plusplus": 0,                // disallow use of unary operators, ++ and -- (off by default)

-  // React Plugin
-  // The following rules are made available via `eslint-plugin-react`.
-
    "react/display-name": 0,
    "react/jsx-boolean-value": 0,
-    "react/jsx-no-duplicate-props": 2,
    "react/jsx-no-undef": 1,
    "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 1,
+    "react/jsx-uses-react": 0,
    "react/jsx-uses-vars": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
+    "react/no-did-mount-set-state": [1, "allow-in-func"],
+    "react/no-did-update-set-state": [1, "allow-in-func"],
    "react/no-multi-comp": 0,
-    "react/no-string-refs": 1,
    "react/no-unknown-property": 0,
    "react/prop-types": 0,
-    "react/react-in-jsx-scope": 1,
+    "react/react-in-jsx-scope": 0,
    "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0,
+    "react/wrap-multilines": 0
  }
 }
@@ -1,24 +1,68 @@
 [ignore]
-; We fork some components by platform
-.*/*[.]android.js

-; Ignore templates for 'react-native init'
-.*/local-cli/templates/.*
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js

-; Ignore the website subdir
-<PROJECT_ROOT>/website/.*
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*

-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*

-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
+# 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/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/node_modules/jest-cli/.*
+
+# 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

-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js

 [include]

@@ -29,21 +73,21 @@ flow/
 [options]
 module.system=haste

-experimental.strict_type_args=true
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable

 munge_underscores=true

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

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

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

-unsafe.enable_getters_and_setters=true
-
 [version]
-^0.36.0
+0.24.0
@@ -1,25 +0,0 @@
-We use GitHub Issues for bugs.
-
-If you have a non-bug question, ask on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
-
-If you have a feature request, post it on Product Pains: https://productpains.com/product/react-native/
-
--- Please use this template, and delete everything above this line before submitting your issue --- 
-
-### Description
-
-[FILL THIS OUT: Explain what you did, what you expected to happen, and what actually happens.]
-
-### Reproduction
-
-[FILL THIS OUT: Try to reproduce your bug on rnplay.org and provide a link. If you can't reproduce the bug on rnplay.org, provide a sample project.]
-
-### Solution
-
-[FILL THIS OUT: What needs to be done to address this issue? Ideally, provide a pull request with a fix.]
-
-### Additional Information
-
-* React Native version: [FILL THIS OUT]
-* Platform: [FILL THIS OUT: iOS, Android, or both?]
-* Operating System: [FILL THIS OUT: MacOS, Linux, or Windows?]
@@ -34,7 +34,6 @@ project.xcworkspace
 buck-out
 /ReactAndroid/src/main/jni/prebuilt/lib/armeabi-v7a/
 /ReactAndroid/src/main/jni/prebuilt/lib/x86/
-/ReactAndroid/src/main/gen

 # Android
 .idea
@@ -50,6 +49,3 @@ node_modules

 # OS X
 .DS_Store
-
-# Test generated files
-/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js
@@ -1,2 +0,0 @@
-# rnpm
-/local-cli/rnpm
@@ -1,22 +1,21 @@
 language: objective-c

-osx_image: xcode8
+osx_image: xcode7.3

 install:
  - mkdir -p /Users/travis/build/facebook/.nvm
  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
  - brew install nvm
  - source $(brew --prefix nvm)/nvm.sh
-  # TODO npm 2 started stalling on Travis, t11852928
-  - nvm install 5
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.3
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
-  - wget https://github.com/yarnpkg/yarn/releases/download/v0.16.0/yarn-0.16.0.js
-  - export yarn="node $(pwd)/yarn-0.16.0.js"
-  - $yarn install
+  - npm config set spin=false
+  - npm config set progress=false
+  - npm install

 script:
-  - if [[ "$TEST_TYPE" = objc-ios ]]; then travis_retry travis_wait ./scripts/objc-test-ios.sh; fi
-  - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait ./scripts/objc-test-tvos.sh; fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
@@ -24,8 +23,7 @@ script:
 env:
  matrix:
    - TEST_TYPE=e2e-objc
-    - TEST_TYPE=objc-ios
-    - TEST_TYPE=objc-tvos
+    - TEST_TYPE=objc
    - TEST_TYPE=js

 branches:
@@ -14,29 +14,22 @@ We will do our best to keep `master` in good shape, with tests passing at all ti

 The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.

-**Please submit your pull request on the `master` branch**. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.
-
 *Before* submitting a pull request, please make sure the following is done…

 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-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
-    ```
-
+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. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
-9. Squash your commits (`git rebase -i`).
-   one intent alongs with one commit makes it clearer for people to review and easier to understand your intention
-
-Note: It is not necessary to keep clicking `Merge master to your branch` on PR page. You would want to merge master if there are conflicts or tests are failing. The facebook-bot ultimately squashes all commits to a single one before merging your PR.
+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

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

 #### JSX

-* Prefer `"` over `'` for string literal props
+* Prefer `'` over `"` for string literal props
 * When wrapping opening tags over multiple lines, place one prop per line
 * `{}` of props should hug their values (no spaces)
 * Place the closing `>` of opening tags on the same line as the last prop
@@ -14,8 +14,6 @@
 		1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1461632C1AC3E22900C2F5AD /* libReact.a */; };
 		5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F82F1771B85784500FAE87E /* libRCTWebSocket.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
-		E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */; };
-		E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D7561D4EE534000B7DA8 /* libRCTImage.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -40,20 +38,6 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
-		E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
-		E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
-			remoteInfo = RCTImage;
-		};
 /* End PBXContainerItemProxy section */

 /* Begin PBXFileReference section */
@@ -67,8 +51,6 @@
 		146163271AC3E22900C2F5AD /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
-		E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -76,8 +58,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */,
-				E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */,
 				1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
@@ -119,8 +99,6 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */,
-				E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */,
 				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
@@ -155,22 +133,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		E730D7481D4EE4D0000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		E730D7521D4EE534000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D7561D4EE534000B7DA8 /* libRCTImage.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */

 /* Begin PBXNativeTarget section */
@@ -181,7 +143,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				68ACCCD51D2BE2D2008E368A /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -213,14 +174,6 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
-				{
-					ProductGroup = E730D7521D4EE534000B7DA8 /* Products */;
-					ProjectRef = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
-				},
-				{
-					ProductGroup = E730D7481D4EE4D0000B7DA8 /* Products */;
-					ProjectRef = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
-				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -263,20 +216,6 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
-		E730D7561D4EE534000B7DA8 /* libRCTImage.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTImage.a;
-			remoteRef = E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 /* End PBXReferenceProxy section */

 /* Begin PBXResourcesBuildPhase section */
@@ -291,23 +230,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		68ACCCD51D2BE2D2008E368A /* Run Script */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Run Script";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/2048/Game2048.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -415,7 +337,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -455,7 +377,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -14,14 +14,41 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/2048/Game2048" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Game2048"
@@ -31,8 +31,8 @@ var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
 var getTextFromScore = require('./getTextFromScore');

-class MovieCell extends React.Component {
-  render() {
+var MovieCell = React.createClass({
+  render: function() {
    var criticsScore = this.props.movie.ratings.critics_score;
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
@@ -66,7 +66,7 @@ class MovieCell extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  textContainer: {
@@ -29,8 +29,8 @@ var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
 var getTextFromScore = require('./getTextFromScore');

-class MovieScreen extends React.Component {
-  render() {
+var MovieScreen = React.createClass({
+  render: function() {
    return (
      <ScrollView contentContainerStyle={styles.contentContainer}>
        <View style={styles.mainSection}>
@@ -57,11 +57,11 @@ class MovieScreen extends React.Component {
        <Cast actors={this.props.movie.abridged_cast} />
      </ScrollView>
    );
-  }
-}
+  },
+});

-class Ratings extends React.Component {
-  render() {
+var Ratings = React.createClass({
+  render: function() {
    var criticsScore = this.props.ratings.critics_score;
    var audienceScore = this.props.ratings.audience_score;

@@ -81,11 +81,11 @@ class Ratings extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

-class Cast extends React.Component {
-  render() {
+var Cast = React.createClass({
+  render: function() {
    if (!this.props.actors) {
      return null;
    }
@@ -100,8 +100,8 @@ class Cast extends React.Component {
        )}
      </View>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  contentContainer: {
@@ -200,7 +200,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				68ACCCEE1D2BE57F008E368A /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -321,22 +320,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		68ACCCEE1D2BE57F008E368A /* ShellScript */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/Movies/MoviesApp.ios.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -446,7 +429,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -486,7 +469,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -3,23 +3,9 @@
   LastUpgradeVersion = "0700"
   version = "1.3">
   <BuildAction
-      parallelizeBuildables = "NO"
+      parallelizeBuildables = "YES"
      buildImplicitDependencies = "YES">
      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
-               BuildableName = "libReact.a"
-               BlueprintName = "React"
-               ReferencedContainer = "container:../../React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
         <BuildActionEntry
            buildForTesting = "YES"
            buildForRunning = "YES"
@@ -37,10 +23,10 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
      <Testables>
      </Testables>
      <MacroExpansion>
@@ -56,11 +42,11 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
      debugServiceExtension = "internal"
@@ -79,10 +65,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
-      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -14,7 +14,6 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"

@@ -22,7 +21,35 @@

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/Movies/MoviesApp.ios" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"MoviesApp"
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -25,8 +18,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  AppRegistry,
  BackAndroid,
@@ -59,11 +50,7 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
      <View style={{flex: 1}}>
        <ToolbarAndroid
          actions={[]}
-          navIcon={nativeImageSource({
-            android: 'android_back_white',
-            width: 96,
-            height: 96
-          })}
+          navIcon={require('image!android_back_white')}
          onIconClicked={navigationOperations.pop}
          style={styles.toolbar}
          titleColor="white"
@@ -78,8 +65,8 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
  }
 };

-class MoviesApp extends React.Component {
-  render() {
+var MoviesApp = React.createClass({
+  render: function() {
    var initialRoute = {name: 'search'};
    return (
      <Navigator
@@ -90,7 +77,7 @@ class MoviesApp extends React.Component {
      />
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -26,8 +26,8 @@ var {

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

-class MoviesApp extends React.Component {
-  render() {
+var MoviesApp = React.createClass({
+  render: function() {
    return (
      <NavigatorIOS
        style={styles.container}
@@ -38,7 +38,7 @@ class MoviesApp extends React.Component {
      />
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -17,7 +17,7 @@ Mac OS and Xcode are required.
 - Open `Examples/Movies/Movies.xcodeproj` in Xcode
 - Hit the Run button

-See [Running on device](https://facebook.github.io/react-native/docs/running-on-device.html) if you want to use a physical device.
+See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.

 ### Running on Android

@@ -33,7 +33,7 @@ _Note: Building for the first time can take a while._

 Open the Movies app in your emulator.

-See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device.html) in case you want to use a physical device.
+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

@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -25,12 +18,10 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Image,
  Platform,
-  ActivityIndicator,
+  ProgressBarAndroid,
  TextInput,
  StyleSheet,
  TouchableNativeFeedback,
@@ -39,8 +30,19 @@ var {

 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;

-class SearchBar extends React.Component {
-  render() {
+var SearchBar = React.createClass({
+  render: function() {
+    var loadingView;
+    if (this.props.isLoading) {
+      loadingView = (
+        <ProgressBarAndroid
+          styleAttr="Large"
+          style={styles.spinner}
+        />
+      );
+    } else {
+      loadingView = <View style={styles.spinner} />;
+    }
    var background = IS_RIPPLE_EFFECT_SUPPORTED ?
      TouchableNativeFeedback.SelectableBackgroundBorderless() :
      TouchableNativeFeedback.SelectableBackground();
@@ -51,11 +53,7 @@ class SearchBar extends React.Component {
            onPress={() => this.refs.input && this.refs.input.focus()}>
          <View>
            <Image
-              source={nativeImageSource({
-                android: 'android_search_white',
-                width: 96,
-                height: 96
-              })}
+              source={require('image!android_search_white')}
              style={styles.icon}
            />
          </View>
@@ -71,16 +69,11 @@ class SearchBar extends React.Component {
          onFocus={this.props.onFocus}
          style={styles.searchBarInput}
        />
-        <ActivityIndicator
-          animating={this.props.isLoading}
-          color="white"
-          size="large"
-          style={styles.spinner}
-        />
+        {loadingView}
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  searchBar: {
@@ -101,7 +94,6 @@ var styles = StyleSheet.create({
  spinner: {
    width: 30,
    height: 30,
-    marginRight: 16,
  },
  icon: {
    width: 24,
@@ -19,14 +19,14 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicator,
+  ActivityIndicatorIOS,
  TextInput,
  StyleSheet,
  View,
 } = ReactNative;

-class SearchBar extends React.Component {
-  render() {
+var SearchBar = React.createClass({
+  render: function() {
    return (
      <View style={styles.searchBar}>
        <TextInput
@@ -37,14 +37,14 @@ class SearchBar extends React.Component {
          onFocus={this.props.onFocus}
          style={styles.searchBarInput}
        />
-        <ActivityIndicator
+        <ActivityIndicatorIOS
          animating={this.props.isLoading}
          style={styles.spinner}
        />
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  searchBar: {
@@ -18,9 +18,10 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicator,
+  ActivityIndicatorIOS,
  ListView,
  Platform,
+  ProgressBarAndroid,
  StyleSheet,
  Text,
  View,
@@ -249,8 +250,15 @@ var SearchScreen = React.createClass({
    if (!this.hasMore() || !this.state.isLoadingTail) {
      return <View style={styles.scrollSpinner} />;
    }
-
-    return <ActivityIndicator style={styles.scrollSpinner} />;
+    if (Platform.OS === 'ios') {
+      return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
+    } else {
+      return (
+        <View  style={{alignItems: 'center'}}>
+          <ProgressBarAndroid styleAttr="Large"/>
+        </View>
+      );
+    }
  },

  renderSeparator: function(
@@ -299,7 +307,7 @@ var SearchScreen = React.createClass({
        onEndReached={this.onEndReached}
        automaticallyAdjustContentInsets={false}
        keyboardDismissMode="on-drag"
-        keyboardShouldPersistTaps="handled"
+        keyboardShouldPersistTaps={true}
        showsVerticalScrollIndicator={false}
      />;

@@ -318,8 +326,8 @@ var SearchScreen = React.createClass({
  },
 });

-class NoMovies extends React.Component {
-  render() {
+var NoMovies = React.createClass({
+  render: function() {
    var text = '';
    if (this.props.filter) {
      text = `No results for "${this.props.filter}"`;
@@ -335,7 +343,7 @@ class NoMovies extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -12,7 +12,6 @@
      android:targetSdkVersion="22" />

    <application
-      android:name=".MoviesApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@drawable/rotten_tomatoes_icon"
@@ -14,10 +14,39 @@
 package com.facebook.react.movies;

 import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+
+import java.util.Arrays;
+import java.util.List;
+
+import javax.annotation.Nullable;

 public class MoviesActivity extends ReactActivity {
  @Override
  protected String getMainComponentName() {
    return "MoviesApp";
  }
+
+  @Override
+  protected @Nullable String getBundleAssetName() {
+    return "MoviesApp.android.bundle";
+  };
+
+  @Override
+  protected String getJSMainModuleName() {
+    return "Examples/Movies/MoviesApp.android";
+  }
+
+  @Override
+  protected boolean getUseDeveloperSupport() {
+    return true;
+  }
+
+  @Override
+  protected List<ReactPackage> getPackages() {
+    return Arrays.<ReactPackage>asList(
+      new MainReactPackage()
+    );
+  }
 }
@@ -1,58 +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.
- */
-
-package com.facebook.react.movies;
-
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-import javax.annotation.Nullable;
-
-public class MoviesApplication extends Application implements ReactApplication {
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public String getJSMainModuleName() {
-      return "Examples/Movies/MoviesApp.android";
-    }
-
-    @Override
-    public @Nullable String getBundleAssetName() {
-      return "MoviesApp.android.bundle";
-    }
-
-    @Override
-    protected boolean getUseDeveloperSupport() {
-      return true;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-        new MainReactPackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-}
@@ -16,7 +16,6 @@
 		58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C5724D1AA6224400CDF9C8 /* libRCTText.a */; };
 		5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */; };
 		832044981B492C2500E297FC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832044951B492C1E00E297FC /* libRCTSettings.a */; };
-		E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -55,13 +54,6 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTSettings;
 		};
-		E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
 /* End PBXContainerItemProxy section */

 /* Begin PBXFileReference section */
@@ -77,7 +69,6 @@
 		587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -85,7 +76,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */,
 				144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */,
 				1341803E1AA91802003F314A /* libRCTImage.a in Frameworks */,
@@ -129,7 +119,6 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */,
 				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
@@ -182,14 +171,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		E730D7691D4EE5FC000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */

 /* Begin PBXNativeTarget section */
@@ -200,7 +181,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				681C70ED1D2BE73C00E71791 /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -236,10 +216,6 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
-				{
-					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
-					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -300,13 +276,6 @@
 			remoteRef = 832044941B492C1E00E297FC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */ = {
-			isa = PBXReferenceProxy;
-			fileType = archive.ar;
-			path = libRCTNetwork.a;
-			remoteRef = E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */;
-			sourceTree = BUILT_PRODUCTS_DIR;
-		};
 /* End PBXReferenceProxy section */

 /* Begin PBXResourcesBuildPhase section */
@@ -321,22 +290,6 @@
 		};
 /* End PBXResourcesBuildPhase section */

-/* Begin PBXShellScriptBuildPhase section */
-		681C70ED1D2BE73C00E71791 /* ShellScript */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/TicTacToe/TicTacToeApp.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -444,7 +397,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -484,7 +437,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
@@ -3,23 +3,9 @@
   LastUpgradeVersion = "0700"
   version = "1.3">
   <BuildAction
-      parallelizeBuildables = "NO"
+      parallelizeBuildables = "YES"
      buildImplicitDependencies = "YES">
      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "83CBBA2D1A601D0E00E9B192"
-               BuildableName = "libReact.a"
-               BlueprintName = "React"
-               ReferencedContainer = "container:../../React/React.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
         <BuildActionEntry
            buildForTesting = "YES"
            buildForRunning = "YES"
@@ -37,10 +23,10 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
      <Testables>
      </Testables>
      <MacroExpansion>
@@ -56,11 +42,11 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
-      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
      debugServiceExtension = "internal"
@@ -79,10 +65,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
-      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -14,14 +14,41 @@

 #import "AppDelegate.h"

-#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"

@implementation AppDelegate

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/TicTacToe/TicTacToeApp" fallbackResource:nil];
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+   * to your Xcode project folder in the terminal, and run
+   *
+   * $ curl 'http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios' -o main.jsbundle
+   *
+   * then add the `main.jsbundle` file to your project and uncomment this line:
+   */
+
+//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"TicTacToeApp"
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -101,7 +94,7 @@ class Board {
  }
 }

-class Cell extends React.Component {
+var Cell = React.createClass({
  cellStyle() {
    switch (this.props.player) {
      case 1:
@@ -111,7 +104,7 @@ class Cell extends React.Component {
      default:
        return null;
    }
-  }
+  },

  textStyle() {
    switch (this.props.player) {
@@ -122,7 +115,7 @@ class Cell extends React.Component {
      default:
        return {};
    }
-  }
+  },

  textContents() {
    switch (this.props.player) {
@@ -133,7 +126,7 @@ class Cell extends React.Component {
      default:
        return '';
    }
-  }
+  },

  render() {
    return (
@@ -149,9 +142,9 @@ class Cell extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

-class GameEndOverlay extends React.Component {
+var GameEndOverlay = React.createClass({
  render() {
    var board = this.props.board;

@@ -182,7 +175,7 @@ class GameEndOverlay extends React.Component {
      </View>
    );
  }
-}
+});

 var TicTacToeApp = React.createClass({
  getInitialState() {
@@ -265,6 +258,7 @@ var styles = StyleSheet.create({
    borderRadius: 5,
    backgroundColor: '#7b8994',
    margin: 5,
+    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
@@ -1,31 +0,0 @@
-include_defs('//ReactAndroid/DEFS')
-
-android_binary(
-  name = 'app',
-  manifest = 'src/main/AndroidManifest.xml',
-  keystore = '//keystores:debug',
-  deps = [
-    ':tictactoe-lib',
-  ],
-)
-
-android_library(
-  name = 'tictactoe-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.tictactoe',
-)
@@ -1,31 +0,0 @@
-apply plugin: 'com.android.application'
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-        applicationId "com.facebook.react.tictactoe"
-        minSdkVersion 16
-        targetSdkVersion 22
-        versionCode 1
-        versionName "1.0"
-        ndk {
-            abiFilters "armeabi-v7a", "x86"
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:23.0.1'
-
-    // Build React Native from source
-    compile project(':ReactAndroid')
-}
@@ -1 +0,0 @@
-android.useDeprecatedNdk=true
@@ -1,17 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
@@ -1,30 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.tictactoe"
-    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:name=".TicTacToeApplication"
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:icon="@drawable/launcher_icon"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".TicTacToeActivity">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
-</manifest>
@@ -1,58 +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.
- */
-
-package com.facebook.react.tictactoe;
-
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-import javax.annotation.Nullable;
-
-public class TicTacToeApplication extends Application implements ReactApplication {
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public String getJSMainModuleName() {
-      return "Examples/TicTacToe/TicTacToeApp";
-    }
-
-    @Override
-    public @Nullable String getBundleAssetName() {
-      return "TicTacToeApp.bundle";
-    }
-
-    @Override
-    protected boolean getUseDeveloperSupport() {
-      return true;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-        new MainReactPackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-}
@@ -1,12 +0,0 @@
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".TicTacToeApp">
-
-    <com.facebook.react.ReactRootView
-      android:layout_width="match_parent"
-      android:layout_height="match_parent"
-      android:id="@+id/react_root_view"/>
-
-</RelativeLayout>
@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">TicTacToeApp</string>
-</resources>
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -36,35 +29,40 @@ var UIExplorerPage = require('./UIExplorerPage');

 var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];

-class AccessibilityAndroidExample extends React.Component {
-  static title = 'Accessibility';
-  static description = 'Examples of using Accessibility API.';
+var AccessibilityAndroidExample = React.createClass({

-  state = {
-    count: 0,
-    backgroundImportantForAcc: 0,
-    forgroundImportantForAcc: 0,
-  };
+  statics: {
+    title: 'Accessibility',
+    description: 'Examples of using Accessibility API.',
+  },

-  _addOne = () => {
+  getInitialState: function() {
+    return {
+      count: 0,
+      backgroundImportantForAcc: 0,
+      forgroundImportantForAcc: 0,
+    };
+  },
+
+  _addOne: function() {
    this.setState({
      count: ++this.state.count,
    });
-  };
+  },

-  _changeBackgroundImportantForAcc = () => {
+  _changeBackgroundImportantForAcc: function() {
    this.setState({
      backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
    });
-  };
+  },

-  _changeForgroundImportantForAcc = () => {
+  _changeForgroundImportantForAcc: function() {
    this.setState({
      forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
      <UIExplorerPage title={'Accessibility'}>

@@ -197,8 +195,8 @@ class AccessibilityAndroidExample extends React.Component {

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

 var styles = StyleSheet.create({
   embedded: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -29,7 +22,7 @@ var {
  View,
 } = ReactNative;

-class AccessibilityIOSExample extends React.Component {
+var AccessibilityIOSExample = React.createClass({
  render() {
    return (
      <View>
@@ -60,14 +53,14 @@ class AccessibilityIOSExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

 exports.title = 'AccessibilityIOS';
 exports.description = 'Interface to show iOS\' accessibility samples';
 exports.examples = [
  {
    title: 'Accessibility elements',
-    render(): React.Element<any> { return <AccessibilityIOSExample />; }
+    render(): ReactElement { return <AccessibilityIOSExample />; }
  },
 ];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -42,10 +35,12 @@ var BUTTONS = [
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;

-class ActionSheetExample extends React.Component {
-  state = {
-    clicked: 'none',
-  };
+var ActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },

  render() {
    return (
@@ -58,9 +53,9 @@ class ActionSheetExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -69,13 +64,15 @@ class ActionSheetExample extends React.Component {
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
-  };
-}
+  }
+});

-class ActionSheetTintExample extends React.Component {
-  state = {
-    clicked: 'none',
-  };
+var ActionSheetTintExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },

  render() {
    return (
@@ -88,9 +85,9 @@ class ActionSheetTintExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -100,13 +97,15 @@ class ActionSheetTintExample extends React.Component {
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
-  };
-}
+  }
+});

-class ShareActionSheetExample extends React.Component {
-  state = {
-    text: ''
-  };
+var ShareActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },

  render() {
    return (
@@ -119,9 +118,9 @@ class ShareActionSheetExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showShareActionSheet = () => {
+  showShareActionSheet() {
    ActionSheetIOS.showShareActionSheetWithOptions({
      url: this.props.url,
      message: 'message to go with the shared url',
@@ -140,13 +139,15 @@ class ShareActionSheetExample extends React.Component {
      }
      this.setState({text});
    });
-  };
-}
+  }
+});

-class ShareScreenshotExample extends React.Component {
-  state = {
-    text: ''
-  };
+var ShareScreenshotExample = React.createClass({
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },

  render() {
    return (
@@ -159,9 +160,9 @@ class ShareScreenshotExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showShareActionSheet = () => {
+  showShareActionSheet() {
    // Take the snapshot (returns a temp file uri)
    UIManager.takeSnapshot('window').then((uri) => {
      // Share image data
@@ -182,8 +183,8 @@ class ShareScreenshotExample extends React.Component {
        this.setState({text});
      });
    }).catch((error) => alert(error));
-  };
-}
+  }
+});

 var style = StyleSheet.create({
  button: {
@@ -197,27 +198,27 @@ exports.description = 'Interface to show iOS\' action sheets';
 exports.examples = [
  {
    title: 'Show Action Sheet',
-    render(): React.Element<any> { return <ActionSheetExample />; }
+    render(): ReactElement { return <ActionSheetExample />; }
  },
  {
    title: 'Show Action Sheet with tinted buttons',
-    render(): React.Element<any> { return <ActionSheetTintExample />; }
+    render(): ReactElement { return <ActionSheetTintExample />; }
  },
  {
    title: 'Show Share Action Sheet',
-    render(): React.Element<any> {
+    render(): ReactElement {
      return <ShareActionSheetExample url="https://code.facebook.com" />;
    }
  },
  {
    title: 'Share Local Image',
-    render(): React.Element<any> {
+    render(): ReactElement {
      return <ShareActionSheetExample url="bunny.png" />;
    }
  },
  {
    title: 'Share Screenshot',
-    render(): React.Element<any> {
+    render(): ReactElement {
      return <ShareScreenshotExample />;
    }
  }
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -22,84 +15,76 @@
 */
 'use strict';

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

-/**
- * Optional Flowtype state and timer types definition
- */
-type State = { animating: boolean; };
-type Timer = number;
+var ToggleAnimatingActivityIndicator = React.createClass({
+  mixins: [TimerMixin],

-class ToggleAnimatingActivityIndicator extends Component {
-  /**
-   * Optional Flowtype state and timer types
-   */
-  state: State;
-  _timer: Timer;
-
-  constructor(props) {
-    super(props);
-    this.state = {
+  getInitialState: function() {
+    return {
      animating: true,
    };
-  }
+  },

-  componentDidMount() {
+  setToggleTimeout: function() {
+    this.setTimeout(
+      () => {
+        this.setState({animating: !this.state.animating});
+        this.setToggleTimeout();
+      },
+      1200
+    );
+  },
+
+  componentDidMount: function() {
    this.setToggleTimeout();
-  }
+  },

-  componentWillUnmount() {
-    clearTimeout(this._timer);
-  }
-
-  setToggleTimeout() {
-    this._timer = setTimeout(() => {
-      this.setState({animating: !this.state.animating});
-      this.setToggleTimeout();
-    }, 2000);
-  }
-
-  render() {
+  render: function() {
    return (
-      <ActivityIndicator
+      <ActivityIndicatorIOS
        animating={this.state.animating}
        style={[styles.centering, {height: 80}]}
        size="large"
      />
    );
  }
-}
-
-
+});

 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = '<ActivityIndicator>';
+exports.title = '<ActivityIndicatorIOS>';
 exports.description = 'Animated loading indicators.';

 exports.examples = [
  {
    title: 'Default (small, white)',
-    render() {
+    render: function() {
      return (
-        <ActivityIndicator
-          style={[styles.centering, styles.gray]}
+        <ActivityIndicatorIOS
+          style={[styles.centering, styles.gray, {height: 40}]}
          color="white"
-        />
+          />
      );
    }
  },
  {
    title: 'Gray',
-    render() {
+    render: function() {
      return (
        <View>
-          <ActivityIndicator
-            style={[styles.centering]}
+          <ActivityIndicatorIOS
+            style={[styles.centering, {height: 40}]}
          />
-          <ActivityIndicator
-            style={[styles.centering, {backgroundColor: '#eeeeee'}]}
+          <ActivityIndicatorIOS
+            style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
          />
        </View>
      );
@@ -107,47 +92,47 @@ exports.examples = [
  },
  {
    title: 'Custom colors',
-    render() {
+    render: function() {
      return (
        <View style={styles.horizontal}>
-          <ActivityIndicator color="#0000ff" />
-          <ActivityIndicator color="#aa00aa" />
-          <ActivityIndicator color="#aa3300" />
-          <ActivityIndicator color="#00aa00" />
+          <ActivityIndicatorIOS color="#0000ff" />
+          <ActivityIndicatorIOS color="#aa00aa" />
+          <ActivityIndicatorIOS color="#aa3300" />
+          <ActivityIndicatorIOS color="#00aa00" />
        </View>
      );
    }
  },
  {
    title: 'Large',
-    render() {
+    render: function() {
      return (
-        <ActivityIndicator
-          style={[styles.centering, styles.gray]}
-          size="large"
+        <ActivityIndicatorIOS
+          style={[styles.centering, styles.gray, {height: 80}]}
          color="white"
+          size="large"
        />
      );
    }
  },
  {
    title: 'Large, custom colors',
-    render() {
+    render: function() {
      return (
        <View style={styles.horizontal}>
-          <ActivityIndicator
+          <ActivityIndicatorIOS
            size="large"
            color="#0000ff"
          />
-          <ActivityIndicator
+          <ActivityIndicatorIOS
            size="large"
            color="#aa00aa"
          />
-          <ActivityIndicator
+          <ActivityIndicatorIOS
            size="large"
            color="#aa3300"
          />
-          <ActivityIndicator
+          <ActivityIndicatorIOS
            size="large"
            color="#00aa00"
          />
@@ -157,41 +142,16 @@ exports.examples = [
  },
  {
    title: 'Start/stop',
-    render() {
+    render: function(): ReactElement {
      return <ToggleAnimatingActivityIndicator />;
    }
  },
-  {
-    title: 'Custom size',
-    render() {
-      return (
-        <ActivityIndicator
-          style={[styles.centering, {transform: [{scale: 1.5}]}]}
-          size="large"
-        />
-      );
-    }
-  },
-  {
-    platform: 'android',
-    title: 'Custom size (size: 75)',
-    render() {
-      return (
-        <ActivityIndicator
-          style={styles.centering}
-          size={75}
-        />
-      );
-    }
-  },
 ];

-
-const styles = StyleSheet.create({
+var styles = StyleSheet.create({
  centering: {
    alignItems: 'center',
    justifyContent: 'center',
-    padding: 8,
  },
  gray: {
    backgroundColor: '#cccccc',
@@ -199,6 +159,5 @@ const styles = StyleSheet.create({
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
-    padding: 8,
  },
 });
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -38,19 +31,21 @@ exports.description = 'Example of using the ad support API.';
 exports.examples = [
  {
    title: 'Ad Support IOS',
-    render: function(): React.Element<any> {
+    render: function(): ReactElement {
      return <AdSupportIOSExample />;
    },
  }
 ];

-class AdSupportIOSExample extends React.Component {
-  state = {
-    deviceID: 'No IDFA yet',
-    hasAdvertiserTracking: 'unset',
-  };
+var AdSupportIOSExample = React.createClass({
+  getInitialState: function() {
+    return {
+      deviceID: 'No IDFA yet',
+      hasAdvertiserTracking: 'unset',
+    };
+  },

-  componentDidMount() {
+  componentDidMount: function() {
    AdSupportIOS.getAdvertisingId(
      this._onDeviceIDSuccess,
      this._onDeviceIDFailure
@@ -60,33 +55,33 @@ class AdSupportIOSExample extends React.Component {
      this._onHasTrackingSuccess,
      this._onHasTrackingFailure
    );
-  }
+  },

-  _onHasTrackingSuccess = (hasTracking) => {
+  _onHasTrackingSuccess: function(hasTracking) {
    this.setState({
      'hasAdvertiserTracking': hasTracking,
    });
-  };
+  },

-  _onHasTrackingFailure = (e) => {
+  _onHasTrackingFailure: function(e) {
    this.setState({
      'hasAdvertiserTracking': 'Error!',
    });
-  };
+  },

-  _onDeviceIDSuccess = (deviceID) => {
+  _onDeviceIDSuccess: function(deviceID) {
    this.setState({
      'deviceID': deviceID,
    });
-  };
+  },

-  _onDeviceIDFailure = (e) => {
+  _onDeviceIDFailure: function(e) {
    this.setState({
      'deviceID': 'Error!',
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
      <View>
        <Text>
@@ -100,7 +95,7 @@ class AdSupportIOSExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  title: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -41,8 +34,9 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after
 /**
 * Simple alert examples.
 */
-class SimpleAlertExampleBlock extends React.Component {
-  render() {
+var SimpleAlertExampleBlock = React.createClass({
+
+  render: function() {
    return (
      <View>
        <TouchableHighlight style={styles.wrapper}
@@ -106,40 +100,25 @@ class SimpleAlertExampleBlock extends React.Component {
            <Text>Alert with too many buttons</Text>
          </View>
        </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            null,
-            [
-              {text: 'OK', onPress: () => console.log('OK Pressed!')},
-            ],
-            {
-              cancelable: false
-            }
-          )}>
-          <View style={styles.button}>
-            <Text>Alert that cannot be dismissed</Text>
-          </View>
-        </TouchableHighlight>
      </View>
    );
-  }
-}
+  },
+});

-class AlertExample extends React.Component {
-  static title = 'Alert';
-
-  static description = 'Alerts display a concise and informative message ' +
-  'and prompt the user to make a decision.';
-
-  render() {
+var AlertExample = React.createClass({
+  statics: {
+    title: 'Alert',
+    description: 'Alerts display a concise and informative message ' +
+    'and prompt the user to make a decision.',
+  },
+  render: function() {
    return (
      <UIExplorerBlock title={'Alert'}>
        <SimpleAlertExampleBlock />
      </UIExplorerBlock>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  wrapper: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -45,7 +38,7 @@ exports.examples = [{
 },
 {
  title: 'Prompt Options',
-  render(): React.Element<any> {
+  render(): ReactElement {
    return <PromptOptions />;
  }
 },
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -89,7 +82,7 @@ class Circle extends React.Component {
    });
  }

-  render(): React.Element<any> {
+  render(): ReactElement {
    if (this.state.panResponder) {
      var handlers = this.state.panResponder.panHandlers;
      var dragStyle = {                 //  Used to position while dragging
@@ -190,7 +183,7 @@ class AnExApp extends React.Component {
    this._onMove = this._onMove.bind(this);
  }

-  render(): React.Element<any> {
+  render(): ReactElement {
    var circles = this.state.keys.map((key, idx) => {
      if (key === this.state.activeKey) {
        return <Circle key={key + 'd'} dummy={true} />;
@@ -288,6 +281,7 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
 var styles = StyleSheet.create({
  container: {
    flex: 1,
+    paddingTop: 64, // push content below nav bar
  },
  grid: {
    flex: 1,
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -27,6 +20,7 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -95,7 +89,7 @@ class AnExBobble extends React.Component {
    });
  }

-  render(): React.Element<any> {
+  render(): ReactElement {
    return (
      <View style={styles.bobbleContainer}>
        {this.state.bobbles.map((_, i) => {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -27,6 +20,7 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
  View,
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -52,7 +45,7 @@ class AnExSet extends React.Component {
      openColor: randColor(),
    };
  }
-  render(): React.Element<any> {
+  render(): ReactElement {
    var backgroundColor = this.props.openVal ?
      this.props.openVal.interpolate({
        inputRange: [0, 1],
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -27,8 +20,10 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Animated,
+  Image,
  PanResponder,
  StyleSheet,
+  View,
 } = ReactNative;

 class AnExTilt extends React.Component {
@@ -95,7 +90,7 @@ class AnExTilt extends React.Component {
    this._startBurnsZoom();
  }

-  render(): React.Element<any> {
+  render(): ReactElement {
    return (
      <Animated.View
        {...this.state.tiltPanResponder.panHandlers}
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -23,52 +16,36 @@
 */
 'use strict';

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

-class AppStateSubscription extends React.Component {
-  state = {
-    appState: AppState.currentState,
-    previousAppStates: [],
-    memoryWarnings: 0,
-  };
-
-  componentDidMount() {
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppState.currentState,
+      previousAppStates: [],
+    };
+  },
+  componentDidMount: function() {
    AppState.addEventListener('change', this._handleAppStateChange);
-    AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function() {
    AppState.removeEventListener('change', this._handleAppStateChange);
-    AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  _handleMemoryWarning = () => {
-    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
-  };
-
-  _handleAppStateChange = (appState) => {
+  },
+  _handleAppStateChange: function(appState) {
    var previousAppStates = this.state.previousAppStates.slice();
    previousAppStates.push(this.state.appState);
    this.setState({
      appState,
      previousAppStates,
    });
-  };
-
+  },
  render() {
-    if (this.props.showMemoryWarnings) {
-      return (
-        <View>
-          <Text>{this.state.memoryWarnings}</Text>
-        </View>
-      );
-    }
    if (this.props.showCurrentOnly) {
      return (
        <View>
@@ -82,7 +59,7 @@ class AppStateSubscription extends React.Component {
      </View>
    );
  }
-}
+});

 exports.title = 'AppState';
 exports.description = 'app background status';
@@ -95,16 +72,10 @@ exports.examples = [
  {
    title: 'Subscribed AppState:',
    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
-    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={true} />; }
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
  },
  {
    title: 'Previous states:',
-    render(): React.Element<any> { return <AppStateSubscription showCurrentOnly={false} />; }
-  },
-  {
-    platform: 'ios',
-    title: 'Memory Warnings',
-    description: 'In the IOS simulator, hit Shift+Command+M to simulate a memory warning.',
-    render(): React.Element<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
  },
 ];
@@ -0,0 +1,99 @@
+/**
+ * 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 AppStateIOSExample
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  AppStateIOS,
+  Text,
+  View
+} = ReactNative;
+
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppStateIOS.currentState,
+      previousAppStates: [],
+      memoryWarnings: 0,
+    };
+  },
+  componentDidMount: function() {
+    AppStateIOS.addEventListener('change', this._handleAppStateChange);
+    AppStateIOS.addEventListener('memoryWarning', this._handleMemoryWarning);
+  },
+  componentWillUnmount: function() {
+    AppStateIOS.removeEventListener('change', this._handleAppStateChange);
+    AppStateIOS.removeEventListener('memoryWarning', this._handleMemoryWarning);
+  },
+  _handleMemoryWarning: function() {
+    this.setState({memoryWarnings: this.state.memoryWarnings + 1});
+  },
+  _handleAppStateChange: function(appState) {
+    var previousAppStates = this.state.previousAppStates.slice();
+    previousAppStates.push(this.state.appState);
+    this.setState({
+      appState,
+      previousAppStates,
+    });
+  },
+  render() {
+    if (this.props.showMemoryWarnings) {
+      return (
+        <View>
+          <Text>{this.state.memoryWarnings}</Text>
+        </View>
+      );
+    }
+    if (this.props.showCurrentOnly) {
+      return (
+        <View>
+          <Text>{this.state.appState}</Text>
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'AppStateIOS';
+exports.description = 'iOS app background status';
+exports.examples = [
+  {
+    title: 'AppStateIOS.currentState',
+    description: 'Can be null on app initialization',
+    render() { return <Text>{AppStateIOS.currentState}</Text>; }
+  },
+  {
+    title: 'Subscribed AppStateIOS:',
+    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
+  },
+  {
+    title: 'Previous states:',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
+  },
+  {
+    title: 'Memory Warnings',
+    description: 'In the simulator, hit Shift+Command+M to simulate a memory warning.',
+    render(): ReactElement { return <AppStateSubscription showMemoryWarnings={true} />; }
+  },
+];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -31,10 +24,13 @@ var {
  ScrollView
 } = ReactNative;

-class AssetScaledImageExample extends React.Component {
-  state = {
-    asset: this.props.asset
-  };
+var AssetScaledImageExample = React.createClass({
+
+  getInitialState() {
+    return {
+      asset: this.props.asset
+    };
+  },

  render() {
    var image = this.state.asset.node.image;
@@ -54,8 +50,8 @@ class AssetScaledImageExample extends React.Component {
        </View>
      </ScrollView>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  row: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -35,17 +28,12 @@ var PickerItemIOS = PickerIOS.Item;
 var STORAGE_KEY = '@AsyncStorageExample:key';
 var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];

-class BasicStorageExample extends React.Component {
-  state = {
-    selectedValue: COLORS[0],
-    messages: [],
-  };
-
+var BasicStorageExample = React.createClass({
  componentDidMount() {
    this._loadInitialState().done();
-  }
+  },

-  _loadInitialState = async () => {
+  async _loadInitialState() {
    try {
      var value = await AsyncStorage.getItem(STORAGE_KEY);
      if (value !== null){
@@ -57,7 +45,14 @@ class BasicStorageExample extends React.Component {
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },
+
+  getInitialState() {
+    return {
+      selectedValue: COLORS[0],
+      messages: [],
+    };
+  },

  render() {
    var color = this.state.selectedValue;
@@ -89,9 +84,9 @@ class BasicStorageExample extends React.Component {
        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
      </View>
    );
-  }
+  },

-  _onValueChange = async (selectedValue) => {
+  async _onValueChange(selectedValue) {
    this.setState({selectedValue});
    try {
      await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -99,27 +94,27 @@ class BasicStorageExample extends React.Component {
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },

-  _removeStorage = async () => {
+  async _removeStorage() {
    try {
      await AsyncStorage.removeItem(STORAGE_KEY);
      this._appendMessage('Selection removed from disk.');
    } catch (error) {
      this._appendMessage('AsyncStorage error: ' + error.message);
    }
-  };
+  },

-  _appendMessage = (message) => {
+  _appendMessage(message) {
    this.setState({messages: this.state.messages.concat(message)});
-  };
-}
+  },
+});

 exports.title = 'AsyncStorage';
 exports.description = 'Asynchronous local disk storage.';
 exports.examples = [
  {
    title: 'Basics - getItem, setItem, removeItem',
-    render(): React.Element<any> { return <BasicStorageExample />; }
+    render(): ReactElement { return <BasicStorageExample />; }
  },
 ];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -27,7 +20,7 @@ const ReactNative = require('react-native');
 const {
  CameraRoll,
  Image,
-  Slider,
+  SliderIOS,
  StyleSheet,
  Switch,
  Text,
@@ -35,43 +28,45 @@ const {
  TouchableOpacity
 } = ReactNative;

-const invariant = require('fbjs/lib/invariant');
-
 const CameraRollView = require('./CameraRollView');

 const AssetScaledImageExampleView = require('./AssetScaledImageExample');

-class CameraRollExample extends React.Component {
-  state = {
-    groupTypes: 'SavedPhotos',
-    sliderValue: 1,
-    bigImages: true,
-  };
-  _cameraRollView: ?CameraRollView;
+const CAMERA_ROLL_VIEW = 'camera_roll_view';
+
+const CameraRollExample = React.createClass({
+
+  getInitialState() {
+    return {
+      groupTypes: 'SavedPhotos',
+      sliderValue: 1,
+      bigImages: true,
+    };
+  },
+
  render() {
    return (
      <View>
        <Switch
          onValueChange={this._onSwitchChange}
-          value={this.state.bigImages}
-        />
+          value={this.state.bigImages} />
        <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
-        <Slider
+        <SliderIOS
          value={this.state.sliderValue}
          onValueChange={this._onSliderChange}
        />
        <Text>{'Group Type: ' + this.state.groupTypes}</Text>
        <CameraRollView
-          ref={(ref) => { this._cameraRollView = ref; }}
+          ref={CAMERA_ROLL_VIEW}
          batchSize={20}
          groupTypes={this.state.groupTypes}
          renderImage={this._renderImage}
        />
      </View>
    );
-  }
+  },

-  loadAsset = (asset) => {
+  loadAsset(asset){
    if (this.props.navigator) {
      this.props.navigator.push({
        title: 'Camera Roll Image',
@@ -80,13 +75,13 @@ class CameraRollExample extends React.Component {
        passProps: { asset: asset },
      });
    }
-  };
+  },

-  _renderImage = (asset) => {
+  _renderImage(asset) {
    const imageSize = this.state.bigImages ? 150 : 75;
    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const {location} = asset.node;
-    const locationStr = location ? JSON.stringify(location) : 'Unknown location';
+    const location = asset.node.location.longitude ?
+      JSON.stringify(asset.node.location) : 'Unknown location';
    return (
      <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
        <View style={styles.row}>
@@ -96,30 +91,29 @@ class CameraRollExample extends React.Component {
          />
          <View style={styles.info}>
            <Text style={styles.url}>{asset.node.image.uri}</Text>
-            <Text>{locationStr}</Text>
+            <Text>{location}</Text>
            <Text>{asset.node.group_name}</Text>
            <Text>{new Date(asset.node.timestamp).toString()}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
-  };
+  },

-  _onSliderChange = (value) => {
+  _onSliderChange(value) {
    const options = CameraRoll.GroupTypesOptions;
    const index = Math.floor(value * options.length * 0.99);
    const groupTypes = options[index];
    if (groupTypes !== this.state.groupTypes) {
      this.setState({groupTypes: groupTypes});
    }
-  };
+  },

-  _onSwitchChange = (value) => {
-    invariant(this._cameraRollView, 'ref should be set');
-    this._cameraRollView.rendererChanged();
+  _onSwitchChange(value) {
+    this.refs[CAMERA_ROLL_VIEW].rendererChanged();
    this.setState({ bigImages: value });
-  };
-}
+  }
+});

 const styles = StyleSheet.create({
  row: {
@@ -143,6 +137,6 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
 exports.examples = [
  {
    title: 'Photos',
-    render(): React.Element<any> { return <CameraRollExample />; }
+    render(): ReactElement { return <CameraRollExample />; }
  }
 ];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -26,7 +19,7 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicator,
+  ActivityIndicatorIOS,
  CameraRoll,
  Image,
  ListView,
@@ -148,7 +141,7 @@ var CameraRollView = React.createClass({
      groupTypes: this.props.groupTypes,
      assetType: this.props.assetType,
    };
-    if (Platform.OS === 'android') {
+    if (Platform.OS === "android") {
      // not supported in android
      delete fetchParams.groupTypes;
    }
@@ -198,7 +191,7 @@ var CameraRollView = React.createClass({

  _renderFooterSpinner: function() {
    if (!this.state.noMore) {
-      return <ActivityIndicator />;
+      return <ActivityIndicatorIOS style={styles.spinner} />;
    }
    return null;
  },
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -30,12 +23,14 @@ var {
  Text,
 } = ReactNative;

-class ClipboardExample extends React.Component {
-  state = {
-    content: 'Content will appear here'
-  };
+var ClipboardExample = React.createClass({
+  getInitialState() {
+    return {
+      content: 'Content will appear here'
+    };
+  },

-  _setClipboardContent = async () => {
+  async _setClipboardContent(){
    Clipboard.setString('Hello World');
    try {
      var content = await Clipboard.getString();
@@ -43,7 +38,7 @@ class ClipboardExample extends React.Component {
    } catch (e) {
      this.setState({content:e.message});
    }
-  };
+  },

  render() {
    return (
@@ -57,7 +52,7 @@ class ClipboardExample extends React.Component {
      </View>
    );
  }
-}
+});

 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -32,24 +25,26 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

-class DatePickerAndroidExample extends React.Component {
-  static title = 'DatePickerAndroid';
-  static description = 'Standard Android date picker dialog';
+var DatePickerAndroidExample = React.createClass({

-  state = {
-    presetDate: new Date(2020, 4, 5),
-    allDate: new Date(2020, 4, 5),
-    simpleText: 'pick a date',
-    spinnerText: 'pick a date',
-    calendarText: 'pick a date',
-    defaultText: 'pick a date',
-    minText: 'pick a date, no earlier than today',
-    maxText: 'pick a date, no later than today',
-    presetText: 'pick a date, preset to 2020/5/5',
-    allText: 'pick a date between 2020/5/1 and 2020/5/10',
-  };
+  statics: {
+    title: 'DatePickerAndroid',
+    description: 'Standard Android date picker dialog',
+  },

-  showPicker = async (stateKey, options) => {
+  getInitialState() {
+    return {
+      presetDate: new Date(2020, 4, 5),
+      allDate: new Date(2020, 4, 5),
+      simpleText: 'pick a date',
+      minText: 'pick a date, no earlier than today',
+      maxText: 'pick a date, no later than today',
+      presetText: 'pick a date, preset to 2020/5/5',
+      allText: 'pick a date between 2020/5/1 and 2020/5/10',
+    };
+  },
+
+  async showPicker(stateKey, options) {
    try {
      var newState = {};
      const {action, year, month, day} = await DatePickerAndroid.open(options);
@@ -64,7 +59,7 @@ class DatePickerAndroidExample extends React.Component {
    } catch ({code, message}) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
-  };
+  },

  render() {
    return (
@@ -75,24 +70,6 @@ class DatePickerAndroidExample extends React.Component {
            <Text style={styles.text}>{this.state.simpleText}</Text>
          </TouchableWithoutFeedback>
        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple spinner date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'spinner', {date: this.state.spinnerDate, mode: 'spinner'})}>
-            <Text style={styles.text}>{this.state.spinnerText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple calendar date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'calendar', {date: this.state.calendarDate, mode: 'calendar'})}>
-            <Text style={styles.text}>{this.state.calendarText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Simple default date picker">
-          <TouchableWithoutFeedback
-            onPress={this.showPicker.bind(this, 'default', {date: this.state.defaultDate, mode: 'default'})}>
-            <Text style={styles.text}>{this.state.defaultText}</Text>
-          </TouchableWithoutFeedback>
-        </UIExplorerBlock>
        <UIExplorerBlock title="Date picker with pre-set date">
          <TouchableWithoutFeedback
            onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
@@ -129,8 +106,8 @@ class DatePickerAndroidExample extends React.Component {
          </UIExplorerBlock>
      </UIExplorerPage>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  text: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -32,30 +25,34 @@ var {
  View,
 } = ReactNative;

-class DatePickerExample extends React.Component {
-  static defaultProps = {
-    date: new Date(),
-    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
-  };
+var DatePickerExample = React.createClass({
+  getDefaultProps: function () {
+    return {
+      date: new Date(),
+      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+    };
+  },

-  state = {
-    date: this.props.date,
-    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
-  };
+  getInitialState: function() {
+    return {
+      date: this.props.date,
+      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+    };
+  },

-  onDateChange = (date) => {
+  onDateChange: function(date) {
    this.setState({date: date});
-  };
+  },

-  onTimezoneChange = (event) => {
+  onTimezoneChange: function(event) {
    var offset = parseInt(event.nativeEvent.text, 10);
    if (isNaN(offset)) {
      return;
    }
    this.setState({timeZoneOffsetInHours: offset});
-  };
+  },

-  render() {
+  render: function() {
    // Ideally, the timezone input would be a picker rather than a
    // text input, but we don't have any pickers yet :(
    return (
@@ -99,11 +96,11 @@ class DatePickerExample extends React.Component {
        />
      </View>
    );
-  }
-}
+  },
+});

-class WithLabel extends React.Component {
-  render() {
+var WithLabel = React.createClass({
+  render: function() {
    return (
      <View style={styles.labelContainer}>
        <View style={styles.labelView}>
@@ -115,10 +112,10 @@ class WithLabel extends React.Component {
      </View>
    );
  }
-}
+});

-class Heading extends React.Component {
-  render() {
+var Heading = React.createClass({
+  render: function() {
    return (
      <View style={styles.headingContainer}>
        <Text style={styles.heading}>
@@ -127,7 +124,7 @@ class Heading extends React.Component {
      </View>
    );
  }
-}
+});

 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';
@@ -135,7 +132,7 @@ exports.description = 'Select dates and times using the native UIDatePicker.';
 exports.examples = [
 {
  title: '<DatePickerIOS>',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement {
    return <DatePickerExample />;
  },
 }];
@@ -10,14 +10,22 @@
 * 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 ExampleTypes
+ * @flow
 */
-package com.facebook.react.tictactoe;
+'use strict';

-import com.facebook.react.ReactActivity;
+export type Example = {
+  title: string,
+  render: () => ?ReactElement<any>,
+  description?: string,
+  platform?: string;
+};

-public class TicTacToeActivity extends ReactActivity {
-  @Override
-  protected String getMainComponentName() {
-    return "TicTacToeApp";
-  }
-}
+export type ExampleModule = {
+  title: string;
+  description: string;
+  examples: Array<Example>;
+  external?: bool;
+};
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -39,40 +32,42 @@ exports.description = 'Examples of using the Geolocation API.';
 exports.examples = [
  {
    title: 'navigator.geolocation',
-    render: function(): React.Element<any> {
+    render: function(): ReactElement {
      return <GeolocationExample />;
    },
  }
 ];

-class GeolocationExample extends React.Component {
-  state = {
-    initialPosition: 'unknown',
-    lastPosition: 'unknown',
-  };
+var GeolocationExample = React.createClass({
+  watchID: (null: ?number),

-  watchID: ?number = null;
+  getInitialState: function() {
+    return {
+      initialPosition: 'unknown',
+      lastPosition: 'unknown',
+    };
+  },

-  componentDidMount() {
+  componentDidMount: function() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        var initialPosition = JSON.stringify(position);
        this.setState({initialPosition});
      },
-      (error) => alert(JSON.stringify(error)),
+      (error) => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
    this.watchID = navigator.geolocation.watchPosition((position) => {
      var lastPosition = JSON.stringify(position);
      this.setState({lastPosition});
    });
-  }
+  },

-  componentWillUnmount() {
+  componentWillUnmount: function() {
    navigator.geolocation.clearWatch(this.watchID);
-  }
+  },

-  render() {
+  render: function() {
    return (
      <View>
        <Text>
@@ -86,7 +81,7 @@ class GeolocationExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  title: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -25,8 +18,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Image,
  StyleSheet,
@@ -34,8 +25,8 @@ var {
  View,
 } = ReactNative;

-class ImageCapInsetsExample extends React.Component {
-  render() {
+var ImageCapInsetsExample = React.createClass({
+  render: function() {
    return (
      <View>
        <View style={styles.background}>
@@ -43,11 +34,7 @@ class ImageCapInsetsExample extends React.Component {
            capInsets: none
          </Text>
          <Image
-            source={nativeImageSource({
-              ios: 'story-background',
-              width: 60,
-              height: 60
-            })}
+            source={require('image!story-background')}
            style={styles.storyBackground}
            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
@@ -58,11 +45,7 @@ class ImageCapInsetsExample extends React.Component {
            capInsets: 15
          </Text>
          <Image
-            source={nativeImageSource({
-              ios: 'story-background',
-              width: 60,
-              height: 60
-            })}
+            source={require('image!story-background')}
            style={styles.storyBackground}
            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
@@ -71,7 +54,7 @@ class ImageCapInsetsExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  background: {
@@ -1,11 +1,5 @@
-/*
- * 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.
 *
@@ -28,11 +22,13 @@ var {
  CameraRoll,
  Image,
  ImageEditor,
+  NativeModules,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
+  UIManager,
  View,
 } = ReactNative;

@@ -25,18 +25,18 @@
 var React = require('react');
 var ReactNative = require('react-native');
 var {
-  ActivityIndicator,
  Image,
  Platform,
  StyleSheet,
  Text,
  View,
+  ActivityIndicatorIOS
 } = 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://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
+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({
@@ -61,15 +61,7 @@ var NetworkImageCallbackExample = React.createClass({
          source={this.props.source}
          style={[styles.base, {overflow: 'visible'}]}
          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={(event) => {
-            // Currently this image source feature is only available on iOS.
-            if (event.nativeEvent.source) {
-              const url = event.nativeEvent.source.url;
-              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
-            } else {
-              this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
-            }
-          }}
+          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
          onLoadEnd={() => {
            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
            this.setState({startLoadPrefetched: true}, () => {
@@ -86,15 +78,7 @@ var NetworkImageCallbackExample = React.createClass({
            source={this.props.prefetchedSource}
            style={[styles.base, {overflow: 'visible'}]}
            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-            onLoad={(event) => {
-              // Currently this image source feature is only available on iOS.
-              if (event.nativeEvent.source) {
-                const url = event.nativeEvent.source.url;
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
-              } else {
-                this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
-              }
-            }}
+            onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
          />
          : null}
@@ -124,7 +108,7 @@ var NetworkImageExample = React.createClass({
    var loader = this.state.loading ?
      <View style={styles.progress}>
        <Text>{this.state.progress}%</Text>
-        <ActivityIndicator style={{marginLeft:5}} />
+        <ActivityIndicatorIOS style={{marginLeft:5}}/>
      </View> : null;
    return this.state.error ?
      <Text>{this.state.error}</Text> :
@@ -172,63 +156,6 @@ var ImageSizeExample = React.createClass({
  },
 });

-var MultipleSourcesExample = React.createClass({
-  getInitialState: function() {
-    return {
-      width: 30,
-      height: 30,
-    };
-  },
-  render: function() {
-    return (
-      <View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
-          <Text
-            style={styles.touchableText}
-            onPress={this.decreaseImageSize} >
-            Decrease image size
-          </Text>
-          <Text
-            style={styles.touchableText}
-            onPress={this.increaseImageSize} >
-            Increase image size
-          </Text>
-        </View>
-        <Text>Container image size: {this.state.width}x{this.state.height} </Text>
-        <View
-          style={{height: this.state.height, width: this.state.width}} >
-          <Image
-            style={{flex: 1}}
-            source={[
-              {uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
-              {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
-              {uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}
-            ]}
-          />
-        </View>
-      </View>
-    );
-  },
-  increaseImageSize: function() {
-    if (this.state.width >= 100) {
-      return;
-    }
-    this.setState({
-      width: this.state.width + 10,
-      height: this.state.height + 10,
-    });
-  },
-  decreaseImageSize: function() {
-    if (this.state.width <= 10) {
-      return;
-    }
-    this.setState({
-      width: this.state.width - 10,
-      height: this.state.height - 10,
-    });
-  },
-});
-
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -242,7 +169,7 @@ exports.examples = [
    render: function() {
      return (
        <Image
-          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
+          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.base}
        />
      );
@@ -267,7 +194,7 @@ exports.examples = [
    title: 'Image Loading Events',
    render: function() {
      return (
-        <NetworkImageCallbackExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now()}}
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
      );
    },
@@ -276,7 +203,7 @@ exports.examples = [
    title: 'Error Handler',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'https://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
+        <NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
      );
    },
    platform: 'ios',
@@ -285,7 +212,7 @@ exports.examples = [
    title: 'Image Download Progress',
    render: function() {
      return (
-        <NetworkImageExample source={{uri: 'http://origami.design/public/images/bird-logo.png?r=1'}}/>
+        <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
      );
    },
    platform: 'ios',
@@ -297,7 +224,7 @@ exports.examples = [
      return (
        <Image
          defaultSource={require('./bunny.png')}
-          source={{uri: 'https://facebook.github.io/origami/public/images/birds.jpg'}}
+          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
          style={styles.base}
        />
      );
@@ -521,18 +448,6 @@ exports.examples = [
                    source={image}
                  />
                </View>
-                { Platform.OS === 'ios' ?
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Repeat
-                    </Text>
-                    <Image
-                      style={styles.resizeMode}
-                      resizeMode={Image.resizeMode.repeat}
-                      source={image}
-                    />
-                  </View>
-                : null }
                { Platform.OS === 'android' ?
                  <View style={styles.leftMargin}>
                    <Text style={[styles.resizeModeText]}>
@@ -559,7 +474,7 @@ exports.examples = [
      return (
        <Image
          style={styles.gif}
-          source={{uri: 'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
+          source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
        />
      );
    },
@@ -594,63 +509,12 @@ exports.examples = [
    render: function() {
      return <ImageSizeExample source={fullImage} />;
    },
-  },
-  {
-    title: 'MultipleSourcesExample',
-    description:
-      'The `source` prop allows passing in an array of uris, so that native to choose which image ' +
-      'to diplay based on the size of the of the target image',
-    render: function() {
-      return <MultipleSourcesExample />;
-    },
-  },
-  {
-    title: 'Legacy local image',
-    description:
-      'Images shipped with the native bundle, but not managed ' +
-      'by the JS packager',
-    render: function() {
-      return (
-        <Image
-          source={{uri: 'legacy_image', width: 120, height: 120}}
-        />
-      );
-    },
-  },
-  {
-    title: 'Bundled images',
-    description:
-      'Images shipped in a separate native bundle',
-    render: function() {
-      return (
-        <View style={{flexDirection: 'row'}}>
-          <Image
-            source={{
-              url: 'ImageInBundle',
-              bundle: 'UIExplorerBundle',
-              width: 100,
-              height: 100,
-            }}
-            style={{borderColor: 'yellow', borderWidth: 4}}
-          />
-          <Image
-            source={{
-              url: 'ImageInAssetCatalog',
-              bundle: 'UIExplorerBundle',
-              width: 100,
-              height: 100,
-            }}
-            style={{marginLeft: 10, borderColor: 'blue', borderWidth: 4}}
-          />
-        </View>
-      );
-    },
    platform: 'ios',
  },
 ];

-var fullImage = {uri: 'https://facebook.github.io/react/img/logo_og.png'};
-var smallImage = {uri: 'https://facebook.github.io/react/img/logo_small_2x.png'};
+var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};

 var styles = StyleSheet.create({
  base: {
@@ -704,8 +568,4 @@ var styles = StyleSheet.create({
    height: 50,
    resizeMode: 'contain',
  },
-  touchableText: {
-    fontWeight: '500',
-    color: 'blue',
-  },
 });
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -32,22 +25,25 @@ const {
  TouchableOpacity,
 } = ReactNative;

-class AddRemoveExample extends React.Component {
-  state = {
-    views: [],
-  };
+const AddRemoveExample = React.createClass({
+
+  getInitialState() {
+    return {
+      views: [],
+    };
+  },

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut();
-  }
+  },

-  _onPressAddView = () => {
+  _onPressAddView() {
    this.setState((state) => ({views: [...state.views, {}]}));
-  };
+  },

-  _onPressRemoveView = () => {
+  _onPressRemoveView() {
    this.setState((state) => ({views: state.views.slice(0, -1)}));
-  };
+  },

  render() {
    const views = this.state.views.map((view, i) =>
@@ -72,8 +68,8 @@ class AddRemoveExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

 const GreenSquare = () =>
  <View style={styles.greenSquare}>
@@ -85,15 +81,18 @@ const BlueSquare = () =>
    <Text>Blue square</Text>
  </View>;

-class CrossFadeExample extends React.Component {
-  state = {
-    toggled: false,
-  };
+const CrossFadeExample = React.createClass({

-  _onPressToggle = () => {
+  getInitialState() {
+    return {
+      toggled: false,
+    };
+  },
+
+  _onPressToggle() {
    LayoutAnimation.easeInEaseOut();
    this.setState((state) => ({toggled: !state.toggled}));
-  };
+  },

  render() {
    return (
@@ -112,8 +111,8 @@ class CrossFadeExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  container: {
@@ -161,12 +160,12 @@ exports.title = 'Layout Animation';
 exports.description = 'Layout animation';
 exports.examples = [{
  title: 'Add and remove views',
-  render(): React.Element<any> {
+  render(): ReactElement {
    return <AddRemoveExample />;
  },
 }, {
  title: 'Cross fade views',
-  render(): React.Element<any> {
+  render(): ReactElement {
    return <CrossFadeExample />;
  },
 }];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -54,14 +47,15 @@ type State = {
  viewStyle: { margin: number },
 };

-class LayoutEventExample extends React.Component {
-  state: State = {
-    viewStyle: {
-      margin: 20,
-    },
-  };
-
-  animateViewLayout = () => {
+var LayoutEventExample = React.createClass({
+  getInitialState(): State {
+    return {
+      viewStyle: {
+        margin: 20,
+      },
+    };
+  },
+  animateViewLayout: function() {
    LayoutAnimation.configureNext(
      LayoutAnimation.Presets.spring,
      () => {
@@ -74,35 +68,29 @@ class LayoutEventExample extends React.Component {
        margin: this.state.viewStyle.margin > 20 ? 20 : 60,
      }
    });
-  };
-
-  addWrapText = () => {
+  },
+  addWrapText: function() {
    this.setState(
      {extraText: '  And a bunch more text to wrap around a few lines.'},
      this.changeContainer
    );
-  };
-
-  changeContainer = () => {
+  },
+  changeContainer: function() {
    this.setState({containerStyle: {width: 280}});
-  };
-
-  onViewLayout = (e: LayoutEvent) => {
+  },
+  onViewLayout: function(e: LayoutEvent) {
    console.log('received view layout event\n', e.nativeEvent);
    this.setState({viewLayout: e.nativeEvent.layout});
-  };
-
-  onTextLayout = (e: LayoutEvent) => {
+  },
+  onTextLayout: function(e: LayoutEvent) {
    console.log('received text layout event\n', e.nativeEvent);
    this.setState({textLayout: e.nativeEvent.layout});
-  };
-
-  onImageLayout = (e: LayoutEvent) => {
+  },
+  onImageLayout: function(e: LayoutEvent) {
    console.log('received image layout event\n', e.nativeEvent);
    this.setState({imageLayout: e.nativeEvent.layout});
-  };
-
-  render() {
+  },
+  render: function() {
    var viewStyle = [styles.view, this.state.viewStyle];
    var textLayout = this.state.textLayout || {width: '?', height: '?'};
    var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
@@ -136,7 +124,7 @@ class LayoutEventExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  view: {
@@ -170,7 +158,7 @@ exports.description = 'Examples that show how Layout events can be used to ' +
 exports.examples = [
 {
  title: 'LayoutEventExample',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement {
    return <LayoutEventExample />;
  },
 }];
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -33,15 +26,14 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');

-class Circle extends React.Component {
-  render() {
+var Circle = React.createClass({
+  render: function() {
    var size = this.props.size || 20;
-    var backgroundColor = this.props.bgColor || '#527fe4';
    return (
      <View
        style={{
          borderRadius: size / 2,
-          backgroundColor: backgroundColor,
+          backgroundColor: '#527fe4',
          width: size,
          height: size,
          margin: 1,
@@ -49,10 +41,10 @@ class Circle extends React.Component {
      />
    );
  }
-}
+});

-class CircleBlock extends React.Component {
-  render() {
+var CircleBlock = React.createClass({
+  render: function() {
    var circleStyle = {
      flexDirection: 'row',
      backgroundColor: '#f6f7f8',
@@ -66,40 +58,27 @@ class CircleBlock extends React.Component {
      </View>
    );
  }
-}
+});

-class LayoutExample extends React.Component {
-  static title = 'Layout - Flexbox';
-  static description = 'Examples of using the flexbox API to layout views.';
-  static displayName = 'LayoutExample';
+var LayoutExample = React.createClass({
+  statics: {
+    title: 'Layout - Flexbox',
+    description: 'Examples of using the flexbox API to layout views.',
+  },

-  render() {
-    var fiveColoredCircles = [
-      <Circle bgColor="#527fe4" key="blue" />,
-      <Circle bgColor="#D443E3" key="violet" />,
-      <Circle bgColor="#FF9049" key="orange" />,
-      <Circle bgColor="#FFE649" key="yellow" />,
-      <Circle bgColor="#7FE040" key="green" />
-    ];
+  displayName: 'LayoutExample',

+  render: function() {
    return (
      <UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
        <UIExplorerBlock title="Flex Direction">
          <Text>row</Text>
          <CircleBlock style={{flexDirection: 'row'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>row-reverse</Text>
-          <CircleBlock style={{flexDirection: 'row-reverse'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <Text>column</Text>
          <CircleBlock style={{flexDirection: 'column'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>column-reverse</Text>
-          <CircleBlock style={{flexDirection: 'column-reverse'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
            <Text>{'top: 15, left: 160'}</Text>
@@ -109,23 +88,23 @@ class LayoutExample extends React.Component {
        <UIExplorerBlock title="Justify Content - Main Direction">
          <Text>flex-start</Text>
          <CircleBlock style={{justifyContent: 'flex-start'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <Text>center</Text>
          <CircleBlock style={{justifyContent: 'center'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <Text>flex-end</Text>
          <CircleBlock style={{justifyContent: 'flex-end'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <Text>space-between</Text>
          <CircleBlock style={{justifyContent: 'space-between'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
          <Text>space-around</Text>
          <CircleBlock style={{justifyContent: 'space-around'}}>
-            {fiveColoredCircles}
+            <Circle /><Circle /><Circle /><Circle /><Circle />
          </CircleBlock>
        </UIExplorerBlock>
        <UIExplorerBlock title="Align Items - Other Direction">
@@ -165,7 +144,7 @@ class LayoutExample extends React.Component {
      </UIExplorerPage>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  overlay: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -26,17 +19,18 @@ var {
  Linking,
  StyleSheet,
  Text,
-  TouchableOpacity,
+  TouchableNativeFeedback,
  View,
 } = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');

-class OpenURLButton extends React.Component {
-  static propTypes = {
-    url: React.PropTypes.string,
-  };
+var OpenURLButton = React.createClass({

-  handleClick = () => {
+  propTypes: {
+    url: React.PropTypes.string,
+  },
+
+  handleClick: function() {
    Linking.canOpenURL(this.props.url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
@@ -44,25 +38,28 @@ class OpenURLButton extends React.Component {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
-  };
+  },

-  render() {
+  render: function() {
    return (
-      <TouchableOpacity
+      <TouchableNativeFeedback
        onPress={this.handleClick}>
        <View style={styles.button}>
          <Text style={styles.text}>Open {this.props.url}</Text>
        </View>
-      </TouchableOpacity>
+      </TouchableNativeFeedback>
    );
  }
-}
+});

-class IntentAndroidExample extends React.Component {
-  static title = 'Linking';
-  static description = 'Shows how to use Linking to open URLs.';
+var IntentAndroidExample = React.createClass({

-  render() {
+  statics: {
+    title: 'Linking',
+    description: 'Shows how to use Linking to open URLs.',
+  },
+
+  render: function() {
    return (
      <UIExplorerBlock title="Open external URLs">
        <OpenURLButton url={'https://www.facebook.com'} />
@@ -73,8 +70,8 @@ class IntentAndroidExample extends React.Component {
        <OpenURLButton url={'tel:9876543210'} />
      </UIExplorerBlock>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  container: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -65,20 +58,17 @@ var ListViewSimpleExample = React.createClass({
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={this._renderSeparator}
+          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
        />
      </UIExplorerPage>
    );
  },

-  _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
+  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var rowHash = Math.abs(hashCode(rowData));
    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
    return (
-      <TouchableHighlight onPress={() => {
-          this._pressRow(rowID);
-          highlightRow(sectionID, rowID);
-        }}>
+      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
@@ -106,18 +96,6 @@ var ListViewSimpleExample = React.createClass({
      this._genRows(this._pressData)
    )});
  },
-
-  _renderSeparator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
-    return (
-      <View
-        key={`${sectionID}-${rowID}`}
-        style={{
-          height: adjacentRowHighlighted ? 4 : 1,
-          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
-        }}
-      />
-    );
-  }
 });

 var THUMB_URLS = [
@@ -152,6 +130,10 @@ var styles = StyleSheet.create({
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
+  separator: {
+    height: 1,
+    backgroundColor: '#CCCCCC',
+  },
  thumb: {
    width: 64,
    height: 64,
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -130,8 +123,7 @@ var styles = StyleSheet.create({
  list: {
    justifyContent: 'space-around',
    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start'
+    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -57,28 +50,26 @@ var THUMB_URLS = [
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;

-class Thumb extends React.Component {
-  componentWillMount() {
+var Thumb = React.createClass({
+  getInitialState: function() {
+    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
+  },
+  componentWillMount: function() {
    UIManager.setLayoutAnimationEnabledExperimental &&
      UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-
-  _getThumbIdx = () => {
+  },
+  _getThumbIdx: function() {
    return Math.floor(Math.random() * THUMB_URLS.length);
-  };
-
-  _onPressThumb = () => {
+  },
+  _onPressThumb: function() {
    var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
    LayoutAnimation.configureNext(config);
    this.setState({
      thumbIndex: this._getThumbIdx(),
      dir: this.state.dir === 'row' ? 'column' : 'row',
    });
-  };
-
-  state = {thumbIndex: this._getThumbIdx(), dir: 'row'};
-
-  render() {
+  },
+  render: function() {
    return (
      <TouchableOpacity
        onPress={this._onPressThumb}
@@ -96,16 +87,15 @@ class Thumb extends React.Component {
      </TouchableOpacity>
    );
  }
-}
+});

-class ListViewPagingExample extends React.Component {
-  state: *;
-  static title = '<ListView> - Paging';
-  static description = 'Floating headers & layout animations.';
+var ListViewPagingExample = React.createClass({
+  statics: {
+    title: '<ListView> - Paging',
+    description: 'Floating headers & layout animations.'
+  },

-  // $FlowFixMe found when converting React.createClass to ES6
-  constructor(props) {
-    super(props);
+  getInitialState: function() {
    var getSectionData = (dataBlob, sectionID) => {
      return dataBlob[sectionID];
    };
@@ -135,18 +125,17 @@ class ListViewPagingExample extends React.Component {
        dataBlob[rowName] = rowName;
      }
    }
-
-    this.state = {
+    return {
      dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
      headerPressCount: 0,
    };
-  }
+  },

-  renderRow = (rowData: string, sectionID: string, rowID: string): React.Element<any> => {
+  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement {
    return (<Thumb text={rowData}/>);
-  };
+  },

-  renderSectionHeader = (sectionData: string, sectionID: string) => {
+  renderSectionHeader: function(sectionData: string, sectionID: string) {
    return (
      <View style={styles.section}>
        <Text style={styles.text}>
@@ -154,9 +143,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  renderHeader = () => {
+  renderHeader: function() {
    var headerLikeText = this.state.headerPressCount % 2 ?
      <View><Text style={styles.text}>1 Like</Text></View> :
      null;
@@ -170,9 +159,9 @@ class ListViewPagingExample extends React.Component {
        </View>
      </TouchableOpacity>
    );
-  };
+  },

-  renderFooter = () => {
+  renderFooter: function() {
    return (
      <View style={styles.header}>
        <Text onPress={() => console.log('Footer!')} style={styles.text}>
@@ -180,9 +169,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <ListView
        style={styles.listview}
@@ -197,14 +186,15 @@ class ListViewPagingExample extends React.Component {
        scrollRenderAheadDistance={500}
      />
    );
-  }
+  },

-  _onPressHeader = () => {
+  _onPressHeader: function() {
    var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
    LayoutAnimation.configureNext(config);
    this.setState({headerPressCount: this.state.headerPressCount + 1});
-  };
-}
+  },
+
+});

 var styles = StyleSheet.create({
  listview: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -160,13 +153,16 @@ var MapRegionInput = React.createClass({

 });

-class MapViewExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    mapRegion: undefined,
-    mapRegionInput: undefined,
-    annotations: [],
-  };
+var MapViewExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      mapRegion: undefined,
+      mapRegionInput: undefined,
+      annotations: [],
+    };
+  },

  render() {
    return (
@@ -184,23 +180,23 @@ class MapViewExample extends React.Component {
        />
      </View>
    );
-  }
+  },

-  _getAnnotations = (region) => {
+  _getAnnotations(region) {
    return [{
      longitude: region.longitude,
      latitude: region.latitude,
      title: 'You Are Here',
    }];
-  };
+  },

-  _onRegionChange = (region) => {
+  _onRegionChange(region) {
    this.setState({
      mapRegionInput: region,
    });
-  };
+  },

-  _onRegionChangeComplete = (region) => {
+  _onRegionChangeComplete(region) {
    if (this.state.isFirstLoad) {
      this.setState({
        mapRegionInput: region,
@@ -208,23 +204,27 @@ class MapViewExample extends React.Component {
        isFirstLoad: false,
      });
    }
-  };
+  },

-  _onRegionInputChanged = (region) => {
+  _onRegionInputChanged(region) {
    this.setState({
      mapRegion: region,
      mapRegionInput: region,
      annotations: this._getAnnotations(region),
    });
-  };
-}
+  },

-class AnnotationExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    annotations: [],
-    mapRegion: undefined,
-  };
+});
+
+var AnnotationExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },

  render() {
    if (this.state.isFirstLoad) {
@@ -242,61 +242,15 @@ class AnnotationExample extends React.Component {

    return (
      <MapView
-        showsAnnotationCallouts={this.props.showsAnnotationCallouts}
        style={styles.map}
        onRegionChangeComplete={onRegionChangeComplete}
        region={this.state.mapRegion}
        annotations={this.state.annotations}
      />
    );
-  }
-}
+  },

-class DraggableAnnotationExample extends React.Component {
-  state = {
-    isFirstLoad: true,
-    annotations: [],
-    mapRegion: undefined,
-  };
-
-  createAnnotation = (longitude, latitude) => {
-    return {
-      longitude,
-      latitude,
-      draggable: true,
-      onDragStateChange: (event) => {
-        if (event.state === 'idle') {
-          this.setState({
-            annotations: [this.createAnnotation(event.longitude, event.latitude)],
-          });
-        }
-        console.log('Drag state: ' + event.state);
-      },
-    };
-  };
-
-  render() {
-    if (this.state.isFirstLoad) {
-      var onRegionChangeComplete = (region) => {
-        //When the MapView loads for the first time, we can create the annotation at the
-        //region that was loaded.
-        this.setState({
-          isFirstLoad: false,
-          annotations: [this.createAnnotation(region.longitude, region.latitude)],
-        });
-      };
-    }
-
-    return (
-      <MapView
-        style={styles.map}
-        onRegionChangeComplete={onRegionChangeComplete}
-        region={this.state.mapRegion}
-        annotations={this.state.annotations}
-      />
-    );
-  }
-}
+});

 var styles = StyleSheet.create({
  map: {
@@ -367,29 +321,6 @@ exports.examples = [
      }}/>;
    }
  },
-  {
-    title: 'Show callouts by default example',
-    render() {
-      return <AnnotationExample
-        style={styles.map}
-        annotation={{
-          title: 'More Info...',
-          rightCalloutView: (
-            <TouchableOpacity
-              onPress={() => {
-                alert('You Are Here');
-              }}>
-              <Image
-                style={{width:30, height:30}}
-                source={require('./uie_thumb_selected.png')}
-              />
-            </TouchableOpacity>
-          ),
-        }}
-        showsAnnotationCallouts={true}
-      />;
-    }
-  },
  {
    title: 'Annotation focus example',
    render() {
@@ -407,7 +338,12 @@ exports.examples = [
  {
    title: 'Draggable pin',
    render() {
-      return <DraggableAnnotationExample/>;
+      return <AnnotationExample style={styles.map} annotation={{
+        draggable: true,
+        onDragStateChange: (event) => {
+          console.log('Drag state: ' + event.state);
+        },
+      }}/>;
    }
  },
  {
@@ -424,7 +360,7 @@ exports.examples = [
    render() {
      return <AnnotationExample style={styles.map} annotation={{
        title: 'Thumbs Up!',
-        image: require('./uie_thumb_big.png'),
+        image: require('image!uie_thumb_big'),
      }}/>;
    }
  },
@@ -441,7 +377,7 @@ exports.examples = [
          </Text>
          <Image
            style={{width: 90, height: 65, resizeMode: 'cover'}}
-            source={require('./uie_thumb_big.png')}
+            source={require('image!uie_thumb_big')}
          />
        </View>,
      }}/>;
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -26,7 +19,6 @@ var React = require('react');
 var ReactNative = require('react-native');
 var {
  Modal,
-  Picker,
  StyleSheet,
  Switch,
  Text,
@@ -34,25 +26,25 @@ var {
  View,
 } = ReactNative;

-const Item = Picker.Item;
-
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';

-class Button extends React.Component {
-  state = {
-    active: false,
-  };
+var Button = React.createClass({
+  getInitialState() {
+    return {
+      active: false,
+    };
+  },

-  _onHighlight = () => {
+  _onHighlight() {
    this.setState({active: true});
-  };
+  },

-  _onUnhighlight = () => {
+  _onUnhighlight() {
    this.setState({active: false});
-  };
+  },

  render() {
    var colorStyle = {
@@ -69,37 +61,28 @@ class Button extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

-const supportedOrientationsPickerValues = [
-  ['portrait'],
-  ['landscape'],
-  ['landscape-left'],
-  ['portrait', 'landscape-right'],
-  ['portrait', 'landscape'],
-  [],
-];
+var ModalExample = React.createClass({
+  getInitialState() {
+    return {
+      animationType: 'none',
+      modalVisible: false,
+      transparent: false,
+    };
+  },

-class ModalExample extends React.Component {
-  state = {
-    animationType: 'none',
-    modalVisible: false,
-    transparent: false,
-    selectedSupportedOrientation: 0,
-    currentOrientation: 'unknown',
-  };
-
-  _setModalVisible = (visible) => {
+  _setModalVisible(visible) {
    this.setState({modalVisible: visible});
-  };
+  },

-  _setAnimationType = (type) => {
+  _setAnimationType(type) {
    this.setState({animationType: type});
-  };
+  },

-  _toggleTransparent = () => {
+  _toggleTransparent() {
    this.setState({transparent: !this.state.transparent});
-  };
+  },

  render() {
    var modalBackgroundStyle = {
@@ -118,14 +101,11 @@ class ModalExample extends React.Component {
          animationType={this.state.animationType}
          transparent={this.state.transparent}
          visible={this.state.modalVisible}
-          onRequestClose={() => this._setModalVisible(false)}
-          supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]}
-          onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})}
+          onRequestClose={() => {this._setModalVisible(false)}}
          >
          <View style={[styles.container, modalBackgroundStyle]}>
            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
              <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text>
-              <Text>It is currently displayed in {this.state.currentOrientation} mode.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
@@ -152,29 +132,13 @@ class ModalExample extends React.Component {
          <Switch value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

-        <View>
-          <Text style={styles.rowTitle}>Supported orientations</Text>
-          <Picker
-            selectedValue={this.state.selectedSupportedOrientation}
-            onValueChange={(_, i) => this.setState({selectedSupportedOrientation: i})}
-            itemStyle={styles.pickerItem}
-            >
-            <Item label="Portrait" value={0} />
-            <Item label="Landscape" value={1} />
-            <Item label="Landscape left" value={2} />
-            <Item label="Portrait and landscape right" value={3} />
-            <Item label="Portrait and landscape" value={4} />
-            <Item label="Default supportedOrientations" value={5} />
-          </Picker>
-        </View>
-
        <Button onPress={this._setModalVisible.bind(this, true)}>
          Present
        </Button>
      </View>
    );
-  }
-}
+  },
+});

 exports.examples = [
  {
@@ -206,7 +170,7 @@ var styles = StyleSheet.create({
  },
  button: {
    borderRadius: 5,
-    flexGrow: 1,
+    flex: 1,
    height: 44,
    alignSelf: 'stretch',
    justifyContent: 'center',
@@ -220,7 +184,4 @@ var styles = StyleSheet.create({
  modalButton: {
    marginTop: 10,
  },
-  pickerItem: {
-    fontSize: 16,
-  },
 });
@@ -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;
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -30,8 +23,8 @@ var {
  TouchableHighlight,
 } = ReactNative;

-class NavigationExampleRow extends React.Component {
-  render() {
+var NavigationExampleRow = React.createClass({
+  render: function() {
    if (this.props.onPress) {
      return (
        <TouchableHighlight
@@ -51,8 +44,8 @@ class NavigationExampleRow extends React.Component {
        </Text>
      </View>
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  row: {
@@ -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;
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -20,36 +13,44 @@
 */
 'use strict';

-const AsyncStorage = require('AsyncStorage');
-const NavigationExampleRow = require('./NavigationExampleRow');
-const React = require('react');
-const ScrollView = require('ScrollView');
-const StyleSheet = require('StyleSheet');
-const View = require('View');
+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:
 */
-const EXAMPLES = {
-  'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
-  'CardStack Example': require('./NavigationCardStack-example'),
-  'CardStack Without Gestures Example': require('./NavigationCardStack-NoGesture-example'),
-  'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'),
-  'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'),
+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'),
 };

-const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
+var EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';

-class NavigationExperimentalExample extends React.Component {
-  static title = 'Navigation (Experimental)';
-  static description = 'Upcoming navigation APIs and animated navigation views';
-  static external = true;
+var NavigationExperimentalExample = React.createClass({
+  statics: {
+    title: 'Navigation (Experimental)',
+    description: 'Upcoming navigation APIs and animated navigation views',
+    external: true,
+  },

-  state = {
-    example: null,
-  };
+  getInitialState: function() {
+    return {
+      example: null,
+    };
+  },

  componentDidMount() {
    AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
@@ -63,17 +64,17 @@ class NavigationExperimentalExample extends React.Component {
        example,
      });
    });
-  }
+  },

-  setExample = (example) => {
+  setExample: function(example) {
    this.setState({
      example,
    });
    AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
-  };
+  },

-  _renderMenu = () => {
-    let exitRow = null;
+  _renderMenu: function() {
+    var exitRow = null;
    if (this.props.onExampleExit) {
      exitRow = (
        <NavigationExampleRow
@@ -90,9 +91,9 @@ class NavigationExperimentalExample extends React.Component {
        </ScrollView>
      </View>
    );
-  };
+  },

-  _renderExampleList = () => {
+  _renderExampleList: function() {
    return Object.keys(EXAMPLES).map(exampleName => (
      <NavigationExampleRow
        key={exampleName}
@@ -102,13 +103,13 @@ class NavigationExperimentalExample extends React.Component {
        }}
      />
    ));
-  };
+  },

-  _exitInnerExample = () => {
+  _exitInnerExample: function() {
    this.setExample('menu');
-  };
+  },

-  handleBackAction = () => {
+  handleBackAction: function() {
    const wasHandledByExample = (
      this.exampleRef &&
      this.exampleRef.handleBackAction &&
@@ -122,14 +123,14 @@ class NavigationExperimentalExample extends React.Component {
      return true;
    }
    return false;
-  };
+  },

-  render() {
+  render: function() {
    if (this.state.example === 'menu') {
      return this._renderMenu();
    }
    if (EXAMPLES[this.state.example]) {
-      const Component = EXAMPLES[this.state.example];
+      var Component = EXAMPLES[this.state.example];
      return (
        <Component
          onExampleExit={this._exitInnerExample}
@@ -138,8 +139,8 @@ class NavigationExperimentalExample extends React.Component {
      );
    }
    return null;
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  menu: {
@@ -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;
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -50,8 +43,9 @@ class NavButton extends React.Component {
  }
 }

-class BreadcrumbNavSample extends React.Component {
-  componentWillMount() {
+var BreadcrumbNavSample = React.createClass({
+
+  componentWillMount: function() {
    this._navBarRouteMapper = {
      rightContentForRoute: function(route, navigator) {
        return null;
@@ -81,9 +75,9 @@ class BreadcrumbNavSample extends React.Component {
        );
      }
    };
-  }
+  },

-  _renderScene = (route, navigator) => {
+  _renderScene: function(route, navigator) {
    return (
      <ScrollView style={styles.scene}>
        <NavButton
@@ -108,9 +102,9 @@ class BreadcrumbNavSample extends React.Component {
        />
      </ScrollView>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        style={styles.container}
@@ -123,8 +117,11 @@ class BreadcrumbNavSample extends React.Component {
        }
      />
    );
-  }
-}
+  },
+
+
+
+});

 var styles = StyleSheet.create({
  scene: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -22,8 +15,6 @@

 var React = require('react');
 var ReactNative = require('react-native');
-
-var nativeImageSource = require('nativeImageSource');
 var {
  Navigator,
  StyleSheet,
@@ -76,11 +67,7 @@ class JumpingNavBar extends React.Component {
      <View style={styles.tabs}>
        <TabBarIOS>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_notification',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_notification')}
            selected={this.state.tabIndex === 0}
            onPress={() => {
              this.props.onTabIndex(0);
@@ -89,11 +76,7 @@ class JumpingNavBar extends React.Component {
            <View />
          </TabBarIOS.Item>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_list',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_list')}
            selected={this.state.tabIndex === 1}
            onPress={() => {
              this.props.onTabIndex(1);
@@ -102,11 +85,7 @@ class JumpingNavBar extends React.Component {
            <View />
          </TabBarIOS.Item>
          <TabBarIOS.Item
-            icon={nativeImageSource({
-              ios: 'tabnav_settings',
-              width: 24,
-              height: 24
-            })}
+            icon={require('image!tabnav_settings')}
            selected={this.state.tabIndex === 2}
            onPress={() => {
              this.props.onTabIndex(2);
@@ -120,8 +99,8 @@ class JumpingNavBar extends React.Component {
  }
 }

-class JumpingNavSample extends React.Component {
-  render() {
+var JumpingNavSample = React.createClass({
+  render: function() {
    return (
      <Navigator
        debugOverlay={false}
@@ -147,9 +126,9 @@ class JumpingNavSample extends React.Component {
        }
      />
    );
-  }
+  },

-  renderScene = (route, navigator) => {
+  renderScene: function(route, navigator) {
    var backBtn;
    var forwardBtn;
    if (ROUTE_STACK.indexOf(route) !== 0) {
@@ -199,8 +178,8 @@ class JumpingNavSample extends React.Component {
        />
      </ScrollView>
    );
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  button: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -92,8 +85,9 @@ function newRandomRoute() {
  };
 }

-class NavigationBarSample extends React.Component {
-  componentWillMount() {
+var NavigationBarSample = React.createClass({
+
+  componentWillMount: function() {
    var navigator = this.props.navigator;

    var callback = (event) => {
@@ -112,13 +106,13 @@ class NavigationBarSample extends React.Component {
      navigator.navigationContext.addListener('willfocus', callback),
      navigator.navigationContext.addListener('didfocus', callback),
    ];
-  }
+  },

-  componentWillUnmount() {
+  componentWillUnmount: function() {
    this._listeners && this._listeners.forEach(listener => listener.remove());
-  }
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        debugOverlay={false}
@@ -153,8 +147,9 @@ class NavigationBarSample extends React.Component {
        }
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -112,11 +105,14 @@ class NavMenu extends React.Component {
  }
 }

-class TabBarExample extends React.Component {
-  static title = '<Navigator>';
-  static description = 'JS-implemented navigation';
+var TabBarExample = React.createClass({

-  renderScene = (route, nav) => {
+  statics: {
+    title: '<Navigator>',
+    description: 'JS-implemented navigation',
+  },
+
+  renderScene: function(route, nav) {
    switch (route.id) {
      case 'navbar':
        return <NavigationBarSample navigator={nav} />;
@@ -133,9 +129,9 @@ class TabBarExample extends React.Component {
          />
        );
    }
-  };
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        ref={this._setNavigatorRef}
@@ -150,13 +146,14 @@ class TabBarExample extends React.Component {
        }}
      />
    );
-  }
+  },

-  componentWillUnmount() {
+
+  componentWillUnmount: function() {
    this._listeners && this._listeners.forEach(listener => listener.remove());
-  }
+  },

-  _setNavigatorRef = (navigator) => {
+  _setNavigatorRef: function(navigator) {
    if (navigator !== this._navigator) {
      this._navigator = navigator;

@@ -178,8 +175,8 @@ class TabBarExample extends React.Component {
        ];
      }
    }
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -30,8 +23,9 @@ var {
  View
 } = ReactNative;

-class EmptyPage extends React.Component {
-  render() {
+var EmptyPage = React.createClass({
+
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -39,14 +33,18 @@ class EmptyPage extends React.Component {
        </Text>
      </View>
    );
-  }
-}
+  },

-class NavigatorIOSColors extends React.Component {
-  static title = '<NavigatorIOS> - Custom';
-  static description = 'iOS navigation with custom nav bar colors';
+});

-  render() {
+var NavigatorIOSColors = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS> - Custom',
+    description: 'iOS navigation with custom nav bar colors',
+  },
+
+  render: function() {
    // Set StatusBar with light contents to get better contrast
    StatusBar.setBarStyle('light-content');

@@ -72,8 +70,9 @@ class NavigatorIOSColors extends React.Component {
        translucent={true}
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  container: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -25,9 +18,7 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const ViewExample = require('./ViewExample');
-
 const createExamplePage = require('./createExamplePage');
-const nativeImageSource = require('nativeImageSource');
 const {
  AlertIOS,
  NavigatorIOS,
@@ -38,8 +29,8 @@ const {
  View,
 } = ReactNative;

-class EmptyPage extends React.Component {
-  render() {
+const EmptyPage = React.createClass({
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -47,11 +38,11 @@ class EmptyPage extends React.Component {
        </Text>
      </View>
    );
-  }
-}
+  },
+});

-class NavigatorIOSExamplePage extends React.Component {
-  render() {
+const NavigatorIOSExamplePage = React.createClass({
+  render: function() {
    var recurseTitle = 'Recurse Navigation';
    if (!this.props.depth || this.props.depth === 1) {
      recurseTitle += ' - more examples here';
@@ -74,13 +65,6 @@ class NavigatorIOSExamplePage extends React.Component {
              component: createExamplePage(null, ViewExample),
            });
          })}
-          {this._renderRow('Custom title image Example', () => {
-            this.props.navigator.push({
-              title: 'Custom title image Example',
-              titleImage: require('./relay.png'),
-              component: createExamplePage(null, ViewExample),
-            });
-          })}
          {this._renderRow('Custom Right Button', () => {
            this.props.navigator.push({
              title: NavigatorIOSExample.title,
@@ -92,52 +76,13 @@ class NavigatorIOSExamplePage extends React.Component {
              }
            });
          })}
-          {this._renderRow('Custom Right System Button', () => {
-            this.props.navigator.push({
-              title: NavigatorIOSExample.title,
-              component: EmptyPage,
-              rightButtonSystemIcon: 'bookmarks',
-              onRightButtonPress: () => this.props.navigator.pop(),
-              passProps: {
-                text: 'This page has a right system button in the nav bar',
-              }
-            });
-          })}
          {this._renderRow('Custom Left & Right Icons', () => {
            this.props.navigator.push({
              title: NavigatorIOSExample.title,
              component: EmptyPage,
              leftButtonTitle: 'Custom Left',
              onLeftButtonPress: () => this.props.navigator.pop(),
-              rightButtonIcon: nativeImageSource({
-                ios: 'NavBarButtonPlus',
-                width: 17,
-                height: 17
-              }),
-              onRightButtonPress: () => {
-                AlertIOS.alert(
-                  'Bar Button Action',
-                  'Recognized a tap on the bar button icon',
-                  [
-                    {
-                      text: 'OK',
-                      onPress: () => console.log('Tapped OK'),
-                    },
-                  ]
-                );
-              },
-              passProps: {
-                text: 'This page has an icon for the right button in the nav bar',
-              }
-            });
-          })}
-          {this._renderRow('Custom Left & Right System Icons', () => {
-            this.props.navigator.push({
-              title: NavigatorIOSExample.title,
-              component: EmptyPage,
-              leftButtonSystemIcon: 'cancel',
-              onLeftButtonPress: () => this.props.navigator.pop(),
-              rightButtonSystemIcon: 'search',
+              rightButtonIcon: require('image!NavBarButtonPlus'),
              onRightButtonPress: () => {
                AlertIOS.alert(
                  'Bar Button Action',
@@ -169,9 +114,9 @@ class NavigatorIOSExamplePage extends React.Component {
        <View style={styles.line}/>
      </ScrollView>
    );
-  }
+  },

-  _renderReplace = () => {
+  _renderReplace: function() {
    if (!this.props.depth) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -189,9 +134,9 @@ class NavigatorIOSExamplePage extends React.Component {
        }
      });
    });
-  };
+  },

-  _renderReplacePrevious = () => {
+  _renderReplacePrevious: function() {
    if (!this.props.depth || this.props.depth < 2) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -206,9 +151,9 @@ class NavigatorIOSExamplePage extends React.Component {
        wrapperStyle: styles.customWrapperStyle,
      });
    });
-  };
+  },

-  _renderReplacePreviousAndPop = () => {
+  _renderReplacePreviousAndPop: function() {
    if (!this.props.depth || this.props.depth < 2) {
      // this is to avoid replacing the top of the stack
      return null;
@@ -223,9 +168,9 @@ class NavigatorIOSExamplePage extends React.Component {
        wrapperStyle: styles.customWrapperStyle,
      });
    });
-  };
+  },

-  _renderRow = (title: string, onPress: Function) => {
+  _renderRow: function(title: string, onPress: Function) {
    return (
      <View>
        <TouchableHighlight onPress={onPress}>
@@ -238,15 +183,17 @@ class NavigatorIOSExamplePage extends React.Component {
        <View style={styles.separator} />
      </View>
    );
-  };
-}
+  },
+});

-class NavigatorIOSExample extends React.Component {
-  static title = '<NavigatorIOS>';
-  static description = 'iOS navigation capabilities';
-  static external = true;
+const NavigatorIOSExample = React.createClass({
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+    external: true,
+  },

-  render() {
+  render: function() {
    const {onExampleExit} = this.props;
    return (
      <NavigatorIOS
@@ -256,11 +203,12 @@ class NavigatorIOSExample extends React.Component {
          component: NavigatorIOSExamplePage,
          passProps: {onExampleExit},
        }}
+        itemWrapperStyle={styles.itemWrapper}
        tintColor="#008888"
      />
    );
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  container: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -31,33 +24,31 @@ const {
  TouchableWithoutFeedback,
 } = ReactNative;

-class ConnectionInfoSubscription extends React.Component {
-  state = {
-    connectionInfoHistory: [],
-  };
-
-  componentDidMount() {
+const ConnectionInfoSubscription = React.createClass({
+  getInitialState() {
+    return {
+      connectionInfoHistory: [],
+    };
+  },
+  componentDidMount: function() {
    NetInfo.addEventListener(
        'change',
        this._handleConnectionInfoChange
    );
-  }
-
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function() {
    NetInfo.removeEventListener(
        'change',
        this._handleConnectionInfoChange
    );
-  }
-
-  _handleConnectionInfoChange = (connectionInfo) => {
+  },
+  _handleConnectionInfoChange: function(connectionInfo) {
    const connectionInfoHistory = this.state.connectionInfoHistory.slice();
    connectionInfoHistory.push(connectionInfo);
    this.setState({
      connectionInfoHistory,
    });
-  };
-
+  },
  render() {
    return (
        <View>
@@ -65,14 +56,15 @@ class ConnectionInfoSubscription extends React.Component {
        </View>
    );
  }
-}
+});

-class ConnectionInfoCurrent extends React.Component {
-  state = {
-    connectionInfo: null,
-  };
-
-  componentDidMount() {
+const ConnectionInfoCurrent = React.createClass({
+  getInitialState() {
+    return {
+      connectionInfo: null,
+    };
+  },
+  componentDidMount: function() {
    NetInfo.addEventListener(
        'change',
        this._handleConnectionInfoChange
@@ -80,21 +72,18 @@ class ConnectionInfoCurrent extends React.Component {
    NetInfo.fetch().done(
        (connectionInfo) => { this.setState({connectionInfo}); }
    );
-  }
-
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function() {
    NetInfo.removeEventListener(
        'change',
        this._handleConnectionInfoChange
    );
-  }
-
-  _handleConnectionInfoChange = (connectionInfo) => {
+  },
+  _handleConnectionInfoChange: function(connectionInfo) {
    this.setState({
      connectionInfo,
    });
-  };
-
+  },
  render() {
    return (
        <View>
@@ -102,14 +91,15 @@ class ConnectionInfoCurrent extends React.Component {
        </View>
    );
  }
-}
+});

-class IsConnected extends React.Component {
-  state = {
-    isConnected: null,
-  };
-
-  componentDidMount() {
+const IsConnected = React.createClass({
+  getInitialState() {
+    return {
+      isConnected: null,
+    };
+  },
+  componentDidMount: function() {
    NetInfo.isConnected.addEventListener(
        'change',
        this._handleConnectivityChange
@@ -117,21 +107,18 @@ class IsConnected extends React.Component {
    NetInfo.isConnected.fetch().done(
        (isConnected) => { this.setState({isConnected}); }
    );
-  }
-
-  componentWillUnmount() {
+  },
+  componentWillUnmount: function() {
    NetInfo.isConnected.removeEventListener(
        'change',
        this._handleConnectivityChange
    );
-  }
-
-  _handleConnectivityChange = (isConnected) => {
+  },
+  _handleConnectivityChange: function(isConnected) {
    this.setState({
      isConnected,
    });
-  };
-
+  },
  render() {
    return (
        <View>
@@ -139,19 +126,19 @@ class IsConnected extends React.Component {
        </View>
    );
  }
-}
+});

-class IsConnectionExpensive extends React.Component {
-  state = {
-    isConnectionExpensive: (null : ?boolean),
-  };
-
-  _checkIfExpensive = () => {
+const IsConnectionExpensive = React.createClass({
+  getInitialState() {
+    return {
+      isConnectionExpensive: (null : ?boolean),
+    };
+  },
+  _checkIfExpensive() {
    NetInfo.isConnectionExpensive().then(
        isConnectionExpensive => { this.setState({isConnectionExpensive}); }
    );
-  };
-
+  },
  render() {
    return (
        <View>
@@ -167,7 +154,7 @@ class IsConnectionExpensive extends React.Component {
        </View>
    );
  }
-}
+});

 exports.title = 'NetInfo';
 exports.description = 'Monitor network status';
@@ -175,22 +162,22 @@ exports.examples = [
  {
    title: 'NetInfo.isConnected',
    description: 'Asynchronously load and observe connectivity',
-    render(): React.Element<any> { return <IsConnected />; }
+    render(): ReactElement { return <IsConnected />; }
  },
  {
    title: 'NetInfo.update',
    description: 'Asynchronously load and observe connectionInfo',
-    render(): React.Element<any> { return <ConnectionInfoCurrent />; }
+    render(): ReactElement { return <ConnectionInfoCurrent />; }
  },
  {
    title: 'NetInfo.updateHistory',
    description: 'Observed updates to connectionInfo',
-    render(): React.Element<any> { return <ConnectionInfoSubscription />; }
+    render(): ReactElement { return <ConnectionInfoSubscription />; }
  },
  {
    platform: 'android',
    title: 'NetInfo.isConnectionExpensive (Android)',
    description: 'Asynchronously check isConnectionExpensive',
-    render(): React.Element<any> { return <IsConnectionExpensive />; }
+    render(): ReactElement { return <IsConnectionExpensive />; }
  },
 ];
@@ -28,6 +28,7 @@ var {
  PanResponder,
  StyleSheet,
  View,
+  processColor,
 } = ReactNative;

 var CIRCLE_SIZE = 80;
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -31,23 +24,28 @@ const UIExplorerPage = require('UIExplorerPage');
 const {
  Picker,
  Text,
+  TouchableWithoutFeedback,
 } = ReactNative;
-
 const Item = Picker.Item;

-class PickerExample extends React.Component {
-  static title = '<Picker>';
-  static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
+const PickerExample = React.createClass({

-  state = {
-    selected1: 'key1',
-    selected2: 'key1',
-    selected3: 'key1',
-    color: 'red',
-    mode: Picker.MODE_DIALOG,
-  };
+  statics: {
+    title: '<Picker>',
+    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+  },

-  render() {
+  getInitialState: function() {
+    return {
+      selected1: 'key1',
+      selected2: 'key1',
+      selected3: 'key1',
+      color: 'red',
+      mode: Picker.MODE_DIALOG,
+    };
+  },
+
+  render: function() {
    return (
      <UIExplorerPage title="<Picker>">
        <UIExplorerBlock title="Basic Picker">
@@ -116,21 +114,21 @@ class PickerExample extends React.Component {
        </UIExplorerBlock>
      </UIExplorerPage>
    );
-  }
+  },

-  changeMode = () => {
+  changeMode: function() {
    const newMode = this.state.mode === Picker.MODE_DIALOG
        ? Picker.MODE_DROPDOWN
        : Picker.MODE_DIALOG;
    this.setState({mode: newMode});
-  };
+  },

-  onValueChange = (key: string, value: string) => {
+  onValueChange: function(key: string, value: string) {
    const newState = {};
    newState[key] = value;
    this.setState(newState);
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  picker: {
@@ -1,11 +1,4 @@
 /**
- * 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.
 *
@@ -73,13 +66,15 @@ var CAR_MAKES_AND_MODELS = {
  },
 };

-class PickerExample extends React.Component {
-  state = {
-    carMake: 'cadillac',
-    modelIndex: 3,
-  };
+var PickerExample = React.createClass({
+  getInitialState: function() {
+    return {
+      carMake: 'cadillac',
+      modelIndex: 3,
+    };
+  },

-  render() {
+  render: function() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
@@ -112,16 +107,20 @@ class PickerExample extends React.Component {
        <Text>You selected: {selectionString}</Text>
      </View>
    );
-  }
-}
+  },
+});

-class PickerStyleExample extends React.Component {
-  state = {
-    carMake: 'cadillac',
-    modelIndex: 0,
-  };
+var PickerStyleExample = React.createClass({
+  getInitialState: function() {
+    return {
+      carMake: 'cadillac',
+      modelIndex: 0,
+    };
+  },

-  render() {
+  render: function() {
+    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
+    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
      <PickerIOS
        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
@@ -136,8 +135,8 @@ class PickerStyleExample extends React.Component {
        ))}
      </PickerIOS>
    );
-  }
-}
+  },
+});

 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';
@@ -145,13 +144,13 @@ exports.description = 'Render lists of selectable options with UIPickerView.';
 exports.examples = [
 {
  title: '<PickerIOS>',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement {
    return <PickerExample />;
  },
 },
 {
  title: '<PickerIOS> with custom styling',
-  render: function(): React.Element<any> {
+  render: function(): ReactElement {
    return <PickerStyleExample />;
  },
 }];
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Konstantin Raev	2efd99ab64	[0.26.3] Bump version numbers	2016-06-01 18:55:55 +02:00
Konstantin Raev	f9fff0e26a	Made react installed via reac-native init strict to unbreak 15.1.0	2016-06-01 18:55:44 +02:00
Martin Konicek	23b1ed4570	[0.26.2] Bump version numbers	2016-05-24 16:31:47 +01:00
David Aurelio	17026c3728	Respect original enumerability/writability when polyfilling globals Summary: Reuses the original property descriptor when overwriting / polyfilling globals to ensure enumerability and writability are the same Closes https://github.com/facebook/react-native/pull/7704 Differential Revision: D3338119 Pulled By: davidaurelio fbshipit-source-id: ab456324a3346cd3ec8b2c3e3a2378408c92087c	2016-05-24 16:30:59 +01:00
Konstantin Raev	af819a8f8f	Fixed nvm for travis CI Summary: NVM started failing on Travis Closes https://github.com/facebook/react-native/pull/7411 Differential Revision: D3265199 fb-gh-sync-id: 6c80210cafb0ec6510073ce913a36eb7edcac2c6 fbshipit-source-id: 6c80210cafb0ec6510073ce913a36eb7edcac2c6	2016-05-23 12:25:23 +01:00
Mike Grabowski	8714c9bc9e	[0.26.1] Bump version numbers	2016-05-22 00:58:37 +02:00
Martín Bigio	01d6dd5033	Avoid clearing out factory on DEV mode Summary: grabbou pointed out this issue. We recently started cleaning out the factory function after module are required to save some memory. This broke HMR on some edge cases because sometimes the factory function may need to be re-executed. This PR just wraps the optimization into `__DEV__` to make sure we don't use it while developing. Closes https://github.com/facebook/react-native/pull/7568 Differential Revision: D3305120 Pulled By: martinbigio fbshipit-source-id: 741cffbb327d118f0bd0ec34dc1af53d4f94880e	2016-05-21 23:30:59 +02:00
Martín Bigio	f5b79fdbf9	Reset hasError flag after HMR request Summary: This got broken recently. As a result of this, when a module throws while being required, either by regular load or hot reload, the module object is marked as `hasError`. Form that point all subsequent HMR updates will fail because it will think the module failed while executing the factory but the failure could have been on an old run of an old factory. The fix is very simple: just reset `hasError` to false when accepting a module. Closes https://github.com/facebook/react-native/pull/7567 Differential Revision: D3310685 fbshipit-source-id: 2f0b48ab7432b7c221d0c88a019a28969a8862b2	2016-05-21 23:30:27 +02:00
Joe Noon	9cc5cf525d	cherry-pick `0e997c6eab`: (#7665 ) fixes a bug where NavigationPropTypes.SceneRenderer was a plain object	2016-05-20 18:08:07 -07:00
Konstantin Raev	7b54b8e06b	[0.26.0] Bump version numbers	2016-05-18 23:15:38 +01:00
Konstantin Raev	65259d1c4f	Made npm deployment to be independent of git tags cache Current implementation of publish-npm script is not flexible in CircleCI because it does not update local tags. This script fetches tags from origin allowing to republish tags e.g. v0.26.0 even if Circle cached it from another build.	2016-05-18 23:14:29 +01:00
Konstantin Raev	34c034298d	[0.26.1] Bump version numbers	2016-05-18 21:09:01 +01:00
Konstantin Raev	08f6b2e549	disabled more flow	2016-05-18 20:20:54 +01:00
Konstantin Raev	673b4609f3	disabled flow check in e2e because it started to crash in CI	2016-05-18 19:53:53 +01:00
Mike Grabowski	72220a33d3	[0.26.0] Bump version numbers	2016-05-18 18:08:32 +02:00
Mike Grabowski	01c506f132	Update upgrade command with 0.26 breaking changes Summary: Generally it feels that at some point we will just integrate `rnpm upgrade` directly here, but this is a super temporary quick workaround for the people upgrading to 0.26. We might want to change it later to 0.27 and update this message in case we have any other stuff to upgrade. ![screen shot 2016-05-18 at 14 28 47](https://cloud.githubusercontent.com/assets/2464966/15358460/df3b1b66-1d04-11e6-825c-fa18fa96ee6e.png) It is supposed to work for 0.26.0, 0.26.1 and all the others up to 0.27. Closes https://github.com/facebook/react-native/pull/7614 Differential Revision: D3316420 fbshipit-source-id: 3861b4228ee878464e18ba3de1f3e0c12d5f30d1	2016-05-18 18:08:11 +02:00
Mike Grabowski	b47831d2db	Merge branch '0.26-stable' of github.com:facebook/react-native into 0.26-stable	2016-05-18 13:37:43 +02:00
Nick Lockwood	5a6863e2e6	Added explicit init to observer modules Summary: Modules which call JS methods directly, or use `sendDeviceEventWithName:`, can trigger effects in JS without ever being referenced from the JS code. This breaks some assumptions in my earlier diff about when modules can be lazily loaded. Pending a better solution, I've put explicit `init` methods in these modules to ensure they are eagerly initialized (the downside to this is that they'll still be initialized even if they are never used). Reviewed By: javache Differential Revision: D3258232 fb-gh-sync-id: f925bc2e5339c1fbfcc244d4613062c5ab848fc2 fbshipit-source-id: f925bc2e5339c1fbfcc244d4613062c5ab848fc2	2016-05-18 12:56:19 +02:00
Andy Street	791434ae84	Update "This shouldn't be possible. Congratulations." error message Summary: Apparently this is possible. Congratulations to me. Reviewed By: nicklockwood Differential Revision: D3281361 fbshipit-source-id: 53c6ab83d959aa8a77880f4f772a7a7d7ccf4950	2016-05-18 12:56:08 +02:00
Ben Alpert	ce7b1aabb4	Fix Android picker controlling Reviewed By: mkonicek Differential Revision: D3261602 fb-gh-sync-id: da67d28420c5d855d672b481deeb92fa8b5d017c fbshipit-source-id: da67d28420c5d855d672b481deeb92fa8b5d017c	2016-05-18 12:55:56 +02:00
Christine Abernathy	2a236534cd	Display platform-specific examples Summary: Rebased https://github.com/facebook/react-native/pull/7048 Sending a new PR to check that tests pass. After adding simulator examples, it appears that some don't show up, ex: http://facebook.github.io/react-native/docs/text.html#content This is due to the fact that these examples are split into two platform-specific files. For this reason, the example code isn't being shown. The examples are also missing for TextInput. Test plan `cd website; npm install; npm start` ![screen shot 2016-05-05 at 12 25 41 pm](https://cloud.githubusercontent.com/assets/346214/15042571/08ee77e8-12bd-11e6-98a6-967dc5fefa07.png) ![screen shot 2016-05-05 at 12 25 20 pm](https://cloud.githubusercontent.com/assets/346214/15042573/119778f4-12bd-11e6-8cdd-fbf217223d45.png) ![screen shot 2016-05-05 at 12 25 35 pm](https://cloud.githubusercontent.com/assets/346214/15042570/071ae992-12bd-11e6-9cf6-5aaba5e7fa17.png) Closes https://github.com/facebook/react-native/pull/7406 Differential Revision: D3264567 Pulled By: mkonicek fb-gh-sync-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1 fbshipit-source-id: cfb73eaed56a7b5c6c84ce313e113393d152e9a1	2016-05-18 12:55:44 +02:00
Christopher Chedeau	99e40b1430	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	2016-05-12 15:44:27 -07:00
Joel Marcey	89a3894928	Revert "Add docs survey link to site header" This reverts commit `8ac9718895`. Didn't work on mobile. Coming up with a better way, anyway.	2016-05-11 21:33:44 -07:00
Joel Marcey	8ac9718895	Add docs survey link to site header Summary: Test plan Tested locally to see link in header bar and that it takes you to survey. ![screenshot 2016-05-11 08 21 11](https://cloud.githubusercontent.com/assets/3757713/15186299/593fd4f6-1751-11e6-847f-ea73ce4e2809.png) Closes https://github.com/facebook/react-native/pull/7514 Differential Revision: D3287859 fbshipit-source-id: 48dfdbae74622330f192d5763c5e47025f1887b1	2016-05-11 12:21:47 -07:00
Joel Marcey	13fb5e830c	Getting Started Cleanup Summary: 1. Remove note about upgrading Homebrew packages. That was kind of noisy. 2. Use local images instead of those stored on Akamai. 3. Add wording for modifying test project about actually opening a file. 4. Add note about keeping initial defaults for Android Studio install in tact. Tested site locally. Images and new wording appeared as expected. Closes https://github.com/facebook/react-native/pull/7477 Reviewed By: vjeux Differential Revision: D3281639 Pulled By: JoelMarcey fbshipit-source-id: ca956d97293ac3793431cb54f3560ee3e52c0dce	2016-05-10 12:50:07 -07:00
Nurym Kudaibergen	0bc5ed2650	Updated Babel supported transformations link Summary: Thanks for submitting a pull request! Please provide enough information so that others can review your pull request: (You can skip this if you're fixing a typo or adding an app to the Showcase.) Explain the motivation for making this change. What existing problem does the pull request solve? Prefer small pull requests. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. Test plan (required) Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. Make sure tests pass on both Travis and Circle CI. Code formatting Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/mas Closes https://github.com/facebook/react-native/pull/7485 Differential Revision: D3281418 Pulled By: vjeux fbshipit-source-id: 287b66f1ed9690bf488cf646f8eaf02e2956caa5	2016-05-10 12:50:01 -07:00
Will Fong	d8ff7f2d8e	Add troubleshooting and modification for linux Summary: Thanks for submitting a pull request! Please provide enough information so that others can review your pull request: (You can skip this if you're fixing a typo or adding an app to the Showcase.) Explain the motivation for making this change. What existing problem does the pull request solve? Prefer small pull requests. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it. Test plan (required) Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. Make sure tests pass on both Travis and Circle CI. Code formatting Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide). For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/mas Closes https://github.com/facebook/react-native/pull/7471 Differential Revision: D3276360 Pulled By: JoelMarcey fb-gh-sync-id: 30edd7086a3c4b88695dc91af76ef56d43306ce9 fbshipit-source-id: 30edd7086a3c4b88695dc91af76ef56d43306ce9	2016-05-10 12:49:56 -07:00
Atif Mansoor	02f7ef0458	Fix bug on GettingStarted.md page when clicking nav buttons in FF Summary: Hi, The [commit](https://github.com/facebook/react-native/commit/156d3ed7a290a7d0576c7e6d2b3fc03681d71ee9?_pjax=%23js-repo-pjax-container) by JoelMarcey is much appreciated. However, when you click on the nav buttons in Firefox (v46.0.1, I'm on El-Capitan), it will switch the content but also navigate you to the React-Native homepage. This doesn't happen in Chrome, so that's how it probably slipped through. I propose these changes to fix that. Test plan Tested locally on FF and Chrome on El-Capitan Closes https://github.com/facebook/react-native/pull/7435 Differential Revision: D3276285 Pulled By: vjeux fb-gh-sync-id: c9a14059e609297fe273d02fe6c0a5f98ec7060c fbshipit-source-id: c9a14059e609297fe273d02fe6c0a5f98ec7060c	2016-05-10 12:49:49 -07:00
Will Fong	874dafcee9	Fix typo (.bash instead of .bashrc) Summary: Closes https://github.com/facebook/react-native/pull/7464 Differential Revision: D3275748 fb-gh-sync-id: a59e6f54425906c4018f122174a86d80afa021eb fbshipit-source-id: a59e6f54425906c4018f122174a86d80afa021eb	2016-05-10 12:49:44 -07:00
MIYOKAWA, Nobuyoshi	17f9d4d246	replace XCode to Xcode. Summary: Fixing very trivial typos. 'XCode' should be 'Xcode'. Closes https://github.com/facebook/react-native/pull/7451 Differential Revision: D3275295 fb-gh-sync-id: 440972364229ca980e5211277baa342a20ac5d94 fbshipit-source-id: 440972364229ca980e5211277baa342a20ac5d94	2016-05-10 12:49:38 -07:00
Joel Marcey	6997817e10	Refactor getting started navigation and information based on platform Summary: This simplifies the Quick Start section of the React Native documentation into two pages. A Getting Started and a Tutorial. The Getting Started page uses some CSS and Javascript magic (thanks vjeux for the initial infra for this!!) to allow selection between platforms and have instructions for Getting Started with React Native be shown according to the selection -- all within the same page, realtime. A much cleaner interface. I have made a pretty large presentation and information overhaul for each platform as well. For example, requiring Android Studio for Android development to make the Android SDK and build tools installation easier. I added more screenshots to the Android sections since they are more complicated than the more straightforward iOS. Screenshots for Android for Windows, Linux and iOS are available now. Some of the other pages such as `GettingStartedOnLinux` are now obsolete and deleted. Test Plan Tested locally and navigation works. Closes https://github.com/facebook/react-native/pull/7418 Differential Revision: D3268621 Pulled By: vjeux fb-gh-sync-id: 65f9181c9f959fadeffd254efddc5b64816eb1f4 fbshipit-source-id: 65f9181c9f959fadeffd254efddc5b64816eb1f4	2016-05-06 07:35:07 -07:00
Mike Grabowski	dd6df71678	[0.26.0-rc] Bump version numbers	2016-05-04 15:07:38 +02:00