[0.36.1] Bump version numbers

Summary:
They keyboard module is an instance of `NativeEventEmitter` which is an instance of `EventEmitter`. But the exported module only has a small subset of the APIs. This broke existing codebases which are using the methods not exported currently.

The PR just reassigns the variable before exporting so that the actual module is exported instead of the dummy object used for documentation. It also fixes a layout issue in the documentation.
Closes https://github.com/facebook/react-native/pull/10671

Differential Revision: D4110355

fbshipit-source-id: a6757f3ca8c2494970ba221b10a7e6e9a5f2d64d

.buckconfig

@@ -0,0 +1,10 @@
+
+[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

.buckjavaargs

@@ -0,0 +1 @@
+-Xmx512m -XX:+HeapDumpOnOutOfMemoryError

.editorconfig

@@ -0,0 +1,11 @@
+# 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

.eslintrc

@@ -19,15 +19,20 @@
     "__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,
@@ -36,6 +41,7 @@
     "process": false,
     "Promise": true,
     "requestAnimationFrame": true,
+    "requestIdleCallback": true,
     "require": false,
     "Set": true,
     "setImmediate": true,
@@ -43,7 +49,29 @@
     "setTimeout": false,
     "window": false,
     "XMLHttpRequest": false,
-    "pit": 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
   },
 
   "rules": {
@@ -55,7 +83,6 @@
     "no-debugger": 1,                // disallow use of debugger
     "no-dupe-keys": 1,               // disallow duplicate keys when creating object literals
     "no-empty": 0,                   // disallow empty statements
-    "no-empty-class": 1,             // disallow the use of empty character classes in regular expressions
     "no-ex-assign": 1,               // disallow assigning to the exception in a catch block
     "no-extra-boolean-cast": 1,      // disallow double-negation boolean casts in a boolean context
     "no-extra-parens": 0,            // disallow unnecessary parentheses (off by default)
@@ -82,13 +109,12 @@
     "curly": 1,                      // specify curly brace conventions for all control statements
     "default-case": 0,               // require default case in switch statements (off by default)
     "dot-notation": 1,               // encourages use of dot notation whenever possible
-    "eqeqeq": 1,                     // require the use of === and !==
+    "eqeqeq": [1, "allow-null"],     // require the use of === and !==
     "guard-for-in": 0,               // make sure for-in loops have an if statement (off by default)
     "no-alert": 1,                   // disallow the use of alert, confirm, and prompt
     "no-caller": 1,                  // disallow use of arguments.caller or arguments.callee
     "no-div-regex": 1,               // disallow division operators explicitly at beginning of regular expression (off by default)
     "no-else-return": 0,             // disallow else after a return in an if (off by default)
-    "no-empty-label": 1,             // disallow use of labels for anything other then loops and switches
     "no-eq-null": 0,                 // disallow comparisons to null without a type-checking operator (off by default)
     "no-eval": 1,                    // disallow use of eval()
     "no-extend-native": 1,           // disallow adding to native types
@@ -123,13 +149,6 @@
     "wrap-iife": 0,                  // require immediate function invocation to be wrapped in parentheses (off by default)
     "yoda": 1,                       // require or disallow Yoda conditions
 
-  // Strict Mode
-  // These rules relate to using strict mode.
-
-    "global-strict": [2, "always"],  // require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
-    "no-extra-strict": 1,            // disallow unnecessary use of "use strict"; when already in strict mode
-    "strict": 0,                     // require that all functions are run in strict mode
-
   // Variables
   // These rules have to do with variable declarations.
 
@@ -159,6 +178,8 @@
   // These rules are purely matters of style and are quite subjective.
 
     "key-spacing": 0,
+    "keyword-spacing": 1,            // enforce spacing before and after keywords
+    "jsx-quotes": [1, "prefer-double"],
     "comma-spacing": 0,
     "no-multi-spaces": 0,
     "brace-style": 0,                // enforce one true brace style (off by default)
@@ -174,21 +195,17 @@
     "no-lonely-if": 0,               // disallow if as the only statement in an else block (off by default)
     "no-new-object": 1,              // disallow use of the Object constructor
     "no-spaced-func": 1,             // disallow space between function identifier and application
-    "no-space-before-semi": 1,       // disallow space before semicolon
     "no-ternary": 0,                 // disallow the use of ternary operators (off by default)
     "no-trailing-spaces": 1,         // disallow trailing whitespace at the end of lines
     "no-underscore-dangle": 0,       // disallow dangling underscores in identifiers
-    "no-wrap-func": 1,               // disallow wrapping of non-IIFE statements in parens
     "no-mixed-spaces-and-tabs": 1,   // disallow mixed spaces and tabs for indentation
     "quotes": [1, "single", "avoid-escape"], // specify whether double or single quotes should be used
     "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)
@@ -204,20 +221,24 @@
     "no-bitwise": 1,                 // disallow use of bitwise operators (off by default)
     "no-plusplus": 0,                // disallow use of unary operators, ++ and -- (off by default)
 
+  // React Plugin
+  // The following rules are made available via `eslint-plugin-react`.
+
     "react/display-name": 0,
     "react/jsx-boolean-value": 0,
-    "react/jsx-quotes": [1, "double", "avoid-escape"],
+    "react/jsx-no-duplicate-props": 2,
     "react/jsx-no-undef": 1,
     "react/jsx-sort-props": 0,
-    "react/jsx-uses-react": 0,
+    "react/jsx-uses-react": 1,
     "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-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
     "react/no-multi-comp": 0,
+    "react/no-string-refs": 1,
     "react/no-unknown-property": 0,
     "react/prop-types": 0,
-    "react/react-in-jsx-scope": 0,
+    "react/react-in-jsx-scope": 1,
     "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
   }
 }

.flowconfig

@@ -1,50 +1,57 @@
 [ignore]
 
 # We fork some components by platform.
-.*/*.web.js
-.*/*.android.js
+.*/*[.]android.js
 
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
+# Ignore templates with `@flow` in header
+.*/local-cli/generator.*
 
-# 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/reconciler/ReactInstanceHandles.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/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
-.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
+# Ignore malformed json
+.*/node_modules/y18n/test/.*\.json
 
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
+# Ignore the website subdir
+<PROJECT_ROOT>/website/.*
 
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
+# Ignore BUCK generated dirs
+<PROJECT_ROOT>/\.buckd/
 
-# Ignore jest
-.*/node_modules/jest-cli/.*
+# Ignore unexpected extra @providesModule
+.*/node_modules/commoner/test/source/widget/share.js
 
-# Ignore Website
-.*/website/.*
+# 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__/.*
 
 [include]
 
 [libs]
 Libraries/react-native/react-native-interface.js
-Examples/UIExplorer/ImageMocks.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'
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
+unsafe.enable_getters_and_setters=true
+
 [version]
-0.13.1
+^0.33.0

.gitattributes

@@ -0,0 +1,6 @@
+# Force LF line endings for Bash scripts.   On Windows the rest of the source
+# files will typically have CR+LF endings (Git default on Windows), but Bash
+# scripts need to have LF endings to work (under Cygwin), thus override to force
+# that.
+gradlew text eol=lf
+*.sh text eol=lf

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,42 @@
+## 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]

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+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).

.gitignore

@@ -4,7 +4,6 @@
 !**/*.xcworkspacedata
 !**/*.xcsettings
 !**/*.xcscheme
-build/
 *.pbxuser
 !default.pbxuser
 *.mode1v3
@@ -22,10 +21,35 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# OS X
-.DS_Store
+# 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/
+/ReactAndroid/src/main/gen
+
+# Android
+.idea
+.gradle
+local.properties
+*.iml
+/android/
 
 # Node
 node_modules
 *.log
 .nvm
+
+# OS X
+.DS_Store
+
+# Test generated files
+/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js

.npmignore

@@ -0,0 +1,2 @@
+# rnpm
+/local-cli/rnpm

.travis.yml

@@ -1,71 +1,41 @@
 language: objective-c
 
-osx_image: beta-xcode6.3
+osx_image: xcode8
 
-cache:
-    directories:
-        - node_modules
-        - .nvm
-
-before_install:
-  - brew update
 install:
-  - brew reinstall xctool nvm
-  - npm install -g flow-bin@`node -p "require('fs').readFileSync('.flowconfig', 'utf8').split('[version]')[1].trim()"`
-  - mkdir -p .nvm
-  - cp $(brew --prefix nvm)/nvm-exec .nvm/
-  - export NVM_DIR=.nvm
+  - mkdir -p /Users/travis/build/facebook/.nvm
+  - export NVM_DIR="/Users/travis/build/facebook/.nvm"
+  - brew install nvm
   - source $(brew --prefix nvm)/nvm.sh
-  - nvm install iojs-v2
+  # TODO npm 2 started stalling on Travis, t11852928
+  - nvm install 5
+  - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
-  - npm install
+  - npm config set progress=false
+  - travis_wait npm install
 
 script:
-- |
-  nvm use iojs-v2
-
-  if [ "$TEST_TYPE" = objc ]
-  then
-
-    ./scripts/objc-test.sh
-
-  elif [ "$TEST_TYPE" = js ]
-  then
-
-    flow check && npm test
-
-  elif [ "$TEST_TYPE" = build_website ]
-  then
-
-    cd website
-    npm install
-    ./setup.sh
-    if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then
-      # Automatically publish the website
-      echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
-      ./publish.sh
-    else
-      # Make sure the website builds without error
-      node server/generate.js
-    fi
-
-  elif [ "$TEST_TYPE" = e2e ]
-  then
-    ./scripts/e2e-test.sh
-  else
-    echo "Unknown test type: $TEST_TYPE"
-    exit 1
-  fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry travis_wait ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = objc-tvos ]]; then travis_retry travis_wait ./scripts/objc-test-tvos.sh; fi
+  - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
+  - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi
 
 env:
   matrix:
+    - TEST_TYPE=e2e-objc
     - TEST_TYPE=objc
+    - TEST_TYPE=objc-tvos
     - TEST_TYPE=js
-    - TEST_TYPE=build_website
-    - TEST_TYPE=e2e
-  global:
-    - secure: "HlmG8M2DmBUSBh6KH1yVIe/8gR4iibg4WfcHq1x/xYQxGbvleq7NOo04V6eFHnl9cvZCu+PKH0841WLnGR7c4BBf47GVu/o16nXzggPumHKy++lDzxFPlJ1faMDfjg/5vjbAxRUe7D3y98hQSeGHH4tedc8LvTaFLVu7iiGqvjU="
 
 branches:
   only:
     - master
+    - /^.*-stable$/
+
+notifications:
+  email:
+    recipients:
+      - bestander@gmail.com
+    on_failure: change
+    on_success: change

CONTRIBUTING.md

@@ -14,14 +14,46 @@ 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. If you've added code that should be tested, add tests!
+2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. Ensure tests pass on Travis.
-5. Make sure your code lints (`node linter.js <files touched>`).
-6. If you haven't already, complete the CLA.
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
+
+    ```
+    $ cd website
+    $ npm install && npm start
+    go to: http://localhost:8079/react-native/index.html
+    ```
+
+5. Add the copyright notice to the top of any new files you've added.
+6. Ensure tests pass on Travis and Circle CI.
+7. Make sure your code lints (`node linter.js <files touched>`).
+8. 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.
 
 ### Contributor License Agreement (CLA)
 
@@ -33,7 +65,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need
 
 ### Where to Find Known Issues
 
-We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
+We are using GitHub Issues for our public bugs. We keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
 
 ### Reporting New Issues
 
@@ -45,8 +77,8 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 ## How to Get in Touch
 
-* IRC - [#reactnative on freenode](http://webchat.freenode.net/?channels=reactnative)
 * [Facebook group](https://www.facebook.com/groups/react.native.community/)
+* Reactiflux — [#react-native](http://join.reactiflux.com/)
 
 ## Style Guide
 
@@ -54,6 +86,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 #### General
 
+* **Most important: Look around.** Match the style you see used in the rest of the project. This includes formatting, naming things in code, naming things in documentation.
 * Add trailing commas,
 * 2 spaces for indentation (no tabs)
 * "Attractive"
@@ -66,6 +99,14 @@ 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
@@ -74,6 +115,12 @@ 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.

Examples/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-alert": 0
+  }
+}

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -12,8 +12,10 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1461632C1AC3E22900C2F5AD /* libReact.a */; };
-		58C1E40E1ACF54E9006D1A47 /* libRCTAnimationExperimental.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.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 */
@@ -24,12 +26,12 @@
 			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
 			remoteInfo = React;
 		};
