[0.23.0-rc2] Bump version numbers

Revert "Android support for perspective transform"
This reverts commit 3e760f48c5.
2025-11-01 09:14:26 +00:00 · 2016-03-31 13:54:00 +01:00 · 2016-03-31 13:08:27 +01:00 · 2016-03-28 09:31:34 -07:00 · 2016-03-24 19:20:37 -07:00 · 2016-03-23 16:44:14 +00:00
2173 changed files with 46118 additions and 118662 deletions
@@ -7,4 +7,3 @@

 [alias]
  movies = //Examples/Movies/android/app:app
-  uiexplorer = //Examples/UIExplorer/android/app:app
@@ -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,28 +1,63 @@
 [ignore]

 # We fork some components by platform.
-.*/*[.]android.js
+.*/*.web.js
+.*/*.android.js

-# Ignore templates with `@flow` in header
-.*/local-cli/generator.*
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*

-# Ignore malformed json
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
+# 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/.*
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
 .*/node_modules/y18n/test/.*\.json
-
-# Ignore the website subdir
-<PROJECT_ROOT>/website/.*
-
-# Ignore BUCK generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-# Ignore unexpected extra @providesModule
-.*/node_modules/commoner/test/source/widget/share.js
-
-# 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
-.*/node_modules/jest-runtime/build/__tests__/.*
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json

 [include]

