[0.14.2] Include nvm fix in react-native-xcode.sh

Source nvm.sh (best effort) when running react-native-xcode.sh
Summary: When Node is installed with nvm, scripts invoked from Xcode need to set up nvm. This can be done either by sourcing .profile/.bash_profile/.bashrc/etc... or by sourcing nvm.sh directly -- this diff does the latter and handles the case where nvm may have been installed the official way (under ~/.nvm/nvm.sh AFAIK) or via homebrew. Closes https://github.com/facebook/react-native/pull/4015 Reviewed By: svcscm Differential Revision: D2633301 Pulled By: frantic fb-gh-sync-id: 3c2b9b0d21887ba21d6f85f5d279314d50c1db28
2025-11-01 09:14:26 +00:00 · 2015-11-09 19:19:55 -08:00 · 2015-11-09 19:18:55 -08:00 · 2015-11-06 15:43:41 -08:00 · 2015-11-06 15:43:24 -08:00 · 2015-11-05 15:08:43 -08:00
2602 changed files with 65623 additions and 179035 deletions
@@ -1,10 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2
-
-[alias]
-  movies = //Examples/Movies/android/app:app
-  uiexplorer = //Examples/UIExplorer/android/app:app
@@ -1 +0,0 @@
-Xmx512m -XX:+HeapDumpOnOutOfMemoryError
@@ -1,11 +0,0 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-indent_style = space
-indent_size = 2
@@ -19,20 +19,15 @@
    "__DEV__": true,
    "__dirname": false,
    "__fbBatchedBridgeConfig": false,
-    "alert": false,
    "cancelAnimationFrame": false,
-    "cancelIdleCallback": false,
    "clearImmediate": true,
    "clearInterval": false,
    "clearTimeout": false,
    "console": false,
    "document": false,
    "escape": false,
-    "Event": false,
-    "EventTarget": false,
    "exports": false,
    "fetch": false,
-    "FormData": false,
    "global": false,
    "jest": false,
    "Map": true,
@@ -41,7 +36,6 @@
    "process": false,
    "Promise": true,
    "requestAnimationFrame": true,
-    "requestIdleCallback": true,
    "require": false,
    "Set": true,
    "setImmediate": true,
@@ -49,29 +43,7 @@
    "setTimeout": false,
    "window": false,
    "XMLHttpRequest": false,