-		58C1E40A1ACF54B4006D1A47 /* PBXContainerItemProxy */ = {
+		5F82F1761B85784500FAE87E /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
-			containerPortal = 13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */;
+			containerPortal = 5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */;
 			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTAnimationExperimental;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
 		};
 		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
@@ -38,10 +40,23 @@
 			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 */
-		13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimationExperimental.xcodeproj; path = ../../Libraries/Animation/RCTAnimationExperimental.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* 2048.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = 2048.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = 2048/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = 2048/AppDelegate.m; sourceTree = "<group>"; };
@@ -50,7 +65,10 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = 2048/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = 2048/main.m; sourceTree = "<group>"; };
 		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 */
@@ -58,8 +76,10 @@
 			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 */,
-				58C1E40E1ACF54E9006D1A47 /* libRCTAnimationExperimental.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -88,10 +108,10 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		58C1E4071ACF54B4006D1A47 /* Products */ = {
+		5F82F1731B85784500FAE87E /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.a */,
+				5F82F1771B85784500FAE87E /* libRCTWebSocket.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -99,9 +119,11 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */,
+				E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */,
+				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
-				13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -133,6 +155,22 @@
 			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 */
@@ -143,6 +181,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				68ACCCD51D2BE2D2008E368A /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -175,13 +214,21 @@
 			projectDirPath = "";
 			projectReferences = (
 				{
-					ProductGroup = 58C1E4071ACF54B4006D1A47 /* Products */;
-					ProjectRef = 13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */;
+					ProductGroup = E730D7521D4EE534000B7DA8 /* Products */;
+					ProjectRef = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
+				},
+				{
+					ProductGroup = E730D7481D4EE4D0000B7DA8 /* Products */;
+					ProjectRef = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
 				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
 				},
+				{
+					ProductGroup = 5F82F1731B85784500FAE87E /* Products */;
+					ProjectRef = 5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */;
+				},
 				{
 					ProductGroup = 146163281AC3E22900C2F5AD /* Products */;
 					ProjectRef = 146163271AC3E22900C2F5AD /* React.xcodeproj */;
@@ -202,11 +249,11 @@
 			remoteRef = 1461632B1AC3E22900C2F5AD /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.a */ = {
+		5F82F1771B85784500FAE87E /* libRCTWebSocket.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
-			path = libRCTAnimationExperimental.a;
-			remoteRef = 58C1E40A1ACF54B4006D1A47 /* PBXContainerItemProxy */;
+			path = libRCTWebSocket.a;
+			remoteRef = 5F82F1761B85784500FAE87E /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
 		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
@@ -216,6 +263,20 @@
 			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 */
@@ -230,6 +291,23 @@
 		};
 /* 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;
@@ -266,11 +344,11 @@
 				);
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"/Users/sahrens/src/fbobjc-hg/Libraries/FBReactKit/js/react-native-github/Libraries/Animation/build/Debug-iphoneos",
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
 				);
-				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -287,11 +365,11 @@
 				);
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"/Users/sahrens/src/fbobjc-hg/Libraries/FBReactKit/js/react-native-github/Libraries/Animation/build/Debug-iphoneos",
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
 				);
-				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
 			};
@@ -337,7 +415,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -377,7 +455,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/2048/2048/AppDelegate.m

@@ -14,48 +14,22 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  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.includeRequire.runModule.bundle"];
-
-  /**
-   * 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.includeRequire.runModule.bundle' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/2048/Game2048" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"Game2048"
+                                               initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
+  UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];

Examples/2048/Game2048.js

@@ -16,13 +16,14 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var Animated = require('Animated');
 var GameBoard = require('GameBoard');
@@ -53,6 +54,8 @@ class Board extends React.Component {
 }
 
 class Tile extends React.Component {
+  state: any;
+
   static _getPosition(index): number {
     return BOARD_PADDING + (index * (CELL_SIZE + CELL_MARGIN * 2) + CELL_MARGIN);
   }
@@ -147,6 +150,7 @@ class GameEndOverlay extends React.Component {
 class Game2048 extends React.Component {
   startX: number;
   startY: number;
+  state: any;
 
   constructor(props: {}) {
     super(props);
@@ -237,7 +241,7 @@ var styles = StyleSheet.create({
     marginBottom: 20,
   },
   tryAgain: {
-    backgroundColor: '#887766',
+    backgroundColor: '#887761',
     padding: 20,
     borderRadius: 5,
   },
@@ -279,7 +283,7 @@ var styles = StyleSheet.create({
     backgroundColor: '#eeeecc',
   },
   tile8: {
-    backgroundColor: '#ffbb88',
+    backgroundColor: '#ffbb87',
   },
   tile16: {
     backgroundColor: '#ff9966',

Examples/2048/GameBoard.js

@@ -17,7 +17,7 @@
 'use strict';
 
 // NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
-//     with no modificiation except to format it for CommonJS and fix lint/flow errors
+//     with no modification except to format it for CommonJS and fix lint/flow errors
 
 var rotateLeft = function (matrix) {
   var rows = matrix.length;

Examples/Movies/MovieCell.js

@@ -15,33 +15,36 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
-  PixelRatio,
+  Platform,
   StyleSheet,
   Text,
   TouchableHighlight,
+  TouchableNativeFeedback,
   View
-} = React;
+} = ReactNative;
 
 var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieCell = React.createClass({
-  render: function() {
+class MovieCell extends React.Component {
+  render() {
     var criticsScore = this.props.movie.ratings.critics_score;
+    var TouchableElement = TouchableHighlight;
+    if (Platform.OS === 'android') {
+      TouchableElement = TouchableNativeFeedback;
+    }
     return (
       <View>
-        <TouchableHighlight
+        <TouchableElement
           onPress={this.props.onSelect}
           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}
@@ -59,11 +62,11 @@ var MovieCell = React.createClass({
               </Text>
             </View>
           </View>
-        </TouchableHighlight>
+        </TouchableElement>
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   textContainer: {
@@ -93,8 +96,7 @@ var styles = StyleSheet.create({
   },
   cellBorder: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    // Trick to get the thinest line the device can display
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     marginLeft: 4,
   },
 });

Examples/Movies/MovieScreen.js

@@ -15,28 +15,25 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   Image,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
   View,
-} = React;
+} = ReactNative;
 
 var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieScreen = React.createClass({
-  render: function() {
+class MovieScreen extends React.Component {
+  render() {
     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}
@@ -60,11 +57,11 @@ var MovieScreen = React.createClass({
         <Cast actors={this.props.movie.abridged_cast} />
       </ScrollView>
     );
-  },
-});
+  }
+}
 
-var Ratings = React.createClass({
-  render: function() {
+class Ratings extends React.Component {
+  render() {
     var criticsScore = this.props.ratings.critics_score;
     var audienceScore = this.props.ratings.audience_score;
 
@@ -84,11 +81,11 @@ var Ratings = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var Cast = React.createClass({
-  render: function() {
+class Cast extends React.Component {
+  render() {
     if (!this.props.actors) {
       return null;
     }
@@ -103,8 +100,8 @@ var Cast = React.createClass({
         )}
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   contentContainer: {
@@ -152,7 +149,7 @@ var styles = StyleSheet.create({
   },
   separator: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     marginVertical: 10,
   },
   castTitle: {

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -200,6 +200,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				68ACCCEE1D2BE57F008E368A /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -216,7 +217,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0610;
+				LastUpgradeCheck = 0700;
 				ORGANIZATIONNAME = Facebook;
 			};
 			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Movies" */;
@@ -320,6 +321,22 @@
 		};
 /* 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;
@@ -357,7 +374,11 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
 			};
@@ -375,7 +396,11 @@
 				INFOPLIST_FILE = "$(SRCROOT)/Movies/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = Movies;
 				USER_HEADER_SEARCH_PATHS = "$(SRCROOT)/../../Libraries/**";
 			};
@@ -401,6 +426,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_OPTIMIZATION_LEVEL = 0;
@@ -420,7 +446,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -460,7 +486,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/Movies/Movies.xcodeproj/xcshareddata/xcschemes/Movies.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0610"
+   LastUpgradeVersion = "0700"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -38,6 +38,8 @@
             ReferencedContainer = "container:Movies.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
    </TestAction>
    <LaunchAction
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
@@ -47,8 +49,10 @@
       buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
-      <BuildableProductRunnable>
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
@@ -66,7 +70,8 @@
       useCustomWorkingDirectory = "NO"
       buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
-      <BuildableProductRunnable>
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
             BlueprintIdentifier = "13B07F861A680F5B00A75B9A"

Examples/Movies/Movies/AppDelegate.m

@@ -14,6 +14,7 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"
 
@@ -21,42 +22,15 @@
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  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.includeRequire.runModule.bundle"];
-
-  /**
-   * 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.includeRequire.runModule.bundle' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/Movies/MoviesApp.ios" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"MoviesApp"
+                                               initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
+  UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];

Examples/Movies/Movies/Info.plist

@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -33,6 +33,11 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -47,11 +52,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-  <key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/-->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
 </dict>
 </plist>

Examples/Movies/MoviesApp.android.js

@@ -0,0 +1,95 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule MoviesApp
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  AppRegistry,
+  BackAndroid,
+  Navigator,
+  StyleSheet,
+  ToolbarAndroid,
+  View,
+} = ReactNative;
+
+var MovieScreen = require('./MovieScreen');
+var SearchScreen = require('./SearchScreen');
+
+var _navigator;
+BackAndroid.addEventListener('hardwareBackPress', () => {
+  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
+    _navigator.pop();
+    return true;
+  }
+  return false;
+});
+
+var RouteMapper = function(route, navigationOperations, onComponentRef) {
+  _navigator = navigationOperations;
+  if (route.name === 'search') {
+    return (
+      <SearchScreen navigator={navigationOperations} />
+    );
+  } else if (route.name === 'movie') {
+    return (
+      <View style={{flex: 1}}>
+        <ToolbarAndroid
+          actions={[]}
+          navIcon={require('image!android_back_white')}
+          onIconClicked={navigationOperations.pop}
+          style={styles.toolbar}
+          titleColor="white"
+          title={route.movie.title} />
+        <MovieScreen
+          style={{flex: 1}}
+          navigator={navigationOperations}
+          movie={route.movie}
+        />
+      </View>
+    );
+  }
+};
+
+class MoviesApp extends React.Component {
+  render() {
+    var initialRoute = {name: 'search'};
+    return (
+      <Navigator
+        style={styles.container}
+        initialRoute={initialRoute}
+        configureScene={() => Navigator.SceneConfigs.FadeAndroid}
+        renderScene={RouteMapper}
+      />
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  toolbar: {
+    backgroundColor: '#a9a9a9',
+    height: 56,
+  },
+});
+
+AppRegistry.registerComponent('MoviesApp', () => MoviesApp);
+
+module.exports = MoviesApp;

Examples/Movies/MoviesApp.ios.js

@@ -16,17 +16,18 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
-} = React;
+} = ReactNative;
 
 var SearchScreen = require('./SearchScreen');
 
-var MoviesApp = React.createClass({
-  render: function() {
+class MoviesApp extends React.Component {
+  render() {
     return (
       <NavigatorIOS
         style={styles.container}
@@ -37,7 +38,7 @@ var MoviesApp = React.createClass({
       />
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/Movies/README.md

@@ -0,0 +1,57 @@
+# Movies app
+
+The Movies app is a demonstration of basic concepts, such as fetching data, rendering a list of data including images, and navigating between different screens.
+
+## Running this app
+
+Before running the app, make sure you ran:
+
+    git clone https://github.com/facebook/react-native.git
+    cd react-native
+    npm install
+
+### Running on iOS
+
+Mac OS and Xcode are required.
+
+- Open `Examples/Movies/Movies.xcodeproj` in Xcode
+- Hit the Run button
+
+See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
+
+### Running on Android
+
+You'll need to have all the [prerequisites](https://github.com/facebook/react-native/tree/master/ReactAndroid#prerequisites) (SDK, NDK) for Building React Native installed.
+
+Start an Android emulator ([Genymotion](https://www.genymotion.com) is recommended).
+
+    cd react-native
+    ./gradlew :Examples:Movies:android:app:installDebug
+    ./packager/packager.sh
+
+_Note: Building for the first time can take a while._
+
+Open the Movies app in your emulator.
+
+See [Running on Device](https://facebook.github.io/react-native/docs/running-on-device-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.
+
+This is different from apps created using `react-native init` which have a dependency on a specific version of React Native JS and native code, declared in a `package.json` file (and `build.gradle` for Android apps).

Examples/Movies/SearchBar.android.js

@@ -0,0 +1,100 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule SearchBar
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Image,
+  Platform,
+  ActivityIndicator,
+  TextInput,
+  StyleSheet,
+  TouchableNativeFeedback,
+  View,
+} = ReactNative;
+
+var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
+
+class SearchBar extends React.Component {
+  render() {
+    var background = IS_RIPPLE_EFFECT_SUPPORTED ?
+      TouchableNativeFeedback.SelectableBackgroundBorderless() :
+      TouchableNativeFeedback.SelectableBackground();
+    return (
+      <View style={styles.searchBar}>
+        <TouchableNativeFeedback
+            background={background}
+            onPress={() => this.refs.input && this.refs.input.focus()}>
+          <View>
+            <Image
+              source={require('image!android_search_white')}
+              style={styles.icon}
+            />
+          </View>
+        </TouchableNativeFeedback>
+        <TextInput
+          ref="input"
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoFocus={true}
+          onChange={this.props.onSearchChange}
+          placeholder="Search a movie..."
+          placeholderTextColor="rgba(255, 255, 255, 0.5)"
+          onFocus={this.props.onFocus}
+          style={styles.searchBarInput}
+        />
+        <ActivityIndicator
+          animating={this.props.isLoading}
+          color="white"
+          size="large"
+          style={styles.spinner}
+        />
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#a9a9a9',
+    height: 56,
+  },
+  searchBarInput: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+    height: 50,
+    padding: 0,
+    backgroundColor: 'transparent'
+  },
+  spinner: {
+    width: 30,
+    height: 30,
+    marginRight: 16,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginHorizontal: 8,
+  },
+});
+
+module.exports = SearchBar;

Examples/Movies/SearchBar.ios.js

@@ -0,0 +1,67 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @providesModule SearchBar
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  ActivityIndicator,
+  TextInput,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+class SearchBar extends React.Component {
+  render() {
+    return (
+      <View style={styles.searchBar}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChange={this.props.onSearchChange}
+          placeholder="Search a movie..."
+          onFocus={this.props.onFocus}
+          style={styles.searchBarInput}
+        />
+        <ActivityIndicator
+          animating={this.props.isLoading}
+          style={styles.spinner}
+        />
+      </View>
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  searchBar: {
+    marginTop: 64,
+    padding: 3,
+    paddingLeft: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchBarInput: {
+    fontSize: 15,
+    flex: 1,
+    height: 30,
+  },
+  spinner: {
+    width: 30,
+  },
+});
+
+module.exports = SearchBar;

Examples/Movies/SearchScreen.js

@@ -15,21 +15,24 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
-  ActivityIndicatorIOS,
+  ActivityIndicator,
   ListView,
+  Platform,
   StyleSheet,
   Text,
-  TextInput,
   View,
-} = React;
+} = ReactNative;
 var TimerMixin = require('react-timer-mixin');
 
-var invariant = require('invariant');
+var invariant = require('fbjs/lib/invariant');
+var dismissKeyboard = require('dismissKeyboard');
 
 var MovieCell = require('./MovieCell');
 var MovieScreen = require('./MovieScreen');
+var SearchBar = require('SearchBar');
 
 /**
  * This is for demo purposes only, and rate limited.
@@ -219,11 +222,20 @@ var SearchScreen = React.createClass({
   },
 
   selectMovie: function(movie: Object) {
-    this.props.navigator.push({
-      title: movie.title,
-      component: MovieScreen,
-      passProps: {movie},
-    });
+    if (Platform.OS === 'ios') {
+      this.props.navigator.push({
+        title: movie.title,
+        component: MovieScreen,
+        passProps: {movie},
+      });
+    } else {
+      dismissKeyboard();
+      this.props.navigator.push({
+        title: movie.title,
+        name: 'movie',
+        movie: movie,
+      });
+    }
   },
 
   onSearchChange: function(event: Object) {
@@ -237,7 +249,8 @@ var SearchScreen = React.createClass({
     if (!this.hasMore() || !this.state.isLoadingTail) {
       return <View style={styles.scrollSpinner} />;
     }
-    return <ActivityIndicatorIOS style={styles.scrollSpinner} />;
+
+    return <ActivityIndicator style={styles.scrollSpinner} />;
   },
 
   renderSeparator: function(
@@ -250,7 +263,7 @@ var SearchScreen = React.createClass({
         style = [style, styles.rowSeparatorHide];
     }
     return (
-      <View key={"SEP_" + sectionID + "_" + rowID}  style={style}/>
+      <View key={'SEP_' + sectionID + '_' + rowID}  style={style}/>
     );
   },
 
@@ -295,7 +308,8 @@ var SearchScreen = React.createClass({
         <SearchBar
           onSearchChange={this.onSearchChange}
           isLoading={this.state.isLoading}
-          onFocus={() => this.refs.listview.getScrollResponder().scrollTo(0, 0)}
+          onFocus={() =>
+            this.refs.listview && this.refs.listview.getScrollResponder().scrollTo({ x: 0, y: 0 })}
         />
         <View style={styles.separator} />
         {content}
@@ -304,8 +318,8 @@ var SearchScreen = React.createClass({
   },
 });
 
-var NoMovies = React.createClass({
-  render: function() {
+class NoMovies extends React.Component {
+  render() {
     var text = '';
     if (this.props.filter) {
       text = `No results for "${this.props.filter}"`;
@@ -321,28 +335,7 @@ var NoMovies = React.createClass({
       </View>
     );
   }
-});
-
-var SearchBar = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.searchBar}>
-        <TextInput
-          autoCapitalize="none"
-          autoCorrect={false}
-          onChange={this.props.onSearchChange}
-          placeholder="Search a movie..."
-          onFocus={this.props.onFocus}
-          style={styles.searchBarInput}
-        />
-        <ActivityIndicatorIOS
-          animating={this.props.isLoading}
-          style={styles.spinner}
-        />
-      </View>
-    );
-  }
-});
+}
 
 var styles = StyleSheet.create({
   container: {
@@ -356,25 +349,10 @@ var styles = StyleSheet.create({
     marginTop: 80,
     color: '#888888',
   },
-  searchBar: {
-    marginTop: 64,
-    padding: 3,
-    paddingLeft: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  searchBarInput: {
-    fontSize: 15,
-    flex: 1,
-    height: 30,
-  },
   separator: {
     height: 1,
     backgroundColor: '#eeeeee',
   },
-  spinner: {
-    width: 30,
-  },
   scrollSpinner: {
     marginVertical: 20,
   },

Examples/Movies/__tests__/getImageSource-test.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-jest.dontMock('../getImageSource');
+jest.unmock('../getImageSource');
 
 var getImageSource = require('../getImageSource');
 

Examples/Movies/android/app/BUCK

@@ -0,0 +1,31 @@
+include_defs('//ReactAndroid/DEFS')
+
+android_binary(
+  name = 'app',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//keystores:debug',
+  deps = [
+    ':movies-lib',
+  ],
+)
+
+android_library(
+  name = 'movies-lib',
+  srcs = glob(['src/main/java/**/*.java']),
+  deps = [
+    ':res',
+    react_native_dep('third-party/java/jsr-305:jsr-305'),
+    react_native_target('java/com/facebook/react/modules/core:core'),
+    react_native_target('java/com/facebook/react/shell:shell'),
+    react_native_target('java/com/facebook/react:react'),
+    react_native_target('jni/prebuilt:android-jsc'),
+    # .so files are prebuilt by Gradle with `./gradlew :ReactAndroid:packageReactNdkLibsForBuck`
+    react_native_target('jni/prebuilt:reactnative-libs'),
+  ],
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.facebook.react.movies',
+)

Examples/Movies/android/app/build.gradle

@@ -0,0 +1,31 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.facebook.react.movies"
+        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')
+}