@@ -36,22 +71,18 @@ module.system=haste
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable

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

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

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|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-2]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-2]\\|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.33.0
+0.22.0
@@ -1,42 +0,0 @@
-## Hey there and thank you for using React Native!
-
-React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. Before opening a new issue, make sure to carefully read the following guidelines.
-
- Is this something you can **debug and fix**? 
-  Send a pull request! Bug fixes and documentation fixes are welcome.
- Have a **usage** question?
-  We use GitHub Issues for bugs. Ask your usage question on Stack Overflow: http://stackoverflow.com/questions/tagged/react-native
- Have an idea for a **feature**? 
-  Post the feature request on Product Pains, which has a voting system to surface important issues: https://productpains.com/product/react-native/
-
-GitHub issues should only be used for bugs. Make sure these boxes are checked before submitting your issue:
-
- [ ] You're using the latest release of React Native: https://github.com/facebook/react-native/releases
-
- [ ] You've searched through existing issues: https://github.com/facebook/react-native/issues 
-      Chances are that your issue has been reported or resolved before.
-
- [ ] You have filled out the template below, or provided an equivalent amount of detail.
-      Issues without sufficient information will be labeled 'Needs more information' and will be closed until there is enough information.
-
-Describe your issue in as much detail as possible. Provide **screenshots** where appropriate. Provide a **minimal code snippet** / [rnplay](https://rnplay.org/) example that reproduces the bug, or include a list of detailed list of steps that reproduce the issue.
-
--- delete everything above this line before submitting your issue --- 
-
-### Issue Description
-
-[FILL THIS OUT]
-
-### Steps to Reproduce / Code Snippets
-
-[FILL THIS OUT]
-
-#### Expected Results
-
-[FILL THIS OUT]
-
-### Additional Information
-
-* React Native version: [FILL THIS OUT]
-* Platform(s) (iOS, Android, or both?): [FILL THIS OUT]
-* Operating System (macOS, Linux, or Windows?): [FILL THIS OUT]
@@ -24,9 +24,6 @@ project.xcworkspace
 # Gradle
 /build/
 /Examples/**/android/app/build/
-/Examples/**/android/app/gradle/
-/Examples/**/android/app/gradlew
-/Examples/**/android/app/gradlew.bat
 /ReactAndroid/build/

 # Buck
@@ -34,7 +31,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 +46,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,32 +1,31 @@
 language: objective-c

-osx_image: xcode8
+osx_image: xcode7.2

 install:
+  - brew reinstall nvm
  - 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.0
  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
  - npm config set spin=false
  - npm config set progress=false
-  - travis_wait npm install
+  - npm install

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

 env:
  matrix:
-    - TEST_TYPE=e2e-objc
    - TEST_TYPE=objc
-    - TEST_TYPE=objc-tvos
    - TEST_TYPE=js
+    - TEST_TYPE=e2e-objc

 branches:
  only:
@@ -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;
@@ -345,10 +267,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -366,10 +285,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -415,7 +331,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 +371,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"
@@ -16,14 +16,13 @@
 */
 'use strict';

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

 var Animated = require('Animated');
 var GameBoard = require('GameBoard');
@@ -15,8 +15,7 @@
 */
 'use strict';

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

 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') {
@@ -45,6 +44,9 @@ class MovieCell extends React.Component {
          onShowUnderlay={this.props.onHighlight}
          onHideUnderlay={this.props.onUnhighlight}>
          <View style={styles.row}>
+            {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
+              * omit a property or set it to undefined if it's inside a shape,
+              * even if it isn't required */}
            <Image
              source={getImageSource(this.props.movie, 'det')}
              style={styles.cellImage}
@@ -66,7 +68,7 @@ class MovieCell extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  textContainer: {
@@ -15,25 +15,27 @@
 */
 'use strict';

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

 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}>
+          {/* $FlowIssue #7363964 - There's a bug in Flow where you cannot
+            * omit a property or set it to undefined if it's inside a shape,
+            * even if it isn't required */}
          <Image
            source={getImageSource(this.props.movie, 'det')}
            style={styles.detailsImage}
@@ -57,11 +59,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 +83,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 +102,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;
@@ -374,10 +357,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
@@ -396,10 +376,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
@@ -446,7 +423,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 +463,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,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"
@@ -16,8 +16,7 @@
 */
 'use strict';

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

 var MovieScreen = require('./MovieScreen');
 var SearchScreen = require('./SearchScreen');
@@ -65,8 +64,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
@@ -77,7 +76,7 @@ class MoviesApp extends React.Component {
      />
    );
  }
-}
+});

 var styles = StyleSheet.create({
  container: {
@@ -16,18 +16,17 @@
 */
 'use strict';

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

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

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

 var styles = StyleSheet.create({
  container: {
@@ -35,21 +35,6 @@ Open the Movies app in your emulator.

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

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

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

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Image,
  Platform,
-  ActivityIndicator,
+  ProgressBarAndroid,
  TextInput,
  StyleSheet,
  TouchableNativeFeedback,
  View,
-} = ReactNative;
+} = React;

 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();
@@ -58,16 +68,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: {
@@ -88,7 +93,6 @@ var styles = StyleSheet.create({
  spinner: {
    width: 30,
    height: 30,
-    marginRight: 16,
  },
  icon: {
    width: 24,
@@ -16,17 +16,16 @@
 */
 'use strict';

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

-class SearchBar extends React.Component {
-  render() {
+var SearchBar = React.createClass({
+  render: function() {
    return (
      <View style={styles.searchBar}>
        <TextInput
@@ -37,14 +36,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: {
@@ -15,16 +15,16 @@
 */
 'use strict';

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

 var invariant = require('fbjs/lib/invariant');
@@ -249,8 +249,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(
@@ -318,8 +325,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 +342,7 @@ class NoMovies extends React.Component {
      </View>
    );
  }
-}
+});

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

-jest.unmock('../getImageSource');
+jest.dontMock('../getImageSource');

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

@@ -13,17 +13,29 @@ android_library(
  name = 'movies-lib',
  srcs = glob(['src/main/java/**/*.java']),
  deps = [
-    ':res',
-    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    react_native_target('java/com/facebook/csslayout:csslayout'),
+    react_native_target('java/com/facebook/react:react'),
+    react_native_target('java/com/facebook/react/devsupport:devsupport'),
    react_native_target('java/com/facebook/react/modules/core:core'),
    react_native_target('java/com/facebook/react/shell:shell'),
-    react_native_target('java/com/facebook/react:react'),
-    react_native_target('jni/prebuilt:android-jsc'),
+    react_native_target('java/com/facebook/react/touch:touch'),
+    react_native_target('java/com/facebook/react/uimanager:uimanager'),
+    react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
+    react_native_target('java/com/facebook/react/views/image:image'),
+    react_native_target('java/com/facebook/react/views/recyclerview:recyclerview'),
+    react_native_target('java/com/facebook/react/views/scroll:scroll'),
+    react_native_target('java/com/facebook/react/views/text:text'),
+    react_native_target('java/com/facebook/react/views/view:view'),
    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
    react_native_target('jni/prebuilt:reactnative-libs'),
+    react_native_target('jni/prebuilt:android-jsc'),
+    react_native_dep('libraries/soloader/java/com/facebook/soloader:soloader'),
+    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    ':res',
  ],
 )

+
 android_resource(
  name = 'res',
  res = 'src/main/res',
@@ -1,18 +1,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.movies"
-    android:versionCode="1"
-    android:versionName="1.0">
+    package="com.facebook.react.movies">

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

-    <uses-sdk
-      android:minSdkVersion="16"
-      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;
-  }
-}
@@ -15,10 +15,10 @@
 */
 'use strict';

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

 var MAX_VALUE = 200;

@@ -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;
@@ -374,10 +327,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -395,10 +345,7 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"-ObjC",
-					"-lc++",
-				);
+				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -444,7 +391,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 +431,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/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"
@@ -16,15 +16,14 @@
 */
 'use strict';

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

 class Board {
  grid: Array<Array<number>>;
@@ -94,8 +93,8 @@ class Board {
  }
 }

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

-  textStyle = () => {
+  textStyle() {
    switch (this.props.player) {
      case 1:
        return styles.cellTextX;
@@ -115,9 +114,9 @@ class Cell extends React.Component {
      default:
        return {};
    }
-  };
+  },

-  textContents = () => {
+  textContents() {
    switch (this.props.player) {
      case 1:
        return 'X';
@@ -126,7 +125,7 @@ class Cell extends React.Component {
      default:
        return '';
    }
-  };
+  },

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

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

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

 var TicTacToeApp = React.createClass({
  getInitialState() {
@@ -272,6 +271,7 @@ var styles = StyleSheet.create({
  // CELL TEXT

  cellText: {
+    borderRadius: 5,
    fontSize: 50,
    fontFamily: 'AvenirNext-Bold',
  },
@@ -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,23 +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 com.facebook.react.ReactActivity;
-
-public class TicTacToeActivity extends ReactActivity {
-  @Override
-  protected String getMainComponentName() {
-    return "TicTacToeApp";
-  }
-}
@@ -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,8 +0,0 @@
-<resources>
-
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <!-- Customize your theme here. -->
-    </style>
-
-</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.
 *
@@ -21,50 +14,54 @@
 */
 'use strict';

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

 var UIExplorerBlock = require('./UIExplorerBlock');
 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 +194,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.
 *
@@ -22,14 +15,13 @@
 */
 'use strict';

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

-class AccessibilityIOSExample extends React.Component {
+var AccessibilityIOSExample = React.createClass({
  render() {
    return (
      <View>
@@ -60,14 +52,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(): ReactElement<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.
 *
@@ -22,15 +15,14 @@
 */
 'use strict';

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

 var BUTTONS = [
  'Option 0',
@@ -42,10 +34,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 +52,9 @@ class ActionSheetExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -69,13 +63,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 +84,9 @@ class ActionSheetTintExample extends React.Component {
        </Text>
      </View>
    );
-  }
+  },

-  showActionSheet = () => {
+  showActionSheet() {
    ActionSheetIOS.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: CANCEL_INDEX,
@@ -100,13 +96,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 +117,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 +138,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 +159,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 +182,8 @@ class ShareScreenshotExample extends React.Component {
        this.setState({text});
      });
    }).catch((error) => alert(error));
-  };
-}
+  }
+});

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

-import React, { Component } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+var React = require('react-native');
+var {
+  ActivityIndicatorIOS,
+  StyleSheet,
+  View,
+} = React;
+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 +91,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 +141,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 +158,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.
 *
@@ -22,14 +15,13 @@
 */
 'use strict';

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

 exports.framework = 'React';
 exports.title = 'Advertising ID';
@@ -38,19 +30,21 @@ exports.description = 'Example of using the ad support API.';
 exports.examples = [
  {
    title: 'Ad Support IOS',
-    render: function(): ReactElement<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 +54,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 +94,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.
 *
@@ -22,15 +15,14 @@

 'use strict';

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

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

@@ -41,8 +33,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 +99,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.
 *
@@ -22,15 +15,14 @@
 */
 'use strict';

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

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

@@ -45,7 +37,7 @@ exports.examples = [{
 },
 {
  title: 'Prompt Options',
-  render(): ReactElement<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.
 *
@@ -22,15 +15,14 @@
 */
 'use strict';

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

 exports.framework = 'React';
@@ -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,15 +16,14 @@
 */
 'use strict';

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

 var AnExSet = require('AnExSet');

@@ -89,7 +81,7 @@ class Circle extends React.Component {
    });
  }

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

-  render(): ReactElement<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 +280,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.
 *
@@ -23,15 +16,14 @@
 */
 'use strict';

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

 var NUM_BOBBLES = 5;
 var RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
@@ -96,7 +88,7 @@ class AnExBobble extends React.Component {
    });
  }

-  render(): ReactElement<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.
 *
@@ -23,15 +16,14 @@
 */
 'use strict';

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

 class AnExChained extends React.Component {
  state: any;
@@ -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,8 +16,7 @@
 */
 'use strict';

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

 class AnExScroll extends React.Component {
  state: any = { scrollX: new Animated.Value(0) };
@@ -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,15 +16,14 @@
 */
 'use strict';

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

 var AnExBobble = require('./AnExBobble');
 var AnExChained = require('./AnExChained');
@@ -52,7 +44,7 @@ class AnExSet extends React.Component {
      openColor: randColor(),
    };
  }
-  render(): ReactElement<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.
 *
@@ -23,15 +16,14 @@
 */
 'use strict';

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

 class AnExTilt extends React.Component {
  state: any;
@@ -97,7 +89,7 @@ class AnExTilt extends React.Component {
    this._startBurnsZoom();
  }

-  render(): ReactElement<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,35 @@
 */
 'use strict';

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

-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 +58,7 @@ class AppStateSubscription extends React.Component {
      </View>
    );
  }
-}
+});

 exports.title = 'AppState';
 exports.description = 'app background status';
@@ -95,16 +71,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(): ReactElement<any> { return <AppStateSubscription showCurrentOnly={true} />; }
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
  },
  {
    title: 'Previous states:',
-    render(): ReactElement<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(): ReactElement<any> { return <AppStateSubscription showMemoryWarnings={true} />; }
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
  },
 ];
@@ -0,0 +1,98 @@
+/**
+ * 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-native');
+var {
+  AppStateIOS,
+  Text,
+  View
+} = React;
+
+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.
 *
@@ -22,19 +15,21 @@
 */
 'use strict';

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

-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 +49,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.
 *
@@ -22,30 +15,24 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  AsyncStorage,
  PickerIOS,
  Text,
  View
-} = ReactNative;
+} = React;
 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 +44,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 +83,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 +93,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(): ReactElement<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.
 *
@@ -20,12 +13,11 @@
 */
 'use strict';

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

 var styles = StyleSheet.create({
  box: {
@@ -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,13 +13,12 @@
 */
 'use strict';

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

 var styles = StyleSheet.create({
  box: {
@@ -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,56 +15,57 @@
 */
 'use strict';

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

 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 +74,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 +90,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 +136,6 @@ exports.description = 'Example component that uses CameraRoll to list user\'s ph
 exports.examples = [
  {
    title: 'Photos',
-    render(): ReactElement<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.
 *
@@ -23,17 +16,16 @@
 */
 'use strict';

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

 var groupByEveryN = require('groupByEveryN');
 var logError = require('logError');
@@ -148,7 +140,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;
    }
@@ -156,8 +148,7 @@ var CameraRollView = React.createClass({
      fetchParams.after = this.state.lastCursor;
    }

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

  /**
@@ -198,7 +189,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.
 *
@@ -22,20 +15,21 @@
 */
 'use strict';

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

-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 +37,7 @@ class ClipboardExample extends React.Component {
    } catch (e) {
      this.setState({content:e.message});
    }
-  };
+  },

  render() {
    return (
@@ -57,7 +51,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.
 *
@@ -20,36 +13,40 @@
 */
 'use strict';

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

 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',
-    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);
+      const {action, year, month, day} = await DatePickerAndroid.open(options);      
      if (action === DatePickerAndroid.dismissedAction) {
        newState[stateKey + 'Text'] = 'dismissed';
      } else {
@@ -61,7 +58,7 @@ class DatePickerAndroidExample extends React.Component {
    } catch ({code, message}) {
      console.warn(`Error in example '${stateKey}': `, message);
    }
-  };
+  },

  render() {
    return (
@@ -108,8 +105,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.
 *
@@ -22,40 +15,43 @@
 */
 'use strict';

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

-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 +95,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 +111,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 +123,7 @@ class Heading extends React.Component {
      </View>
    );
  }
-}
+});

 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';
@@ -135,7 +131,7 @@ exports.description = 'Select dates and times using the native UIDatePicker.';
 exports.examples = [
 {
  title: '<DatePickerIOS>',
-  render: function(): ReactElement<any> {
+  render: function(): ReactElement {
    return <DatePickerExample />;
  },
 }];
@@ -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.
 *
@@ -24,13 +17,12 @@
 'use strict';


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

 exports.framework = 'React';
 exports.title = 'Geolocation';
@@ -39,40 +31,42 @@ exports.description = 'Examples of using the Geolocation API.';
 exports.examples = [
  {
    title: 'navigator.geolocation',
-    render: function(): ReactElement<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 +80,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.
 *
@@ -23,17 +16,16 @@
 */
 'use strict';

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

-class ImageCapInsetsExample extends React.Component {
-  render() {
+var ImageCapInsetsExample = React.createClass({
+  render: function() {
    return (
      <View>
        <View style={styles.background}>
@@ -61,7 +53,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.
 *
@@ -22,8 +16,7 @@
 */
 'use strict';

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

 var PAGE_SIZE = 20;

@@ -237,7 +230,7 @@ class ImageCropper extends React.Component {
    );
    this._minimumZoomScale = Math.max(
      this.props.size.width / this._scaledImageSize.width,
-      this.props.size.height / this._scaledImageSize.height
+      this.props.size.height / this._scaledImageSize.height 
    );
    this._updateTransformData(
      this._contentOffset,
@@ -22,28 +22,23 @@
 */
 'use strict';

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

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

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

 var NetworkImageCallbackExample = React.createClass({
  getInitialState: function() {
    return {
      events: [],
-      startLoadPrefetched: false,
      mountTime: new Date(),
    };
  },
@@ -61,43 +56,10 @@ 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)`);
-            }
-          }}
-          onLoadEnd={() => {
-            this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
-            this.setState({startLoadPrefetched: true}, () => {
-              prefetchTask.then(() => {
-                this._loadEventFired(`✔ Prefetch OK (+${new Date() - mountTime}ms)`);
-              }, error => {
-                this._loadEventFired(`✘ Prefetch failed (+${new Date() - mountTime}ms)`);
-              });
-            });
-          }}
+          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
+          onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)}
        />
-        {this.state.startLoadPrefetched ?
-          <Image
-            source={this.props.prefetchedSource}
-            style={[styles.base, {overflow: 'visible'}]}
-            onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
-            onLoad={(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)`);
-              }
-            }}
-            onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
-          />
-          : null}
+
        <Text style={{marginTop: 20}}>
          {this.state.events.join('\n')}
        </Text>
@@ -124,7 +86,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 +134,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: 'http://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
-              {uri: 'http://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},
-              {uri: 'http://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>';
@@ -267,8 +172,7 @@ exports.examples = [
    title: 'Image Loading Events',
    render: function() {
      return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
-          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
      );
    },
  },
@@ -521,30 +425,16 @@ 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]}>
-                      Center
-                    </Text>
-                    <Image
-                      style={styles.resizeMode}
-                      resizeMode={Image.resizeMode.center}
-                      source={image}
-                    />
-                  </View>
-                : null }
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Center
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.center}
+                    source={image}
+                  />
+                </View>
              </View>
            </View>
          );
@@ -594,57 +484,6 @@ 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={require('image!legacy_image')}
-        />
-      );
-    },
-  },
-  {
-    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',
  },
 ];
@@ -704,8 +543,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.
 *
@@ -22,15 +15,14 @@
 */
 'use strict';

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

 type Layout = {
  x: number;
@@ -54,14 +46,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 +67,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 +123,7 @@ class LayoutEventExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  view: {
@@ -170,7 +157,7 @@ exports.description = 'Examples that show how Layout events can be used to ' +
 exports.examples = [
 {
  title: 'LayoutEventExample',
-  render: function(): ReactElement<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.
 *
@@ -22,26 +15,24 @@
 */
 'use strict';

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

 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 +40,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 +57,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 +87,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 +143,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.
 *
@@ -20,23 +13,23 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Linking,
  StyleSheet,
  Text,
-  TouchableOpacity,
+  TouchableNativeFeedback,
  View,
-} = ReactNative;
+} = React;
 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 +37,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 +69,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.
 *
@@ -22,8 +15,7 @@
 */
 'use strict';

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

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

@@ -65,20 +57,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 +95,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 +129,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.
 *
@@ -22,8 +15,7 @@
 */
 'use strict';

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

 var THUMB_URLS = [
  require('./Thumbnails/like.png'),
@@ -130,8 +122,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.
 *
@@ -23,8 +16,7 @@
 */
 'use strict';

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

 var NativeModules = require('NativeModules');
 var {
@@ -57,28 +49,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 +86,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 +124,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): ReactElement<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 +142,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 +158,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 +168,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <ListView
        style={styles.listview}
@@ -197,14 +185,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.
 *
@@ -22,18 +15,17 @@
 */
 'use strict';

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

 var regionText = {
  latitude: '0',
@@ -160,13 +152,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 +179,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 +203,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) {
@@ -248,54 +247,9 @@ class AnnotationExample extends React.Component {
        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: {
@@ -383,7 +337,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);
+        },
+      }}/>;
    }
  },
  {
@@ -400,7 +359,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'),
      }}/>;
    }
  },
@@ -417,7 +376,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.
 *
@@ -22,37 +15,35 @@
 */
 'use strict';

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

 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 +60,28 @@ class Button extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

-const supportedOrientationsPickerValues = [
-  ['portrait'],
-  ['landscape'],
-  ['landscape-left'],
-  ['portrait', 'landscape-right'],
-  ['portrait', 'landscape'],
-  [],
-];
+var ModalExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      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) => {
-    this.setState({animationType: type});
-  };
+  _toggleAnimated() {
+    this.setState({animated: !this.state.animated});
+  },

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

  render() {
    var modalBackgroundStyle = {
@@ -108,24 +90,18 @@ class ModalExample extends React.Component {
    var innerContainerTransparentStyle = this.state.transparent
      ? {backgroundColor: '#fff', padding: 20}
      : null;
-    var activeButtonStyle = {
-      backgroundColor: '#ddd'
-    };

    return (
      <View>
        <Modal
-          animationType={this.state.animationType}
+          animated={this.state.animated}
          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>
+              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
              <Button
                onPress={this._setModalVisible.bind(this, false)}
                style={styles.modalButton}>
@@ -134,17 +110,10 @@ class ModalExample extends React.Component {
            </View>
          </View>
        </Modal>
+
        <View style={styles.row}>
-          <Text style={styles.rowTitle}>Animation Type</Text>
-          <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}>
-            none
-          </Button>
-          <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}>
-            slide
-          </Button>
-          <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}>
-            fade
-          </Button>
+          <Text style={styles.rowTitle}>Animated</Text>
+          <Switch value={this.state.animated} onValueChange={this._toggleAnimated} />
        </View>

        <View style={styles.row}>
@@ -152,29 +121,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 = [
  {
@@ -220,7 +173,4 @@ var styles = StyleSheet.create({
  modalButton: {
    marginTop: 10,
  },
-  pickerItem: {
-    fontSize: 16,
-  },
 });
@@ -0,0 +1,164 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity
+} = React;
+
+var _getRandomRoute = function() {
+  return {
+    title: '#' + Math.ceil(Math.random() * 1000),
+  };
+};
+
+var Navigator = NavigationExperimental.LegacyNavigator;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var BreadcrumbNavSample = React.createClass({
+
+  componentWillMount: function() {
+    this._navBarRouteMapper = {
+      rightContentForRoute: function(route, navigator) {
+        return null;
+      },
+      titleContentForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity
+            onPress={() => navigator.push(_getRandomRoute())}>
+            <Text style={styles.titleText}>{route.title}</Text>
+          </TouchableOpacity>
+        );
+      },
+      iconForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity
+            onPress={() => { navigator.popToRoute(route); }}
+            style={styles.crumbIconPlaceholder}
+          />
+        );
+      },
+      separatorForRoute: function(route, navigator) {
+        return (
+          <TouchableOpacity
+            onPress={navigator.pop}
+            style={styles.crumbSeparatorPlaceholder}
+          />
+        );
+      }
+    };
+  },
+
+  _renderScene: function(route, navigator) {
+    return (
+      <ScrollView style={styles.scene}>
+        <NavButton
+          onPress={() => { navigator.push(_getRandomRoute()); }}
+          text="Push"
+        />
+        <NavButton
+          onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]); }}
+          text="Reset w/ 2 scenes"
+        />
+        <NavButton
+          onPress={() => { navigator.popToTop(); }}
+          text="Pop to top"
+        />
+        <NavButton
+          onPress={() => { navigator.replace(_getRandomRoute()); }}
+          text="Replace"
+        />
+        <NavButton
+          onPress={() => { this.props.navigator.pop(); }}
+          text="Close breadcrumb example"
+        />
+      </ScrollView>
+    );
+  },
+
+  render: function() {
+    return (
+      <Navigator
+        style={styles.container}
+        initialRoute={_getRandomRoute()}
+        renderScene={this._renderScene}
+        navigationBar={
+          <Navigator.BreadcrumbNavigationBar
+            routeMapper={this._navBarRouteMapper}
+          />
+        }
+      />
+    );
+  },
+
+
+
+});
+
+var styles = StyleSheet.create({
+  scene: {
+    paddingTop: 50,
+    flex: 1,
+  },
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#CDCDCD',
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  container: {
+    overflow: 'hidden',
+    backgroundColor: '#dddddd',
+    flex: 1,
+  },
+  titleText: {
+    fontSize: 18,
+    color: '#666666',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  crumbIconPlaceholder: {
+    flex: 1,
+    backgroundColor: '#666666',
+  },
+  crumbSeparatorPlaceholder: {
+    flex: 1,
+    backgroundColor: '#aaaaaa',
+  },
+});
+
+module.exports = BreadcrumbNavSample;
@@ -0,0 +1,218 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+  TabBarIOS,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+var _getRandomRoute = function() {
+  return {
+    randNumber: Math.ceil(Math.random() * 1000),
+  };
+};
+
+var Navigator = NavigationExperimental.LegacyNavigator;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var ROUTE_STACK = [
+  _getRandomRoute(),
+  _getRandomRoute(),
+  _getRandomRoute(),
+];
+var INIT_ROUTE_INDEX = 1;
+
+class JumpingNavBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tabIndex: props.initTabIndex,
+    };
+  }
+  handleWillFocus(route) {
+    var tabIndex = ROUTE_STACK.indexOf(route);
+    this.setState({ tabIndex, });
+  }
+  render() {
+    return (
+      <View style={styles.tabs}>
+        <TabBarIOS>
+          <TabBarIOS.Item
+            icon={require('image!tabnav_notification')}
+            selected={this.state.tabIndex === 0}
+            onPress={() => {
+              this.props.onTabIndex(0);
+              this.setState({ tabIndex: 0, });
+            }}>
+            <View />
+          </TabBarIOS.Item>
+          <TabBarIOS.Item
+            icon={require('image!tabnav_list')}
+            selected={this.state.tabIndex === 1}
+            onPress={() => {
+              this.props.onTabIndex(1);
+              this.setState({ tabIndex: 1, });
+            }}>
+            <View />
+          </TabBarIOS.Item>
+          <TabBarIOS.Item
+            icon={require('image!tabnav_settings')}
+            selected={this.state.tabIndex === 2}
+            onPress={() => {
+              this.props.onTabIndex(2);
+              this.setState({ tabIndex: 2, });
+            }}>
+            <View />
+          </TabBarIOS.Item>
+        </TabBarIOS>
+      </View>
+    );
+  }
+}
+
+var JumpingNavSample = React.createClass({
+  render: function() {
+    return (
+      <Navigator
+        debugOverlay={false}
+        style={styles.appContainer}
+        ref={(navigator) => {
+          this._navigator = navigator;
+        }}
+        initialRoute={ROUTE_STACK[INIT_ROUTE_INDEX]}
+        initialRouteStack={ROUTE_STACK}
+        renderScene={this.renderScene}
+        configureScene={() => ({
+          ...Navigator.SceneConfigs.HorizontalSwipeJump,
+        })}
+        navigationBar={
+          <JumpingNavBar
+            ref={(navBar) => { this.navBar = navBar; }}
+            initTabIndex={INIT_ROUTE_INDEX}
+            routeStack={ROUTE_STACK}
+            onTabIndex={(index) => {
+              this._navigator.jumpTo(ROUTE_STACK[index]);
+            }}
+          />
+        }
+      />
+    );
+  },
+
+  renderScene: function(route, navigator) {
+    var backBtn;
+    var forwardBtn;
+    if (ROUTE_STACK.indexOf(route) !== 0) {
+      backBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpBack();
+          }}
+          text="jumpBack"
+        />
+      );
+    }
+    if (ROUTE_STACK.indexOf(route) !== ROUTE_STACK.length - 1) {
+      forwardBtn = (
+        <NavButton
+          onPress={() => {
+            navigator.jumpForward();
+          }}
+          text="jumpForward"
+        />
+      );
+    }
+    return (
+      <ScrollView style={styles.scene}>
+        <Text style={styles.messageText}>#{route.randNumber}</Text>
+        {backBtn}
+        {forwardBtn}
+        <NavButton
+          onPress={() => {
+            navigator.jumpTo(ROUTE_STACK[1]);
+          }}
+          text="jumpTo middle route"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.pop();
+          }}
+          text="Exit Navigation Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Came from jumping example',
+            });
+          }}
+          text="Nav Menu"
+        />
+      </ScrollView>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#CDCDCD',
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  appContainer: {
+    overflow: 'hidden',
+    backgroundColor: '#dddddd',
+    flex: 1,
+  },
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
+  },
+  scene: {
+    flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
+  },
+  tabs: {
+    height: 50,
+  }
+});
+
+module.exports = JumpingNavSample;
@@ -0,0 +1,219 @@
+/**
+ * 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-native');
+var {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+} = React;
+
+var BreadcrumbNavSample = require('./BreadcrumbNavSample');
+var NavigationBarSample = require('./NavigationBarSample');
+var JumpingNavSample = require('./JumpingNavSample');
+
+var Navigator = NavigationExperimental.LegacyNavigator;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+class NavMenu extends React.Component {
+  render() {
+    return (
+      <ScrollView style={styles.scene}>
+        <Text style={styles.messageText}>{this.props.message}</Text>
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Swipe right to dismiss',
+              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
+            });
+          }}
+          text="Float in from right"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({
+              message: 'Swipe down to dismiss',
+              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
+            });
+          }}
+          text="Float in from bottom"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.pop();
+          }}
+          text="Pop"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.popToTop();
+          }}
+          text="Pop to top"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'navbar' });
+          }}
+          text="Navbar Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'jumping' });
+          }}
+          text="Jumping Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.navigator.push({ id: 'breadcrumbs' });
+          }}
+          text="Breadcrumbs Example"
+        />
+        <NavButton
+          onPress={() => {
+            this.props.onExampleExit();
+          }}
+          text="Exit <LegacyNavigator> Example"
+        />
+      </ScrollView>
+    );
+  }
+}
+
+var TabBarExample = React.createClass({
+
+  statics: {
+    title: '<LegacyNavigator> (Experimental)',
+    description: 'Experimental navigator that ports the API of the current ' +
+      'Navigator component',
+  },
+
+  renderScene: function(route, nav) {
+    switch (route.id) {
+      case 'navbar':
+        return <NavigationBarSample navigator={nav} />;
+      case 'breadcrumbs':
+        return <BreadcrumbNavSample navigator={nav} />;
+      case 'jumping':
+        return <JumpingNavSample navigator={nav} />;
+      default:
+        return (
+          <NavMenu
+            message={route.message}
+            navigator={nav}
+            onExampleExit={this.props.onExampleExit}
+          />
+        );
+    }
+  },
+
+  render: function() {
+    return (
+      <Navigator
+        ref={this._setNavigatorRef}
+        style={styles.container}
+        initialRoute={{ message: 'First Scene', }}
+        renderScene={this.renderScene}
+        configureScene={(route) => {
+          if (route.sceneConfig) {
+            return route.sceneConfig;
+          }
+          return Navigator.SceneConfigs.FloatFromBottom;
+        }}
+      />
+    );
+  },
+
+
+  componentWillUnmount: function() {
+    this._listeners && this._listeners.forEach(listener => listener.remove());
+  },
+
+  _setNavigatorRef: function(navigator) {
+    if (navigator !== this._navigator) {
+      this._navigator = navigator;
+
+      if (navigator) {
+        var callback = (event) => {
+          console.log(
+            `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,201 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+} = React;
+
+var Navigator = NavigationExperimental.LegacyNavigator;
+
+class NavButton extends React.Component {
+  render() {
+    return (
+      <TouchableHighlight
+        style={styles.button}
+        underlayColor="#B5B5B5"
+        onPress={this.props.onPress}>
+        <Text style={styles.buttonText}>{this.props.text}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+var NavigationBarRouteMapper = {
+
+  LeftButton: function(route, navigator, index, navState) {
+    if (index === 0) {
+      return null;
+    }
+
+    var previousRoute = navState.routeStack[index - 1];
+    return (
+      <TouchableOpacity
+        onPress={() => navigator.pop()}
+        style={styles.navBarLeftButton}>
+        <Text style={[styles.navBarText, styles.navBarButtonText]}>
+          {previousRoute.title}
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+
+  RightButton: function(route, navigator, index, navState) {
+    return (
+      <TouchableOpacity
+        onPress={() => navigator.push(newRandomRoute())}
+        style={styles.navBarRightButton}>
+        <Text style={[styles.navBarText, styles.navBarButtonText]}>
+          Next
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+
+  Title: function(route, navigator, index, navState) {
+    return (
+      <Text style={[styles.navBarText, styles.navBarTitleText]}>
+        {route.title} [{index}]
+      </Text>
+    );
+  },
+
+};
+
+function newRandomRoute() {
+  return {
+    title: '#' + Math.ceil(Math.random() * 1000),
+  };
+}
+
+var NavigationBarSample = React.createClass({
+
+  componentWillMount: function() {
+    var navigator = this.props.navigator;
+
+    var callback = (event) => {
+      console.log(
+        `NavigationBarSample : event ${event.type}`,
+        {
+          route: JSON.stringify(event.data.route),
+          target: event.target,
+          type: event.type,
+        }
+      );
+    };
+
+    // Observe focus change events from this component.
+    this._listeners = [
+      navigator.navigationContext.addListener('willfocus', callback),
+      navigator.navigationContext.addListener('didfocus', callback),
+    ];
+  },
+
+  componentWillUnmount: function() {
+    this._listeners && this._listeners.forEach(listener => listener.remove());
+  },
+
+  render: function() {
+    return (
+      <Navigator
+        debugOverlay={false}
+        style={styles.appContainer}
+        initialRoute={newRandomRoute()}
+        renderScene={(route, navigator) => (
+          <ScrollView style={styles.scene}>
+            <Text style={styles.messageText}>{route.content}</Text>
+            <NavButton
+              onPress={() => {
+                navigator.immediatelyResetRouteStack([
+                  newRandomRoute(),
+                  newRandomRoute(),
+                  newRandomRoute(),
+                ]);
+              }}
+              text="Reset w/ 3 scenes"
+            />
+            <NavButton
+              onPress={() => {
+                this.props.navigator.pop();
+              }}
+              text="Exit NavigationBar Example"
+            />
+          </ScrollView>
+        )}
+        navigationBar={
+          <Navigator.NavigationBar
+            routeMapper={NavigationBarRouteMapper}
+            style={styles.navBar}
+          />
+        }
+      />
+    );
+  },
+
+});
+
+var styles = StyleSheet.create({
+  messageText: {
+    fontSize: 17,
+    fontWeight: '500',
+    padding: 15,
+    marginTop: 50,
+    marginLeft: 15,
+  },
+  button: {
+    backgroundColor: 'white',
+    padding: 15,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#CDCDCD',
+  },
+  buttonText: {
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  navBar: {
+    backgroundColor: 'white',
+  },
+  navBarText: {
+    fontSize: 16,
+    marginVertical: 10,
+  },
+  navBarTitleText: {
+    color: '#373E4D',
+    fontWeight: '500',
+    marginVertical: 9,
+  },
+  navBarLeftButton: {
+    paddingLeft: 10,
+  },
+  navBarRightButton: {
+    paddingRight: 10,
+  },
+  navBarButtonText: {
+    color: '#5890FF',
+  },
+  scene: {
+    flex: 1,
+    paddingTop: 20,
+    backgroundColor: '#EAEAEA',
+  },
+});
+
+module.exports = NavigationBarSample;
@@ -0,0 +1,153 @@
+/**
+ * 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-native');
+
+const {
+  Animated,
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+} = React;
+
+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._renderNavigation = this._renderNavigation.bind(this);
+    this._renderCard = this._renderCard.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
+  }
+  render() {
+    return (
+      <NavigationRootContainer
+        reducer={NavigationBasicReducer}
+        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
+        persistenceKey="NavigationAnimExampleState"
+        renderNavigation={this._renderNavigation}
+      />
+    );
+  }
+  handleBackAction() {
+    return (
+      this.navRootContainer &&
+      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
+    );
+  }
+  _renderNavigation(navigationState, onNavigate) {
+    if (!navigationState) {
+      return null;
+    }
+    return (
+      <NavigationAnimatedView
+        navigationState={navigationState}
+        style={styles.animatedView}
+        renderOverlay={this._renderHeader}
+        applyAnimation={(pos, navState) => {
+          Animated.timing(pos, {toValue: navState.index, duration: 500}).start();
+        }}
+        renderScene={this._renderCard}
+      />
+    );
+  }
+
+  _renderHeader(/*NavigationSceneRendererProps*/ props) {
+    return (
+      <NavigationHeader
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{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,100 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const React = require('react-native');
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+} = React;
+const NavigationExampleRow = require('./NavigationExampleRow');
+const {
+  RootContainer: NavigationRootContainer,
+  Reducer: NavigationReducer,
+} = NavigationExperimental;
+const StackReducer = NavigationReducer.StackReducer;
+
+const NavigationBasicReducer = NavigationReducer.StackReducer({
+  getPushedReducerForAction: (action) => {
+    if (action.type === 'push') {
+      return (state) => state || {key: action.key};
+    }
+    return null;
+  },
+  getReducerForState: (initialState) => (state) => state || initialState,
+  initialState: {
+    key: 'BasicExampleStackKey',
+    index: 0,
+    children: [
+      {key: 'First Route'},
+    ],
+  },
+});
+
+const NavigationBasicExample = React.createClass({
+  render: function() {
+    return (
+      <NavigationRootContainer
+        reducer={NavigationBasicReducer}
+        persistenceKey="NavigationBasicExampleState"
+        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
+        renderNavigation={(navState, onNavigate) => {
+          if (!navState) { return null; }
+          return (
+            <ScrollView style={styles.topView}>
+              <NavigationExampleRow
+                text={`Current page: ${navState.children[navState.index].key}`}
+              />
+              <NavigationExampleRow
+                text={`Push page #${navState.children.length}`}
+                onPress={() => {
+                  onNavigate({ type: 'push', key: 'page #' + navState.children.length });
+                }}
+              />
+              <NavigationExampleRow
+                text="pop"
+                onPress={() => {
+                  onNavigate(NavigationRootContainer.getBackAction());
+                }}
+              />
+              <NavigationExampleRow
+                text="Exit Basic Nav Example"
+                onPress={this.props.onExampleExit}
+              />
+            </ScrollView>
+          );
+        }}
+      />
+    );
+  },
+
+  handleBackAction: function() {
+    return (
+      this.navRootContainer &&
+      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
+    );
+  },
+
+});
+
+const styles = StyleSheet.create({
+  topView: {
+    backgroundColor: '#E9E9EF',
+    flex: 1,
+    paddingTop: 30,
+  },
+});
+
+module.exports = NavigationBasicExample;
@@ -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 NavigationExampleRow = require('./NavigationExampleRow');
+const React = require('react-native');
+
+const {
+  NavigationExperimental,
+  StyleSheet,
+  ScrollView,
+} = React;
+
+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,
+    });
+  }
+
+  _onNavigate(action) {
+    if (action && action.type === 'back') {
+      this._pop();
+    }
+  }
+}
+
+const styles = StyleSheet.create({
+  main: {
+    flex: 1,
+  },
+  scrollView: {
+    marginTop: 64
+  },
+});
+
+module.exports = NavigationCardStackExample;
@@ -0,0 +1,295 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+const NavigationExampleRow = require('./NavigationExampleRow');
+const NavigationExampleTabBar = require('./NavigationExampleTabBar');
+
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  View,
+} = React;
+
+const {
+  CardStack: NavigationCardStack,
+  Container: NavigationContainer,
+  Header: NavigationHeader,
+  Reducer: NavigationReducer,
+  RootContainer: NavigationRootContainer,
+  View: NavigationView,
+} = NavigationExperimental;
+
+
+import type {
+  NavigationParentState,
+  NavigationSceneRenderer,
+  NavigationSceneRendererProps,
+} from 'NavigationTypeDefinition';
+
+type Action = {
+  isExitAction?: boolean,
+};
+
+const ExampleExitAction = () => ({
+  isExitAction: true,
+});
+
+ExampleExitAction.match = (action: Action) => (
+  action && action.isExitAction === true
+);
+
+const PageAction = (type) => ({
+  type,
+  isPageAction: true,
+});
+
+PageAction.match = (action) => (
+  action && action.isPageAction === true
+);
+
+const ExampleProfilePageAction = (type) => ({
+  ...PageAction(type),
+  isProfilePageAction: true,
+});
+
+ExampleProfilePageAction.match = (action) => (
+  action && action.isProfilePageAction === true
+);
+
+const ExampleInfoAction = () => PageAction('InfoPage');
+
+const ExampleNotifProfileAction = () => ExampleProfilePageAction('NotifProfilePage');
+
+const _jsInstanceUniqueId = '' + Date.now();
+
+let _uniqueIdCount = 0;
+
+function pageStateActionMap(action) {
+  return {
+    key: 'page-' + _jsInstanceUniqueId + '-' + (_uniqueIdCount++),
+    type: action.type,
+  };
+}
+
+const ExampleAppReducer = NavigationReducer.TabsReducer({
+  key: 'AppNavigationState',
+  initialIndex: 0,
+  tabReducers: [
+    NavigationReducer.StackReducer({
+      getPushedReducerForAction: (action) => {
+        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
+          return (state) => (state || pageStateActionMap(action));
+        }
+        return null;
+      },
+      initialState: {
+        key: 'notifs',
+        index: 0,
+        children: [
+          {key: 'base', type: 'NotifsPage'},
+        ],
+      },
+    }),
+    NavigationReducer.StackReducer({
+      getPushedReducerForAction: (action) => {
+        if (PageAction.match(action) && !ExampleProfilePageAction.match(action)) {
+          return (state) => (state || pageStateActionMap(action));
+        }
+        return null;
+      },
+      initialState: {
+        key: 'settings',
+        index: 0,
+        children: [
+          {key: 'base', type: 'SettingsPage'},
+        ],
+      },
+    }),
+    NavigationReducer.StackReducer({
+      getPushedReducerForAction: (action) => {
+        if (PageAction.match(action) || ExampleProfilePageAction.match(action)) {
+          return (state) => (state || pageStateActionMap(action));
+        }
+        return null;
+      },
+      initialState: {
+        key: 'profile',
+        index: 0,
+        children: [
+          {key: 'base', type: 'ProfilePage'},
+        ],
+      },
+    }),
+  ],
+});
+
+function stateTypeTitleMap(pageState) {
+  switch (pageState.type) {
+    case 'ProfilePage':
+      return 'Profile Page';
+    case 'NotifsPage':
+      return 'Notifications';
+    case 'SettingsPage':
+      return 'Settings';
+    case 'InfoPage':
+      return 'Info Page';
+    case 'NotifProfilePage':
+      return 'Page in Profile';
+  }
+}
+
+class ExampleTabScreen extends React.Component {
+  _renderCard: NavigationSceneRenderer;
+  _renderHeader: NavigationSceneRenderer;
+  _renderScene: NavigationSceneRenderer;
+
+  componentWillMount() {
+    this._renderHeader = this._renderHeader.bind(this);
+    this._renderScene = this._renderScene.bind(this);
+  }
+
+  render() {
+    return (
+      <NavigationCardStack
+        style={styles.tabContent}
+        navigationState={this.props.navigationState}
+        renderOverlay={this._renderHeader}
+        renderScene={this._renderScene}
+      />
+    );
+  }
+  _renderHeader(props: NavigationSceneRendererProps) {
+    return (
+      <NavigationHeader
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{stateTypeTitleMap(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 {
+  render() {
+    return (
+      <NavigationView
+        navigationState={this.props.navigationState}
+        style={styles.tabsContent}
+        renderScene={(tabState, index) => (
+          <ExampleTabScreen
+            key={tabState.key}
+            navigationState={tabState}
+            onNavigate={this._handleNavigation.bind(this, tabState.key)}
+          />
+        )}
+      />
+    );
+  }
+  _handleNavigation(tabKey, action) {
+    if (ExampleExitAction.match(action)) {
+      this.props.onExampleExit();
+      return;
+    }
+    this.props.onNavigate(action);
+  }
+}
+ExampleMainView = NavigationContainer.create(ExampleMainView);
+
+const styles = StyleSheet.create({
+  topView: {
+    flex: 1,
+  },
+  tabsContent: {
+    flex: 1,
+  },
+  scrollView: {
+    marginTop: 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.
 *
@@ -20,18 +13,17 @@
 */
 'use strict';

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

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

 const styles = StyleSheet.create({
  row: {
@@ -0,0 +1,81 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} = React;
+const {
+  Container: NavigationContainer,
+  Reducer: NavigationReducer,
+} = NavigationExperimental;
+const {
+  JumpToAction,
+} = NavigationReducer.TabsReducer;
+
+var NavigationExampleTabBar = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.tabBar}>
+        {this.props.tabs.map(this._renderTab)}
+      </View>
+    );
+  },
+  _renderTab: function(tab, index) {
+    var textStyle = [styles.tabButtonText];
+    if (this.props.index === index) {
+      textStyle.push(styles.selectedTabButtonText);
+    }
+    return (
+      <TouchableOpacity
+        style={styles.tabButton}
+        key={tab.key}
+        onPress={() => {
+          this.props.onNavigate(JumpToAction(index));
+        }}>
+        <Text style={textStyle}>
+          {tab.key}
+        </Text>
+      </TouchableOpacity>
+    );
+  },
+});
+
+NavigationExampleTabBar = NavigationContainer.create(NavigationExampleTabBar);
+
+const styles = StyleSheet.create({
+  tabBar: {
+    height: 50,
+    flexDirection: 'row',
+  },
+  tabButton: {
+    flex: 1,
+  },
+  tabButtonText: {
+    paddingTop: 20,
+    textAlign: 'center',
+    fontSize: 17,
+    fontWeight: '500',
+  },
+  selectedTabButtonText: {
+    color: 'blue',
+  },
+});
+
+module.exports = NavigationExampleTabBar;
@@ -1,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,43 @@
 */
 '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-native');
+var {
+  AsyncStorage,
+  ScrollView,
+  StyleSheet,
+  View,
+} = React;
+var NavigationExampleRow = require('./NavigationExampleRow');

 /*
 * Heads up! This file is not the real navigation example- only a utility to switch between them.
 *
 * To learn how to use the Navigation API, take a look at the following example files:
 */
-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 +63,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 +90,9 @@ class NavigationExperimentalExample extends React.Component {
        </ScrollView>
      </View>
    );
-  };
+  },

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

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

-  handleBackAction = () => {
+  handleBackAction: function() {
    const wasHandledByExample = (
      this.exampleRef &&
      this.exampleRef.handleBackAction &&
@@ -122,14 +122,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 +138,8 @@ class NavigationExperimentalExample extends React.Component {
      );
    }
    return null;
-  }
-}
+  },
+});

 const styles = StyleSheet.create({
  menu: {
@@ -0,0 +1,111 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+
+const React = require('react-native');
+const {
+  NavigationExperimental,
+  ScrollView,
+  StyleSheet,
+  View,
+} = React;
+const {
+  Container: NavigationContainer,
+  RootContainer: NavigationRootContainer,
+  Reducer: NavigationReducer,
+} = NavigationExperimental;
+
+const NavigationExampleRow = require('./NavigationExampleRow');
+const NavigationExampleTabBar = require('./NavigationExampleTabBar');
+
+class ExmpleTabPage extends React.Component {
+  render() {
+    const currentTabRoute = this.props.tabs[this.props.index];
+    return (
+      <ScrollView style={styles.tabPage}>
+        <NavigationExampleRow
+          text={`Current Tab is: ${currentTabRoute.key}`}
+        />
+        {this.props.tabs.map((tab, index) => (
+          <NavigationExampleRow
+            key={tab.key}
+            text={`Go to ${tab.key}`}
+            onPress={() => {
+              this.props.onNavigate(NavigationReducer.TabsReducer.JumpToAction(index));
+            }}
+          />
+        ))}
+        <NavigationExampleRow
+          text="Exit Tabs Example"
+          onPress={this.props.onExampleExit}
+        />
+      </ScrollView>
+    );
+  }
+}
+ExmpleTabPage = NavigationContainer.create(ExmpleTabPage);
+
+const ExampleTabsReducer = NavigationReducer.TabsReducer({
+  tabReducers: [
+    (lastRoute) => lastRoute || {key: 'one'},
+    (lastRoute) => lastRoute || {key: 'two'},
+    (lastRoute) => lastRoute || {key: 'three'},
+  ],
+});
+
+class NavigationTabsExample extends React.Component {
+  render() {
+    return (
+      <NavigationRootContainer
+        reducer={ExampleTabsReducer}
+        persistenceKey="NAV_EXAMPLE_STATE_TABS"
+        ref={navRootContainer => { this.navRootContainer = navRootContainer; }}
+        renderNavigation={(navigationState) => {
+          if (!navigationState) { return null; }
+          return (
+            <View style={styles.topView}>
+              <ExmpleTabPage
+                tabs={navigationState.children}
+                index={navigationState.index}
+                onExampleExit={this.props.onExampleExit}
+              />
+              <NavigationExampleTabBar
+                tabs={navigationState.children}
+                index={navigationState.index}
+              />
+            </View>
+          );
+        }}
+      />
+    );
+  }
+  handleBackAction() {
+    return (
+      this.navRootContainer &&
+      this.navRootContainer.handleNavigation(NavigationRootContainer.getBackAction())
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  topView: {
+    flex: 1,
+    paddingTop: 30,
+  },
+  tabPage: {
+    backgroundColor: '#E9E9EF',
+  },
+});
+
+module.exports = NavigationTabsExample;
@@ -0,0 +1,314 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule NavigationTicTacToeExample
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  NavigationExperimental,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+const {
+  Container: NavigationContainer,
+  RootContainer: NavigationRootContainer,
+} = NavigationExperimental;
+
+type GameGrid = Array<Array<?string>>;
+
+const evenOddPlayerMap = ['O', 'X'];
+const rowLeterMap = ['a', 'b', 'c'];
+
+function parseGame(game: string): GameGrid {
+  const gameTurns = game ? game.split('-') : [];
+  const grid = Array(3);
+  for (let i = 0; i < 3; i++) {
+    const row = Array(3);
+    for (let j = 0; j < 3; j++) {
+      const turnIndex = gameTurns.indexOf(rowLeterMap[i]+j);
+      if (turnIndex === -1) {
+        row[j] = null;
+      } else {
+        row[j] = evenOddPlayerMap[turnIndex % 2];
+      }
+    }
+    grid[i] = row;
+  }
+  return grid;
+}
+
+function playTurn(game: string, row: number, col: number): string {
+  const turn = rowLeterMap[row] + col;
+  return game ? (game + '-' + turn) : turn;
+}
+
+function getWinner(gameString: string): ?string {
+  const game = parseGame(gameString);
+  for (var i = 0; i < 3; i++) {
+    if (game[i][0] !== null && game[i][0] === game[i][1] &&
+        game[i][0] === game[i][2]) {
+      return game[i][0];
+    }
+  }
+  for (var i = 0; i < 3; i++) {
+    if (game[0][i] !== null && game[0][i] === game[1][i] &&
+        game[0][i] === game[2][i]) {
+      return game[0][i];
+    }
+  }
+  if (game[0][0] !== null && game[0][0] === game[1][1] &&
+      game[0][0] === game[2][2]) {
+    return game[0][0];
+  }
+  if (game[0][2] !== null && game[0][2] === game[1][1] &&
+      game[0][2] === game[2][0]) {
+    return game[0][2];
+  }
+  return null;
+}
+
+function isGameOver(gameString: string): boolean {
+  if (getWinner(gameString)) {
+    return true;
+  }
+  const game = parseGame(gameString);
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      if (game[i][j] === null) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+class Cell extends React.Component {
+  props: any;
+  cellStyle() {
+    switch (this.props.player) {
+      case 'X':
+        return styles.cellX;
+      case 'O':
+        return styles.cellO;
+      default:
+        return null;
+    }
+  }
+  textStyle() {
+    switch (this.props.player) {
+      case 'X':
+        return styles.cellTextX;
+      case 'O':
+        return styles.cellTextO;
+      default:
+        return {};
+    }
+  }
+  render() {
+    return (
+      <TouchableHighlight
+        onPress={this.props.onPress}
+        underlayColor="transparent"
+        activeOpacity={0.5}>
+        <View style={[styles.cell, this.cellStyle()]}>
+          <Text style={[styles.cellText, this.textStyle()]}>
+            {this.props.player}
+          </Text>
+        </View>
+      </TouchableHighlight>
+    );
+  }
+}
+
+function GameEndOverlay(props) {
+  if (!isGameOver(props.game)) {
+    return <View />;
+  }
+  const winner = getWinner(props.game);
+  return (
+    <View style={styles.overlay}>
+      <Text style={styles.overlayMessage}>
+        {winner ? winner + ' wins!' : 'It\'s a tie!'}
+      </Text>
+      <TouchableHighlight
+        onPress={() => props.onNavigate(GameActions.Reset())}
+        underlayColor="transparent"
+        activeOpacity={0.5}>
+        <View style={styles.newGame}>
+          <Text style={styles.newGameText}>New Game</Text>
+        </View>
+      </TouchableHighlight>
+    </View>
+  );
+}
+GameEndOverlay = NavigationContainer.create(GameEndOverlay);
+
+function TicTacToeGame(props) {
+  var rows = parseGame(props.game).map((cells, row) =>
+    <View key={'row' + row} style={styles.row}>
+      {cells.map((player, col) =>
+        <Cell
+          key={'cell' + col}
+          player={player}
+          onPress={() => props.onNavigate(GameActions.Turn(row, col))}
+        />
+      )}
+    </View>
+  );
+  return (
+    <View style={styles.container}>
+      <Text
+        style={styles.closeButton}
+        onPress={props.onExampleExit}>
+        Close
+      </Text>
+      <Text style={styles.title}>EXTREME T3</Text>
+      <View style={styles.board}>
+        {rows}
+      </View>
+      <GameEndOverlay
+        game={props.game}
+      />
+    </View>
+  );
+}
+TicTacToeGame = NavigationContainer.create(TicTacToeGame);
+
+const GameActions = {
+  Turn: (row, col) => ({type: 'TicTacToeTurnAction', row, col }),
+  Reset: (row, col) => ({type: 'TicTacToeResetAction' }),
+};
+
+function GameReducer(lastGame: ?string, action: Object): string {
+  if (!lastGame) {
+    lastGame = '';
+  }
+  if (action.type === 'TicTacToeResetAction') {
+    return '';
+  }
+  if (!isGameOver(lastGame) && action.type === 'TicTacToeTurnAction') {
+    return playTurn(lastGame, action.row, action.col);
+  }
+  return lastGame;
+}
+
+class NavigationTicTacToeExample extends React.Component {
+  static GameView = TicTacToeGame;
+  static GameReducer = GameReducer;
+  static GameActions = GameActions;
+  render() {
+    return (
+      <NavigationRootContainer
+        reducer={GameReducer}
+        persistenceKey="TicTacToeGameState"
+        renderNavigation={(game) => (
+          <TicTacToeGame
+            game={game}
+            onExampleExit={this.props.onExampleExit}
+          />
+        )}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  closeButton: {
+    position: 'absolute',
+    left: 10,
+    top: 30,
+    fontSize: 14,
+  },
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white'
+  },
+  title: {
+    fontFamily: 'Chalkduster',
+    fontSize: 39,
+    marginBottom: 20,
+  },
+  board: {
+    padding: 5,
+    backgroundColor: '#47525d',
+    borderRadius: 10,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  cell: {
+    width: 80,
+    height: 80,
+    borderRadius: 5,
+    backgroundColor: '#7b8994',
+    margin: 5,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cellX: {
+    backgroundColor: '#72d0eb',
+  },
+  cellO: {
+    backgroundColor: '#7ebd26',
+  },
+  cellText: {
+    fontSize: 50,
+    fontFamily: 'AvenirNext-Bold',
+  },
+  cellTextX: {
+    color: '#19a9e5',
+  },
+  cellTextO: {
+    color: '#b9dc2f',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: 'rgba(221, 221, 221, 0.5)',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  overlayMessage: {
+    fontSize: 40,
+    marginBottom: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+    textAlign: 'center',
+  },
+  newGame: {
+    backgroundColor: '#887766',
+    padding: 20,
+    borderRadius: 5,
+  },
+  newGameText: {
+    color: 'white',
+    fontSize: 20,
+    fontFamily: 'AvenirNext-DemiBold',
+  },
+});
+
+module.exports = NavigationTicTacToeExample;
@@ -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,8 +13,7 @@
 */
 'use strict';

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

 var _getRandomRoute = function() {
  return {
@@ -50,8 +42,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 +74,9 @@ class BreadcrumbNavSample extends React.Component {
        );
      }
    };
-  }
+  },

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

-  render() {
+  render: function() {
    return (
      <Navigator
        style={styles.container}
@@ -123,8 +116,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.
 *
@@ -20,8 +13,7 @@
 */
 'use strict';

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

 var _getRandomRoute = function() {
  return {
@@ -106,8 +98,8 @@ class JumpingNavBar extends React.Component {
  }
 }

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

-  renderScene = (route, navigator) => {
+  renderScene: function(route, navigator) {
    var backBtn;
    var forwardBtn;
    if (ROUTE_STACK.indexOf(route) !== 0) {
@@ -185,8 +177,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.
 *
@@ -21,8 +14,7 @@
 'use strict';


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

 class NavButton extends React.Component {
  render() {
@@ -92,8 +84,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 +105,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 +146,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.
 *
@@ -22,15 +15,14 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Navigator,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
-} = ReactNative;
+} = React;
 var BreadcrumbNavSample = require('./BreadcrumbNavSample');
 var NavigationBarSample = require('./NavigationBarSample');
 var JumpingNavSample = require('./JumpingNavSample');
@@ -112,11 +104,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 +128,9 @@ class TabBarExample extends React.Component {
          />
        );
    }
-  };
+  },

-  render() {
+  render: function() {
    return (
      <Navigator
        ref={this._setNavigatorRef}
@@ -150,13 +145,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 +174,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.
 *
@@ -20,18 +13,18 @@
 */
 'use strict';

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

-class EmptyPage extends React.Component {
-  render() {
+var EmptyPage = React.createClass({
+
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -39,14 +32,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 +69,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.
 *
@@ -22,8 +15,7 @@
 */
 'use strict';

-const React = require('react');
-const ReactNative = require('react-native');
+const React = require('react-native');
 const ViewExample = require('./ViewExample');
 const createExamplePage = require('./createExamplePage');
 const {
@@ -34,10 +26,10 @@ const {
  Text,
  TouchableHighlight,
  View,
-} = ReactNative;
+} = React;

-class EmptyPage extends React.Component {
-  render() {
+const EmptyPage = React.createClass({
+  render: function() {
    return (
      <View style={styles.emptyPage}>
        <Text style={styles.emptyPageText}>
@@ -45,11 +37,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';
@@ -72,13 +64,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,
@@ -90,17 +75,6 @@ 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,
@@ -125,30 +99,6 @@ class NavigatorIOSExamplePage extends React.Component {
              }
            });
          })}
-          {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',
-              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('Pop', () => {
            this.props.navigator.pop();
          })}
@@ -163,9 +113,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;
@@ -183,9 +133,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;
@@ -200,9 +150,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;
@@ -217,9 +167,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}>
@@ -232,15 +182,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
@@ -250,11 +202,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.
 *
@@ -22,42 +15,39 @@
 */
 'use strict';

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

-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 +55,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 +71,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 +90,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 +106,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 +125,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 +153,7 @@ class IsConnectionExpensive extends React.Component {
        </View>
    );
  }
-}
+});

 exports.title = 'NetInfo';
 exports.description = 'Monitor network status';
@@ -175,22 +161,22 @@ exports.examples = [
  {
    title: 'NetInfo.isConnected',
    description: 'Asynchronously load and observe connectivity',
-    render(): ReactElement<any> { return <IsConnected />; }
+    render(): ReactElement { return <IsConnected />; }
  },
  {
    title: 'NetInfo.update',
    description: 'Asynchronously load and observe connectionInfo',
-    render(): ReactElement<any> { return <ConnectionInfoCurrent />; }
+    render(): ReactElement { return <ConnectionInfoCurrent />; }
  },
  {
    title: 'NetInfo.updateHistory',
    description: 'Observed updates to connectionInfo',
-    render(): ReactElement<any> { return <ConnectionInfoSubscription />; }
+    render(): ReactElement { return <ConnectionInfoSubscription />; }
  },
  {
    platform: 'android',
    title: 'NetInfo.isConnectionExpensive (Android)',
    description: 'Asynchronously check isConnectionExpensive',
-    render(): ReactElement<any> { return <IsConnectionExpensive />; }
+    render(): ReactElement { return <IsConnectionExpensive />; }
  },
 ];
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Martin Konicek	ef1fdf8fb1	[0.23.0-rc2] Bump version numbers	2016-03-31 13:54:00 +01:00
Martin Konicek	d782af285b	Revert "Android support for perspective transform" This reverts commit `3e760f48c5`.	2016-03-31 13:08:27 +01:00
Christopher Chedeau	aa83db777f	Fix website Summary:This puts the images inside of the blog folder in the output so we can safely copy them over. And moves the images in /blog/img/ in the source control so it's easier to discover (instead of having to search many levels deep). Should make the website work! Closes https://github.com/facebook/react-native/pull/6659 Differential Revision: D3098308 Pulled By: vjeux fb-gh-sync-id: 99477e27843dd6c88aa854028944f2f0b672db1f fbshipit-source-id: 99477e27843dd6c88aa854028944f2f0b672db1f	2016-03-28 09:31:34 -07:00
Christopher Chedeau	d83308c4f6	Introduce blog Ported the infrastructure from jest.	2016-03-24 19:20:37 -07:00
Martin Konicek	44a8eab108	Add Modal to the main Java package Reviewed By: dmmiller Differential Revision: D3087508 fb-gh-sync-id: 066b8c4102f9669ed58e6cda1b0013e74a3627f8 shipit-source-id: 066b8c4102f9669ed58e6cda1b0013e74a3627f8	2016-03-23 16:44:14 +00:00