-    "pit": false,
-
-    // Flow global types.
-    "ReactComponent": false,
-    "ReactClass": false,
-    "ReactElement": false,
-    "ReactPropsCheckType": false,
-    "ReactPropsChainableTypeChecker": false,
-    "ReactPropTypes": false,
-    "SyntheticEvent": false,
-    "$Either": false,
-    "$All": false,
-    "$Tuple": false,
-    "$Supertype": false,
-    "$Subtype": false,
-    "$Shape": false,
-    "$Diff": false,
-    "$Keys": false,
-    "$Enum": false,
-    "$Exports": false,
-    "$FlowIssue": false,
-    "$FlowFixMe": false,
-    "$FixMe": false
+    "pit": false
  },

  "rules": {
@@ -109,12 +81,13 @@
    "curly": 1,                      // specify curly brace conventions for all control statements
    "default-case": 0,               // require default case in switch statements (off by default)
    "dot-notation": 1,               // encourages use of dot notation whenever possible
-    "eqeqeq": [1, "allow-null"],     // require the use of === and !==
+    "eqeqeq": 1,                     // require the use of === and !==
    "guard-for-in": 0,               // make sure for-in loops have an if statement (off by default)
    "no-alert": 1,                   // disallow the use of alert, confirm, and prompt
    "no-caller": 1,                  // disallow use of arguments.caller or arguments.callee
    "no-div-regex": 1,               // disallow division operators explicitly at beginning of regular expression (off by default)
    "no-else-return": 0,             // disallow else after a return in an if (off by default)
+    "no-empty-label": 1,             // disallow use of labels for anything other then loops and switches
    "no-eq-null": 0,                 // disallow comparisons to null without a type-checking operator (off by default)
    "no-eval": 1,                    // disallow use of eval()
    "no-extend-native": 1,           // disallow adding to native types
@@ -149,6 +122,11 @@
    "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
    "yoda": 1,                       // require or disallow Yoda conditions

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

@@ -178,8 +156,6 @@
  // These rules are purely matters of style and are quite subjective.

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

    "react/display-name": 0,
    "react/jsx-boolean-value": 0,
-    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-quotes": [1, "double", "avoid-escape"],
    "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, "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,57 +1,51 @@
 [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
-.*/node_modules/y18n/test/.*\.json
+# Ignore react-tools where there are overlaps, but don't ignore anything that
+# react-native relies on
+.*/node_modules/react-tools/src/React.js
+.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js

-# Ignore the website subdir
-<PROJECT_ROOT>/website/.*
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*

-# Ignore BUCK generated dirs
-<PROJECT_ROOT>/\.buckd/
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js

-# Ignore unexpected extra @providesModule
-.*/node_modules/commoner/test/source/widget/share.js
+# Ignore jest
+.*/node_modules/jest-cli/.*

-# 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__/.*
+# Ignore Website
+.*/website/.*

 [include]

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

 [options]
 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$_-]+\.png$' -> 'RelativeImageStub'

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

-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-2]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-2]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-7]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-7]\\|[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.32.0
+0.17.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]
@@ -1,19 +0,0 @@
-Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
-
-> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
-
-Explain the **motivation** for making this change. What existing problem does the pull request solve?
-
-Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
-
-**Test plan (required)**
-
-Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.
-
-Make sure tests pass on both Travis and Circle CI.
-
-**Code formatting**
-
-Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).
-
-For more info, see the ["Pull Requests" section of our "Contributing" guidelines](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#pull-requests).
@@ -21,26 +21,14 @@ DerivedData
 *.xcuserstate
 project.xcworkspace

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

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

 # Node
 node_modules
@@ -49,6 +37,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,39 +1,85 @@
 language: objective-c

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

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

 script:
-  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry travis_wait ./scripts/objc-test.sh; fi
-  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
-  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
-  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
+- |
+  if [ "$TEST_TYPE" = objc ]
+  then
+
+    ./scripts/objc-test.sh
+
+  elif [ "$TEST_TYPE" = js ]
+  then
+
+    flow check && npm test -- '\/Libraries\/'
+
+  elif [ "$TEST_TYPE" = packager ]
+  then
+
+    npm test -- '\/packager\/'
+
+  elif [ "$TEST_TYPE" = cli ]
+  then
+
+    npm test -- '\/(local|private|react-native)-cli\/'
+
+  elif [ "$TEST_TYPE" = build_website ]
+  then
+
+    cd website
+    $(which npm) install
+    ./setup.sh
+    if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then
+      # Automatically publish the website
+      echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
+      ./publish.sh
+    else
+      # Make sure the website builds without error
+      node server/generate.js
+    fi
+
+  elif [ "$TEST_TYPE" = e2e ]
+  then
+    ./scripts/e2e-test.sh
+  else
+    echo "Unknown test type: $TEST_TYPE"
+    exit 1
+  fi

 env:
  matrix:
-    - TEST_TYPE=e2e-objc
    - TEST_TYPE=objc
    - TEST_TYPE=js
+    - TEST_TYPE=packager
+    - TEST_TYPE=cli
+    - TEST_TYPE=build_website
+    - TEST_TYPE=e2e
+  global:
+    # $GITHUB_TOKEN
+    - secure: "HlmG8M2DmBUSBh6KH1yVIe/8gR4iibg4WfcHq1x/xYQxGbvleq7NOo04V6eFHnl9cvZCu+PKH0841WLnGR7c4BBf47GVu/o16nXzggPumHKy++lDzxFPlJ1faMDfjg/5vjbAxRUe7D3y98hQSeGHH4tedc8LvTaFLVu7iiGqvjU="
+    # $APPETIZE_TOKEN
+    - secure: "egsvVSpszTzrNd6bN62DsVAzMiSZI/OHgdizfPryqvqWBf655ztE6XFQSEFNpuIAzSKDDF25ioT8iPfVsbC1iK6HDWHfmqYxML0L+OoU0gi+hV2oKUBFZDZ1fwSnFoWuBdNdMDpLlUxvJp6N1WyfNOB2dxuZUt8eTt48Hi3+Hpc="
+    # $S3_TOKEN
+    - secure: "lY8JZPA0A7zT7L5KF9BBg34XYWIeR/RJiEvE7l7oVr88KnEPtyd//79eHhhVKnUnav7zsk5QJwkcX0MxKTp/dp4G0Am+zOX+sfA8kQrJ+2/+FzFW7AEsW/kHByfaIEIly9DQvUFt4I4oMm8nQZysJLahDgNWglyI3RTuJp//hcY="

 branches:
  only:
    - master
    - /^.*-stable$/
-
-notifications:
-  email:
-    recipients:
-      - bestander@gmail.com
-    on_failure: change
-    on_success: change
@@ -14,46 +14,15 @@ 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!
+2. 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
-    ```
-
-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.
-
-#### Copyright Notice for files
-
-Copy and paste this to the top of your new file(s):
-
-```JS
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-```
-
-If you've added a new module, add a `@providesModule <moduleName>` at the end of the comment. This will allow the haste package manager to find it.
+4. Ensure tests pass on Travis.
+5. Make sure your code lints (`node linter.js <files touched>`).
+6. Squash your commits (`git rebase -i`).
+7. If you haven't already, complete the CLA.

 ### Contributor License Agreement (CLA)

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

 #### General

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

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

 * Space after `@property` declarations
@@ -115,12 +75,6 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * *Try* to keep it around 80 characters line length (sometimes it's just not possible...)
 * `*` operator goes with the variable name (e.g. `NSObject *variableName;`)

-#### Java
-
-* If a method call spans multiple lines closing bracket is on the same line as the last argument.
-* If a method header doesn't fit on one line each argument goes on a separate line.
-* 100 character line length
-
 ### Documentation

 * Do not wrap lines at 80 characters - configure your editor to soft-wrap when editing documentation.
@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "no-alert": 0
-  }
-}
@@ -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"
@@ -29,7 +56,7 @@
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
@@ -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');
@@ -54,8 +53,6 @@ class Board extends React.Component {
 }

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

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

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

 var rotateLeft = function (matrix) {
  var rows = matrix.length;
@@ -15,24 +15,24 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Image,
+  PixelRatio,
  Platform,
  StyleSheet,
  Text,
  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 +45,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 +69,7 @@ class MovieCell extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  textContainer: {
@@ -96,7 +99,8 @@ var styles = StyleSheet.create({
  },
  cellBorder: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: StyleSheet.hairlineWidth,
+    // Trick to get the thinest line the device can display
+    height: 1 / PixelRatio.get(),
    marginLeft: 4,
  },
 });
@@ -15,25 +15,28 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Image,
+  PixelRatio,
  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 +60,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 +84,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 +103,8 @@ class Cast extends React.Component {
        )}
      </View>
    );
-  }
-}
+  },
+});

 var styles = StyleSheet.create({
  contentContainer: {
@@ -149,7 +152,7 @@ var styles = StyleSheet.create({
  },
  separator: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
    marginVertical: 10,
  },
  castTitle: {
@@ -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"
@@ -30,7 +57,7 @@
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
@@ -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: {
@@ -6,7 +6,6 @@ The Movies app is a demonstration of basic concepts, such as fetching data, rend

 Before running the app, make sure you ran:

-    git clone https://github.com/facebook/react-native.git
    cd react-native
    npm install

@@ -35,21 +34,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,19 +15,19 @@
 */
 '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');
+var invariant = require('invariant');
 var dismissKeyboard = require('dismissKeyboard');

 var MovieCell = require('./MovieCell');
@@ -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(
@@ -309,7 +316,7 @@ var SearchScreen = React.createClass({
          onSearchChange={this.onSearchChange}
          isLoading={this.state.isLoading}
          onFocus={() =>
-            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo({ x: 0, y: 0 })}
+            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo(0, 0)}
        />
        <View style={styles.separator} />
        {content}
@@ -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');

@@ -1,31 +0,0 @@
-include_defs('//ReactAndroid/DEFS')
-
-android_binary(
-  name = 'app',
-  manifest = 'src/main/AndroidManifest.xml',
-  keystore = '//keystores:debug',
-  deps = [
-    ':movies-lib',
-  ],
-)
-
-android_library(
-  name = 'movies-lib',
-  srcs = glob(['src/main/java/**/*.java']),
-  deps = [
-    ':res',
-    react_native_dep('third-party/java/jsr-305:jsr-305'),
-    react_native_target('java/com/facebook/react/modules/core:core'),
-    react_native_target('java/com/facebook/react/shell:shell'),
-    react_native_target('java/com/facebook/react:react'),
-    react_native_target('jni/prebuilt:android-jsc'),
-    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
-    react_native_target('jni/prebuilt:reactnative-libs'),
-  ],
-)
-
-android_resource(
-  name = 'res',
-  res = 'src/main/res',
-  package = 'com.facebook.react.movies',
-)
@@ -1,18 +1,9 @@
 <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"
@@ -11,13 +11,79 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+
 package com.facebook.react.movies;

-import com.facebook.react.ReactActivity;
+import android.app.Activity;
+import android.os.Bundle;
+import android.view.KeyEvent;
+
+import com.facebook.react.LifecycleState;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactRootView;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.shell.MainReactPackage;
+
+public class MoviesActivity extends Activity implements DefaultHardwareBackBtnHandler {
+
+  private ReactInstanceManager mReactInstanceManager;

-public class MoviesActivity extends ReactActivity {
  @Override
-  protected String getMainComponentName() {
-    return "MoviesApp";
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_main);
+
+    mReactInstanceManager = ReactInstanceManager.builder()
+        .setApplication(getApplication())
+        .setBundleAssetName("MoviesApp.android.bundle")
+        .setJSMainModuleName("Examples/Movies/MoviesApp.android")
+        .addPackage(new MainReactPackage())
+        .setUseDeveloperSupport(true)
+        .setInitialLifecycleState(LifecycleState.RESUMED)
+        .build();
+
+    ((ReactRootView) findViewById(R.id.react_root_view))
+        .startReactApplication(mReactInstanceManager, "MoviesApp", null);
+  }
+
+  @Override
+  public boolean onKeyUp(int keyCode, KeyEvent event) {
+    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+      mReactInstanceManager.showDevOptionsDialog();
+      return true;
+    }
+    return super.onKeyUp(keyCode, event);
+  }
+
+  @Override
+  protected void onPause() {
+    super.onPause();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onPause();
+    }
+  }
+
+  @Override
+  protected void onResume() {
+    super.onResume();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onResume(this);
+    }
+  }
+
+  @Override
+  public void onBackPressed() {
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onBackPressed();
+    } else {
+      super.onBackPressed();
+    }
+  }
+
+  @Override
+  public void invokeDefaultOnBackPressed() {
+    super.onBackPressed();
  }
 }
@@ -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"
@@ -29,7 +56,7 @@
                                                   launchOptions:launchOptions];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
@@ -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>>;
@@ -90,12 +89,13 @@ class Board {
        }
      }
    }
+
    return this.winner() === null;
  }
 }

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

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

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

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

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

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

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

  cellText: {
+    borderRadius: 5,
    fontSize: 50,
    fontFamily: 'AvenirNext-Bold',
  },
@@ -305,7 +306,7 @@ var styles = StyleSheet.create({
    textAlign: 'center',
  },
  newGame: {
-    backgroundColor: '#887765',
+    backgroundColor: '#887766',
    padding: 20,
    borderRadius: 5,
  },
@@ -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 />; }
  },
 ];
@@ -0,0 +1,125 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  ActionSheetIOS,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var BUTTONS = [
+  'Option 0',
+  'Option 1',
+  'Option 2',
+  'Destruct',
+  'Cancel',
+];
+var DESTRUCTIVE_INDEX = 3;
+var CANCEL_INDEX = 4;
+
+var ActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text onPress={this.showActionSheet} style={style.button}>
+          Click to show the ActionSheet
+        </Text>
+        <Text>
+          Clicked button: {this.state.clicked}
+        </Text>
+      </View>
+    );
+  },
+
+  showActionSheet() {
+    ActionSheetIOS.showActionSheetWithOptions({
+      options: BUTTONS,
+      cancelButtonIndex: CANCEL_INDEX,
+      destructiveButtonIndex: DESTRUCTIVE_INDEX,
+    },
+    (buttonIndex) => {
+      this.setState({ clicked: BUTTONS[buttonIndex] });
+    });
+  }
+});
+
+var ShareActionSheetExample = React.createClass({
+  getInitialState() {
+    return {
+      text: ''
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text onPress={this.showShareActionSheet} style={style.button}>
+          Click to show the Share ActionSheet
+        </Text>
+        <Text>
+          {this.state.text}
+        </Text>
+      </View>
+    );
+  },
+
+  showShareActionSheet() {
+    ActionSheetIOS.showShareActionSheetWithOptions({
+      url: 'https://code.facebook.com',
+    },
+    (error) => {
+      console.error(error);
+    },
+    (success, method) => {
+      var text;
+      if (success) {
+        text = `Shared via ${method}`;
+      } else {
+        text = 'You didn\'t share';
+      }
+      this.setState({text});
+    });
+  }
+});
+
+var style = StyleSheet.create({
+  button: {
+    marginBottom: 10,
+    fontWeight: '500',
+  }
+});
+
+exports.title = 'ActionSheetIOS';
+exports.description = 'Interface to show iOS\' action sheets';
+exports.examples = [
+  {
+    title: 'Show Action Sheet',
+    render(): ReactElement { return <ActionSheetExample />; }
+  },
+  {
+    title: 'Show Share Action Sheet',
+    render(): ReactElement { return <ShareActionSheetExample />; }
+  }
+];
@@ -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: {
@@ -0,0 +1,199 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  AlertIOS,
+} = React;
+
+exports.framework = 'React';
+exports.title = 'AlertIOS';
+exports.description = 'iOS alerts and action sheets';
+exports.examples = [{
+  title: 'Alerts',
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg'
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with message and default button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            null,
+            null,
+            [
+              {text: 'Button', onPress: () => console.log('Button Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with only one button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            null,
+            [
+              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
+              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
+              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with 3 buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Foo Title',
+            'My Alert Msg',
+            '..............'.split('').map((dot, index) => ({
+              text: 'Button ' + index,
+              onPress: () => console.log('Pressed ' + index)
+            }))
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with too many buttons</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+},
+{
+  title: 'Prompt',
+  render(): React.Component {
+    return <PromptExample />
+  }
+}];
+
+class PromptExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.promptResponse = this.promptResponse.bind(this);
+    this.state = {
+      promptValue: undefined,
+    };
+
+    this.title = 'Type a value';
+    this.defaultValue = 'Default value';
+    this.buttons = [{
+      text: 'Custom cancel',
+    }, {
+      text: 'Custom OK',
+      onPress: this.promptResponse
+    }];
+  }
+
+  render() {
+    return (
+      <View>
+        <Text style={{marginBottom: 10}}>
+          <Text style={{fontWeight: 'bold'}}>Prompt value:</Text> {this.state.promptValue}
+        </Text>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.promptResponse)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title & callback
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.buttons)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title & custom buttons
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.promptResponse)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title, default value & callback
+            </Text>
+          </View>
+        </TouchableHighlight>
+
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons)}>
+
+          <View style={styles.button}>
+            <Text>
+              prompt with title, default value & custom buttons
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+
+  prompt() {
+    // Flow's apply support is broken: #7035621
+    ((AlertIOS.prompt: any).apply: any)(AlertIOS, arguments);
+  }
+
+  promptResponse(promptValue) {
+    this.setState({ promptValue });
+  }
+}
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});
@@ -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';
@@ -47,8 +39,6 @@ exports.examples = [
      'mounts.',
    render: function() {
      class FadeInView extends React.Component {
-        state: any;
-
        constructor(props) {
          super(props);
          this.state = {
@@ -76,8 +66,6 @@ exports.examples = [
        }
      }
      class FadeInExample extends React.Component {
-        state: any;
-
        constructor(props) {
          super(props);
          this.state = {
@@ -207,7 +195,6 @@ exports.examples = [
          {['Composite', 'Easing', 'Animations!'].map(
            (text, ii) => (
              <Animated.View
-                key={text}
                style={[styles.content, {
                  left: this.anims[ii]
                }]}>
@@ -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');

@@ -40,10 +32,6 @@ var CIRCLE_MARGIN = 18;
 var NUM_CIRCLES = 30;

 class Circle extends React.Component {
-  state: any;
-  props: any;
-  longTimer: number;
-
  _onLongPress: () => void;
  _toggleIsActive: () => void;
  constructor(props: Object): void {
@@ -89,7 +77,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
@@ -168,13 +156,6 @@ class Circle extends React.Component {
 }

 class AnExApp extends React.Component {
-  state: any;
-  props: any;
-
-  static title = 'Animated - Gratuitous App';
-  static description = 'Bunch of Animations - tap a circle to ' +
-    'open a view with more animations, or longPress and drag to reorder circles.';
-
  _onMove: (position: Point) => void;
  constructor(props: any): void {
    super(props);
@@ -190,7 +171,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} />;
@@ -285,9 +266,14 @@ function moveToClosest({activeKey, keys, restLayouts}, position) {
  }
 }

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

 class AnExBobble extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    this.state = {};
@@ -96,7 +86,7 @@ class AnExBobble extends React.Component {
    });
  }

-  render(): ReactElement<any> {
+  render(): ReactElement {
    return (
      <View style={styles.bobbleContainer}>
        {this.state.bobbles.map((_, i) => {
@@ -105,7 +95,6 @@ class AnExBobble extends React.Component {
          return (
            <Animated.Image
              {...handlers}
-              key={i}
              source={{uri: BOBBLE_IMGS[j]}}
              style={[styles.circle, {
                backgroundColor: randColor(),                             // re-renders are obvious
@@ -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,19 +16,16 @@
 */
 '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;
-
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -87,7 +77,6 @@ class AnExChained extends React.Component {
          return (
            <Animated.Image
              {...handlers}
-              key={i}
              source={{uri: CHAIN_IMGS[j]}}
              style={[styles.sticker, {
                transform: this.state.stickers[j].getTranslateTransform(), // simple conversion
@@ -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.
 *
@@ -19,12 +12,10 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @providesModule AnExScroll
- * @flow
 */
 'use strict';

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

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

  render() {
    var width = this.props.panelWidth;
@@ -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');
@@ -39,8 +31,6 @@ var AnExScroll = require('./AnExScroll');
 var AnExTilt = require('./AnExTilt');

 class AnExSet extends React.Component {
-  state: any;
-
  constructor(props: Object) {
    super(props);
    function randColor() {
@@ -52,7 +42,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,19 +16,16 @@
 */
 '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;
-
  constructor(props: Object) {
    super(props);
    this.state = {
@@ -97,7 +87,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.
 *
@@ -18,49 +11,45 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @providesModule AppStateExample
+ * @providesModule AppStateIOSExample
 * @flow
 */
 'use strict';

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

-class AppStateSubscription extends React.Component {
-  state = {
-    appState: AppState.currentState,
-    previousAppStates: [],
-    memoryWarnings: 0,
-  };
-
-  componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
-    AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  componentWillUnmount() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
-    AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
-  }
-
-  _handleMemoryWarning = () => {
+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 = (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 (
@@ -82,29 +71,28 @@ class AppStateSubscription extends React.Component {
      </View>
    );
  }
-}
+});

-exports.title = 'AppState';
-exports.description = 'app background status';
+exports.title = 'AppStateIOS';
+exports.description = 'iOS app background status';
 exports.examples = [
  {
-    title: 'AppState.currentState',
+    title: 'AppStateIOS.currentState',
    description: 'Can be null on app initialization',
-    render() { return <Text>{AppState.currentState}</Text>; }
+    render() { return <Text>{AppStateIOS.currentState}</Text>; }
  },
  {
-    title: 'Subscribed AppState:',
+    title: 'Subscribed AppStateIOS:',
    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} />; }
+    render(): ReactElement { 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} />; }
+    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;
@@ -86,12 +80,12 @@ class BasicStorageExample extends React.Component {
        </Text>
        <Text>{' '}</Text>
        <Text>Messages:</Text>
-        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
+        {this.state.messages.map((m) => <Text>{m}</Text>)}
      </View>
    );
-  }
+  },

-  _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: {
@@ -90,7 +82,7 @@ var styles = StyleSheet.create({
  },
  border7: {
    borderWidth: 10,
-    borderColor: '#f007',
+    borderColor: 'rgba(255,0,0,0.5)',
    borderRadius: 30,
    overflow: 'hidden',
  },
@@ -99,41 +91,6 @@ var styles = StyleSheet.create({
    width: 100,
    height: 100
  },
-  border8: {
-    width: 60,
-    height: 60,
-    borderColor: 'black',
-    marginRight: 10,
-    backgroundColor: 'lightgrey',
-  },
-  border9: {
-    borderWidth: 10,
-    borderTopLeftRadius: 10,
-    borderBottomRightRadius: 20,
-    borderColor: 'black',
-  },
-  border10: {
-    borderWidth: 10,
-    backgroundColor: 'white',
-    borderTopLeftRadius: 10,
-    borderBottomRightRadius: 20,
-    borderColor: 'black',
-    elevation: 10,
-  },
-  border11: {
-    width: 0,
-    height: 0,
-    borderStyle: 'solid',
-    overflow: 'hidden',
-    borderTopWidth: 50,
-    borderRightWidth: 0,
-    borderBottomWidth: 50,
-    borderLeftWidth: 100,
-    borderTopColor: 'transparent',
-    borderRightColor: 'transparent',
-    borderBottomColor: 'transparent',
-    borderLeftColor: 'red',
-  },
 });

 exports.title = 'Border';
@@ -202,40 +159,4 @@ exports.examples = [
      );
    }
  },
-  {
-    title: 'Single Borders',
-    description: 'top, left, bottom right',
-    render() {
-      return (
-        <View style={{flexDirection: 'row'}}>
-          <View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />
-          <View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Corner Radii',
-    description: 'borderTopLeftRadius & borderBottomRightRadius',
-    render() {
-      return <View style={[styles.box, styles.border9]} />;
-    }
-  },
-  {
-    title: 'Corner Radii / Elevation',
-    description: 'borderTopLeftRadius & borderBottomRightRadius & elevation',
-    platform: 'android',
-    render() {
-      return <View style={[styles.box, styles.border10]} />;
-    }
-  },
-  {
-    title: 'CSS Trick - Triangle',
-    description: 'create a triangle by manipulating border colors and widths',
-    render() {
-      return <View style={[styles.border11]} />;
-    }
-  },
 ];
@@ -1,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,106 +15,103 @@
 */
 'use strict';

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

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

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

-const AssetScaledImageExampleView = require('./AssetScaledImageExample');
+var CameraRollExample = React.createClass({
+
+  getInitialState() {
+    return {
+      groupTypes: 'SavedPhotos',
+      sliderValue: 1,
+      bigImages: true,
+    };
+  },

-class CameraRollExample extends React.Component {
-  state = {
-    groupTypes: 'SavedPhotos',
-    sliderValue: 1,
-    bigImages: true,
-  };
-  _cameraRollView: ?CameraRollView;
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          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) => {
-    if (this.props.navigator) {
-      this.props.navigator.push({
-        title: 'Camera Roll Image',
-        component: AssetScaledImageExampleView,
-        backButtonTitle: 'Back',
-        passProps: { asset: asset },
-      });
-    }
-  };
+  loadAsset(asset){
+    this.props.navigator.push({
+      title: 'Camera Roll Image',
+      component: AssetScaledImageExampleView,
+      backButtonTitle: 'Back',
+      passProps: { asset: asset },
+    });
+  },

-  _renderImage = (asset) => {
-    const imageSize = this.state.bigImages ? 150 : 75;
-    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    const {location} = asset.node;
-    const locationStr = location ? JSON.stringify(location) : 'Unknown location';
+  _renderImage(asset) {
+    var imageSize = this.state.bigImages ? 150 : 75;
+    var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
+    var location = asset.node.location.longitude ?
+      JSON.stringify(asset.node.location) : 'Unknown location';
    return (
-      <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
-        <View style={styles.row}>
+      <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }>
+        <View key={asset} style={styles.row}>
          <Image
            source={asset.node.image}
            style={imageStyle}
          />
          <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) => {
-    const options = CameraRoll.GroupTypesOptions;
-    const index = Math.floor(value * options.length * 0.99);
-    const groupTypes = options[index];
+  _onSliderChange(value) {
+    var options = CameraRoll.GroupTypesOptions;
+    var index = Math.floor(value * options.length * 0.99);
+    var groupTypes = options[index];
    if (groupTypes !== this.state.groupTypes) {
      this.setState({groupTypes: groupTypes});
    }
-  };
+  },

-  _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({
+var styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flex: 1,
@@ -143,6 +133,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,15 @@
 */
 '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,16 +139,11 @@ var CameraRollView = React.createClass({
      groupTypes: this.props.groupTypes,
      assetType: this.props.assetType,
    };
-    if (Platform.OS === 'android') {
-      // not supported in android
-      delete fetchParams.groupTypes;
-    }
    if (this.state.lastCursor) {
      fetchParams.after = this.state.lastCursor;
    }

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

  /**
@@ -198,7 +184,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,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.
 *
@@ -25,7 +18,8 @@

 export type Example = {
  title: string,
-  render: () => ?ReactElement<any>,
+  /* $FlowFixMe(>=0.16.0) */
+  render: () => ?ReactElement<any, any, any>,
  description?: string,
  platform?: string;
 };
@@ -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,54 +31,52 @@ 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)),
+      (initialPosition) => this.setState({initialPosition}),
+      (error) => alert(error.message),
      {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
    );
-    this.watchID = navigator.geolocation.watchPosition((position) => {
-      var lastPosition = JSON.stringify(position);
+    this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
      this.setState({lastPosition});
    });
-  }
+  },

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

-  render() {
+  render: function() {
    return (
      <View>
        <Text>
          <Text style={styles.title}>Initial position: </Text>
-          {this.state.initialPosition}
+          {JSON.stringify(this.state.initialPosition)}
        </Text>
        <Text>
          <Text style={styles.title}>Current position: </Text>
-          {this.state.lastPosition}
+          {JSON.stringify(this.state.lastPosition)}
        </Text>
      </View>
    );
  }
-}
+});

 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}>
@@ -43,7 +35,6 @@ class ImageCapInsetsExample extends React.Component {
          <Image
            source={require('image!story-background')}
            style={styles.storyBackground}
-            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
          />
        </View>
@@ -54,14 +45,13 @@ class ImageCapInsetsExample extends React.Component {
          <Image
            source={require('image!story-background')}
            style={styles.storyBackground}
-            resizeMode={Image.resizeMode.stretch}
            capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
          />
        </View>
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  background: {
@@ -76,6 +66,7 @@ var styles = StyleSheet.create({
    width: 250,
    height: 150,
    borderWidth: 1,
+    resizeMode: Image.resizeMode.stretch,
  },
  text: {
    fontSize: 13.5,
@@ -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,21 +16,19 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  CameraRoll,
  Image,
-  ImageEditor,
  NativeModules,
-  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
-  UIManager,
  View,
-} = ReactNative;
+} = React;
+var ImageEditingManager = NativeModules.ImageEditingManager;
+var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;

 var PAGE_SIZE = 20;

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

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

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

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

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

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

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

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

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

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

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

 exports.framework = 'React';
-exports.title = 'ImageEditor';
-exports.description = 'Cropping and scaling with ImageEditor';
+exports.title = 'ImageEditingManager';
+exports.description = 'Cropping and scaling with ImageEditingManager';
 exports.examples = [{
  title: 'Image Cropping',
  render() {
@@ -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,97 +15,22 @@
 */
 '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(),
-    };
-  },
-
-  componentWillMount() {
-    this.setState({mountTime: new Date()});
-  },
-
-  render: function() {
-    var { mountTime } = this.state;
-
-    return (
-      <View>
-        <Image
-          source={this.props.source}
-          style={[styles.base, {overflow: 'visible'}]}
-          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
-          onLoad={(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)`);
-              });
-            });
-          }}
-        />
-        {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>
-      </View>
-    );
-  },
-
-  _loadEventFired(event) {
-    this.setState((state) => {
-      return state.events = [...state.events, event];
-    });
-  }
-});

 var NetworkImageExample = React.createClass({
+  watchID: (null: ?number),
+
  getInitialState: function() {
    return {
      error: false,
@@ -124,7 +42,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> :
@@ -140,95 +58,6 @@ var NetworkImageExample = React.createClass({
  }
 });

-var ImageSizeExample = React.createClass({
-  getInitialState: function() {
-    return {
-      width: 0,
-      height: 0,
-    };
-  },
-  componentDidMount: function() {
-    Image.getSize(this.props.source.uri, (width, height) => {
-      this.setState({width, height});
-    });
-  },
-  render: function() {
-    return (
-      <View style={{flexDirection: 'row'}}>
-        <Image
-          style={{
-            width: 60,
-            height: 60,
-            backgroundColor: 'transparent',
-            marginRight: 10,
-          }}
-          source={this.props.source} />
-        <Text>
-          Actual dimensions:{'\n'}
-          Width: {this.state.width}, Height: {this.state.height}
-        </Text>
-      </View>
-    );
-  },
-});
-
-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>';
@@ -250,28 +79,19 @@ exports.examples = [
  },
  {
    title: 'Plain Static Image',
-    description: 'Static assets should be placed in the source code tree, and ' +
-    'required in the same way as JavaScript modules.',
+    description: 'Static assets should be required by prefixing with `image!` ' +
+      'and are located in the app bundle.',
    render: function() {
      return (
        <View style={styles.horizontal}>
-          <Image source={require('./uie_thumb_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_thumb_selected.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_normal.png')} style={styles.icon} />
-          <Image source={require('./uie_comment_highlighted.png')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
+          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
+          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
        </View>
      );
    },
  },
-  {
-    title: 'Image Loading Events',
-    render: function() {
-      return (
-        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1&t=' + Date.now()}}
-          prefetchedSource={{uri: IMAGE_PREFETCH_URL}}/>
-      );
-    },
-  },
  {
    title: 'Error Handler',
    render: function() {
@@ -290,20 +110,6 @@ exports.examples = [
    },
    platform: 'ios',
  },
-  {
-    title: 'defaultSource',
-    description: 'Show a placeholder image when a network image is loading',
-    render: function() {
-      return (
-        <Image
-          defaultSource={require('./bunny.png')}
-          source={{uri: 'http://facebook.github.io/origami/public/images/birds.jpg'}}
-          style={styles.base}
-        />
-      );
-    },
-    platform: 'ios',
-  },
  {
    title: 'Border Color',
    render: function() {
@@ -437,19 +243,19 @@ exports.examples = [
        <View>
          <View style={styles.horizontal}>
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, {borderRadius: 5, tintColor: '#5ac8fa' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#4cd964' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#ff2d55' }]}
            />
            <Image
-              source={require('./uie_thumb_normal.png')}
+              source={require('image!uie_thumb_normal')}
              style={[styles.icon, styles.leftMargin, {borderRadius: 5, tintColor: '#8e8e93' }]}
            />
          </View>
@@ -484,71 +290,37 @@ exports.examples = [
      'rendered within the frame.',
    render: function() {
      return (
-        <View>
-          {[smallImage, fullImage].map((image, index) => {
-            return (
-            <View key={index}>
-              <View style={styles.horizontal}>
-                <View>
-                  <Text style={[styles.resizeModeText]}>
-                    Contain
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.contain}
-                    source={image}
-                  />
-                </View>
-                <View style={styles.leftMargin}>
-                  <Text style={[styles.resizeModeText]}>
-                    Cover
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.cover}
-                    source={image}
-                  />
-                </View>
-              </View>
-              <View style={styles.horizontal}>
-                <View>
-                  <Text style={[styles.resizeModeText]}>
-                    Stretch
-                  </Text>
-                  <Image
-                    style={styles.resizeMode}
-                    resizeMode={Image.resizeMode.stretch}
-                    source={image}
-                  />
-                </View>
-                { Platform.OS === '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>
-            </View>
-          );
-        })}
+        <View style={styles.horizontal}>
+          <View>
+            <Text style={[styles.resizeModeText]}>
+              Contain
+            </Text>
+            <Image
+              style={styles.resizeMode}
+              resizeMode={Image.resizeMode.contain}
+              source={fullImage}
+            />
+          </View>
+          <View style={styles.leftMargin}>
+            <Text style={[styles.resizeModeText]}>
+              Cover
+            </Text>
+            <Image
+              style={styles.resizeMode}
+              resizeMode={Image.resizeMode.cover}
+              source={fullImage}
+            />
+          </View>
+          <View style={styles.leftMargin}>
+            <Text style={[styles.resizeModeText]}>
+              Stretch
+            </Text>
+            <Image
+              style={styles.resizeMode}
+              resizeMode={Image.resizeMode.stretch}
+              source={fullImage}
+            />
+          </View>
        </View>
      );
    },
@@ -589,63 +361,6 @@ exports.examples = [
    },
    platform: 'ios',
  },
-  {
-    title: 'Image Size',
-    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!LegacyImage')}
-        />
-      );
-    },
-  },
-  {
-    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>
-      );
-    },
-  },
 ];

 var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
@@ -703,8 +418,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,46 +15,35 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Image,
  LayoutAnimation,
  StyleSheet,
  Text,
  View,
-} = ReactNative;
-
-type Layout = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
+} = React;

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

-type State = {
-  containerStyle?: { width: number },
-  extraText?: string,
-  imageLayout?: Layout,
-  textLayout?: Layout,
-  viewLayout?: Layout,
-  viewStyle: { margin: number },
-};
-
-class LayoutEventExample extends React.Component {
-  state: State = {
-    viewStyle: {
-      margin: 20,
-    },
-  };
-
-  animateViewLayout = () => {
+var LayoutEventExample = React.createClass({
+  getInitialState: function() {
+    return {
+      viewStyle: {
+        margin: 20,
+      },
+    };
+  },
+  animateViewLayout: function() {
    LayoutAnimation.configureNext(
      LayoutAnimation.Presets.spring,
      () => {
@@ -74,35 +56,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 +112,7 @@ class LayoutEventExample extends React.Component {
      </View>
    );
  }
-}
+});

 var styles = StyleSheet.create({
  view: {
@@ -170,7 +146,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.
 *
@@ -22,23 +15,21 @@
 */
 'use strict';

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

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

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

@@ -58,27 +49,24 @@ var ListViewSimpleExample = React.createClass({
  render: function() {
    return (
      <UIExplorerPage
-        title={this.props.navigator ? null : '<ListView>'}
+        title={this.props.navigator ? null : '<ListView> - Simple'}
        noSpacer={true}
        noScroll={true}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
-          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={this._renderSeparator}
        />
      </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];
+    var imgSource = {
+      uri: 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} />
@@ -86,6 +74,7 @@ var ListViewSimpleExample = React.createClass({
              {rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
            </Text>
          </View>
+          <View style={styles.separator} />
        </View>
      </TouchableHighlight>
    );
@@ -106,34 +95,9 @@ 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 = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
-  ];
+var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
 var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';

 /* eslint no-bitwise: 0 */
@@ -152,6 +116,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,21 +23,21 @@ var {
  StyleSheet,
  Text,
  View,
-} = ReactNative;
+} = React;

 var THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png',
+  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png',
 ];

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

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

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

-var NativeModules = require('NativeModules');
-var {
-  UIManager,
-} = NativeModules;
-
-var THUMB_URLS = [
-  require('./Thumbnails/like.png'),
-  require('./Thumbnails/dislike.png'),
-  require('./Thumbnails/call.png'),
-  require('./Thumbnails/fist.png'),
-  require('./Thumbnails/bandaged.png'),
-  require('./Thumbnails/flowers.png'),
-  require('./Thumbnails/heart.png'),
-  require('./Thumbnails/liking.png'),
-  require('./Thumbnails/party.png'),
-  require('./Thumbnails/poke.png'),
-  require('./Thumbnails/superlike.png'),
-  require('./Thumbnails/victory.png'),
-];
+var PAGE_SIZE = 4;
+var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;

-class Thumb extends React.Component {
-  componentWillMount() {
-    UIManager.setLayoutAnimationEnabledExperimental &&
-      UIManager.setLayoutAnimationEnabledExperimental(true);
-  }
-
-  _getThumbIdx = () => {
+var Thumb = React.createClass({
+  getInitialState: function() {
+    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
+  },
+  _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}
        style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
-        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
        {this.state.dir === 'column' ?
          <Text>
            Oooo, look at this new text!  So awesome it may just be crazy.
@@ -96,16 +64,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 +102,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 +120,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 +136,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 +146,9 @@ class ListViewPagingExample extends React.Component {
        </Text>
      </View>
    );
-  };
+  },

-  render() {
+  render: function() {
    return (
      <ListView
        style={styles.listview}
@@ -193,18 +159,19 @@ class ListViewPagingExample extends React.Component {
        renderSectionHeader={this.renderSectionHeader}
        renderRow={this.renderRow}
        initialListSize={10}
-        pageSize={4}
-        scrollRenderAheadDistance={500}
+        pageSize={PAGE_SIZE}
+        scrollRenderAheadDistance={2000}
      />
    );
-  }
+  },

-  _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: {
@@ -0,0 +1,253 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  MapView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} = React;
+
+var regionText = {
+  latitude: '0',
+  longitude: '0',
+  latitudeDelta: '0',
+  longitudeDelta: '0',
+};
+
+var MapRegionInput = React.createClass({
+
+  propTypes: {
+    region: React.PropTypes.shape({
+      latitude: React.PropTypes.number.isRequired,
+      longitude: React.PropTypes.number.isRequired,
+      latitudeDelta: React.PropTypes.number.isRequired,
+      longitudeDelta: React.PropTypes.number.isRequired,
+    }),
+    onChange: React.PropTypes.func.isRequired,
+  },
+
+  getInitialState: function() {
+    return {
+      region: {
+        latitude: 0,
+        longitude: 0,
+        latitudeDelta: 0,
+        longitudeDelta: 0,
+      }
+    };
+  },
+
+  componentWillReceiveProps: function(nextProps) {
+    this.setState({
+      region: nextProps.region || this.getInitialState().region
+    });
+  },
+
+  render: function() {
+    var region = this.state.region || this.getInitialState().region;
+    return (
+      <View>
+        <View style={styles.row}>
+          <Text>
+            {'Latitude'}
+          </Text>
+          <TextInput
+            value={'' + region.latitude}
+            style={styles.textInput}
+            onChange={this._onChangeLatitude}
+            selectTextOnFocus={true}
+          />
+        </View>
+        <View style={styles.row}>
+          <Text>
+            {'Longitude'}
+          </Text>
+          <TextInput
+            value={'' + region.longitude}
+            style={styles.textInput}
+            onChange={this._onChangeLongitude}
+            selectTextOnFocus={true}
+          />
+        </View>
+        <View style={styles.row}>
+          <Text>
+            {'Latitude delta'}
+          </Text>
+          <TextInput
+            value={'' + region.latitudeDelta}
+            style={styles.textInput}
+            onChange={this._onChangeLatitudeDelta}
+            selectTextOnFocus={true}
+          />
+        </View>
+        <View style={styles.row}>
+          <Text>
+            {'Longitude delta'}
+          </Text>
+          <TextInput
+            value={'' + region.longitudeDelta}
+            style={styles.textInput}
+            onChange={this._onChangeLongitudeDelta}
+            selectTextOnFocus={true}
+          />
+        </View>
+        <View style={styles.changeButton}>
+          <Text onPress={this._change}>
+            {'Change'}
+          </Text>
+        </View>
+      </View>
+    );
+  },
+
+  _onChangeLatitude: function(e) {
+    regionText.latitude = e.nativeEvent.text;
+  },
+
+  _onChangeLongitude: function(e) {
+    regionText.longitude = e.nativeEvent.text;
+  },
+
+  _onChangeLatitudeDelta: function(e) {
+    regionText.latitudeDelta = e.nativeEvent.text;
+  },
+
+  _onChangeLongitudeDelta: function(e) {
+    regionText.longitudeDelta = e.nativeEvent.text;
+  },
+
+  _change: function() {
+    this.setState({
+      latitude: parseFloat(regionText.latitude),
+      longitude: parseFloat(regionText.longitude),
+      latitudeDelta: parseFloat(regionText.latitudeDelta),
+      longitudeDelta: parseFloat(regionText.longitudeDelta),
+    });
+    this.props.onChange(this.state.region);
+  },
+
+});
+
+var MapViewExample = React.createClass({
+
+  getInitialState() {
+    return {
+      mapRegion: null,
+      mapRegionInput: null,
+      annotations: null,
+      isFirstLoad: true,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <MapView
+          style={styles.map}
+          onRegionChange={this._onRegionChange}
+          onRegionChangeComplete={this._onRegionChangeComplete}
+          region={this.state.mapRegion || undefined}
+          annotations={this.state.annotations || undefined}
+        />
+        <MapRegionInput
+          onChange={this._onRegionInputChanged}
+          region={this.state.mapRegionInput || undefined}
+        />
+      </View>
+    );
+  },
+
+  _getAnnotations(region) {
+    return [{
+      longitude: region.longitude,
+      latitude: region.latitude,
+      title: 'You Are Here',
+    }];
+  },
+
+  _onRegionChange(region) {
+    this.setState({
+      mapRegionInput: region,
+    });
+  },
+
+  _onRegionChangeComplete(region) {
+    if (this.state.isFirstLoad) {
+      this.setState({
+        mapRegionInput: region,
+        annotations: this._getAnnotations(region),
+        isFirstLoad: false,
+      });
+    }
+  },
+
+  _onRegionInputChanged(region) {
+    this.setState({
+      mapRegion: region,
+      mapRegionInput: region,
+      annotations: this._getAnnotations(region),
+    });
+  },
+
+});
+
+var styles = StyleSheet.create({
+  map: {
+    height: 150,
+    margin: 10,
+    borderWidth: 1,
+    borderColor: '#000000',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  textInput: {
+    width: 150,
+    height: 20,
+    borderWidth: 0.5,
+    borderColor: '#aaaaaa',
+    fontSize: 13,
+    padding: 4,
+  },
+  changeButton: {
+    alignSelf: 'center',
+    marginTop: 5,
+    padding: 3,
+    borderWidth: 0.5,
+    borderColor: '#777777',
+  },
+});
+
+exports.displayName = (undefined: ?string);
+exports.title = '<MapView>';
+exports.description = 'Base component to display maps';
+exports.examples = [
+  {
+    title: 'Map',
+    render(): ReactElement { return <MapViewExample />; }
+  },
+  {
+    title: 'Map shows user location',
+    render() {
+      return  <MapView style={styles.map} showsUserLocation={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,37 +15,35 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
  Modal,
-  Picker,
  StyleSheet,
-  Switch,
+  SwitchIOS,
  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,16 @@ 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})}
-          >
+          visible={this.state.modalVisible}>
          <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,38 +108,15 @@ 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>
+          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
        </View>

        <View style={styles.row}>
          <Text style={styles.rowTitle}>Transparent</Text>
-          <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>
+          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
        </View>

        <Button onPress={this._setModalVisible.bind(this, true)}>
@@ -173,8 +124,8 @@ class ModalExample extends React.Component {
        </Button>
      </View>
    );
-  }
-}
+  },
+});

 exports.examples = [
  {
@@ -192,7 +143,6 @@ var styles = StyleSheet.create({
  },
  innerContainer: {
    borderRadius: 10,
-    alignItems: 'center',
  },
  row: {
    alignItems: 'center',
@@ -208,7 +158,6 @@ var styles = StyleSheet.create({
    borderRadius: 5,
    flex: 1,
    height: 44,
-    alignSelf: 'stretch',
    justifyContent: 'center',
    overflow: 'hidden',
  },
@@ -220,7 +169,4 @@ var styles = StyleSheet.create({
  modalButton: {
    marginTop: 10,
  },
-  pickerItem: {
-    fontSize: 16,
-  },
 });
@@ -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,16 +13,16 @@
 */
 'use strict';

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

 var _getRandomRoute = function() {
  return {
@@ -50,8 +43,9 @@ class NavButton extends React.Component {
  }
 }

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

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

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

 var styles = StyleSheet.create({
  scene: {
@@ -134,7 +131,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -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,17 +13,17 @@
 */
 'use strict';

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

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

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

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

 var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -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,16 +14,18 @@
 'use strict';


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

 class NavButton extends React.Component {
  render() {
@@ -92,8 +87,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 +108,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 +149,9 @@ class NavigationBarSample extends React.Component {
        }
      />
    );
-  }
-}
+  },
+
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -167,7 +164,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -182,7 +179,7 @@ var styles = StyleSheet.create({
    marginVertical: 10,
  },
  navBarTitleText: {
-    color: '#373E4D',
+    color: cssVar('fbui-bluegray-60'),
    fontWeight: '500',
    marginVertical: 9,
  },
@@ -193,7 +190,7 @@ var styles = StyleSheet.create({
    paddingRight: 10,
  },
  navBarButtonText: {
-    color: '#5890FF',
+    color: cssVar('fbui-accent-blue'),
  },
  scene: {
    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.
 *
@@ -17,20 +10,18 @@
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @providesModule NavigatorExample
- */
+*/
 'use strict';

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

-  render() {
+  render: function() {
    return (
      <Navigator
        ref={this._setNavigatorRef}
@@ -150,13 +144,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 +173,8 @@ class TabBarExample extends React.Component {
        ];
      }
    }
-  };
-}
+  },
+});

 var styles = StyleSheet.create({
  messageText: {
@@ -195,7 +190,7 @@ var styles = StyleSheet.create({
  button: {
    backgroundColor: 'white',
    padding: 15,
-    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#CDCDCD',
  },
  buttonText: {
@@ -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,
+  StatusBarIOS,
  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,16 +32,20 @@ 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');
+    StatusBarIOS.setStyle('light-content');

    return (
      <NavigatorIOS
@@ -58,7 +55,7 @@ class NavigatorIOSColors extends React.Component {
          title: '<NavigatorIOS>',
          rightButtonTitle: 'Done',
          onRightButtonPress: () => {
-            StatusBar.setBarStyle('default');
+            StatusBarIOS.setStyle('default');
            this.props.onExampleExit();
          },
          passProps: {
@@ -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,22 +15,22 @@
 */
 'use strict';

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

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

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

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

-  _renderReplacePrevious = () => {
-    if (!this.props.depth || this.props.depth < 2) {
-      // this is to avoid replacing the top of the stack
+  _renderReplacePrevious: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
      return null;
    }
    return this._renderRow('Replace previous', () => {
@@ -200,11 +169,11 @@ class NavigatorIOSExamplePage extends React.Component {
        wrapperStyle: styles.customWrapperStyle,
      });
    });
-  };
+  },

-  _renderReplacePreviousAndPop = () => {
-    if (!this.props.depth || this.props.depth < 2) {
-      // this is to avoid replacing the top of the stack
+  _renderReplacePreviousAndPop: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
      return null;
    }
    return this._renderRow('Replace previous and pop', () => {
@@ -217,9 +186,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,34 +201,10 @@ 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;
-
-  render() {
-    const {onExampleExit} = this.props;
-    return (
-      <NavigatorIOS
-        style={styles.container}
-        initialRoute={{
-          title: NavigatorIOSExample.title,
-          component: NavigatorIOSExamplePage,
-          passProps: {onExampleExit},
-        }}
-        tintColor="#008888"
-      />
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
  },
+});
+
+var styles = StyleSheet.create({
  customWrapperStyle: {
    backgroundColor: '#bbdddd',
  },
@@ -282,7 +227,7 @@ const styles = StyleSheet.create({
  },
  line: {
    backgroundColor: '#bbbbbb',
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
  },
  row: {
    backgroundColor: 'white',
@@ -291,7 +236,7 @@ const styles = StyleSheet.create({
    paddingVertical: 15,
  },
  separator: {
-    height: StyleSheet.hairlineWidth,
+    height: 1 / PixelRatio.get(),
    backgroundColor: '#bbbbbb',
    marginLeft: 15,
  },
@@ -0,0 +1,147 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  NetInfo,
+  Text,
+  View
+} = React;
+
+var ReachabilitySubscription = React.createClass({
+  getInitialState() {
+    return {
+      reachabilityHistory: [],
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.addEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.removeEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  _handleReachabilityChange: function(reachability) {
+    var reachabilityHistory = this.state.reachabilityHistory.slice();
+    reachabilityHistory.push(reachability);
+    this.setState({
+      reachabilityHistory,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
+      </View>
+    );
+  }
+});
+
+var ReachabilityCurrent = React.createClass({
+  getInitialState() {
+    return {
+      reachability: null,
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.addEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+    NetInfo.fetch().done(
+      (reachability) => { this.setState({reachability}); }
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.removeEventListener(
+      'change',
+      this._handleReachabilityChange
+    );
+  },
+  _handleReachabilityChange: function(reachability) {
+    this.setState({
+      reachability,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{this.state.reachability}</Text>
+      </View>
+    );
+  }
+});
+
+var IsConnected = React.createClass({
+  getInitialState() {
+    return {
+      isConnected: null,
+    };
+  },
+  componentDidMount: function() {
+    NetInfo.isConnected.addEventListener(
+      'change',
+      this._handleConnectivityChange
+    );
+    NetInfo.isConnected.fetch().done(
+      (isConnected) => { this.setState({isConnected}); }
+    );
+  },
+  componentWillUnmount: function() {
+    NetInfo.isConnected.removeEventListener(
+      'change',
+      this._handleConnectivityChange
+    );
+  },
+  _handleConnectivityChange: function(isConnected) {
+    this.setState({
+      isConnected,
+    });
+  },
+  render() {
+    return (
+      <View>
+        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'NetInfo';
+exports.description = 'Monitor network status';
+exports.examples = [
+  {
+    title: 'NetInfo.isConnected',
+    description: 'Asynchronously load and observe connectivity',
+    render(): ReactElement { return <IsConnected />; }
+  },
+  {
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Asynchronously load and observe iOS reachability',
+    render(): ReactElement { return <ReachabilityCurrent />; }
+  },
+  {
+    title: 'NetInfo.reachabilityIOS',
+    description: 'Observed updates to iOS reachability',
+    render(): ReactElement { return <ReachabilitySubscription />; }
+  },
+];
@@ -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.
 *
@@ -18,20 +11,21 @@
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
- * @flow weak
+ * @flow-weak
 */
 'use strict';

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

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

 var PanResponderExample = React.createClass({

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

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

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

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

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

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

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

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

 var PickerItemIOS = PickerIOS.Item;

@@ -73,13 +65,15 @@ var CAR_MAKES_AND_MODELS = {
  },
 };

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

-  render() {
+  render: function() {
    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
    return (
@@ -93,53 +87,30 @@ class PickerExample extends React.Component {
              key={carMake}
              value={carMake}
              label={CAR_MAKES_AND_MODELS[carMake].name}
-            />
-          ))}
+              />
+            )
+          )}
        </PickerIOS>
        <Text>Please choose a model of {make.name}:</Text>
        <PickerIOS
          selectedValue={this.state.modelIndex}
          key={this.state.carMake}
          onValueChange={(modelIndex) => this.setState({modelIndex})}>
-          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
-            <PickerItemIOS
-              key={this.state.carMake + '_' + modelIndex}
-              value={modelIndex}
-              label={modelName}
-            />
-          ))}
+          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
+            (modelName, modelIndex) => (
+              <PickerItemIOS
+                key={this.state.carmake + '_' + modelIndex}
+                value={modelIndex}
+                label={modelName}
+              />
+            ))
+          }
        </PickerIOS>
        <Text>You selected: {selectionString}</Text>
      </View>
    );
-  }
-}
-
-class PickerStyleExample extends React.Component {
-  state = {
-    carMake: 'cadillac',
-    modelIndex: 0,
-  };
-
-  render() {
-    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
-    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
-    return (
-      <PickerIOS
-        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
-        selectedValue={this.state.carMake}
-        onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
-        {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
-          <PickerItemIOS
-            key={carMake}
-            value={carMake}
-            label={CAR_MAKES_AND_MODELS[carMake].name}
-          />
-        ))}
-      </PickerIOS>
-    );
-  }
-}
+  },
+});

 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';
@@ -147,13 +118,7 @@ exports.description = 'Render lists of selectable options with UIPickerView.';
 exports.examples = [
 {
  title: '<PickerIOS>',
-  render: function(): ReactElement<any> {
+  render: function(): ReactElement {
    return <PickerExample />;
  },
-},
-{
-  title: '<PickerIOS> with custom styling',
-  render: function(): ReactElement<any> {
-    return <PickerStyleExample />;
-  },
 }];
@@ -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,36 +15,33 @@
 */
 'use strict';

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

-class ExampleBox extends React.Component {
-  state = {
-    log: [],
-  };
-
-  handleLog = (msg) => {
+var ExampleBox = React.createClass({
+  getInitialState: function() {
+    return {
+      log: [],
+    };
+  },
+  handleLog: function(msg) {
    this.state.log = this.state.log.concat([msg]);
-  };
-
-  flushReactChanges = () => {
+  },
+  flushReactChanges: function() {
    this.forceUpdate();
-  };
-
+  },
  /**
   * Capture phase of bubbling to append separator before any of the bubbling
   * happens.
   */
-  handleTouchCapture = () => {
+  handleTouchCapture: function() {
    this.state.log = this.state.log.concat(['---']);
-  };
-
-  render() {
+  },
+  render: function() {
    return (
      <View>
        <View
@@ -68,10 +58,11 @@ class ExampleBox extends React.Component {
      </View>
    );
  }
-}
+});

-class NoneExample extends React.Component {
-  render() {
+
+var NoneExample = React.createClass({
+  render: function() {
    return (
      <View
        onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -97,14 +88,14 @@ class NoneExample extends React.Component {
      </View>
    );
  }
-}
+});

 /**
 * Special demo text that makes itself untouchable so that it doesn't destroy
 * the experiment and confuse the output.
 */
-class DemoText extends React.Component {
-  render() {
+var DemoText = React.createClass({
+  render: function() {
    return (
      <View pointerEvents="none">
        <Text
@@ -114,10 +105,10 @@ class DemoText extends React.Component {
      </View>
    );
  }
-}
+});

-class BoxNoneExample extends React.Component {
-  render() {
+var BoxNoneExample = React.createClass({
+  render: function() {
    return (
      <View
        onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -151,10 +142,10 @@ class BoxNoneExample extends React.Component {
      </View>
    );
  }
-}
+});

-class BoxOnlyExample extends React.Component {
-  render() {
+var BoxOnlyExample = React.createClass({
+  render: function() {
    return (
      <View
        onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -188,10 +179,10 @@ class BoxOnlyExample extends React.Component {
      </View>
    );
  }
-}
+});

 type ExampleClass = {
-  Component: ReactClass<any>,
+  Component: ReactClass<any, any, any>,
  title: string,
  description: string,
 };
@@ -0,0 +1,62 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var ProgressBar = require('ProgressBarAndroid');
+var React = require('React');
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var ProgressBarAndroidExample = React.createClass({
+
+  statics: {
+    title: '<ProgressBarAndroid>',
+    description: 'Visual indicator of progress of some operation. ' +
+        'Shows either a cyclic animation or a horizontal bar.',
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="ProgressBar Examples">
+        <UIExplorerBlock title="Default ProgressBar">
+          <ProgressBar />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Small ProgressBar">
+          <ProgressBar styleAttr="Small" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Large ProgressBar">
+          <ProgressBar styleAttr="Large" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Inverse ProgressBar">
+          <ProgressBar styleAttr="Inverse" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Small Inverse ProgressBar">
+          <ProgressBar styleAttr="SmallInverse" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Large Inverse ProgressBar">
+          <ProgressBar styleAttr="LargeInverse" />
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+module.exports = ProgressBarAndroidExample;
@@ -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,13 +15,12 @@
 */
 'use strict';

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

 var ProgressViewExample = React.createClass({
@@ -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 {
  AlertIOS,
  PushNotificationIOS,
@@ -31,10 +23,10 @@ var {
  Text,
  TouchableHighlight,
  View,
-} = ReactNative;
+} = React;

-class Button extends React.Component {
-  render() {
+var Button = React.createClass({
+  render: function() {
    return (
      <TouchableHighlight
        underlayColor={'white'}
@@ -46,23 +38,15 @@ class Button extends React.Component {
      </TouchableHighlight>
    );
  }
-}
+});

 class NotificationExample extends React.Component {
  componentWillMount() {
-    PushNotificationIOS.addEventListener('register', this._onRegistered);
-    PushNotificationIOS.addEventListener('registrationError', this._onRegistrationError);
-    PushNotificationIOS.addEventListener('notification', this._onRemoteNotification);
-    PushNotificationIOS.addEventListener('localNotification', this._onLocalNotification);
-
-    PushNotificationIOS.requestPermissions();
+    PushNotificationIOS.addEventListener('notification', this._onNotification);
  }

  componentWillUnmount() {
-    PushNotificationIOS.removeEventListener('register', this._onRegistered);
-    PushNotificationIOS.removeEventListener('registrationError', this._onRegistrationError);
-    PushNotificationIOS.removeEventListener('notification', this._onRemoteNotification);
-    PushNotificationIOS.removeEventListener('localNotification', this._onLocalNotification);
+    PushNotificationIOS.removeEventListener('notification', this._onNotification);
  }

  render() {
@@ -72,11 +56,6 @@ class NotificationExample extends React.Component {
          onPress={this._sendNotification}
          label="Send fake notification"
        />
-
-        <Button
-          onPress={this._sendLocalNotification}
-          label="Send fake local notification"
-        />
      </View>
    );
  }
@@ -92,53 +71,9 @@ class NotificationExample extends React.Component {
    });
  }

-  _sendLocalNotification() {
-    require('RCTDeviceEventEmitter').emit('localNotificationReceived', {
-      aps: {
-        alert: 'Sample local notification',
-        badge: '+1',
-        sound: 'default',
-        category: 'REACT_NATIVE'
-      },
-    });
-  }
-
-  _onRegistered(deviceToken) {
+  _onNotification(notification) {
    AlertIOS.alert(
-      'Registered For Remote Push',
-      `Device Token: ${deviceToken}`,
-      [{
-        text: 'Dismiss',
-        onPress: null,
-      }]
-    );
-  }
-
-  _onRegistrationError(error) {
-    AlertIOS.alert(
-      'Failed To Register For Remote Push',
-      `Error (${error.code}): ${error.message}`,
-      [{
-        text: 'Dismiss',
-        onPress: null,
-      }]
-    );
-  }
-
-  _onRemoteNotification(notification) {
-    AlertIOS.alert(
-      'Push Notification Received',
-      'Alert message: ' + notification.getMessage(),
-      [{
-        text: 'Dismiss',
-        onPress: null,
-      }]
-    );
-  }
-
-  _onLocalNotification(notification){
-    AlertIOS.alert(
-      'Local Notification Received',
+      'Notification Received',
      'Alert message: ' + notification.getMessage(),
      [{
        text: 'Dismiss',
@@ -149,8 +84,6 @@ class NotificationExample extends React.Component {
 }

 class NotificationPermissionExample extends React.Component {
-  state: any;
-
  constructor(props) {
    super(props);
    this.state = {permissions: null};
@@ -193,7 +126,9 @@ exports.description = 'Apple PushNotification and badge value';
 exports.examples = [
 {
  title: 'Badge Number',
-  render(): ReactElement<any> {
+  render(): React.Component {
+    PushNotificationIOS.requestPermissions();
+
    return (
      <View>
        <Button
@@ -210,13 +145,13 @@ exports.examples = [
 },
 {
  title: 'Push Notifications',
-  render(): ReactElement<any> {
+  render(): React.Component {
    return <NotificationExample />;
  }
 },
 {
  title: 'Notifications Permissions',
-  render(): ReactElement<any> {
+  render(): React.Component {
    return <NotificationPermissionExample />;
  }
 }];
@@ -6,7 +6,6 @@ The UIExplorer is a sample app that showcases React Native views and modules.

 Before running the app, make sure you ran:

-    git clone https://github.com/facebook/react-native.git
    cd react-native
    npm install

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

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

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

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

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

 exports.displayName = (undefined: ?string);
 exports.title = '<ScrollView>';
@@ -41,62 +31,43 @@ exports.examples = [
  title: '<ScrollView>',
  description: 'To make content scrollable, wrap it within a <ScrollView> component',
  render: function() {
-    var _scrollView: ScrollView;
    return (
-      <View>
-        <ScrollView
-          ref={(scrollView) => { _scrollView = scrollView; }}
-          automaticallyAdjustContentInsets={false}
-          onScroll={() => { console.log('onScroll!'); }}
-          scrollEventThrottle={200}
-          style={styles.scrollView}>
-          {THUMBS.map(createThumbRow)}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollTo({y: 0}); }}>
-          <Text>Scroll to top</Text>
-        </TouchableOpacity>
-      </View>
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        onScroll={() => { console.log('onScroll!'); }}
+        scrollEventThrottle={200}
+        style={styles.scrollView}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
    );
  }
 }, {
  title: '<ScrollView> (horizontal = true)',
  description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
  render: function() {
-    var _scrollView: ScrollView;
    return (
-      <View>
-        <ScrollView
-          ref={(scrollView) => { _scrollView = scrollView; }}
-          automaticallyAdjustContentInsets={false}
-          horizontal={true}
-          style={[styles.scrollView, styles.horizontalScrollView]}>
-          {THUMBS.map(createThumbRow)}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollTo({x: 0}); }}>
-          <Text>Scroll to start</Text>
-        </TouchableOpacity>
-      </View>
+      <ScrollView
+        automaticallyAdjustContentInsets={false}
+        horizontal={true}
+        style={[styles.scrollView, styles.horizontalScrollView]}>
+        {THUMBS.map(createThumbRow)}
+      </ScrollView>
    );
  }
 }];

-class Thumb extends React.Component {
-  shouldComponentUpdate(nextProps, nextState) {
+var Thumb = React.createClass({
+  shouldComponentUpdate: function(nextProps, nextState) {
    return false;
-  }
-
-  render() {
+  },
+  render: function() {
    return (
      <View style={styles.button}>
        <Image style={styles.img} source={{uri:this.props.uri}} />
      </View>
    );
  }
-}
+});

 var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
 THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
@@ -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,22 +15,22 @@
 */
 'use strict';

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

 var NUM_ITEMS = 20;

-class ScrollViewSimpleExample extends React.Component {
-  static title = '<ScrollView>';
-  static description = 'Component that enables scrolling through child components.';
-
-  makeItems = (nItems: number, styles): Array<any> => {
+var ScrollViewSimpleExample = React.createClass({
+  statics: {
+    title: '<ScrollView>',
+    description: 'Component that enables scrolling through child components.'
+  },
+  makeItems: function(nItems: number, styles): Array<any> {
    var items = [];
    for (var i = 0; i < nItems; i++) {
       items[i] = (
@@ -47,9 +40,9 @@ class ScrollViewSimpleExample extends React.Component {
       );
    }
    return items;
-  };
+  },

-  render() {
+  render: function() {
    // One of the items is a horizontal scroll view
    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
    items[4] = (
@@ -66,7 +59,7 @@ class ScrollViewSimpleExample extends React.Component {

    return verticalScrollView;
  }
-}
+});

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

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

-class BasicSegmentedControlExample extends React.Component {
+var BasicSegmentedControlExample = React.createClass({
  render() {
    return (
      <View>
@@ -44,9 +36,9 @@ class BasicSegmentedControlExample extends React.Component {
      </View>
    );
  }
-}
+});

-class PreSelectedSegmentedControlExample extends React.Component {
+var PreSelectedSegmentedControlExample = React.createClass({
  render() {
    return (
      <View>
@@ -56,9 +48,9 @@ class PreSelectedSegmentedControlExample extends React.Component {
      </View>
    );
  }
-}
+});

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

-class DisabledSegmentedControlExample extends React.Component {
+var DisabledSegmentedControlExample = React.createClass({
  render() {
    return (
      <View>
@@ -79,10 +71,10 @@ class DisabledSegmentedControlExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

-class ColorSegmentedControlExample extends React.Component {
+var ColorSegmentedControlExample = React.createClass({
  render() {
    return (
      <View>
@@ -94,15 +86,17 @@ class ColorSegmentedControlExample extends React.Component {
        </View>
      </View>
    );
-  }
-}
+  },
+});

-class EventSegmentedControlExample extends React.Component {
-  state = {
-    values: ['One', 'Two', 'Three'],
-    value: 'Not selected',
-    selectedIndex: undefined
-  };
+var EventSegmentedControlExample = React.createClass({
+  getInitialState() {
+    return {
+      values: ['One', 'Two', 'Three'],
+      value: 'Not selected',
+      selectedIndex: undefined
+    };
+  },

  render() {
    return (
@@ -120,20 +114,20 @@ class EventSegmentedControlExample extends React.Component {
          onValueChange={this._onValueChange} />
      </View>
    );
-  }
+  },

-  _onChange = (event) => {
+  _onChange(event) {
    this.setState({
      selectedIndex: event.nativeEvent.selectedSegmentIndex,
    });
-  };
+  },

-  _onValueChange = (value) => {
+  _onValueChange(value) {
    this.setState({
      value: value,
    });
-  };
-}
+  }
+});

 var styles = StyleSheet.create({
  text: {
@@ -150,26 +144,26 @@ exports.description = 'Native segmented control';
 exports.examples = [
  {
    title: 'Segmented controls can have values',
-    render(): ReactElement<any> { return <BasicSegmentedControlExample />; }
+    render(): ReactElement { return <BasicSegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can have a pre-selected value',
-    render(): ReactElement<any> { return <PreSelectedSegmentedControlExample />; }
+    render(): ReactElement { return <PreSelectedSegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can be momentary',
-    render(): ReactElement<any> { return <MomentarySegmentedControlExample />; }
+    render(): ReactElement { return <MomentarySegmentedControlExample />; }
  },
  {
    title: 'Segmented controls can be disabled',
-    render(): ReactElement<any> { return <DisabledSegmentedControlExample />; }
+    render(): ReactElement { return <DisabledSegmentedControlExample />; }
  },
  {
    title: 'Custom colors can be provided',
-    render(): ReactElement<any> { return <ColorSegmentedControlExample />; }
+    render(): ReactElement { return <ColorSegmentedControlExample />; }
  },
  {
    title: 'Change events can be detected',
-    render(): ReactElement<any> { return <EventSegmentedControlExample />; }
+    render(): ReactElement { return <EventSegmentedControlExample />; }
  }
 ];
@@ -0,0 +1,68 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  SliderIOS,
+  Text,
+  StyleSheet,
+  View,
+} = React;
+
+var SliderExample = React.createClass({
+  getInitialState() {
+    return {
+      value: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value}
+        </Text>
+        <SliderIOS
+          style={styles.slider}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<SliderIOS>';
+exports.displayName = 'SliderExample';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'SliderIOS',
+    render(): ReactElement { return <SliderExample />; }
+  }
+];
@@ -0,0 +1,117 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  StatusBarIOS,
+} = React;
+
+exports.framework = 'React';
+exports.title = 'StatusBarIOS';
+exports.description = 'Module for controlling iOS status bar';
+exports.examples = [{
+  title: 'Status Bar Style',
+  render() {
+    return (
+      <View>
+        {['default', 'light-content'].map((style) =>
+          <TouchableHighlight style={styles.wrapper}
+            onPress={() => StatusBarIOS.setStyle(style)}>
+            <View style={styles.button}>
+              <Text>setStyle('{style}')</Text>
+            </View>
+          </TouchableHighlight>
+        )}
+      </View>
+    );
+  },
+}, {
+  title: 'Status Bar Style Animated',
+  render() {
+    return (
+      <View>
+        {['default', 'light-content'].map((style) =>
+          <TouchableHighlight style={styles.wrapper}
+            onPress={() => StatusBarIOS.setStyle(style, true)}>
+            <View style={styles.button}>
+              <Text>setStyle('{style}', true)</Text>
+            </View>
+          </TouchableHighlight>
+        )}
+      </View>
+    );
+  },
+}, {
+  title: 'Status Bar Hidden',
+  render() {
+    return (
+      <View>
+        {['none', 'fade', 'slide'].map((animation) =>
+          <View>
+            <TouchableHighlight style={styles.wrapper}
+              onPress={() => StatusBarIOS.setHidden(true, animation)}>
+              <View style={styles.button}>
+                <Text>setHidden(true, '{animation}')</Text>
+              </View>
+            </TouchableHighlight>
+            <TouchableHighlight style={styles.wrapper}
+              onPress={() => StatusBarIOS.setHidden(false, animation)}>
+              <View style={styles.button}>
+                <Text>setHidden(false, '{animation}')</Text>
+              </View>
+            </TouchableHighlight>
+          </View>
+        )}
+      </View>
+    );
+  },
+}, {
+  title: 'Status Bar Network Activity Indicator',
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(true)}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(true)</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => StatusBarIOS.setNetworkActivityIndicatorVisible(false)}>
+          <View style={styles.button}>
+            <Text>setNetworkActivityIndicatorVisible(false)</Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  },
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});
@@ -0,0 +1,70 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ */
+'use strict';
+
+var React = require('React');
+
+var SwitchAndroid = require('SwitchAndroid');
+var Text = require('Text');
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var SwitchAndroidExample = React.createClass({
+  statics: {
+    title: '<SwitchAndroid>',
+    description: 'Standard Android two-state toggle component.'
+  },
+
+  getInitialState : function() {
+    return {
+      trueSwitchIsOn: true,
+      falseSwitchIsOn: false,
+      colorTrueSwitchIsOn: true,
+      colorFalseSwitchIsOn: false,
+      eventSwitchIsOn: false,
+    };
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="<SwitchAndroid>">
+        <UIExplorerBlock title="Switches can be set to true or false">
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.falseSwitchIsOn} />
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
+            value={this.state.trueSwitchIsOn} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Switches can be disabled">
+          <SwitchAndroid
+            disabled={true}
+            style={{marginBottom: 10}}
+            value={true} />
+          <SwitchAndroid
+            disabled={true}
+            value={false} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Change events can be detected">
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <SwitchAndroid
+            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
+            style={{marginBottom: 10}}
+            value={this.state.eventSwitchIsOn} />
+          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Switches are controlled components">
+          <SwitchAndroid />
+          <SwitchAndroid value={true} />
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  }
+});
+
+module.exports = SwitchAndroidExample;
@@ -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,69 +15,69 @@
 */
 'use strict';

-var React = require('react');
-var ReactNative = require('react-native');
+var React = require('react-native');
 var {
-  Platform,
-  Switch,
+  SwitchIOS,
  Text,
  View
-} = ReactNative;
-
-class BasicSwitchExample extends React.Component {
-  state = {
-    trueSwitchIsOn: true,
-    falseSwitchIsOn: false,
-  };
+} = React;

+var BasicSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      trueSwitchIsOn: true,
+      falseSwitchIsOn: false,
+    };
+  },
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
          style={{marginBottom: 10}}
          value={this.state.falseSwitchIsOn} />
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn} />
      </View>
    );
  }
-}
+});

-class DisabledSwitchExample extends React.Component {
+var DisabledSwitchExample = React.createClass({
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          disabled={true}
          style={{marginBottom: 10}}
          value={true} />
-        <Switch
+        <SwitchIOS
          disabled={true}
          value={false} />
      </View>
    );
-  }
-}
-
-class ColorSwitchExample extends React.Component {
-  state = {
-    colorTrueSwitchIsOn: true,
-    colorFalseSwitchIsOn: false,
-  };
+  },
+});

+var ColorSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      colorTrueSwitchIsOn: true,
+      colorFalseSwitchIsOn: false,
+    };
+  },
  render() {
    return (
      <View>
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
          onTintColor="#00ff00"
          style={{marginBottom: 10}}
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorFalseSwitchIsOn} />
-        <Switch
+        <SwitchIOS
          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
          onTintColor="#00ff00"
          thumbTintColor="#0000ff"
@@ -92,35 +85,36 @@ class ColorSwitchExample extends React.Component {
          value={this.state.colorTrueSwitchIsOn} />
      </View>
    );
-  }
-}
-
-class EventSwitchExample extends React.Component {
-  state = {
-    eventSwitchIsOn: false,
-    eventSwitchRegressionIsOn: true,
-  };
+  },
+});

+var EventSwitchExample = React.createClass({
+  getInitialState() {
+    return {
+      eventSwitchIsOn: false,
+      eventSwitchRegressionIsOn: true,
+    };
+  },
  render() {
    return (
      <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
        <View>
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchIsOn} />
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchIsOn} />
-          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
+            <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
        </View>
        <View>
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchRegressionIsOn} />
-          <Switch
+          <SwitchIOS
            onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
            style={{marginBottom: 10}}
            value={this.state.eventSwitchRegressionIsOn} />
@@ -129,35 +123,30 @@ class EventSwitchExample extends React.Component {
      </View>
    );
  }
-}
+});

-var examples = [
+exports.title = '<SwitchIOS>';
+exports.displayName = 'SwitchExample';
+exports.description = 'Native boolean input';
+exports.examples = [
  {
    title: 'Switches can be set to true or false',
-    render(): ReactElement<any> { return <BasicSwitchExample />; }
+    render(): ReactElement { return <BasicSwitchExample />; }
  },
  {
    title: 'Switches can be disabled',
-    render(): ReactElement<any> { return <DisabledSwitchExample />; }
+    render(): ReactElement { return <DisabledSwitchExample />; }
+  },
+  {
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSwitchExample />; }
  },
  {
    title: 'Change events can be detected',
-    render(): ReactElement<any> { return <EventSwitchExample />; }
+    render(): ReactElement { return <EventSwitchExample />; }
  },
  {
    title: 'Switches are controlled components',
-    render(): ReactElement<any> { return <Switch />; }
+    render(): ReactElement { return <SwitchIOS />; }
  }
 ];
-
-if (Platform.OS === 'ios') {
-  examples.push({
-    title: 'Custom colors can be provided',
-    render(): ReactElement<any> { return <ColorSwitchExample />; }
-  });
-}
-
-exports.title = '<Switch>';
-exports.displayName = 'SwitchExample';
-exports.description = 'Native boolean input';
-exports.examples = examples;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
James Ide	3a223e970e	[0.14.2] Include nvm fix in react-native-xcode.sh	2015-11-09 19:19:55 -08:00
James Ide	6f48d9a30d	Source nvm.sh (best effort) when running react-native-xcode.sh Summary: When Node is installed with nvm, scripts invoked from Xcode need to set up nvm. This can be done either by sourcing .profile/.bash_profile/.bashrc/etc... or by sourcing nvm.sh directly -- this diff does the latter and handles the case where nvm may have been installed the official way (under ~/.nvm/nvm.sh AFAIK) or via homebrew. Closes https://github.com/facebook/react-native/pull/4015 Reviewed By: svcscm Differential Revision: D2633301 Pulled By: frantic fb-gh-sync-id: 3c2b9b0d21887ba21d6f85f5d279314d50c1db28	2015-11-09 19:18:55 -08:00
James Ide	46aa9c60db	[0.14.1] Bump version numbers 0.14.1 contains a simple fix for Windows bat files.	2015-11-06 15:43:41 -08:00
Martín Bigio	7b5c140328	Fix comments on .bat file	2015-11-06 15:43:24 -08:00
Felix Oghină	915a2c4b5f	[travis] build stable branches	2015-11-05 15:08:43 -08:00
Felix Oghină	e8753caf75	[releng] update versions	2015-11-05 14:56:43 -08:00
Nick Lockwood	0b76e2a436	Fixed dev mode override to work with unminified JS Summary: public The dev mode override feature was built with the assumption that bunlded JS would be minified, and broke with unminified JS. This fixes that by using a more robust regex-based search. Reviewed By: tadeuzagallo Differential Revision: D2581240 fb-gh-sync-id: 4d4b45eb8573ceb956b7259550d80a9807f83d59	2015-11-02 10:08:06 -08:00
Martin Konicek	444712052a	[0.14.0-rc] Update npm and Pod version to 0.14.0-rc	2015-10-24 01:43:27 +01:00
Martin Konicek	035c181e77	[0.14.0-rc] Bump versions	2015-10-24 00:33:44 +01:00