Examples/Movies/android/app/gradle.properties

@@ -0,0 +1 @@
+android.useDeprecatedNdk=true

Examples/Movies/android/app/proguard-rules.pro

@@ -0,0 +1,17 @@
+# 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 *;
+#}

Examples/Movies/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.facebook.react.movies"
+    android:versionCode="1"
+    android:versionName="1.0">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <uses-sdk
+      android:minSdkVersion="16"
+      android:targetSdkVersion="22" />
+
+    <application
+      android:name=".MoviesApplication"
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@drawable/rotten_tomatoes_icon"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MoviesActivity">
+        <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>

Examples/Movies/android/app/src/main/java/com/facebook/react/movies/MoviesActivity.java

@@ -0,0 +1,23 @@
+/**
+ * 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 com.facebook.react.ReactActivity;
+
+public class MoviesActivity extends ReactActivity {
+  @Override
+  protected String getMainComponentName() {
+    return "MoviesApp";
+  }
+}

Examples/Movies/android/app/src/main/java/com/facebook/react/movies/MoviesApplication.java

@@ -0,0 +1,58 @@
+/**
+ * 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;
+  }
+}

Examples/Movies/android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<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=".MoviesApp">
+
+    <com.facebook.react.ReactRootView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:id="@+id/react_root_view"/>
+
+</RelativeLayout>

Examples/Movies/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">MoviesApp</string>
+</resources>

Examples/Movies/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>

Examples/Movies/getStyleFromScore.js

@@ -15,14 +15,16 @@
  */
 'use strict';
 
-var React = require('react-native');
+var ReactNative = require('react-native');
 var {
   StyleSheet,
-} = React;
+} = ReactNative;
 
 var MAX_VALUE = 200;
 
-function getStyleFromScore(score: number): {color: string} {
+import type { StyleObj } from 'StyleSheetTypes';
+
+function getStyleFromScore(score: number): StyleObj {
   if (score < 0) {
     return styles.noScore;
   }

Examples/SampleApp/.gitignore

@@ -1,27 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-
-# node.js
-#
-node_modules/
-npm-debug.log

Examples/SampleApp/_flowconfig

@@ -1,47 +0,0 @@
-[ignore]
-
-# We fork some components by platform.
-.*/*.web.js
-.*/*.android.js
-
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
-
-# 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/reconciler/ReactInstanceHandles.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/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
-.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
-
-
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
-
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
-
-# Ignore jest
-.*/react-native/node_modules/jest-cli/.*
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-
-[options]
-module.system=haste
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-
-[version]
-0.13.1

Examples/SampleApp/iOS/AppDelegate.m

@@ -1,60 +0,0 @@
-/**
- * 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.
- */
-
-#import "AppDelegate.h"
-
-#import "RCTRootView.h"
-
-@implementation AppDelegate
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-  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/SampleApp/index.ios.bundle"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle
-   * from the root of your project directory, run
-   *
-   * $ react-native bundle --minify
-   *
-   * see http://facebook.github.io/react-native/docs/runningondevice.html
-   */
-
-//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"SampleApp"
-                                                   launchOptions:launchOptions];
-
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
-  return YES;
-}
-
-@end

Examples/SampleApp/iOS/main.jsbundle

@@ -1,8 +0,0 @@
-// Offline JS
-// To re-generate the offline bundle, run this from the root of your project:
-//
-// $ react-native bundle --minify
-//
-// See http://facebook.github.io/react-native/docs/runningondevice.html for more details.
-
-throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -14,7 +14,9 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 144C5F681AC3E5D800B004E7 /* libReact.a */; };
 		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 */
@@ -39,6 +41,13 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		5FF8942C1B8556F8007731BE /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
+		};
 		832044941B492C1E00E297FC /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -46,6 +55,13 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTSettings;
 		};
+		E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
+			remoteInfo = RCTNetwork;
+		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -59,7 +75,9 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = TicTacToe/main.m; sourceTree = "<group>"; };
 		144C5F631AC3E5D800B004E7 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		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 */
@@ -67,6 +85,8 @@
 			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 */,
 				58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */,
@@ -109,6 +129,8 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */,
+				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
 				8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */,
@@ -125,6 +147,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		5FF894291B8556F8007731BE /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		832044901B492C1E00E297FC /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -152,6 +182,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		E730D7691D4EE5FC000B7DA8 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -162,6 +200,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				681C70ED1D2BE73C00E71791 /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -197,6 +236,10 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
+				{
+					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
+					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
+				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -205,6 +248,10 @@
 					ProductGroup = 58C572481AA6224300CDF9C8 /* Products */;
 					ProjectRef = 587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */;
 				},
+				{
+					ProductGroup = 5FF894291B8556F8007731BE /* Products */;
+					ProjectRef = 5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */;
+				},
 				{
 					ProductGroup = 144C5F641AC3E5D800B004E7 /* Products */;
 					ProjectRef = 144C5F631AC3E5D800B004E7 /* React.xcodeproj */;
@@ -239,6 +286,13 @@
 			remoteRef = 58C5724C1AA6224400CDF9C8 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTWebSocket.a;
+			remoteRef = 5FF8942C1B8556F8007731BE /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		832044951B492C1E00E297FC /* libRCTSettings.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -246,6 +300,13 @@
 			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 */
@@ -260,6 +321,22 @@
 		};
 /* 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;
@@ -297,7 +374,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -315,7 +395,10 @@
 				INFOPLIST_FILE = "$(SRCROOT)/TicTacToe/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
-				OTHER_LDFLAGS = "-ObjC";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = TicTacToe;
 			};
@@ -361,7 +444,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -401,7 +484,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../../React/**",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

Examples/TicTacToe/TicTacToe/AppDelegate.m

@@ -14,48 +14,22 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  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.includeRequire.runModule.bundle"];
-
-  /**
-   * 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.includeRequire.runModule.bundle' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/TicTacToe/TicTacToeApp" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"TicTacToeApp"
+                                                initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
+  UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];

Examples/TicTacToe/TicTacToeApp.js

@@ -16,14 +16,15 @@
  */
 'use strict';
 
-var React = require('react-native');
+var React = require('react');
+var ReactNative = require('react-native');
 var {
   AppRegistry,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-} = React;
+} = ReactNative;
 
 class Board {
   grid: Array<Array<number>>;
@@ -89,13 +90,12 @@ class Board {
         }
       }
     }
-
     return this.winner() === null;
   }
 }
 
-var Cell = React.createClass({
-  cellStyle() {
+class Cell extends React.Component {
+  cellStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellX;
@@ -104,9 +104,9 @@ var Cell = React.createClass({
       default:
         return null;
     }
-  },
+  };
 
-  textStyle() {
+  textStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellTextX;
@@ -115,9 +115,9 @@ var Cell = React.createClass({
       default:
         return {};
     }
-  },
+  };
 
-  textContents() {
+  textContents = () => {
     switch (this.props.player) {
       case 1:
         return 'X';
@@ -126,7 +126,7 @@ var Cell = React.createClass({
       default:
         return '';
     }
-  },
+  };
 
   render() {
     return (
@@ -142,9 +142,9 @@ var Cell = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-var GameEndOverlay = React.createClass({
+class GameEndOverlay extends React.Component {
   render() {
     var board = this.props.board;
 
@@ -175,7 +175,7 @@ var GameEndOverlay = React.createClass({
       </View>
     );
   }
-});
+}
 
 var TicTacToeApp = React.createClass({
   getInitialState() {
@@ -272,7 +272,6 @@ var styles = StyleSheet.create({
   // CELL TEXT
 
   cellText: {
-    borderRadius: 5,
     fontSize: 50,
     fontFamily: 'AvenirNext-Bold',
   },
@@ -306,7 +305,7 @@ var styles = StyleSheet.create({
     textAlign: 'center',
   },
   newGame: {
-    backgroundColor: '#887766',
+    backgroundColor: '#887765',
     padding: 20,
     borderRadius: 5,
   },

Examples/TicTacToe/android/app/BUCK

@@ -0,0 +1,31 @@
+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',
+)

Examples/TicTacToe/android/app/build.gradle

@@ -0,0 +1,31 @@
+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')
+}

Examples/TicTacToe/android/app/gradle.properties

@@ -0,0 +1 @@
+android.useDeprecatedNdk=true

Examples/TicTacToe/android/app/proguard-rules.pro

@@ -0,0 +1,17 @@
+# 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 *;
+#}

Examples/TicTacToe/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,30 @@
+<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>

Examples/TicTacToe/android/app/src/main/java/com/facebook/react/tictactoe/TicTacToeActivity.java

@@ -0,0 +1,23 @@
+/**
+ * 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";
+  }
+}

Examples/TicTacToe/android/app/src/main/java/com/facebook/react/tictactoe/TicTacToeApplication.java

@@ -0,0 +1,58 @@
+/**
+ * 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;
+  }
+}

Examples/TicTacToe/android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<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>

Examples/TicTacToe/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">TicTacToeApp</string>
+</resources>

Examples/TicTacToe/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>

Examples/UIExplorer/ActionSheetIOSExample.js

@@ -1,125 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  ActionSheetIOS,
-  StyleSheet,
-  Text,
-  View,
-} = React;
-
-var BUTTONS = [
-  'Button Index: 0',
-  'Button Index: 1',
-  'Button Index: 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 at index: "{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 />; }
-  }
-];

Examples/UIExplorer/AlertIOSExample.js

@@ -1,199 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  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,
-  },
-});

Examples/UIExplorer/ImageExample.js

@@ -1,388 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  Image,
-  StyleSheet,
-  Text,
-  View,
-  ActivityIndicatorIOS
-} = React;
-
-var ImageCapInsetsExample = require('./ImageCapInsetsExample');
-
-var NetworkImageExample = React.createClass({
-  watchID: (null: ?number),
-
-  getInitialState: function() {
-    return {
-      error: false,
-      loading: false,
-      progress: 0
-    };
-  },
-  render: function() {
-    var loader = this.state.loading ?
-      <View style={styles.progress}>
-        <Text>{this.state.progress}%</Text>
-        <ActivityIndicatorIOS style={{marginLeft:5}}/>
-      </View> : null;
-    return this.state.error ?
-      <Text>{this.state.error}</Text> :
-      <Image
-        source={this.props.source}
-        style={[styles.base, {overflow: 'visible'}]}
-        onLoadStart={(e) => this.setState({loading: true})}
-        onError={(e) => this.setState({error: e.nativeEvent.error, loading: false})}
-        onProgress={(e) => this.setState({progress: Math.round(100 * e.nativeEvent.loaded / e.nativeEvent.total)})}
-        onLoad={() => this.setState({loading: false, error: false})}>
-        {loader}
-      </Image>;
-  }
-});
-
-exports.displayName = (undefined: ?string);
-exports.framework = 'React';
-exports.title = '<Image>';
-exports.description = 'Base component for displaying different types of images.';
-
-exports.examples = [
-  {
-    title: 'Plain Network Image',
-    description: 'If the `source` prop `uri` property is prefixed with ' +
-    '"http", then it will be downloaded from the network.',
-    render: function() {
-      return (
-        <Image
-          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
-          style={styles.base}
-        />
-      );
-    },
-  },
-  {
-    title: 'Plain Static Image',
-    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('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: 'Error Handler',
-    render: function() {
-      return (
-        <NetworkImageExample source={{uri: 'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'}} />
-      );
-    },
-  },
-  {
-    title: 'Image Download Progress',
-    render: function() {
-      return (
-        <NetworkImageExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
-      );
-    },
-  },
-  {
-    title: 'Border Color',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            source={smallImage}
-            style={[
-              styles.base,
-              styles.background,
-              {borderWidth: 3, borderColor: '#f099f0'}
-            ]}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Border Width',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            source={smallImage}
-            style={[
-              styles.base,
-              styles.background,
-              {borderWidth: 5, borderColor: '#f099f0'}
-            ]}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Border Radius',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            style={[styles.base, styles.background, {borderRadius: 5}]}
-            source={smallImage}
-          />
-          <Image
-            style={[
-              styles.base,
-              styles.background,
-              styles.leftMargin,
-              {borderRadius: 19}
-            ]}
-            source={smallImage}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Background Color',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image source={smallImage} style={styles.base} />
-          <Image
-            style={[
-              styles.base,
-              styles.leftMargin,
-              {backgroundColor: 'rgba(0, 0, 100, 0.25)'}
-            ]}
-            source={smallImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
-            source={smallImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
-            source={smallImage}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Opacity',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <Image
-            style={[styles.base, {opacity: 1}]}
-            source={fullImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
-            source={fullImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
-            source={fullImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
-            source={fullImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
-            source={fullImage}
-          />
-          <Image
-            style={[styles.base, styles.leftMargin, {opacity: 0}]}
-            source={fullImage}
-          />
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Nesting',
-    render: function() {
-      return (
-        <Image
-          style={{width: 60, height: 60, backgroundColor: 'transparent'}}
-          source={fullImage}>
-          <Text style={styles.nestedText}>
-            React
-          </Text>
-        </Image>
-      );
-    },
-  },
-  {
-    title: 'Tint Color',
-    description: 'The `tintColor` style prop changes all the non-alpha ' +
-      'pixels to the tint color.',
-    render: function() {
-      return (
-        <View>
-          <View style={styles.horizontal}>
-            <Image
-              source={require('image!uie_thumb_normal')}
-              style={[styles.icon, {tintColor: '#5ac8fa' }]}
-            />
-            <Image
-              source={require('image!uie_thumb_normal')}
-              style={[styles.icon, styles.leftMargin, {tintColor: '#4cd964' }]}
-            />
-            <Image
-              source={require('image!uie_thumb_normal')}
-              style={[styles.icon, styles.leftMargin, {tintColor: '#ff2d55' }]}
-            />
-            <Image
-              source={require('image!uie_thumb_normal')}
-              style={[styles.icon, styles.leftMargin, {tintColor: '#8e8e93' }]}
-            />
-          </View>
-          <Text style={styles.sectionText}>
-            It also works with downloaded images:
-          </Text>
-          <View style={styles.horizontal}>
-            <Image
-              source={smallImage}
-              style={[styles.base, {tintColor: '#5ac8fa' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {tintColor: '#4cd964' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {tintColor: '#ff2d55' }]}
-            />
-            <Image
-              source={smallImage}
-              style={[styles.base, styles.leftMargin, {tintColor: '#8e8e93' }]}
-            />
-          </View>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Resize Mode',
-    description: 'The `resizeMode` style prop controls how the image is ' +
-      'rendered within the frame.',
-    render: function() {
-      return (
-        <View style={styles.horizontal}>
-          <View>
-            <Text style={[styles.resizeModeText]}>
-              Contain
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.contain}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Cover
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.cover}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Stretch
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.stretch}
-              source={fullImage}
-            />
-          </View>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Cap Insets',
-    description:
-      'When the image is resized, the corners of the size specified ' +
-      'by capInsets will stay a fixed size, but the center content and ' +
-      'borders of the image will be stretched. This is useful for creating ' +
-      'resizable rounded buttons, shadows, and other resizable assets.',
-    render: function() {
-      return <ImageCapInsetsExample />;
-    },
-  },
-];
-
-var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
-var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small.png'};
-
-var styles = StyleSheet.create({
-  base: {
-    width: 38,
-    height: 38,
-  },
-  progress: {
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    width: 100
-  },
-  leftMargin: {
-    marginLeft: 10,
-  },
-  background: {
-    backgroundColor: '#222222'
-  },
-  sectionText: {
-    marginVertical: 6,
-  },
-  nestedText: {
-    marginLeft: 12,
-    marginTop: 20,
-    backgroundColor: 'transparent',
-    color: 'white'
-  },
-  resizeMode: {
-    width: 90,
-    height: 60,
-    borderWidth: 0.5,
-    borderColor: 'black'
-  },
-  resizeModeText: {
-    fontSize: 11,
-    marginBottom: 3,
-  },
-  icon: {
-    width: 15,
-    height: 15,
-  },
-  horizontal: {
-    flexDirection: 'row',
-  }
-});

Examples/UIExplorer/ImageMocks.js

@@ -1,56 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-declare module 'image!story-background' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
-  declare var uri: string;
-  declare var isStatic: boolean;
-}
-
-declare module 'image!uie_comment_highlighted' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
-  declare var uri: string;
-  declare var isStatic: boolean;
-}
-
-declare module 'image!uie_comment_normal' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
-  declare var uri: string;
-  declare var isStatic: boolean;
-}
-
-declare module 'image!uie_thumb_normal' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
-  declare var uri: string;
-  declare var isStatic: boolean;
-}
-
-declare module 'image!uie_thumb_selected' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
-  declare var uri: string;
-  declare var isStatic: boolean;
-}
-
-declare module 'image!NavBarButtonPlus' {
-  declare var uri: string;
-  declare var isStatic: boolean;
-}

Examples/UIExplorer/MapViewExample.js

@@ -1,253 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  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} />;
-    }
-  }
-];

Examples/UIExplorer/NetInfoExample.js

@@ -1,147 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  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 />; }
-  },
-];

Examples/UIExplorer/README.md

@@ -0,0 +1,57 @@
+# UIExplorer
+
+The UIExplorer is a sample app that showcases React Native views and modules.
+
+## Running this app
+
+Before running the app, make sure you ran:
+
+    git clone https://github.com/facebook/react-native.git
+    cd react-native
+    npm install
+
+### Running on iOS
+
+Mac OS and Xcode are required.
+
+- Open `Examples/UIExplorer/UIExplorer.xcodeproj` in Xcode
+- Hit the Run button
+
+See [Running on device](https://facebook.github.io/react-native/docs/running-on-device-ios.html) if you want to use a physical device.
+
+### Running on Android
+
+You'll need to have all the [prerequisites](https://github.com/facebook/react-native/tree/master/ReactAndroid#prerequisites) (SDK, NDK) for Building React Native installed.
+
+Start an Android emulator ([Genymotion](https://www.genymotion.com) is recommended).
+
+    cd react-native
+    ./gradlew :Examples:UIExplorer:android:app:installDebug
+    ./packager/packager.sh
+
+_Note: Building for the first time can take a while._
+
+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.
+
+This is different from apps created using `react-native init` which have a dependency on a specific version of React Native JS and native code, declared in a `package.json` file (and `build.gradle` for Android apps).

Examples/UIExplorer/ResponderExample.js

@@ -1,136 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  StyleSheet,
-  PanResponder,
-  View,
-} = React;
-
-var CIRCLE_SIZE = 80;
-var CIRCLE_COLOR = 'blue';
-var CIRCLE_HIGHLIGHT_COLOR = 'green';
-
-
-var NavigatorIOSExample = React.createClass({
-
-  statics: {
-    title: 'PanResponder Sample',
-    description: 'Basic gesture handling example',
-  },
-
-  _panResponder: {},
-  _previousLeft: 0,
-  _previousTop: 0,
-  _circleStyles: {},
-  circle: (null : ?{ setNativeProps(props: Object): void }),
-
-  componentWillMount: function() {
-    this._panResponder = PanResponder.create({
-      onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
-      onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
-      onPanResponderGrant: this._handlePanResponderGrant,
-      onPanResponderMove: this._handlePanResponderMove,
-      onPanResponderRelease: this._handlePanResponderEnd,
-      onPanResponderTerminate: this._handlePanResponderEnd,
-    });
-    this._previousLeft = 20;
-    this._previousTop = 84;
-    this._circleStyles = {
-      left: this._previousLeft,
-      top: this._previousTop,
-    };
-  },
-
-  componentDidMount: function() {
-    this._updatePosition();
-  },
-
-  render: function() {
-    return (
-      <View
-        style={styles.container}>
-        <View
-          ref={(circle) => {
-            this.circle = circle;
-          }}
-          style={styles.circle}
-          {...this._panResponder.panHandlers}
-        />
-      </View>
-    );
-  },
-
-  _highlight: function() {
-    this.circle && this.circle.setNativeProps({
-      backgroundColor: CIRCLE_HIGHLIGHT_COLOR
-    });
-  },
-
-  _unHighlight: function() {
-    this.circle && this.circle.setNativeProps({
-      backgroundColor: CIRCLE_COLOR
-    });
-  },
-
-  _updatePosition: function() {
-    this.circle && this.circle.setNativeProps(this._circleStyles);
-  },
-
-  _handleStartShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
-    // Should we become active when the user presses down on the circle?
-    return true;
-  },
-
-  _handleMoveShouldSetPanResponder: function(e: Object, gestureState: Object): boolean {
-    // Should we become active when the user moves a touch over the circle?
-    return true;
-  },
-
-  _handlePanResponderGrant: function(e: Object, gestureState: Object) {
-    this._highlight();
-  },
-  _handlePanResponderMove: function(e: Object, gestureState: Object) {
-    this._circleStyles.left = this._previousLeft + gestureState.dx;
-    this._circleStyles.top = this._previousTop + gestureState.dy;
-    this._updatePosition();
-  },
-  _handlePanResponderEnd: function(e: Object, gestureState: Object) {
-    this._unHighlight();
-    this._previousLeft += gestureState.dx;
-    this._previousTop += gestureState.dy;
-  },
-});
-
-var styles = StyleSheet.create({
-  circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: CIRCLE_COLOR,
-    position: 'absolute',
-    left: 0,
-    top: 0,
-  },
-  container: {
-    flex: 1,
-    paddingTop: 64,
-  },
-});
-
-module.exports = NavigatorIOSExample;

Examples/UIExplorer/SliderIOSExample.js

@@ -1,68 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  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 />; }
-  }
-];

Examples/UIExplorer/StatusBarIOSExample.js

@@ -1,117 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @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,
-  },
-});

Examples/UIExplorer/TextInputExample.js

@@ -1,441 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  Text,
-  TextInput,
-  View,
-  StyleSheet,
-} = React;
-
-var WithLabel = React.createClass({
-  render: function() {
-    return (
-      <View style={styles.labelContainer}>
-        <View style={styles.label}>
-          <Text>{this.props.label}</Text>
-        </View>
-        {this.props.children}
-      </View>
-    );
-  },
-});
-
-var TextEventsExample = React.createClass({
-  getInitialState: function() {
-    return {
-      curText: '<No Event>',
-      prevText: '<No Event>',
-      prev2Text: '<No Event>',
-    };
-  },
-
-  updateText: function(text) {
-    this.setState((state) => {
-      return {
-        curText: text,
-        prevText: state.curText,
-        prev2Text: state.prevText,
-      };
-    });
-  },
-
-  render: function() {
-    return (
-      <View>
-        <TextInput
-          autoCapitalize="none"
-          placeholder="Enter text to see events"
-          autoCorrect={false}
-          onFocus={() => this.updateText('onFocus')}
-          onBlur={() => this.updateText('onBlur')}
-          onChange={(event) => this.updateText(
-            'onChange text: ' + event.nativeEvent.text
-          )}
-          onEndEditing={(event) => this.updateText(
-            'onEndEditing text: ' + event.nativeEvent.text
-          )}
-          onSubmitEditing={(event) => this.updateText(
-            'onSubmitEditing text: ' + event.nativeEvent.text
-          )}
-          style={styles.default}
-        />
-        <Text style={styles.eventLabel}>
-          {this.state.curText}{'\n'}
-          (prev: {this.state.prevText}){'\n'}
-          (prev2: {this.state.prev2Text})
-        </Text>
-      </View>
-    );
-  }
-});
-
-class RewriteExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {text: ''};
-  }
-  render() {
-    var limit = 20;
-    var remainder = limit - this.state.text.length;
-    var remainderColor = remainder > 5 ? 'blue' : 'red';
-    return (
-      <View style={styles.rewriteContainer}>
-        <TextInput
-          multiline={false}
-          maxLength={limit}
-          onChangeText={(text) => {
-            text = text.replace(/ /g, '_');
-            this.setState({text});
-          }}
-          style={styles.default}
-          value={this.state.text}
-        />
-        <Text style={[styles.remainder, {color: remainderColor}]}>
-          {remainder}
-        </Text>
-      </View>
-    );
-  }
-}
-
-var styles = StyleSheet.create({
-  page: {
-    paddingBottom: 300,
-  },
-  default: {
-    height: 26,
-    borderWidth: 0.5,
-    borderColor: '#0f0f0f',
-    flex: 1,
-    fontSize: 13,
-    padding: 4,
-  },
-  multiline: {
-    borderWidth: 0.5,
-    borderColor: '#0f0f0f',
-    flex: 1,
-    fontSize: 13,
-    height: 50,
-    padding: 4,
-    marginBottom: 4,
-  },
-  multilineWithFontStyles: {
-    color: 'blue',
-    fontWeight: 'bold',
-    fontSize: 18,
-    fontFamily: 'Cochin',
-    height: 60,
-  },
-  multilineChild: {
-    width: 50,
-    height: 40,
-    position: 'absolute',
-    right: 5,
-    backgroundColor: 'red',
-  },
-  eventLabel: {
-    margin: 3,
-    fontSize: 12,
-  },
-  labelContainer: {
-    flexDirection: 'row',
-    marginVertical: 2,
-    flex: 1,
-  },
-  label: {
-    width: 115,
-    alignItems: 'flex-end',
-    marginRight: 10,
-    paddingTop: 2,
-  },
-  rewriteContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  remainder: {
-    textAlign: 'right',
-    width: 24,
-  },
-});
-
-exports.displayName = (undefined: ?string);
-exports.title = '<TextInput>';
-exports.description = 'Single and multi-line text inputs.';
-exports.examples = [
-  {
-    title: 'Auto-focus',
-    render: function() {
-      return <TextInput autoFocus={true} style={styles.default} />;
-    }
-  },
-  {
-    title: "Live Re-Write (<sp>  ->  '_') + maxLength",
-    render: function() {
-      return <RewriteExample />;
-    }
-  },
-  {
-    title: 'Auto-capitalize',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="none">
-            <TextInput
-              autoCapitalize="none"
-              style={styles.default}
-            />
-          </WithLabel>
-          <WithLabel label="sentences">
-            <TextInput
-              autoCapitalize="sentences"
-              style={styles.default}
-            />
-          </WithLabel>
-          <WithLabel label="words">
-            <TextInput
-              autoCapitalize="words"
-              style={styles.default}
-            />
-          </WithLabel>
-          <WithLabel label="characters">
-            <TextInput
-              autoCapitalize="characters"
-              style={styles.default}
-            />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Auto-correct',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput autoCorrect={true} style={styles.default} />
-          </WithLabel>
-          <WithLabel label="false">
-            <TextInput autoCorrect={false} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Keyboard types',
-    render: function() {
-      var keyboardTypes = [
-        'default',
-        'ascii-capable',
-        'numbers-and-punctuation',
-        'url',
-        'number-pad',
-        'phone-pad',
-        'name-phone-pad',
-        'email-address',
-        'decimal-pad',
-        'twitter',
-        'web-search',
-        'numeric',
-      ];
-      var examples = keyboardTypes.map((type) => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput
-              keyboardType={type}
-              style={styles.default}
-            />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Return key types',
-    render: function() {
-      var returnKeyTypes = [
-        'default',
-        'go',
-        'google',
-        'join',
-        'next',
-        'route',
-        'search',
-        'send',
-        'yahoo',
-        'done',
-        'emergency-call',
-      ];
-      var examples = returnKeyTypes.map((type) => {
-        return (
-          <WithLabel key={type} label={type}>
-            <TextInput
-              returnKeyType={type}
-              style={styles.default}
-            />
-          </WithLabel>
-        );
-      });
-      return <View>{examples}</View>;
-    }
-  },
-  {
-    title: 'Enable return key automatically',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput enablesReturnKeyAutomatically={true} style={styles.default} />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Secure text entry',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="true">
-            <TextInput password={true} style={styles.default} defaultValue="abc" />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Event handling',
-    render: function(): ReactElement { return <TextEventsExample />; },
-  },
-  {
-    title: 'Colored input text',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            style={[styles.default, {color: 'blue'}]}
-            defaultValue="Blue"
-          />
-          <TextInput
-            style={[styles.default, {color: 'green'}]}
-            defaultValue="Green"
-          />
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Clear button mode',
-    render: function () {
-      return (
-        <View>
-          <WithLabel label="never">
-            <TextInput
-              style={styles.default}
-              clearButtonMode="never"
-            />
-          </WithLabel>
-          <WithLabel label="while editing">
-            <TextInput
-              style={styles.default}
-              clearButtonMode="while-editing"
-            />
-          </WithLabel>
-          <WithLabel label="unless editing">
-            <TextInput
-              style={styles.default}
-              clearButtonMode="unless-editing"
-            />
-          </WithLabel>
-          <WithLabel label="always">
-            <TextInput
-              style={styles.default}
-              clearButtonMode="always"
-            />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Clear and select',
-    render: function() {
-      return (
-        <View>
-          <WithLabel label="clearTextOnFocus">
-            <TextInput
-              placeholder="text is cleared on focus"
-              defaultValue="text is cleared on focus"
-              style={styles.default}
-              clearTextOnFocus={true}
-            />
-          </WithLabel>
-          <WithLabel label="selectTextOnFocus">
-            <TextInput
-              placeholder="text is selected on focus"
-              defaultValue="text is selected on focus"
-              style={styles.default}
-              selectTextOnFocus={true}
-            />
-          </WithLabel>
-        </View>
-      );
-    }
-  },
-  {
-    title: 'Multiline',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            placeholder="multiline text input"
-            multiline={true}
-            style={styles.multiline}
-          />
-          <TextInput
-            placeholder="multiline text input with font styles and placeholder"
-            multiline={true}
-            clearTextOnFocus={true}
-            autoCorrect={true}
-            autoCapitalize="words"
-            placeholderTextColor="red"
-            keyboardType="url"
-            style={[styles.multiline, styles.multilineWithFontStyles]}
-          />
-          <TextInput
-            placeholder="uneditable multiline text input"
-            editable={false}
-            multiline={true}
-            style={styles.multiline}
-          />
-          <TextInput
-            placeholder="multiline with children"
-            multiline={true}
-            enablesReturnKeyAutomatically={true}
-            returnKeyType="go"
-            style={styles.multiline}>
-            <View style={styles.multilineChild}/>
-          </TextInput>
-        </View>
-      );
-    }
-  }
-];

Examples/UIExplorer/TouchableExample.js

@@ -1,247 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  PixelRatio,
-  Image,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-  View,
-} = React;
-
-exports.displayName = (undefined: ?string);
-exports.title = '<Touchable*> and onPress';
-exports.examples = [
-{
-  title: '<TouchableHighlight>',
-  description: 'TouchableHighlight works by adding an extra view with a ' +
-    'black background under the single child view.  This works best when the ' +
-    'child view is fully opaque, although it can be made to work as a simple ' +
-    'background color change as well with the activeOpacity and ' +
-    'underlayColor props.',
-  render: function() {
-    return (
-      <View>
-        <View style={styles.row}>
-          <TouchableHighlight
-            style={styles.wrapper}
-            onPress={() => console.log('stock THW image - highlight')}>
-            <Image
-              source={heartImage}
-              style={styles.image}
-            />
-          </TouchableHighlight>
-          <TouchableHighlight
-            style={styles.wrapper}
-            activeOpacity={1}
-            animationVelocity={0}
-            underlayColor="rgb(210, 230, 255)"
-            onPress={() => console.log('custom THW text - hightlight')}>
-            <View style={styles.wrapperCustom}>
-              <Text style={styles.text}>
-                Tap Here For Custom Highlight!
-              </Text>
-            </View>
-          </TouchableHighlight>
-        </View>
-      </View>
-    );
-  },
-}, {
-  title: '<Text onPress={fn}> with highlight',
-  render: function(): ReactElement {
-    return <TextOnPressBox />;
-  },
-}, {
-  title: 'Touchable feedback events',
-  description: '<Touchable*> components accept onPress, onPressIn, ' +
-    'onPressOut, and onLongPress as props.',
-  render: function(): ReactElement {
-    return <TouchableFeedbackEvents />;
-  },
-}, {
-  title: 'Touchable delay for events',
-  description: '<Touchable*> components also accept delayPressIn, ' +
-    'delayPressOut, and delayLongPress as props. These props impact the ' +
-    'timing of feedback events.',
-  render: function(): ReactElement {
-    return <TouchableDelayEvents />;
-  },
-}];
-
-var TextOnPressBox = React.createClass({
-  getInitialState: function() {
-    return {
-      timesPressed: 0,
-    };
-  },
-  textOnPress: function() {
-    this.setState({
-      timesPressed: this.state.timesPressed + 1,
-    });
-  },
-  render: function() {
-    var textLog = '';
-    if (this.state.timesPressed > 1) {
-      textLog = this.state.timesPressed + 'x text onPress';
-    } else if (this.state.timesPressed > 0) {
-      textLog = 'text onPress';
-    }
-
-    return (
-      <View>
-        <Text
-          style={styles.textBlock}
-          onPress={this.textOnPress}>
-          Text has built-in onPress handling
-        </Text>
-        <View style={styles.logBox}>
-          <Text>
-            {textLog}
-          </Text>
-        </View>
-      </View>
-    );
-  }
-});
-
-var TouchableFeedbackEvents = React.createClass({
-  getInitialState: function() {
-    return {
-      eventLog: [],
-    };
-  },
-  render: function() {
-    return (
-      <View testID="touchable_feedback_events">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
-        <TouchableOpacity
-          style={styles.wrapper}
-          testID="touchable_feedback_events_button"
-          onPress={() => this._appendEvent('press')}
-          onPressIn={() => this._appendEvent('pressIn')}
-          onPressOut={() => this._appendEvent('pressOut')}
-          onLongPress={() => this._appendEvent('longPress')}>
-          <Text style={styles.button}>
-            Press Me
-          </Text>
-        </TouchableOpacity>
-      </View>
-        <View testID="touchable_feedback_events_console" style={styles.eventLogBox}>
-          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
-        </View>
-      </View>
-    );
-  },
-  _appendEvent: function(eventName) {
-    var limit = 6;
-    var eventLog = this.state.eventLog.slice(0, limit - 1);
-    eventLog.unshift(eventName);
-    this.setState({eventLog});
-  },
-});
-
-var TouchableDelayEvents = React.createClass({
-  getInitialState: function() {
-    return {
-      eventLog: [],
-    };
-  },
-  render: function() {
-    return (
-      <View testID="touchable_delay_events">
-        <View style={[styles.row, {justifyContent: 'center'}]}>
-        <TouchableOpacity
-          style={styles.wrapper}
-          testID="touchable_delay_events_button"
-          onPress={() => this._appendEvent('press')}
-          delayPressIn={400}
-          onPressIn={() => this._appendEvent('pressIn - 400ms delay')}
-          delayPressOut={1000}
-          onPressOut={() => this._appendEvent('pressOut - 1000ms delay')}
-          delayLongPress={800}
-          onLongPress={() => this._appendEvent('longPress - 800ms delay')}>
-          <Text style={styles.button}>
-            Press Me
-          </Text>
-        </TouchableOpacity>
-      </View>
-        <View style={styles.eventLogBox} testID="touchable_delay_events_console">
-          {this.state.eventLog.map((e, ii) => <Text key={ii}>{e}</Text>)}
-        </View>
-      </View>
-    );
-  },
-  _appendEvent: function(eventName) {
-    var limit = 6;
-    var eventLog = this.state.eventLog.slice(0, limit - 1);
-    eventLog.unshift(eventName);
-    this.setState({eventLog});
-  },
-});
-
-var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
-
-var styles = StyleSheet.create({
-  row: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  icon: {
-    width: 24,
-    height: 24,
-  },
-  image: {
-    width: 50,
-    height: 50,
-  },
-  text: {
-    fontSize: 16,
-  },
-  button: {
-    color: '#007AFF',
-  },
-  wrapper: {
-    borderRadius: 8,
-  },
-  wrapperCustom: {
-    borderRadius: 8,
-    padding: 6,
-  },
-  logBox: {
-    padding: 20,
-    margin: 10,
-    borderWidth: 1 / PixelRatio.get(),
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-  eventLogBox: {
-    padding: 10,
-    margin: 10,
-    height: 120,
-    borderWidth: 1 / PixelRatio.get(),
-    borderColor: '#f0f0f0',
-    backgroundColor: '#f9f9f9',
-  },
-  textBlock: {
-    fontWeight: '500',
-    color: 'blue',
-  },
-});

Examples/UIExplorer/UIExplorer-tvOS/Info.plist

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>arm64</string>
+	</array>
+	<key>UIUserInterfaceStyle</key>
+	<string>Automatic</string>
+</dict>
+</plist>

Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer-tvOS.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0610"
+   LastUpgradeVersion = "0800"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
@@ -14,89 +14,97 @@
             buildForAnalyzing = "YES">
             <BuildableReference
                BuildableIdentifier = "primary"
-               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-               BuildableName = "IntegrationTests.app"
-               BlueprintName = "IntegrationTests"
-               ReferencedContainer = "container:IntegrationTests.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "NO"
-            buildForProfiling = "NO"
-            buildForArchiving = "NO"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "004D289D1AAF61C70097A701"
-               BuildableName = "IntegrationTestsTests.xctest"
-               BlueprintName = "IntegrationTestsTests"
-               ReferencedContainer = "container:IntegrationTests.xcodeproj">
+               BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+               BuildableName = "UIExplorer-tvOS.app"
+               BlueprintName = "UIExplorer-tvOS"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
             </BuildableReference>
          </BuildActionEntry>
       </BuildActionEntries>
    </BuildAction>
    <TestAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">
             <BuildableReference
                BuildableIdentifier = "primary"
-               BlueprintIdentifier = "004D289D1AAF61C70097A701"
-               BuildableName = "IntegrationTestsTests.xctest"
-               BlueprintName = "IntegrationTestsTests"
-               ReferencedContainer = "container:IntegrationTests.xcodeproj">
+               BlueprintIdentifier = "2DD323A41DA2DD8B000FE1B8"
+               BuildableName = "UIExplorer-tvOSUnitTests.xctest"
+               BlueprintName = "UIExplorer-tvOSUnitTests"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D4624C11DA2EA6900C74D09"
+               BuildableName = "UIExplorer-tvOSIntegrationTests.xctest"
+               BlueprintName = "UIExplorer-tvOSIntegrationTests"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
             </BuildableReference>
          </TestableReference>
       </Testables>
       <MacroExpansion>
          <BuildableReference
             BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "IntegrationTests.app"
-            BlueprintName = "IntegrationTests"
-            ReferencedContainer = "container:IntegrationTests.xcodeproj">
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
          </BuildableReference>
       </MacroExpansion>
+      <AdditionalOptions>
+      </AdditionalOptions>
    </TestAction>
    <LaunchAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
       allowLocationSimulation = "YES">
-      <BuildableProductRunnable>
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "IntegrationTests.app"
-            BlueprintName = "IntegrationTests"
-            ReferencedContainer = "container:IntegrationTests.xcodeproj">
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
+      <EnvironmentVariables>
+         <EnvironmentVariable
+            key = "CI_USE_PACKAGER"
+            value = "1"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+      </EnvironmentVariables>
       <AdditionalOptions>
       </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
+      buildConfiguration = "Release"
       shouldUseLaunchSchemeArgsEnv = "YES"
       savedToolIdentifier = ""
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
-      <BuildableProductRunnable>
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
          <BuildableReference
             BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "IntegrationTests.app"
-            BlueprintName = "IntegrationTests"
-            ReferencedContainer = "container:IntegrationTests.xcodeproj">
+            BlueprintIdentifier = "2DD3238F1DA2DD8A000FE1B8"
+            BuildableName = "UIExplorer-tvOS.app"
+            BlueprintName = "UIExplorer-tvOS"
+            ReferencedContainer = "container:UIExplorer.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
    </ProfileAction>

Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme

@@ -1,11 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0700"
-   version = "1.8">
+   LastUpgradeVersion = "0730"
+   version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES">
       <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "3D13F83D1D6F6AE000E69E0E"
+               BuildableName = "UIExplorerBundle.bundle"
+               BlueprintName = "UIExplorerBundle"
+               ReferencedContainer = "container:UIExplorer.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
          <BuildActionEntry
             buildForTesting = "YES"
             buildForRunning = "YES"
@@ -51,10 +65,10 @@
       </BuildActionEntries>
    </BuildAction>
    <TestAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
       <Testables>
          <TestableReference
             skipped = "NO">
@@ -90,11 +104,11 @@
       </AdditionalOptions>
    </TestAction>
    <LaunchAction
+      buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
@@ -109,14 +123,21 @@
             ReferencedContainer = "container:UIExplorer.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
+      <EnvironmentVariables>
+         <EnvironmentVariable
+            key = "CI_USE_PACKAGER"
+            value = "1"
+            isEnabled = "YES">
+         </EnvironmentVariable>
+      </EnvironmentVariables>
       <AdditionalOptions>
       </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
+      buildConfiguration = "Release"
       shouldUseLaunchSchemeArgsEnv = "YES"
       savedToolIdentifier = ""
       useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
       debugDocumentVersioning = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

Examples/UIExplorer/UIExplorer/AppDelegate.h

@@ -14,9 +14,11 @@
 
 #import <UIKit/UIKit.h>
 
+@class RCTBridge;
+
 @interface AppDelegate : UIResponder <UIApplicationDelegate>
 
 @property (nonatomic, strong) UIWindow *window;
+@property (nonatomic, readonly) RCTBridge *bridge;
 
 @end
-

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -14,56 +14,105 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBridge.h"
+#import "RCTBundleURLProvider.h"
+#import "RCTJavaScriptLoader.h"
+#import "RCTLinkingManager.h"
 #import "RCTRootView.h"
+#if !TARGET_OS_TV
+#import "RCTPushNotificationManager.h"
+#endif
+
+@interface AppDelegate() <RCTBridgeDelegate>
+
+@end
 
 @implementation AppDelegate
 
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
+  _bridge = [[RCTBridge alloc] initWithDelegate:self
+                                  launchOptions:launchOptions];
 
-  /**
-   * 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.
-   */
+  // Appetizer.io params check
+  NSDictionary *initProps = nil;
+  NSString *_routeUri = [[NSUserDefaults standardUserDefaults] stringForKey:@"route"];
+  if (_routeUri) {
+    initProps = @{@"exampleFromAppetizeParams": [NSString stringWithFormat:@"rnuiexplorer://example/%@Example", _routeUri]};
+  }
 
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle?dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-   * to your Xcode project folder and run
-   *
-   * $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
-#if RUNNING_ON_CI
-   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"UIExplorerApp"
-                                                   launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
+                                                   moduleName:@"UIExplorerApp"
+                                            initialProperties:initProps];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
+  UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   return YES;
 }
 
+- (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
+{
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/UIExplorer/js/UIExplorerApp.ios" fallbackResource:nil];
+
+  if (!getenv("CI_USE_PACKAGER")) {
+    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  }
+
+  return jsCodeLocation;
+}
+
+
+- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
+  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
+{
+  return [RCTLinkingManager application:application openURL:url
+                      sourceApplication:sourceApplication annotation:annotation];
+}
+
+- (void)loadSourceForBridge:(RCTBridge *)bridge
+                  withBlock:(RCTSourceLoadBlock)loadCallback
+{
+  [RCTJavaScriptLoader loadBundleAtURL:[self sourceURLForBridge:bridge]
+                            onComplete:loadCallback];
+}
+
+# pragma mark - Push Notifications
+
+#if !TARGET_OS_TV
+
+// Required to register for notifications
+- (void)application:(__unused UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
+{
+  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
+}
+
+// Required for the remoteNotificationsRegistered event.
+- (void)application:(__unused UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
+{
+  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
+}
+
+// Required for the remoteNotificationRegistrationError event.
+- (void)application:(__unused UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
+{
+  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
+}
+
+// Required for the remoteNotificationReceived event.
+- (void)application:(__unused UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification
+{
+  [RCTPushNotificationManager didReceiveRemoteNotification:notification];
+}
+
+// Required for the localNotificationReceived event.
+- (void)application:(__unused UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
+{
+  [RCTPushNotificationManager didReceiveLocalNotification:notification];
+}
+
+#endif
+
 @end

Examples/UIExplorer/UIExplorer/Base.lproj/LaunchScreen.xib

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="9059" systemVersion="15A284" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9049"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
@@ -13,17 +14,20 @@
             <subviews>
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="  Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
                     <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <animations/>
                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
                     <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                     <nil key="highlightedColor"/>
                 </label>
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="UIExplorer" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                     <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <animations/>
                     <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
                     <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                     <nil key="highlightedColor"/>
                 </label>
             </subviews>
+            <animations/>
             <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
             <constraints>
                 <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>

Examples/UIExplorer/UIExplorer/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,5 +1,15 @@
 {
   "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
     {
       "size" : "29x29",
       "idiom" : "iphone",
@@ -41,4 +51,4 @@
     "version" : 1,
     "author" : "xcode"
   }
-}
+}

Examples/UIExplorer/UIExplorer/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Examples/UIExplorer/UIExplorer/Images.xcassets/blue_square.imageset/Contents.json

@@ -2,12 +2,12 @@
   "images" : [
     {
       "idiom" : "universal",
-      "scale" : "1x"
+      "scale" : "1x",
+      "filename" : "blue_square.png"
     },
     {
       "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_comment_normal@2x.png"
+      "scale" : "2x"
     },
     {
       "idiom" : "universal",

Examples/UIExplorer/UIExplorer/Images.xcassets/red_square.imageset/Contents.json

@@ -2,12 +2,12 @@
   "images" : [
     {
       "idiom" : "universal",
-      "scale" : "1x"
+      "scale" : "1x",
+      "filename" : "red_square.png"
     },
     {
       "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_thumb_selected@2x.png"
+      "scale" : "2x"
     },
     {
       "idiom" : "universal",

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/Contents.json

@@ -1,21 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x",
-      "filename" : "uie_comment_highlighted@2x.png"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorer/Images.xcassets/uie_thumb_big.imageset/Contents.json

@@ -1,13 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "scale" : "1x",
-      "filename" : "uie_thumb_big.png"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}

Examples/UIExplorer/UIExplorer/Info.plist

@@ -18,10 +18,28 @@
 	<string>1.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
+	<key>CFBundleURLTypes</key>
+	<array>
+		<dict>
+			<key>CFBundleTypeRole</key>
+			<string>Editor</string>
+			<key>CFBundleURLName</key>
+			<string>com.reactjs.ios</string>
+			<key>CFBundleURLSchemes</key>
+			<array>
+				<string>rnuiexplorer</string>
+			</array>
+		</dict>
+	</array>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string>You need to add NSLocationWhenInUseUsageDescription key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!</string>
 	<key>UILaunchStoryboardName</key>
@@ -38,11 +56,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/-->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
+	<key>NSPhotoLibraryUsageDescription</key>
+	<string>You need to add NSPhotoLibraryUsageDescription key in Info.plist to enable photo library usage, otherwise it is going to *fail silently*!</string>
 </dict>
 </plist>

Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.h

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+#import <UIKit/UIKit.h>
+#import "RCTView.h"
+
+@interface FlexibleSizeExampleView : RCTView
+
+@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m

@@ -0,0 +1,121 @@
+/**
+ * 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.
+ */
+
+#import "AppDelegate.h"
+
+#import "FlexibleSizeExampleView.h"
+#import "RCTJavaScriptLoader.h"
+#import "RCTBridge.h"
+#import "RCTRootView.h"
+#import "RCTRootViewDelegate.h"
+
+#import "RCTViewManager.h"
+
+@interface FlexibleSizeExampleViewManager : RCTViewManager
+
+@end
+
+@implementation FlexibleSizeExampleViewManager
+
+RCT_EXPORT_MODULE();
+
+- (UIView *)view
+{
+  return [FlexibleSizeExampleView new];
+}
+
+@end
+
+
+@interface FlexibleSizeExampleView ()<RCTRootViewDelegate>
+
+@end
+
+
+@implementation FlexibleSizeExampleView
+{
+  RCTRootView *_resizableRootView;
+  UITextView *_currentSizeTextView;
+  BOOL _sizeUpdated;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if ((self = [super initWithFrame:frame])) {
+    _sizeUpdated = NO;
+
+    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
+
+    _resizableRootView = [[RCTRootView alloc] initWithBridge:appDelegate.bridge
+                                                  moduleName:@"RootViewSizeFlexibilityExampleApp"
+                                           initialProperties:@{}];
+
+    [_resizableRootView setSizeFlexibility:RCTRootViewSizeFlexibilityHeight];
+
+    _currentSizeTextView = [UITextView new];
+#ifndef TARGET_OS_TV
+    _currentSizeTextView.editable = NO;
+#endif
+    _currentSizeTextView.text = @"Resizable view has not been resized yet";
+    _currentSizeTextView.textColor = [UIColor blackColor];
+    _currentSizeTextView.backgroundColor = [UIColor whiteColor];
+    _currentSizeTextView.font = [UIFont boldSystemFontOfSize:10];
+
+    _resizableRootView.delegate = self;
+
+    [self addSubview:_currentSizeTextView];
+    [self addSubview:_resizableRootView];
+  }
+  return self;
+}
+
+- (void)layoutSubviews
+{
+  float textViewHeight = 60;
+  float spacingHeight = 10;
+  [_resizableRootView setFrame:CGRectMake(0, textViewHeight + spacingHeight, self.frame.size.width, _resizableRootView.frame.size.height)];
+  [_currentSizeTextView setFrame:CGRectMake(0, 0, self.frame.size.width, textViewHeight)];
+}
+
+
+- (NSArray<UIView<RCTComponent> *> *)reactSubviews
+{
+  // this is to avoid unregistering our RCTRootView when the component is removed from RN hierarchy
+  (void)[super reactSubviews];
+  return @[];
+}
+
+
+#pragma mark - RCTRootViewDelegate
+
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
+{
+  CGRect newFrame = rootView.frame;
+  newFrame.size = rootView.intrinsicSize;
+
+  if (!_sizeUpdated) {
+    _sizeUpdated = TRUE;
+    _currentSizeTextView.text = [NSString stringWithFormat:@"RCTRootViewDelegate: content with initially unknown size has appeared, updating root view's size so the content fits."];
+
+  } else {
+    _currentSizeTextView.text = [NSString stringWithFormat:@"RCTRootViewDelegate: content size has been changed to (%ld, %ld), updating root view's size.",
+                                 (long)newFrame.size.width,
+                                 (long)newFrame.size.height];
+
+  }
+
+  rootView.frame = newFrame;
+}
+
+@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+#import <UIKit/UIKit.h>
+#import "RCTView.h"
+
+@interface UpdatePropertiesExampleView : RCTView
+
+@end

Examples/UIExplorer/UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m

@@ -0,0 +1,96 @@
+/**
+ * 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.
+ */
+
+#import "AppDelegate.h"
+
+#import "UpdatePropertiesExampleView.h"
+#import "RCTJavaScriptLoader.h"
+#import "RCTBridge.h"
+#import "RCTRootView.h"
+#import "RCTViewManager.h"
+
+@interface UpdatePropertiesExampleViewManager : RCTViewManager
+
+@end
+
+@implementation UpdatePropertiesExampleViewManager
+
+RCT_EXPORT_MODULE();
+
+- (UIView *)view
+{
+  return [UpdatePropertiesExampleView new];
+}
+
+@end
+
+@implementation UpdatePropertiesExampleView
+{
+  RCTRootView *_rootView;
+  UIButton *_button;
+  BOOL _beige;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  self = [super initWithFrame:frame];
+  if (self) {
+    _beige = YES;
+
+    AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
+
+    _rootView = [[RCTRootView alloc] initWithBridge:appDelegate.bridge
+                                         moduleName:@"SetPropertiesExampleApp"
+                                  initialProperties:@{@"color":@"beige"}];
+
+    _button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
+    [_button setTitle:@"Native Button" forState:UIControlStateNormal];
+    [_button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+    [_button setBackgroundColor:[UIColor grayColor]];
+
+    [_button addTarget:self
+                action:@selector(changeColor)
+      forControlEvents:UIControlEventTouchUpInside];
+
+    [self addSubview:_button];
+    [self addSubview:_rootView];
+  }
+  return self;
+}
+
+- (void)layoutSubviews
+{
+  float spaceHeight = 20;
+  float buttonHeight = 40;
+  float rootViewWidth = self.bounds.size.width;
+  float rootViewHeight = self.bounds.size.height - spaceHeight - buttonHeight;
+
+  [_rootView setFrame:CGRectMake(0, 0, rootViewWidth, rootViewHeight)];
+  [_button setFrame:CGRectMake(0, rootViewHeight + spaceHeight, rootViewWidth, buttonHeight)];
+}
+
+- (void)changeColor
+{
+  _beige = !_beige;
+  [_rootView setAppProperties:@{@"color":_beige ? @"beige" : @"purple"}];
+}
+
+- (NSArray<UIView<RCTComponent> *> *)reactSubviews
+{
+  // this is to avoid unregistering our RCTRootView when the component is removed from RN hierarchy
+  (void)[super reactSubviews];
+  return @[];
+}
+
+@end