fixed a link to android setup docs

Website header now contains version number which is a link.
Clicking the link redirects you to a page that lists all the previous versions of the website.

Considering that we do a branch cut every 2 weeks a solution with dropdown did not feel right because it would grow fast.
As an improvement for the future - we could link change docs in the versions.html

.buckconfig

@@ -0,0 +1,8 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
+
+

.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

.flowconfig

@@ -7,12 +7,26 @@
 # 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/event/EventPropagators.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
-.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/Promise.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/isEmpty.js
+.*/node_modules/fbjs/lib/crc32.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
 
 # Ignore commoner tests
 .*/node_modules/commoner/test/.*
@@ -43,9 +57,9 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-7]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-7]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.17.0
+0.20.1

.gitignore

@@ -21,8 +21,10 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Xcode, Gradle
-build/
+# Gradle
+/build/
+/Examples/**/android/app/build/
+/ReactAndroid/build/
 
 # Android
 .idea

.travis.yml

@@ -1,6 +1,6 @@
 language: objective-c
 
-osx_image: xcode7
+osx_image: xcode7.2
 
 cache:
     directories:
@@ -12,7 +12,7 @@ install:
   - mkdir -p .nvm
   - export NVM_DIR="$PWD/.nvm"
   - source $(brew --prefix nvm)/nvm.sh
-  - nvm install 4
+  - nvm install 5
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm install -g flow-bin@`node -p "require('fs').readFileSync('.flowconfig', 'utf8').split('[version]')[1].trim()"`
@@ -28,6 +28,8 @@ script:
   elif [ "$TEST_TYPE" = js ]
   then
 
+    npm install github@0.2.4
+    cat <(echo eslint; npm run lint --silent -- --format=json; echo flow; flow --json) | GITHUB_TOKEN="af6ef0d15709bc91d""06a6217a5a826a226fb57b7" node bots/code-analysis-bot.js
     flow check && npm test -- '\/Libraries\/'
 
   elif [ "$TEST_TYPE" = packager ]
@@ -40,24 +42,11 @@ script:
 
     npm test -- '\/(local|private|react-native)-cli\/'
 
-  elif [ "$TEST_TYPE" = build_website ]
-  then
-
-    cd website
-    $(which npm) install
-    ./setup.sh
-    if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then
-      # Automatically publish the website
-      echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
-      ./publish.sh
-    else
-      # Make sure the website builds without error
-      node server/generate.js
-    fi
-
   elif [ "$TEST_TYPE" = e2e ]
   then
+
     ./scripts/e2e-test.sh
+
   else
     echo "Unknown test type: $TEST_TYPE"
     exit 1
@@ -69,11 +58,8 @@ env:
     - TEST_TYPE=js
     - TEST_TYPE=packager
     - TEST_TYPE=cli
-    - TEST_TYPE=build_website
     - TEST_TYPE=e2e
   global:
-    # $GITHUB_TOKEN
-    - secure: "HlmG8M2DmBUSBh6KH1yVIe/8gR4iibg4WfcHq1x/xYQxGbvleq7NOo04V6eFHnl9cvZCu+PKH0841WLnGR7c4BBf47GVu/o16nXzggPumHKy++lDzxFPlJ1faMDfjg/5vjbAxRUe7D3y98hQSeGHH4tedc8LvTaFLVu7iiGqvjU="
     # $APPETIZE_TOKEN
     - secure: "egsvVSpszTzrNd6bN62DsVAzMiSZI/OHgdizfPryqvqWBf655ztE6XFQSEFNpuIAzSKDDF25ioT8iPfVsbC1iK6HDWHfmqYxML0L+OoU0gi+hV2oKUBFZDZ1fwSnFoWuBdNdMDpLlUxvJp6N1WyfNOB2dxuZUt8eTt48Hi3+Hpc="
     # $S3_TOKEN
@@ -82,3 +68,4 @@ env:
 branches:
   only:
     - master
+    - /^.*-stable$/

CONTRIBUTING.md

@@ -19,10 +19,28 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 1. Fork the repo and create your branch from `master`.
 2. 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. Squash your commits (`git rebase -i`).
-7. If you haven't already, complete the CLA.
+4. Add the copyright notice to the top of any new files you've added.
+5. Ensure tests pass on Travis and Circle CI.
+6. Make sure your code lints (`node linter.js <files touched>`).
+7. Squash your commits (`git rebase -i`).
+8. If you haven't already, sign the [CLA](https://code.facebook.com/cla).
+
+#### 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)
 
@@ -67,6 +85,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
@@ -75,6 +101,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/2048/2048/AppDelegate.m

@@ -56,7 +56,7 @@
                                                    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

@@ -237,7 +237,7 @@ var styles = StyleSheet.create({
     marginBottom: 20,
   },
   tryAgain: {
-    backgroundColor: '#887766',
+    backgroundColor: '#887761',
     padding: 20,
     borderRadius: 5,
   },
@@ -279,7 +279,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

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Image,
-  PixelRatio,
   Platform,
   StyleSheet,
   Text,
@@ -99,8 +98,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

@@ -18,7 +18,6 @@
 var React = require('react-native');
 var {
   Image,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -152,7 +151,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/AppDelegate.m

@@ -57,7 +57,7 @@
                                                    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/README.md

@@ -6,6 +6,7 @@ The Movies app is a demonstration of basic concepts, such as fetching data, rend
 
 Before running the app, make sure you ran:
 
+    git clone https://github.com/facebook/react-native.git
     cd react-native
     npm install
 

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

@@ -2,6 +2,7 @@
     package="com.facebook.react.movies">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 
     <application
       android:allowBackup="true"

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

@@ -69,7 +69,7 @@ public class MoviesActivity extends Activity implements DefaultHardwareBackBtnHa
     super.onResume();
 
     if (mReactInstanceManager != null) {
-      mReactInstanceManager.onResume(this);
+      mReactInstanceManager.onResume(this, this);
     }
   }
 

Examples/TicTacToe/TicTacToe/AppDelegate.m

@@ -56,7 +56,7 @@
                                                    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

@@ -89,7 +89,6 @@ class Board {
         }
       }
     }
-
     return this.winner() === null;
   }
 }

Examples/UIExplorer/ActionSheetIOSExample.js

@@ -27,7 +27,7 @@ var BUTTONS = [
   'Option 0',
   'Option 1',
   'Option 2',
-  'Destruct',
+  'Delete',
   'Cancel',
 ];
 var DESTRUCTIVE_INDEX = 3;
@@ -65,6 +65,40 @@ var ActionSheetExample = React.createClass({
   }
 });
 
+var ActionSheetTintExample = React.createClass({
+  getInitialState() {
+    return {
+      clicked: 'none',
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text onPress={this.showActionSheet} style={style.button}>
+          Click to show the ActionSheet
+        </Text>
+        <Text>
+          Clicked button: {this.state.clicked}
+        </Text>
+      </View>
+    );
+  },
+
+  showActionSheet() {
+    ActionSheetIOS.showActionSheetWithOptions({
+      options: BUTTONS,
+      cancelButtonIndex: CANCEL_INDEX,
+      destructiveButtonIndex: DESTRUCTIVE_INDEX,
+      tintColor: 'green',
+    },
+    (buttonIndex) => {
+      this.setState({ clicked: BUTTONS[buttonIndex] });
+    });
+  }
+});
+
+
 var ShareActionSheetExample = React.createClass({
   getInitialState() {
     return {
@@ -88,6 +122,11 @@ var ShareActionSheetExample = React.createClass({
   showShareActionSheet() {
     ActionSheetIOS.showShareActionSheetWithOptions({
       url: 'https://code.facebook.com',
+      message: 'message to go with the shared url',
+      subject: 'a subject to go in the email heading',
+      excludedActivityTypes: [
+        'com.apple.UIKit.activity.PostToTwitter'
+      ]
     },
     (error) => {
       console.error(error);
@@ -118,6 +157,10 @@ exports.examples = [
     title: 'Show Action Sheet',
     render(): ReactElement { return <ActionSheetExample />; }
   },
+  {
+    title: 'Show Action Sheet with tinted buttons',
+    render(): ReactElement { return <ActionSheetTintExample />; }
+  },
   {
     title: 'Show Share Action Sheet',
     render(): ReactElement { return <ShareActionSheetExample />; }

Examples/UIExplorer/AlertExample.js

@@ -0,0 +1,137 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+'use strict';
+
+var React = require('react-native');
+var {
+  Alert,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+
+// corporate ipsum > lorem ipsum
+var alertMessage = 'Credibly reintermediate next-generation potentialities after goal-oriented ' +
+                   'catalysts for change. Dynamically revolutionize.';
+
+/**
+ * Simple alert examples.
+ */
+var SimpleAlertExampleBlock = React.createClass({
+
+  render: function() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with message and default button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+            [
+              {text: 'OK', onPress: () => console.log('OK Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with one button</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert Title',
+            alertMessage,
+            [
+              {text: 'Cancel', onPress: () => console.log('Cancel Pressed!')},
+              {text: 'OK', onPress: () => console.log('OK Pressed!')},
+            ]
+          )}>
+          <View style={styles.button}>
+            <Text>Alert with two buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Alert 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 three buttons</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={() => Alert.alert(
+            'Foo Title',
+            alertMessage,
+            '..............'.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>
+    );
+  },
+});
+
+var AlertExample = React.createClass({
+  statics: {
+    title: 'Alert',
+    description: 'Alerts display a concise and informative message ' +
+    'and prompt the user to make a decision.',
+  },
+  render: function() {
+    return (
+      <UIExplorerBlock title={'Alert'}>
+        <SimpleAlertExampleBlock />
+      </UIExplorerBlock>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});
+
+module.exports = {
+  AlertExample,
+  SimpleAlertExampleBlock,
+}

Examples/UIExplorer/AlertIOSExample.js

@@ -24,74 +24,92 @@ var {
   AlertIOS,
 } = React;
 
+var { SimpleAlertExampleBlock } = require('./AlertExample');
+
 exports.framework = 'React';
 exports.title = 'AlertIOS';
 exports.description = 'iOS alerts and action sheets';
 exports.examples = [{
   title: 'Alerts',
+  render() {
+    return <SimpleAlertExampleBlock />;
+  }
+},
+{
+  title: 'Alert Types',
   render() {
     return (
       <View>
-        <TouchableHighlight style={styles.wrapper}
+        <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,
+            'Hello World',
             null,
             [
-              {text: 'Button', onPress: () => console.log('Button Pressed!')},
+              {text: 'OK', onPress: (text) => console.log('OK pressed'), type: 'default'}
             ]
           )}>
+
           <View style={styles.button}>
-            <Text>Alert with only one button</Text>
+            <Text>
+              {'default'}
+            </Text>
           </View>
+
         </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
+        <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',
+            'Plain Text Entry',
             null,
             [
-              {text: 'Foo', onPress: () => console.log('Foo Pressed!')},
-              {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
-              {text: 'Baz', onPress: () => console.log('Baz Pressed!')},
+              {text: 'Submit', onPress: (text) => console.log('Text: ' + text), type: 'plain-text'},
+              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
             ]
           )}>
+
           <View style={styles.button}>
-            <Text>Alert with 3 buttons</Text>
+            <Text>
+              plain-text
+            </Text>
           </View>
+
         </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
+        <TouchableHighlight
+          style={styles.wrapper}
           onPress={() => AlertIOS.alert(
-            'Foo Title',
-            'My Alert Msg',
-            '..............'.split('').map((dot, index) => ({
-              text: 'Button ' + index,
-              onPress: () => console.log('Pressed ' + index)
-            }))
+            'Secure Text Entry',
+            null,
+            [
+              {text: 'Submit', onPress: (text) => console.log('Password: ' + text), type: 'secure-text'},
+              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
+            ]
           )}>
+
           <View style={styles.button}>
-            <Text>Alert with too many buttons</Text>
+            <Text>
+              secure-text
+            </Text>
           </View>
+
+        </TouchableHighlight>
+        <TouchableHighlight
+          style={styles.wrapper}
+          onPress={() => AlertIOS.alert(
+            'Login & Password',
+            null,
+            [
+              {text: 'Submit', onPress: (details) => console.log('Login: ' + details.login + '; Password: ' + details.password), type: 'login-password'},
+              {text: 'Cancel', onPress: () => console.log('Cancel'), style: 'cancel'}
+            ]
+          )}>
+
+          <View style={styles.button}>
+            <Text>
+              login-password
+            </Text>
+          </View>
+
         </TouchableHighlight>
       </View>
     );
@@ -100,7 +118,7 @@ exports.examples = [{
 {
   title: 'Prompt',
   render(): React.Component {
-    return <PromptExample />
+    return <PromptExample />;
   }
 }];
 
@@ -116,10 +134,11 @@ class PromptExample extends React.Component {
     this.title = 'Type a value';
     this.defaultValue = 'Default value';
     this.buttons = [{
-      text: 'Custom cancel',
-    }, {
       text: 'Custom OK',
       onPress: this.promptResponse
+    }, {
+      text: 'Custom Cancel',
+      style: 'cancel',
     }];
   }
 
@@ -132,7 +151,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.promptResponse)}>
+          onPress={this.prompt.bind(this, this.title, null, null, this.promptResponse)}>
 
           <View style={styles.button}>
             <Text>
@@ -143,7 +162,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.buttons)}>
+          onPress={this.prompt.bind(this, this.title, null, this.buttons, null)}>
 
           <View style={styles.button}>
             <Text>
@@ -154,7 +173,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.promptResponse)}>
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, null, this.promptResponse)}>
 
           <View style={styles.button}>
             <Text>
@@ -165,7 +184,7 @@ class PromptExample extends React.Component {
 
         <TouchableHighlight
           style={styles.wrapper}
-          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons)}>
+          onPress={this.prompt.bind(this, this.title, this.defaultValue, this.buttons, null)}>
 
           <View style={styles.button}>
             <Text>

Examples/UIExplorer/AnimatedExample.js

@@ -195,6 +195,7 @@ exports.examples = [
           {['Composite', 'Easing', 'Animations!'].map(
             (text, ii) => (
               <Animated.View
+                key={text}
                 style={[styles.content, {
                   left: this.anims[ii]
                 }]}>

Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js

@@ -95,6 +95,7 @@ class AnExBobble extends React.Component {
           return (
             <Animated.Image
               {...handlers}
+              key={i}
               source={{uri: BOBBLE_IMGS[j]}}
               style={[styles.circle, {
                 backgroundColor: randColor(),                             // re-renders are obvious

Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js

@@ -77,6 +77,7 @@ class AnExChained extends React.Component {
           return (
             <Animated.Image
               {...handlers}
+              key={i}
               source={{uri: CHAIN_IMGS[j]}}
               style={[styles.sticker, {
                 transform: this.state.stickers[j].getTranslateTransform(), // simple conversion

Examples/UIExplorer/AppStateExample.js

@@ -0,0 +1,80 @@
+/**
+ * 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 AppStateExample
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AppState,
+  Text,
+  View
+} = React;
+
+var AppStateSubscription = React.createClass({
+  getInitialState() {
+    return {
+      appState: AppState.currentState,
+      previousAppStates: [],
+    };
+  },
+  componentDidMount: function() {
+    AppState.addEventListener('change', this._handleAppStateChange);
+  },
+  componentWillUnmount: function() {
+    AppState.removeEventListener('change', this._handleAppStateChange);
+  },
+  _handleAppStateChange: function(appState) {
+    var previousAppStates = this.state.previousAppStates.slice();
+    previousAppStates.push(this.state.appState);
+    this.setState({
+      appState,
+      previousAppStates,
+    });
+  },
+  render() {
+    if (this.props.showCurrentOnly) {
+      return (
+        <View>
+          <Text>{this.state.appState}</Text>
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Text>{JSON.stringify(this.state.previousAppStates)}</Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'AppState';
+exports.description = 'app background status';
+exports.examples = [
+  {
+    title: 'AppState.currentState',
+    description: 'Can be null on app initialization',
+    render() { return <Text>{AppState.currentState}</Text>; }
+  },
+  {
+    title: 'Subscribed AppState:',
+    description: 'This changes according to the current state, so you can only ever see it rendered as "active"',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={true} />; }
+  },
+  {
+    title: 'Previous states:',
+    render(): ReactElement { return <AppStateSubscription showCurrentOnly={false} />; }
+  },
+];

Examples/UIExplorer/AsyncStorageExample.js

@@ -80,7 +80,7 @@ var BasicStorageExample = React.createClass({
         </Text>
         <Text>{' '}</Text>
         <Text>Messages:</Text>
-        {this.state.messages.map((m) => <Text>{m}</Text>)}
+        {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
       </View>
     );
   },

Examples/UIExplorer/BorderExample.js

@@ -82,7 +82,7 @@ var styles = StyleSheet.create({
   },
   border7: {
     borderWidth: 10,
-    borderColor: 'rgba(255,0,0,0.5)',
+    borderColor: '#f007',
     borderRadius: 30,
     overflow: 'hidden',
   },
@@ -91,6 +91,13 @@ var styles = StyleSheet.create({
     width: 100,
     height: 100
   },
+  border8: {
+    width: 60,
+    height: 60,
+    borderColor: 'black',
+    marginRight: 10,
+    backgroundColor: 'lightgrey',
+  },
 });
 
 exports.title = 'Border';
@@ -159,4 +166,18 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Single Borders',
+    description: 'top, left, bottom right',
+    render() {
+      return (
+        <View style={{flexDirection: 'row'}}>
+          <View style={[styles.box, styles.border8, {borderTopWidth: 5}]} />
+          <View style={[styles.box, styles.border8, {borderLeftWidth: 5}]} />
+          <View style={[styles.box, styles.border8, {borderBottomWidth: 5}]} />
+          <View style={[styles.box, styles.border8, {borderRightWidth: 5}]} />
+        </View>
+      );
+    }
+  },
 ];

Examples/UIExplorer/BoxShadowExample.js

@@ -0,0 +1,85 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  View
+} = React;
+
+var styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderWidth: 2,
+  },
+  shadow1: {
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+    shadowOffset: {width: 2, height: 2},
+  },
+  shadow2: {
+    shadowOpacity: 1.0,
+    shadowColor: 'red',
+    shadowRadius: 0,
+    shadowOffset: {width: 3, height: 3},
+  },
+});
+
+exports.title = 'Box Shadow';
+exports.description = 'Demonstrates some of the shadow styles available to Views.';
+exports.examples = [
+  {
+    title: 'Basic shadow',
+    description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}',
+    render() {
+      return <View style={[styles.box, styles.shadow1]} />;
+    }
+  },
+  {
+    title: 'Colored shadow',
+    description: 'shadowColor: \'red\', shadowRadius: 0',
+    render() {
+      return <View style={[styles.box, styles.shadow2]} />;
+    }
+  },
+  {
+    title: 'Shaped shadow',
+    description: 'borderRadius: 50',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
+    }
+  },
+  {
+    title: 'Image shadow',
+    description: 'Image shadows are derived exactly from the pixels.',
+    render() {
+      return <Image
+        source={require('./hawk.png')}
+        style={[styles.box, styles.shadow1, {borderWidth: 0, overflow: 'visible'}]}
+      />;
+    }
+  },
+  {
+    title: 'Child shadow',
+    description: 'For views without an opaque background color, shadow will be derived from the subviews.',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {backgroundColor: 'transparent'}]}>
+        <View style={[styles.box, {width: 80, height: 80, borderRadius: 40, margin: 8, backgroundColor: 'red'}]}/>
+      </View>;
+    }
+  },
+];

Examples/UIExplorer/CameraRollExample.js

@@ -15,24 +15,25 @@
  */
 'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   CameraRoll,
   Image,
   SliderIOS,
   StyleSheet,
-  SwitchIOS,
+  Switch,
   Text,
   View,
   TouchableOpacity
 } = React;
 
-var CameraRollView = require('./CameraRollView.ios');
-var AssetScaledImageExampleView = require('./AssetScaledImageExample');
+const CameraRollView = require('./CameraRollView');
 
-var CAMERA_ROLL_VIEW = 'camera_roll_view';
+const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
-var CameraRollExample = React.createClass({
+const CAMERA_ROLL_VIEW = 'camera_roll_view';
+
+const CameraRollExample = React.createClass({
 
   getInitialState() {
     return {
@@ -45,7 +46,7 @@ var CameraRollExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={this._onSwitchChange}
           value={this.state.bigImages} />
         <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
@@ -65,22 +66,24 @@ var CameraRollExample = React.createClass({
   },
 
   loadAsset(asset){
-    this.props.navigator.push({
-      title: 'Camera Roll Image',
-      component: AssetScaledImageExampleView,
-      backButtonTitle: 'Back',
-      passProps: { asset: asset },
-    });
+    if (this.props.navigator) {
+      this.props.navigator.push({
+        title: 'Camera Roll Image',
+        component: AssetScaledImageExampleView,
+        backButtonTitle: 'Back',
+        passProps: { asset: asset },
+      });
+    }
   },
 
   _renderImage(asset) {
-    var imageSize = this.state.bigImages ? 150 : 75;
-    var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
-    var location = asset.node.location.longitude ?
+    const imageSize = this.state.bigImages ? 150 : 75;
+    const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
+    const location = asset.node.location.longitude ?
       JSON.stringify(asset.node.location) : 'Unknown location';
     return (
-      <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }>
-        <View key={asset} style={styles.row}>
+      <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }>
+        <View style={styles.row}>
           <Image
             source={asset.node.image}
             style={imageStyle}
@@ -97,9 +100,9 @@ var CameraRollExample = React.createClass({
   },
 
   _onSliderChange(value) {
-    var options = CameraRoll.GroupTypesOptions;
-    var index = Math.floor(value * options.length * 0.99);
-    var groupTypes = options[index];
+    const options = CameraRoll.GroupTypesOptions;
+    const index = Math.floor(value * options.length * 0.99);
+    const groupTypes = options[index];
     if (groupTypes !== this.state.groupTypes) {
       this.setState({groupTypes: groupTypes});
     }
@@ -111,7 +114,7 @@ var CameraRollExample = React.createClass({
   }
 });
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     flex: 1,

Examples/UIExplorer/CameraRollView.js

@@ -22,6 +22,7 @@ var {
   CameraRoll,
   Image,
   ListView,
+  Platform,
   StyleSheet,
   View,
 } = React;
@@ -139,6 +140,10 @@ var CameraRollView = React.createClass({
       groupTypes: this.props.groupTypes,
       assetType: this.props.assetType,
     };
+    if (Platform.OS === "android") {
+      // not supported in android
+      delete fetchParams.groupTypes;
+    }
     if (this.state.lastCursor) {
       fetchParams.after = this.state.lastCursor;
     }

Examples/UIExplorer/ClipboardExample.js

@@ -0,0 +1,60 @@
+/**
+ * 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 {
+  Clipboard,
+  View,
+  Text,
+} = React;
+
+var ClipboardExample = React.createClass({
+  getInitialState: function() {
+    return {
+      content: 'Content will appear here'
+    };
+  },
+  
+  _setContentToClipboard:function(){
+    Clipboard.setString('Hello World');
+    Clipboard.getString(content => {
+      this.setState({content});
+    });
+  },
+  
+  render() {
+    return (
+      <View>
+        <Text onPress={this._setContentToClipboard} style={{color: 'blue'}}>
+          Tap to put "Hello World" in the clipboard
+        </Text>
+        <Text style={{color: 'red', marginTop: 20}}>
+          {this.state.content}
+        </Text>
+      </View>
+    );
+  }
+});
+
+exports.title = 'Clipboard';
+exports.description = 'Show Clipboard contents.';
+exports.examples = [
+  {
+    title: 'Clipboard.setString() and getString()',
+    render(): ReactElement { return <ClipboardExample />; }
+  }
+];

Examples/UIExplorer/GeolocationExample.js

@@ -49,11 +49,15 @@ var GeolocationExample = React.createClass({
 
   componentDidMount: function() {
     navigator.geolocation.getCurrentPosition(
-      (initialPosition) => this.setState({initialPosition}),
+      (position) => {
+        var initialPosition = JSON.stringify(position);
+        this.setState({initialPosition});
+      },
       (error) => alert(error.message),
       {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000}
     );
-    this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
+    this.watchID = navigator.geolocation.watchPosition((position) => {
+      var lastPosition = JSON.stringify(position);
       this.setState({lastPosition});
     });
   },
@@ -67,11 +71,11 @@ var GeolocationExample = React.createClass({
       <View>
         <Text>
           <Text style={styles.title}>Initial position: </Text>
-          {JSON.stringify(this.state.initialPosition)}
+          {this.state.initialPosition}
         </Text>
         <Text>
           <Text style={styles.title}>Current position: </Text>
-          {JSON.stringify(this.state.lastPosition)}
+          {this.state.lastPosition}
         </Text>
       </View>
     );

Examples/UIExplorer/ImageCapInsetsExample.js

@@ -35,6 +35,7 @@ var ImageCapInsetsExample = React.createClass({
           <Image
             source={require('image!story-background')}
             style={styles.storyBackground}
+            resizeMode={Image.resizeMode.stretch}
             capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
           />
         </View>
@@ -66,7 +67,6 @@ var styles = StyleSheet.create({
     width: 250,
     height: 150,
     borderWidth: 1,
-    resizeMode: Image.resizeMode.stretch,
   },
   text: {
     fontSize: 13.5,

Examples/UIExplorer/ImageEditingExample.js

@@ -20,15 +20,17 @@ var React = require('react-native');
 var {
   CameraRoll,
   Image,
+  ImageEditor,
   NativeModules,
   ScrollView,
   StyleSheet,
   Text,
   TouchableHighlight,
+  UIManager,
   View,
 } = React;
-var ImageEditingManager = NativeModules.ImageEditingManager;
-var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;
+
+var RCTScrollViewConsts = UIManager.RCTScrollView.Constants;
 
 var PAGE_SIZE = 20;
 
@@ -42,14 +44,16 @@ type ImageSize = {
   height: number;
 };
 
-type TransformData = {
+type ImageCropData = {
   offset: ImageOffset;
   size: ImageSize;
-}
+  displaySize?: ?ImageSize;
+  resizeMode?: ?any; 
+};
 
 class SquareImageCropper extends React.Component {
   _isMounted: boolean;
-  _transformData: TransformData;
+  _transformData: ImageCropData;
 
   constructor(props) {
     super(props);
@@ -166,7 +170,7 @@ class SquareImageCropper extends React.Component {
   }
 
   _crop() {
-    ImageEditingManager.cropImage(
+    ImageEditor.cropImage(
       this.state.randomPhoto.uri,
       this._transformData,
       (croppedImageURI) => this.setState({croppedImageURI}),
@@ -230,7 +234,7 @@ class ImageCropper extends React.Component {
     var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
     var sizeRatioY = croppedImageSize.height / scaledImageSize.height;
 
-    this.props.onTransformDataChange && this.props.onTransformDataChange({
+    var cropData: ImageCropData = {
       offset: {
         x: this.props.image.width * offsetRatioX,
         y: this.props.image.height * offsetRatioY,
@@ -239,7 +243,8 @@ class ImageCropper extends React.Component {
         width: this.props.image.width * sizeRatioX,
         height: this.props.image.height * sizeRatioY,
       },
-    });
+    };
+    this.props.onTransformDataChange && this.props.onTransformDataChange(cropData);
   }
 
   render() {
@@ -270,8 +275,8 @@ class ImageCropper extends React.Component {
 }
 
 exports.framework = 'React';
-exports.title = 'ImageEditingManager';
-exports.description = 'Cropping and scaling with ImageEditingManager';
+exports.title = 'ImageEditor';
+exports.description = 'Cropping and scaling with ImageEditor';
 exports.examples = [{
   title: 'Image Cropping',
   render() {

Examples/UIExplorer/ImageExample.js

@@ -28,9 +28,46 @@ var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACS
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
 
-var NetworkImageExample = React.createClass({
-  watchID: (null: ?number),
+var NetworkImageCallbackExample = React.createClass({
+  getInitialState: function() {
+    return {
+      events: [],
+      mountTime: new Date(),
+    };
+  },
 
+  componentWillMount() {
+    this.setState({mountTime: new Date()});
+  },
+
+  render: function() {
+    var { mountTime } = this.state;
+
+    return (
+      <View>
+        <Image
+          source={this.props.source}
+          style={[styles.base, {overflow: 'visible'}]}
+          onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)}
+          onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)}
+          onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)}
+        />
+
+        <Text style={{marginTop: 20}}>
+          {this.state.events.join('\n')}
+        </Text>
+      </View>
+    );
+  },
+
+  _loadEventFired(event) {
+    this.setState((state) => {
+      return state.events = [...state.events, event];
+    });
+  }
+});
+
+var NetworkImageExample = React.createClass({
   getInitialState: function() {
     return {
       error: false,
@@ -58,6 +95,38 @@ var NetworkImageExample = React.createClass({
   }
 });
 
+var ImageSizeExample = React.createClass({
+  getInitialState: function() {
+    return {
+      width: 0,
+      height: 0,
+    };
+  },
+  componentDidMount: function() {
+    Image.getSize(this.props.source.uri, (width, height) => {
+      this.setState({width, height});
+    });
+  },
+  render: function() {
+    return (
+      <View style={{flexDirection: 'row'}}>
+        <Image
+          style={{
+            width: 60,
+            height: 60,
+            backgroundColor: 'transparent',
+            marginRight: 10,
+          }}
+          source={this.props.source} />
+        <Text>
+          Actual dimensions:{'\n'}
+          Width: {this.state.width}, Height: {this.state.height}
+        </Text>
+      </View>
+    );
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
 exports.title = '<Image>';
@@ -92,6 +161,14 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Image Loading Events',
+    render: function() {
+      return (
+        <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/>
+      );
+    },
+  },
   {
     title: 'Error Handler',
     render: function() {
@@ -361,6 +438,13 @@ exports.examples = [
     },
     platform: 'ios',
   },
+  {
+    title: 'Image Size',
+    render: function() {
+      return <ImageSizeExample source={fullImage} />; 
+    },
+    platform: 'ios',
+  },
 ];
 
 var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};

Examples/UIExplorer/IntentAndroidExample.android.js

@@ -0,0 +1,90 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  IntentAndroid,
+  StyleSheet,
+  Text,
+  TouchableNativeFeedback,
+  View,
+} = React;
+var UIExplorerBlock = require('./UIExplorerBlock');
+
+var OpenURLButton = React.createClass({
+
+  propTypes: {
+    url: React.PropTypes.string,
+  },
+
+  handleClick: function() {
+    IntentAndroid.canOpenURL(this.props.url, (supported) => {
+      if (supported) {
+        IntentAndroid.openURL(this.props.url);
+      } else {
+        console.log('Don\'t know how to open URI: ' + this.props.url);
+      }
+    });
+  },
+
+  render: function() {
+    return (
+      <TouchableNativeFeedback
+        onPress={this.handleClick}>
+        <View style={styles.button}>
+          <Text style={styles.text}>Open {this.props.url}</Text>
+        </View>
+      </TouchableNativeFeedback>
+    );
+  }
+});
+
+var IntentAndroidExample = React.createClass({
+
+  statics: {
+    title: 'IntentAndroid',
+    description: 'Shows how to use Android Intents to open URLs.',
+  },
+
+  render: function() {
+    return (
+      <UIExplorerBlock title="Open external URLs">
+        <OpenURLButton url={'https://www.facebook.com'} />
+        <OpenURLButton url={'http://www.facebook.com'} />
+        <OpenURLButton url={'http://facebook.com'} />
+        <OpenURLButton url={'geo:37.484847,-122.148386'} />
+      </UIExplorerBlock>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 10,
+    paddingTop: 30,
+  },
+  button: {
+    padding: 10,
+    backgroundColor: '#3B5998',
+    marginBottom: 10,
+  },
+  text: {
+    color: 'white',
+  },
+});
+
+module.exports = IntentAndroidExample;

Examples/UIExplorer/LayoutEventsExample.js

@@ -24,19 +24,30 @@ var {
   View,
 } = React;
 
+type Layout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
 type LayoutEvent = {
   nativeEvent: {
-    layout: {
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-    };
+    layout: Layout,
   };
 };
 
+type State = {
+  containerStyle?: { width: number },
+  extraText?: string,
+  imageLayout?: Layout,
+  textLayout?: Layout,
+  viewLayout?: Layout,
+  viewStyle: { margin: number },
+};
+
 var LayoutEventExample = React.createClass({
-  getInitialState: function() {
+  getInitialState(): State {
     return {
       viewStyle: {
         margin: 20,

Examples/UIExplorer/ListViewExample.js

@@ -21,6 +21,7 @@ var {
   ListView,
   TouchableHighlight,
   StyleSheet,
+  RecyclerViewBackedScrollView,
   Text,
   View,
 } = React;
@@ -55,6 +56,7 @@ var ListViewSimpleExample = React.createClass({
         <ListView
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
+          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
         />
       </UIExplorerPage>
     );
@@ -62,9 +64,7 @@ var ListViewSimpleExample = React.createClass({
 
   _renderRow: function(rowData: string, sectionID: number, rowID: number) {
     var rowHash = Math.abs(hashCode(rowData));
-    var imgSource = {
-      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
-    };
+    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
       <TouchableHighlight onPress={() => this._pressRow(rowID)}>
         <View>
@@ -97,7 +97,20 @@ var ListViewSimpleExample = React.createClass({
   },
 });
 
-var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+var THUMB_URLS = [
+  require('./Thumbnails/like.png'),
+  require('./Thumbnails/dislike.png'),
+  require('./Thumbnails/call.png'),
+  require('./Thumbnails/fist.png'),
+  require('./Thumbnails/bandaged.png'),
+  require('./Thumbnails/flowers.png'),
+  require('./Thumbnails/heart.png'),
+  require('./Thumbnails/liking.png'),
+  require('./Thumbnails/party.png'),
+  require('./Thumbnails/poke.png'),
+  require('./Thumbnails/superlike.png'),
+  require('./Thumbnails/victory.png'),
+  ];
 var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
 
 /* eslint no-bitwise: 0 */

Examples/UIExplorer/ListViewGridLayoutExample.js

@@ -26,18 +26,18 @@ var {
 } = React;
 
 var THUMB_URLS = [
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png',
-  'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png',
+  require('./Thumbnails/like.png'),
+  require('./Thumbnails/dislike.png'),
+  require('./Thumbnails/call.png'),
+  require('./Thumbnails/fist.png'),
+  require('./Thumbnails/bandaged.png'),
+  require('./Thumbnails/flowers.png'),
+  require('./Thumbnails/heart.png'),
+  require('./Thumbnails/liking.png'),
+  require('./Thumbnails/party.png'),
+  require('./Thumbnails/poke.png'),
+  require('./Thumbnails/superlike.png'),
+  require('./Thumbnails/victory.png'),
 ];
 
 var ListViewGridLayoutExample = React.createClass({
@@ -74,9 +74,7 @@ var ListViewGridLayoutExample = React.createClass({
 
   _renderRow: function(rowData: string, sectionID: number, rowID: number) {
     var rowHash = Math.abs(hashCode(rowData));
-    var imgSource = {
-      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
-    };
+    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
       <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
         <View>

Examples/UIExplorer/ListViewPagingExample.js

@@ -11,6 +11,7 @@
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  *
+ * @provides ListViewPagingExample
  * @flow
  */
 'use strict';
@@ -26,8 +27,26 @@ var {
   View,
 } = React;
 
+var NativeModules = require('NativeModules');
+var {
+  UIManager,
+} = NativeModules;
+
 var PAGE_SIZE = 4;
-var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+var THUMB_URLS = [
+  require('./Thumbnails/like.png'),
+  require('./Thumbnails/dislike.png'),
+  require('./Thumbnails/call.png'),
+  require('./Thumbnails/fist.png'),
+  require('./Thumbnails/bandaged.png'),
+  require('./Thumbnails/flowers.png'),
+  require('./Thumbnails/heart.png'),
+  require('./Thumbnails/liking.png'),
+  require('./Thumbnails/party.png'),
+  require('./Thumbnails/poke.png'),
+  require('./Thumbnails/superlike.png'),
+  require('./Thumbnails/victory.png'),
+];
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;
 
@@ -35,6 +54,10 @@ var Thumb = React.createClass({
   getInitialState: function() {
     return {thumbIndex: this._getThumbIdx(), dir: 'row'};
   },
+  componentWillMount: function() {
+    UIManager.setLayoutAnimationEnabledExperimental &&
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+  },
   _getThumbIdx: function() {
     return Math.floor(Math.random() * THUMB_URLS.length);
   },
@@ -51,9 +74,9 @@ var Thumb = React.createClass({
       <TouchableOpacity
         onPress={this._onPressThumb}
         style={[styles.buttonContents, {flexDirection: this.state.dir}]}>
-        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
-        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
-        <Image style={styles.img} source={{uri: THUMB_URLS[this.state.thumbIndex]}} />
+        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
+        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
+        <Image style={styles.img} source={THUMB_URLS[this.state.thumbIndex]} />
         {this.state.dir === 'column' ?
           <Text>
             Oooo, look at this new text!  So awesome it may just be crazy.

Examples/UIExplorer/MapViewExample.js

@@ -17,10 +17,13 @@
 
 var React = require('react-native');
 var {
+  Image,
   MapView,
+  PropTypes,
   StyleSheet,
   Text,
   TextInput,
+  TouchableOpacity,
   View,
 } = React;
 
@@ -34,22 +37,20 @@ var regionText = {
 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,
+    region: PropTypes.shape({
+      latitude: PropTypes.number.isRequired,
+      longitude: PropTypes.number.isRequired,
+      latitudeDelta: PropTypes.number,
+      longitudeDelta: PropTypes.number,
     }),
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   },
 
-  getInitialState: function() {
+  getInitialState() {
     return {
       region: {
         latitude: 0,
         longitude: 0,
-        latitudeDelta: 0,
-        longitudeDelta: 0,
       }
     };
   },
@@ -91,7 +92,9 @@ var MapRegionInput = React.createClass({
             {'Latitude delta'}
           </Text>
           <TextInput
-            value={'' + region.latitudeDelta}
+            value={
+              region.latitudeDelta == null ? '' : String(region.latitudeDelta)
+            }
             style={styles.textInput}
             onChange={this._onChangeLatitudeDelta}
             selectTextOnFocus={true}
@@ -102,7 +105,9 @@ var MapRegionInput = React.createClass({
             {'Longitude delta'}
           </Text>
           <TextInput
-            value={'' + region.longitudeDelta}
+            value={
+              region.longitudeDelta == null ? '' : String(region.longitudeDelta)
+            }
             style={styles.textInput}
             onChange={this._onChangeLongitudeDelta}
             selectTextOnFocus={true}
@@ -135,10 +140,12 @@ var MapRegionInput = React.createClass({
 
   _change: function() {
     this.setState({
-      latitude: parseFloat(regionText.latitude),
-      longitude: parseFloat(regionText.longitude),
-      latitudeDelta: parseFloat(regionText.latitudeDelta),
-      longitudeDelta: parseFloat(regionText.longitudeDelta),
+      region: {
+        latitude: parseFloat(regionText.latitude),
+        longitude: parseFloat(regionText.longitude),
+        latitudeDelta: parseFloat(regionText.latitudeDelta),
+        longitudeDelta: parseFloat(regionText.longitudeDelta),
+      },
     });
     this.props.onChange(this.state.region);
   },
@@ -149,10 +156,10 @@ var MapViewExample = React.createClass({
 
   getInitialState() {
     return {
-      mapRegion: null,
-      mapRegionInput: null,
-      annotations: null,
       isFirstLoad: true,
+      mapRegion: undefined,
+      mapRegionInput: undefined,
+      annotations: [],
     };
   },
 
@@ -163,12 +170,12 @@ var MapViewExample = React.createClass({
           style={styles.map}
           onRegionChange={this._onRegionChange}
           onRegionChangeComplete={this._onRegionChangeComplete}
-          region={this.state.mapRegion || undefined}
-          annotations={this.state.annotations || undefined}
+          region={this.state.mapRegion}
+          annotations={this.state.annotations}
         />
         <MapRegionInput
           onChange={this._onRegionInputChanged}
-          region={this.state.mapRegionInput || undefined}
+          region={this.state.mapRegionInput}
         />
       </View>
     );
@@ -208,6 +215,42 @@ var MapViewExample = React.createClass({
 
 });
 
+var AnnotationExample = React.createClass({
+
+  getInitialState() {
+    return {
+      isFirstLoad: true,
+      annotations: [],
+      mapRegion: undefined,
+    };
+  },
+
+  render() {
+    if (this.state.isFirstLoad) {
+      var onRegionChangeComplete = (region) => {
+        this.setState({
+          isFirstLoad: false,
+          annotations: [{
+            longitude: region.longitude,
+            latitude: region.latitude,
+            ...this.props.annotation,
+          }],
+        });
+      };
+    }
+
+    return (
+      <MapView
+        style={styles.map}
+        onRegionChangeComplete={onRegionChangeComplete}
+        region={this.state.mapRegion}
+        annotations={this.state.annotations}
+      />
+    );
+  },
+
+});
+
 var styles = StyleSheet.create({
   map: {
     height: 150,
@@ -242,12 +285,109 @@ exports.description = 'Base component to display maps';
 exports.examples = [
   {
     title: 'Map',
-    render(): ReactElement { return <MapViewExample />; }
+    render() {
+      return <MapViewExample />;
+    }
   },
   {
-    title: 'Map shows user location',
+    title: 'showsUserLocation + followUserLocation',
     render() {
-      return  <MapView style={styles.map} showsUserLocation={true} />;
+      return (
+        <MapView
+          style={styles.map}
+          showsUserLocation={true}
+          followUserLocation={true}
+        />
+      );
     }
-  }
+  },
+  {
+    title: 'Callout example',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        title: 'More Info...',
+        rightCalloutView: (
+          <TouchableOpacity
+            onPress={() => {
+              alert('You Are Here');
+            }}>
+            <Image
+              style={{width:30, height:30}}
+              source={require('image!uie_thumb_selected')}
+            />
+          </TouchableOpacity>
+        ),
+      }}/>;
+    }
+  },
+  {
+    title: 'Draggable pin',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        draggable: true,
+        onDragStateChange: (event) => {
+          console.log('Drag state: ' + event.state);
+        },
+      }}/>;
+    }
+  },
+  {
+    title: 'Custom pin color',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        title: 'You Are Purple',
+        tintColor: MapView.PinColors.PURPLE,
+      }}/>;
+    }
+  },
+  {
+    title: 'Custom pin image',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        title: 'Thumbs Up!',
+        image: require('image!uie_thumb_big'),
+      }}/>;
+    }
+  },
+  {
+    title: 'Custom pin view',
+    render() {
+      return <AnnotationExample style={styles.map} annotation={{
+        title: 'Thumbs Up!',
+        view: <View style={{
+          alignItems: 'center',
+        }}>
+          <Text style={{fontWeight: 'bold', color: '#f007'}}>
+            Thumbs Up!
+          </Text>
+          <Image
+            style={{width: 90, height: 65, resizeMode: 'cover'}}
+            source={require('image!uie_thumb_big')}
+          />
+        </View>,
+      }}/>;
+    }
+  },
+  {
+    title: 'Custom overlay',
+    render() {
+      return <MapView
+        style={styles.map}
+        region={{
+          latitude: 39.06,
+          longitude: -95.22,
+        }}
+        overlays={[{
+          coordinates:[
+            {latitude: 32.47, longitude: -107.85},
+            {latitude: 45.13, longitude: -94.48},
+            {latitude: 39.27, longitude: -83.25},
+            {latitude: 32.47, longitude: -107.85},
+          ],
+          strokeColor: '#f007',
+          lineWidth: 3,
+        }]}
+      />;
+    }
+  },
 ];

Examples/UIExplorer/ModalExample.js

@@ -143,6 +143,7 @@ var styles = StyleSheet.create({
   },
   innerContainer: {
     borderRadius: 10,
+    alignItems: 'center',
   },
   row: {
     alignItems: 'center',
@@ -158,6 +159,7 @@ var styles = StyleSheet.create({
     borderRadius: 5,
     flex: 1,
     height: 44,
+    alignSelf: 'stretch',
     justifyContent: 'center',
     overflow: 'hidden',
   },

Examples/UIExplorer/Navigator/BreadcrumbNavSample.js

@@ -15,7 +15,6 @@
 
 var React = require('react-native');
 var {
-  PixelRatio,
   Navigator,
   StyleSheet,
   ScrollView,
@@ -131,7 +130,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/JumpingNavSample.js

@@ -16,7 +16,6 @@
 var React = require('react-native');
 var {
   Navigator,
-  PixelRatio,
   StyleSheet,
   ScrollView,
   TabBarIOS,
@@ -185,7 +184,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/NavigationBarSample.js

@@ -16,7 +16,6 @@
 
 var React = require('react-native');
 var {
-  PixelRatio,
   Navigator,
   ScrollView,
   StyleSheet,
@@ -164,7 +163,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/Navigator/NavigatorExample.js

@@ -16,7 +16,6 @@
 var React = require('react-native');
 var {
   Navigator,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -190,7 +189,7 @@ var styles = StyleSheet.create({
   button: {
     backgroundColor: 'white',
     padding: 15,
-    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#CDCDCD',
   },
   buttonText: {

Examples/UIExplorer/NavigatorIOSExample.js

@@ -20,7 +20,6 @@ var ViewExample = require('./ViewExample');
 var createExamplePage = require('./createExamplePage');
 var {
   AlertIOS,
-  PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
@@ -227,7 +226,7 @@ var styles = StyleSheet.create({
   },
   line: {
     backgroundColor: '#bbbbbb',
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
   },
   row: {
     backgroundColor: 'white',
@@ -236,7 +235,7 @@ var styles = StyleSheet.create({
     paddingVertical: 15,
   },
   separator: {
-    height: 1 / PixelRatio.get(),
+    height: StyleSheet.hairlineWidth,
     backgroundColor: '#bbbbbb',
     marginLeft: 15,
   },

Examples/UIExplorer/NetInfoExample.js

@@ -15,83 +15,84 @@
  */
 'use strict';
 
-var React = require('react-native');
-var {
+const React = require('react-native');
+const {
   NetInfo,
   Text,
-  View
+  View,
+  TouchableWithoutFeedback,
 } = React;
 
-var ReachabilitySubscription = React.createClass({
+const ConnectionInfoSubscription = React.createClass({
   getInitialState() {
     return {
-      reachabilityHistory: [],
+      connectionInfoHistory: [],
     };
   },
   componentDidMount: function() {
     NetInfo.addEventListener(
-      'change',
-      this._handleReachabilityChange
+        'change',
+        this._handleConnectionInfoChange
     );
   },
   componentWillUnmount: function() {
     NetInfo.removeEventListener(
-      'change',
-      this._handleReachabilityChange
+        'change',
+        this._handleConnectionInfoChange
     );
   },
-  _handleReachabilityChange: function(reachability) {
-    var reachabilityHistory = this.state.reachabilityHistory.slice();
-    reachabilityHistory.push(reachability);
+  _handleConnectionInfoChange: function(connectionInfo) {
+    const connectionInfoHistory = this.state.connectionInfoHistory.slice();
+    connectionInfoHistory.push(connectionInfo);
     this.setState({
-      reachabilityHistory,
+      connectionInfoHistory,
     });
   },
   render() {
     return (
-      <View>
-        <Text>{JSON.stringify(this.state.reachabilityHistory)}</Text>
-      </View>
+        <View>
+          <Text>{JSON.stringify(this.state.connectionInfoHistory)}</Text>
+        </View>
     );
   }
 });
 
-var ReachabilityCurrent = React.createClass({
+const ConnectionInfoCurrent = React.createClass({
   getInitialState() {
     return {
-      reachability: null,
+      connectionInfo: null,
     };
   },
   componentDidMount: function() {
     NetInfo.addEventListener(
-      'change',
-      this._handleReachabilityChange
+        'change',
+        this._handleConnectionInfoChange
     );
     NetInfo.fetch().done(
-      (reachability) => { this.setState({reachability}); }
+        (connectionInfo) => { this.setState({connectionInfo}); }
     );
   },
   componentWillUnmount: function() {
     NetInfo.removeEventListener(
-      'change',
-      this._handleReachabilityChange
+        'change',
+        this._handleConnectionInfoChange
     );
   },
-  _handleReachabilityChange: function(reachability) {
+  _handleConnectionInfoChange: function(connectionInfo) {
     this.setState({
-      reachability,
+      connectionInfo,
     });
   },
   render() {
     return (
-      <View>
-        <Text>{this.state.reachability}</Text>
-      </View>
+        <View>
+          <Text>{this.state.connectionInfo}</Text>
+        </View>
     );
   }
 });
 
-var IsConnected = React.createClass({
+const IsConnected = React.createClass({
   getInitialState() {
     return {
       isConnected: null,
@@ -99,17 +100,17 @@ var IsConnected = React.createClass({
   },
   componentDidMount: function() {
     NetInfo.isConnected.addEventListener(
-      'change',
-      this._handleConnectivityChange
+        'change',
+        this._handleConnectivityChange
     );
     NetInfo.isConnected.fetch().done(
-      (isConnected) => { this.setState({isConnected}); }
+        (isConnected) => { this.setState({isConnected}); }
     );
   },
   componentWillUnmount: function() {
     NetInfo.isConnected.removeEventListener(
-      'change',
-      this._handleConnectivityChange
+        'change',
+        this._handleConnectivityChange
     );
   },
   _handleConnectivityChange: function(isConnected) {
@@ -119,9 +120,37 @@ var IsConnected = React.createClass({
   },
   render() {
     return (
-      <View>
-        <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
-      </View>
+        <View>
+          <Text>{this.state.isConnected ? 'Online' : 'Offline'}</Text>
+        </View>
+    );
+  }
+});
+
+const IsConnectionExpensive = React.createClass({
+  getInitialState() {
+    return {
+      isConnectionExpensive: (null : ?boolean),
+    };
+  },
+  _checkIfExpensive() {
+    NetInfo.isConnectionExpensive(
+        (isConnectionExpensive) => { this.setState({isConnectionExpensive}); }
+    );
+  },
+  render() {
+    return (
+        <View>
+          <TouchableWithoutFeedback onPress={this._checkIfExpensive}>
+            <View>
+              <Text>Click to see if connection is expensive:
+                {this.state.isConnectionExpensive === true ? 'Expensive' :
+                this.state.isConnectionExpensive === false ? 'Not expensive'
+                : 'Unknown'}
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
     );
   }
 });
@@ -135,13 +164,19 @@ exports.examples = [
     render(): ReactElement { return <IsConnected />; }
   },
   {
-    title: 'NetInfo.reachabilityIOS',
-    description: 'Asynchronously load and observe iOS reachability',
-    render(): ReactElement { return <ReachabilityCurrent />; }
+    title: 'NetInfo.update',
+    description: 'Asynchronously load and observe connectionInfo',
+    render(): ReactElement { return <ConnectionInfoCurrent />; }
   },
   {
-    title: 'NetInfo.reachabilityIOS',
-    description: 'Observed updates to iOS reachability',
-    render(): ReactElement { return <ReachabilitySubscription />; }
+    title: 'NetInfo.updateHistory',
+    description: 'Observed updates to connectionInfo',
+    render(): ReactElement { return <ConnectionInfoSubscription />; }
+  },
+  {
+    platform: 'android',
+    title: 'NetInfo.isConnectionExpensive (Android)',
+    description: 'Asynchronously check isConnectionExpensive',
+    render(): ReactElement { return <IsConnectionExpensive />; }
   },
 ];

Examples/UIExplorer/PanResponderExample.js

@@ -11,7 +11,7 @@
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  *
- * @flow-weak
+ * @flow weak
  */
 'use strict';
 
@@ -79,7 +79,8 @@ var PanResponderExample = React.createClass({
   },
 
   _highlight: function() {
-    this.circle && this.circle.setNativeProps({
+    const circle = this.circle;
+    circle && circle.setNativeProps({
       style: {
         backgroundColor: processColor(CIRCLE_HIGHLIGHT_COLOR)
       }
@@ -87,7 +88,8 @@ var PanResponderExample = React.createClass({
   },
 
   _unHighlight: function() {
-    this.circle && this.circle.setNativeProps({
+    const circle = this.circle;
+    circle && circle.setNativeProps({
       style: {
         backgroundColor: processColor(CIRCLE_COLOR)
       }

Examples/UIExplorer/PickerAndroidExample.js

@@ -0,0 +1,140 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+const React = require('react-native');
+const StyleSheet = require('StyleSheet');
+const UIExplorerBlock = require('UIExplorerBlock');
+const UIExplorerPage = require('UIExplorerPage');
+
+const {
+  Picker,
+  Text,
+  TouchableWithoutFeedback,
+} = React;
+const Item = Picker.Item;
+
+const PickerExample = React.createClass({
+
+  statics: {
+    title: '<Picker>',
+    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
+  },
+
+  getInitialState: function() {
+    return {
+      selected1: 'key1',
+      selected2: 'key1',
+      selected3: 'key1',
+      color: 'red',
+      mode: Picker.MODE_DIALOG,
+    };
+  },
+
+  displayName: 'Android Picker',
+
+  render: function() {
+    return (
+      <UIExplorerPage title="<Picker>">
+        <UIExplorerBlock title="Basic Picker">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected1}
+            onValueChange={this.onValueChange.bind(this, 'selected1')}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Disabled picker">
+          <Picker style={styles.picker} enabled={false} selectedValue={this.state.selected1}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Dropdown Picker">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected2}
+            onValueChange={this.onValueChange.bind(this, 'selected2')}
+            mode="dropdown">
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Picker with prompt message">
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.selected3}
+            onValueChange={this.onValueChange.bind(this, 'selected3')}
+            prompt="Pick one, just one">
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Picker with no listener">
+          <Picker style={styles.picker}>
+            <Item label="hello" value="key0" />
+            <Item label="world" value="key1" />
+          </Picker>
+          <Text>
+            Cannot change the value of this picker because it doesn't update selectedValue.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Colorful pickers">
+          <Picker
+            style={[styles.picker, {color: 'white', backgroundColor: '#333'}]}
+            selectedValue={this.state.color}
+            onValueChange={this.onValueChange.bind(this, 'color')}
+            mode="dropdown">
+            <Item label="red" color="red" value="red" />
+            <Item label="green" color="green" value="green" />
+            <Item label="blue" color="blue" value="blue" />
+          </Picker>
+          <Picker
+            style={styles.picker}
+            selectedValue={this.state.color}
+            onValueChange={this.onValueChange.bind(this, 'color')}
+            mode="dialog">
+            <Item label="red" color="red" value="red" />
+            <Item label="green" color="green" value="green" />
+            <Item label="blue" color="blue" value="blue" />
+          </Picker>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+
+  changeMode: function() {
+    const newMode = this.state.mode === Picker.MODE_DIALOG
+        ? Picker.MODE_DROPDOWN
+        : Picker.MODE_DIALOG;
+    this.setState({mode: newMode});
+  },
+
+  onValueChange: function(key: string, value: string) {
+    const newState = {};
+    newState[key] = value;
+    this.setState(newState);
+  },
+});
+
+var styles = StyleSheet.create({
+  picker: {
+    width: 100,
+  },
+});
+
+module.exports = PickerExample;

Examples/UIExplorer/PickerIOSExample.js

@@ -87,24 +87,21 @@ var PickerExample = React.createClass({
               key={carMake}
               value={carMake}
               label={CAR_MAKES_AND_MODELS[carMake].name}
-              />
-            )
-          )}
+            />
+          ))}
         </PickerIOS>
         <Text>Please choose a model of {make.name}:</Text>
         <PickerIOS
           selectedValue={this.state.modelIndex}
           key={this.state.carMake}
           onValueChange={(modelIndex) => this.setState({modelIndex})}>
-          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map(
-            (modelName, modelIndex) => (
-              <PickerItemIOS
-                key={this.state.carmake + '_' + modelIndex}
-                value={modelIndex}
-                label={modelName}
-              />
-            ))
-          }
+          {CAR_MAKES_AND_MODELS[this.state.carMake].models.map((modelName, modelIndex) => (
+            <PickerItemIOS
+              key={this.state.carMake + '_' + modelIndex}
+              value={modelIndex}
+              label={modelName}
+            />
+          ))}
         </PickerIOS>
         <Text>You selected: {selectionString}</Text>
       </View>
@@ -112,6 +109,34 @@ var PickerExample = React.createClass({
   },
 });
 
+var PickerStyleExample = React.createClass({
+  getInitialState: function() {
+    return {
+      carMake: 'cadillac',
+      modelIndex: 0,
+    };
+  },
+
+  render: function() {
+    var make = CAR_MAKES_AND_MODELS[this.state.carMake];
+    var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
+    return (
+      <PickerIOS
+        itemStyle={{fontSize: 25, color: 'red', textAlign: 'left', fontWeight: 'bold'}}
+        selectedValue={this.state.carMake}
+        onValueChange={(carMake) => this.setState({carMake, modelIndex: 0})}>
+        {Object.keys(CAR_MAKES_AND_MODELS).map((carMake) => (
+          <PickerItemIOS
+            key={carMake}
+            value={carMake}
+            label={CAR_MAKES_AND_MODELS[carMake].name}
+          />
+        ))}
+      </PickerIOS>
+    );
+  },
+});
+
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';
 exports.description = 'Render lists of selectable options with UIPickerView.';
@@ -121,4 +146,10 @@ exports.examples = [
   render: function(): ReactElement {
     return <PickerExample />;
   },
+},
+{
+  title: '<PickerIOS> with custom styling',
+  render: function(): ReactElement {
+    return <PickerStyleExample />;
+  },
 }];

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -20,6 +20,31 @@ var React = require('React');
 var UIExplorerBlock = require('UIExplorerBlock');
 var UIExplorerPage = require('UIExplorerPage');
 
+var TimerMixin = require('react-timer-mixin');
+
+var MovingBar = React.createClass({
+  mixins: [TimerMixin],
+
+  getInitialState: function() {
+    return {
+      progress: 0
+    };
+  },
+
+  componentDidMount: function() {
+    this.setInterval(
+      () => {
+        var progress = (this.state.progress + 0.02) % 1;
+        this.setState({progress: progress});
+      }, 50
+    );
+  },
+
+  render: function() {
+    return <ProgressBar progress={this.state.progress} {...this.props} />;
+  },
+});
+
 var ProgressBarAndroidExample = React.createClass({
 
   statics: {
@@ -35,6 +60,10 @@ var ProgressBarAndroidExample = React.createClass({
           <ProgressBar />
         </UIExplorerBlock>
 
+        <UIExplorerBlock title="Normal ProgressBar">
+          <ProgressBar styleAttr="Normal" />
+        </UIExplorerBlock>
+
         <UIExplorerBlock title="Small ProgressBar">
           <ProgressBar styleAttr="Small" />
         </UIExplorerBlock>
@@ -54,6 +83,26 @@ var ProgressBarAndroidExample = React.createClass({
         <UIExplorerBlock title="Large Inverse ProgressBar">
           <ProgressBar styleAttr="LargeInverse" />
         </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
+          <ProgressBar styleAttr="Horizontal" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal ProgressBar">
+          <MovingBar styleAttr="Horizontal" indeterminate={false} />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Large Red ProgressBar">
+          <ProgressBar styleAttr="Large" color="red" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar">
+          <ProgressBar styleAttr="Horizontal" color="black" />
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Horizontal Blue ProgressBar">
+          <MovingBar styleAttr="Horizontal" indeterminate={false} color="blue" />
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   },

Examples/UIExplorer/PullToRefreshViewAndroidExample.android.js

@@ -0,0 +1,128 @@
+/**
+* The examples provided by Facebook are for non-commercial testing and
+* evaluation purposes only.
+*
+* Facebook reserves all rights not expressly granted.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*
+*/
+'use strict';
+
+const React = require('react-native');
+const {
+  ScrollView,
+  StyleSheet,
+  PullToRefreshViewAndroid,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} = React;
+
+const styles = StyleSheet.create({
+  row: {
+    borderColor: 'grey',
+    borderWidth: 1,
+    padding: 20,
+    backgroundColor: '#3a5795',
+    margin: 5,
+  },
+  text: {
+    alignSelf: 'center',
+    color: '#fff',
+
+  },
+  layout: {
+    flex: 1,
+  },
+  scrollview: {
+    flex: 1,
+  },
+});
+
+const Row = React.createClass({
+  _onClick: function() {
+    this.props.onClick(this.props.data);
+  },
+  render: function() {
+    return (
+     <TouchableWithoutFeedback onPress={this._onClick} >
+        <View style={styles.row}>
+          <Text style={styles.text}>
+            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
+          </Text>
+        </View>
+    </TouchableWithoutFeedback>
+    );
+  },
+});
+const PullToRefreshViewAndroidExample = React.createClass({
+  statics: {
+    title: '<PullToRefreshViewAndroid>',
+    description: 'Container that adds pull-to-refresh support to its child view.'
+  },
+
+  getInitialState() {
+    return {
+      isRefreshing: false,
+      loaded: 0,
+      rowData: Array.from(new Array(20)).map(
+        (val, i) => ({text: 'Initial row' + i, clicks: 0})
+      ),
+    };
+  },
+
+  _onClick(row) {
+    row.clicks++;
+    this.setState({
+      rowData: this.state.rowData,
+    });
+  },
+
+  render() {
+    const rows = this.state.rowData.map((row, ii) => {
+      return <Row key={ii} data={row} onClick={this._onClick}/>;
+    });
+    return (
+      <PullToRefreshViewAndroid
+        style={styles.layout}
+        refreshing={this.state.isRefreshing}
+        onRefresh={this._onRefresh}
+        colors={['#ff0000', '#00ff00', '#0000ff']}
+        progressBackgroundColor={'#ffff00'}
+        >
+        <ScrollView style={styles.scrollview}>
+          {rows}
+        </ScrollView>
+      </PullToRefreshViewAndroid>
+    );
+  },
+
+  _onRefresh() {
+    this.setState({isRefreshing: true});
+    setTimeout(() => {
+      // prepend 10 items
+      const rowData = Array.from(new Array(10))
+      .map((val, i) => ({
+        text: 'Loaded row' + (+this.state.loaded + i),
+        clicks: 0,
+      }))
+      .concat(this.state.rowData);
+
+      this.setState({
+        loaded: this.state.loaded + 10,
+        isRefreshing: false,
+        rowData: rowData,
+      });
+    }, 5000);
+  },
+
+});
+
+
+module.exports = PullToRefreshViewAndroidExample;

Examples/UIExplorer/RCTRootViewIOSExample.js

@@ -0,0 +1,98 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react-native');
+const {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+const requireNativeComponent = require('requireNativeComponent');
+
+class AppPropertiesUpdateExample extends React.Component {
+  render() {
+    // Do not require this unless we are actually rendering.
+    const UpdatePropertiesExampleView = requireNativeComponent('UpdatePropertiesExampleView');
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          Press the button to update the field below by passing new properties to the RN app.
+        </Text>
+        <UpdatePropertiesExampleView style={styles.nativeView}>
+          <Text style={styles.text}>
+            Error: This demo is accessible only from UIExplorer app
+          </Text>
+        </UpdatePropertiesExampleView>
+      </View>
+    );
+  }
+}
+
+class RootViewSizeFlexibilityExample extends React.Component {
+  render() {
+    // Do not require this unless we are actually rendering.
+    const FlexibleSizeExampleView = requireNativeComponent('FlexibleSizeExampleView');
+    return (
+      <View style={styles.container}>
+        <Text style={styles.text}>
+          Press the button to resize it. On resize, RCTRootViewDelegate is notified. You can use it to handle content size updates.
+        </Text>
+        <FlexibleSizeExampleView style={styles.nativeView}>
+          <Text style={styles.text}>
+            Error: This demo is accessible only from UIExplorer app
+          </Text>
+        </FlexibleSizeExampleView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+  text: {
+    marginBottom: 20
+  },
+  nativeView: {
+    height: 140,
+    width: 280
+  }
+});
+
+exports.title = 'RCTRootView';
+exports.description = 'Examples that show useful methods when embedding React Native in a native application';
+exports.examples = [
+{
+  title: 'Updating app properties in runtime',
+  render(): React.Component {
+    return (
+      <AppPropertiesUpdateExample/>
+    );
+  },
+},
+{
+  title: 'RCTRootView\'s size flexibility',
+  render(): React.Component {
+    return (
+      <RootViewSizeFlexibilityExample/>
+    );
+  },
+}];

Examples/UIExplorer/README.md

@@ -6,6 +6,7 @@ The UIExplorer is a sample app that showcases React Native views and modules.
 
 Before running the app, make sure you ran:
 
+    git clone https://github.com/facebook/react-native.git
     cd react-native
     npm install
 

Examples/UIExplorer/RefreshControlExample.js

@@ -0,0 +1,125 @@
+/**
+* The examples provided by Facebook are for non-commercial testing and
+* evaluation purposes only.
+*
+* Facebook reserves all rights not expressly granted.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*
+*/
+'use strict';
+
+const React = require('react-native');
+const {
+  ScrollView,
+  StyleSheet,
+  RefreshControl,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} = React;
+
+const styles = StyleSheet.create({
+  row: {
+    borderColor: 'grey',
+    borderWidth: 1,
+    padding: 20,
+    backgroundColor: '#3a5795',
+    margin: 5,
+  },
+  text: {
+    alignSelf: 'center',
+    color: '#fff',
+  },
+  scrollview: {
+    flex: 1,
+  },
+});
+
+const Row = React.createClass({
+  _onClick: function() {
+    this.props.onClick(this.props.data);
+  },
+  render: function() {
+    return (
+     <TouchableWithoutFeedback onPress={this._onClick} >
+        <View style={styles.row}>
+          <Text style={styles.text}>
+            {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'}
+          </Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  },
+});
+
+const RefreshControlExample = React.createClass({
+  statics: {
+    title: '<RefreshControl>',
+    description: 'Adds pull-to-refresh support to a scrollview.'
+  },
+
+  getInitialState() {
+    return {
+      isRefreshing: false,
+      loaded: 0,
+      rowData: Array.from(new Array(20)).map(
+        (val, i) => ({text: 'Initial row' + i, clicks: 0})),
+    };
+  },
+
+  _onClick(row) {
+    row.clicks++;
+    this.setState({
+      rowData: this.state.rowData,
+    });
+  },
+
+  render() {
+    const rows = this.state.rowData.map((row, ii) => {
+      return <Row key={ii} data={row} onClick={this._onClick}/>;
+    });
+    return (
+      <ScrollView
+        style={styles.scrollview}
+        refreshControl={
+          <RefreshControl
+            refreshing={this.state.isRefreshing}
+            onRefresh={this._onRefresh}
+            tintColor="#ff0000"
+            title="Loading..."
+            colors={['#ff0000', '#00ff00', '#0000ff']}
+            progressBackgroundColor="#ffff00"
+          />
+        }>
+        {rows}
+      </ScrollView>
+    );
+  },
+
+  _onRefresh() {
+    this.setState({isRefreshing: true});
+    setTimeout(() => {
+      // prepend 10 items
+      const rowData = Array.from(new Array(10))
+      .map((val, i) => ({
+        text: 'Loaded row' + (+this.state.loaded + i),
+        clicks: 0,
+      }))
+      .concat(this.state.rowData);
+
+      this.setState({
+        loaded: this.state.loaded + 10,
+        isRefreshing: false,
+        rowData: rowData,
+      });
+    }, 5000);
+  },
+});
+
+module.exports = RefreshControlExample;

Examples/UIExplorer/SetPropertiesExampleApp.js

@@ -0,0 +1,43 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var React = require('React');
+var Text = require('Text');
+var View = require('View');
+
+var SetPropertiesExampleApp = React.createClass({
+
+  render: function() {
+    var wrapperStyle = {
+      backgroundColor: this.props.color,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+
+    return (
+      <View style={wrapperStyle}>
+        <Text>
+          Embedded React Native view
+        </Text>
+      </View>
+    );
+  },
+});
+
+module.exports = SetPropertiesExampleApp;

Examples/UIExplorer/SliderIOSExample.js

@@ -37,7 +37,7 @@ var SliderExample = React.createClass({
           {this.state.value}
         </Text>
         <SliderIOS
-          style={styles.slider}
+          {...this.props}
           onValueChange={(value) => this.setState({value: value})} />
       </View>
     );
@@ -62,7 +62,60 @@ exports.displayName = 'SliderExample';
 exports.description = 'Slider input for numeric values';
 exports.examples = [
   {
-    title: 'SliderIOS',
-    render(): ReactElement { return <SliderExample />; }
-  }
+    title: 'Default settings',
+    render(): ReactElement {
+      return <SliderExample />;
+    }
+  },
+  {
+    title: 'minimumValue: -1, maximumValue: 2',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumValue={-1}
+          maximumValue={2}
+        />
+      );
+    }
+  },
+  {
+    title: 'step: 0.25',
+    render(): ReactElement {
+      return <SliderExample step={0.25} />;
+    }
+  },
+  {
+    title: 'Custom min/max track tint color',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom thumb image',
+    render(): ReactElement {
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
+    }
+  },
+  {
+    title: 'Custom track image',
+    render(): ReactElement {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    render(): ReactElement {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
 ];

Examples/UIExplorer/StatusBarIOSExample.js

@@ -33,7 +33,7 @@ exports.examples = [{
     return (
       <View>
         {['default', 'light-content'].map((style) =>
-          <TouchableHighlight style={styles.wrapper}
+          <TouchableHighlight key={style} style={styles.wrapper}
             onPress={() => StatusBarIOS.setStyle(style)}>
             <View style={styles.button}>
               <Text>setStyle('{style}')</Text>
@@ -49,7 +49,7 @@ exports.examples = [{
     return (
       <View>
         {['default', 'light-content'].map((style) =>
-          <TouchableHighlight style={styles.wrapper}
+          <TouchableHighlight key={style} style={styles.wrapper}
             onPress={() => StatusBarIOS.setStyle(style, true)}>
             <View style={styles.button}>
               <Text>setStyle('{style}', true)</Text>
@@ -65,7 +65,7 @@ exports.examples = [{
     return (
       <View>
         {['none', 'fade', 'slide'].map((animation) =>
-          <View>
+          <View key={animation}>
             <TouchableHighlight style={styles.wrapper}
               onPress={() => StatusBarIOS.setHidden(true, animation)}>
               <View style={styles.button}>

Examples/UIExplorer/SwitchAndroidExample.android.js

@@ -1,70 +0,0 @@
-/**
- * Copyright 2004-present Facebook. All Rights Reserved.
- */
-'use strict';
-
-var React = require('React');
-
-var SwitchAndroid = require('SwitchAndroid');
-var Text = require('Text');
-var UIExplorerBlock = require('UIExplorerBlock');
-var UIExplorerPage = require('UIExplorerPage');
-
-var SwitchAndroidExample = React.createClass({
-  statics: {
-    title: '<SwitchAndroid>',
-    description: 'Standard Android two-state toggle component.'
-  },
-
-  getInitialState : function() {
-    return {
-      trueSwitchIsOn: true,
-      falseSwitchIsOn: false,
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false,
-      eventSwitchIsOn: false,
-    };
-  },
-
-  render: function() {
-    return (
-      <UIExplorerPage title="<SwitchAndroid>">
-        <UIExplorerBlock title="Switches can be set to true or false">
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.falseSwitchIsOn} />
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
-            value={this.state.trueSwitchIsOn} />
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Switches can be disabled">
-          <SwitchAndroid
-            disabled={true}
-            style={{marginBottom: 10}}
-            value={true} />
-          <SwitchAndroid
-            disabled={true}
-            value={false} />
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Change events can be detected">
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.eventSwitchIsOn} />
-          <SwitchAndroid
-            onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
-            style={{marginBottom: 10}}
-            value={this.state.eventSwitchIsOn} />
-          <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
-        </UIExplorerBlock>
-        <UIExplorerBlock title="Switches are controlled components">
-          <SwitchAndroid />
-          <SwitchAndroid value={true} />
-        </UIExplorerBlock>
-      </UIExplorerPage>
-    );
-  }
-});
-
-module.exports = SwitchAndroidExample;

Examples/UIExplorer/SwitchExample.js

@@ -17,7 +17,7 @@
 
 var React = require('react-native');
 var {
-  SwitchIOS,
+  Switch,
   Text,
   View
 } = React;
@@ -32,11 +32,11 @@ var BasicSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
           style={{marginBottom: 10}}
           value={this.state.falseSwitchIsOn} />
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
           value={this.state.trueSwitchIsOn} />
       </View>
@@ -48,11 +48,11 @@ var DisabledSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           disabled={true}
           style={{marginBottom: 10}}
           value={true} />
-        <SwitchIOS
+        <Switch
           disabled={true}
           value={false} />
       </View>
@@ -70,14 +70,14 @@ var ColorSwitchExample = React.createClass({
   render() {
     return (
       <View>
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
           onTintColor="#00ff00"
           style={{marginBottom: 10}}
           thumbTintColor="#0000ff"
           tintColor="#ff0000"
           value={this.state.colorFalseSwitchIsOn} />
-        <SwitchIOS
+        <Switch
           onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
           onTintColor="#00ff00"
           thumbTintColor="#0000ff"
@@ -99,22 +99,22 @@ var EventSwitchExample = React.createClass({
     return (
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
         <View>
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchIsOn} />
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchIsOn} />
             <Text>{this.state.eventSwitchIsOn ? 'On' : 'Off'}</Text>
         </View>
         <View>
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchRegressionIsOn} />
-          <SwitchIOS
+          <Switch
             onValueChange={(value) => this.setState({eventSwitchRegressionIsOn: value})}
             style={{marginBottom: 10}}
             value={this.state.eventSwitchRegressionIsOn} />
@@ -125,10 +125,7 @@ var EventSwitchExample = React.createClass({
   }
 });
 
-exports.title = '<SwitchIOS>';
-exports.displayName = 'SwitchExample';
-exports.description = 'Native boolean input';
-exports.examples = [
+var examples = [
   {
     title: 'Switches can be set to true or false',
     render(): ReactElement { return <BasicSwitchExample />; }
@@ -137,16 +134,24 @@ exports.examples = [
     title: 'Switches can be disabled',
     render(): ReactElement { return <DisabledSwitchExample />; }
   },
-  {
-    title: 'Custom colors can be provided',
-    render(): ReactElement { return <ColorSwitchExample />; }
-  },
   {
     title: 'Change events can be detected',
     render(): ReactElement { return <EventSwitchExample />; }
   },
   {
     title: 'Switches are controlled components',
-    render(): ReactElement { return <SwitchIOS />; }
+    render(): ReactElement { return <Switch />; }
   }
 ];
+
+if (React.Platform.OS === 'ios') {
+  examples.push({
+    title: 'Custom colors can be provided',
+    render(): ReactElement { return <ColorSwitchExample />; }
+  });
+}
+
+exports.title = '<Switch>';
+exports.displayName = 'SwitchExample';
+exports.description = 'Native boolean input';
+exports.examples = examples;

Examples/UIExplorer/TextExample.android.js

@@ -17,6 +17,7 @@
 
 var React = require('react-native');
 var {
+  Image,
   StyleSheet,
   Text,
   View,
@@ -160,6 +161,22 @@ var TextExample = React.createClass({
             </View>
           </View>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Custom Fonts">
+          <View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
+            <View style={{flex: 1}}>
+              <Text style={{fontFamily: 'notoserif'}}>
+                NotoSerif Regular
+              </Text>
+              <Text style={{fontFamily: 'notoserif', fontStyle: 'italic', fontWeight: 'bold'}}>
+                NotoSerif Bold Italic
+              </Text>
+              <Text style={{fontFamily: 'notoserif', fontStyle: 'italic'}}>
+                NotoSerif Italic (Missing Font file)
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+
         <UIExplorerBlock title="Font Size">
           <Text style={{fontSize: 23}}>
             Size 23
@@ -343,6 +360,16 @@ var TextExample = React.createClass({
             No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
           </Text>
         </UIExplorerBlock>
+        <UIExplorerBlock title="Inline images">
+          <Text>
+            This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Text shadow">
+          <Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
+            Demo text shadow
+          </Text>
+        </UIExplorerBlock>
       </UIExplorerPage>
     );
   }

Examples/UIExplorer/TextExample.ios.js

@@ -243,6 +243,21 @@ exports.examples = [
           </Text>
           )
         </Text>
+        <Text style={{opacity:0.7}}>
+          (opacity
+            <Text>
+              (is inherited
+                <Text style={{opacity:0.7}}>
+                  (and accumulated
+                    <Text style={{backgroundColor:'#ffaaaa'}}>
+                      (and also applies to the background)
+                    </Text>
+                  )
+                </Text>
+              )
+            </Text>
+          )
+        </Text>
         <Text style={{fontSize: 12}}>
           <Entity>Entity Name</Entity>
         </Text>
@@ -409,6 +424,17 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'Text shadow',
+  render: function() {
+    return (
+      <View>
+        <Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
+          Demo text shadow
+        </Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/TextInputExample.android.js

@@ -78,15 +78,79 @@ class RewriteExample extends React.Component {
     this.state = {text: ''};
   }
   render() {
+    var limit = 20;
+    var remainder = limit - this.state.text.length;
+    var remainderColor = remainder > 5 ? 'blue' : 'red';
     return (
-      <TextInput
-        onChangeText={(text) => {
-          text = text.replace(/ /g, '_');
-          this.setState({text});
-        }}
-        style={styles.singleLine}
-        value={this.state.text}
-      />
+      <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>
+    );
+  }
+}
+
+class TokenizedTextExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: 'Hello #World'};
+  }
+  render() {
+
+    //define delimiter
+    let delimiter = /\s+/;
+
+    //split string
+    let _text = this.state.text;
+    let token, index, parts = [];
+    while (_text) {
+      delimiter.lastIndex = 0;
+      token = delimiter.exec(_text);
+      if (token === null) {
+        break;
+      }
+      index = token.index;
+      if (token[0].length === 0) {
+        index = 1;
+      }
+      parts.push(_text.substr(0, index));
+      parts.push(token[0]);
+      index = index + token[0].length;
+      _text = _text.slice(index);
+    }
+    parts.push(_text);
+
+    //highlight hashtags
+    parts = parts.map((text) => {
+      if (/^#/.test(text)) {
+        return <Text key={text} style={styles.hashtag}>{text}</Text>;
+      } else {
+        return text;
+      }
+    });
+
+    return (
+      <View>
+        <TextInput
+          multiline={true}
+          style={styles.multiline}
+          onChangeText={(text) => {
+            this.setState({text});
+          }}>
+          <Text>{parts}</Text>
+        </TextInput>
+      </View>
     );
   }
 }
@@ -109,6 +173,10 @@ var styles = StyleSheet.create({
   singleLineWithHeightTextInput: {
     height: 30,
   },
+  hashtag: {
+    color: 'blue',
+    fontWeight: 'bold',
+  },
 });
 
 exports.title = '<TextInput>';
@@ -174,6 +242,7 @@ exports.examples = [
         'default',
         'email-address',
         'numeric',
+        'phone-pad',
       ];
       var examples = keyboardTypes.map((type) => {
         return (
@@ -279,25 +348,19 @@ exports.examples = [
             placeholder="multiline, aligned top-left"
             placeholderTextColor="red"
             multiline={true}
-            textAlign="start"
-            textAlignVertical="top"
-            style={styles.multiline}
+            style={[styles.multiline, {textAlign: "left", textAlignVertical: "top"}]}
           />
           <TextInput
             autoCorrect={true}
             placeholder="multiline, aligned center"
             placeholderTextColor="green"
             multiline={true}
-            textAlign="center"
-            textAlignVertical="center"
-            style={[styles.multiline]}
+            style={[styles.multiline, {textAlign: "center", textAlignVertical: "center"}]}
           />
           <TextInput
             autoCorrect={true}
             multiline={true}
-            textAlign="end"
-            textAlignVertical="bottom"
-            style={[styles.multiline, {color: 'blue'}]}>
+            style={[styles.multiline, {color: 'blue'}, {textAlign: "right", textAlignVertical: "bottom"}]}>
             <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
           </TextInput>
         </View>
@@ -322,4 +385,10 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Attributed text',
+    render: function() {
+      return <TokenizedTextExample />;
+    }
+  },
 ];

Examples/UIExplorer/TextInputExample.ios.js

@@ -42,6 +42,7 @@ var TextEventsExample = React.createClass({
       curText: '<No Event>',
       prevText: '<No Event>',
       prev2Text: '<No Event>',
+      prev3Text: '<No Event>',
     };
   },
 
@@ -51,6 +52,7 @@ var TextEventsExample = React.createClass({
         curText: text,
         prevText: state.curText,
         prev2Text: state.prevText,
+        prev3Text: state.prev2Text,
       };
     });
   },
@@ -73,12 +75,21 @@ var TextEventsExample = React.createClass({
           onSubmitEditing={(event) => this.updateText(
             'onSubmitEditing text: ' + event.nativeEvent.text
           )}
+          onSelectionChange={(event) => this.updateText(
+            'onSelectionChange range: ' +
+              event.nativeEvent.selection.start + ',' +
+              event.nativeEvent.selection.end
+          )}
+          onKeyPress={(event) => {
+            this.updateText('onKeyPress key: ' + event.nativeEvent.key);
+          }}
           style={styles.default}
         />
         <Text style={styles.eventLabel}>
           {this.state.curText}{'\n'}
           (prev: {this.state.prevText}){'\n'}
-          (prev2: {this.state.prev2Text})
+          (prev2: {this.state.prev2Text}){'\n'}
+          (prev3: {this.state.prev3Text})
         </Text>
       </View>
     );
@@ -114,6 +125,135 @@ class RewriteExample extends React.Component {
   }
 }
 
+class RewriteExampleInvalidCharacters extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    return (
+      <View style={styles.rewriteContainer}>
+        <TextInput
+          multiline={false}
+          onChangeText={(text) => {
+            this.setState({text: text.replace(/\s/g, '')});
+          }}
+          style={styles.default}
+          value={this.state.text}
+        />
+      </View>
+    );
+  }
+}
+
+class TokenizedTextExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: 'Hello #World'};
+  }
+  render() {
+
+    //define delimiter
+    let delimiter = /\s+/;
+
+    //split string
+    let _text = this.state.text;
+    let token, index, parts = [];
+    while (_text) {
+      delimiter.lastIndex = 0;
+      token = delimiter.exec(_text);
+      if (token === null) {
+        break;
+      }
+      index = token.index;
+      if (token[0].length === 0) {
+        index = 1;
+      }
+      parts.push(_text.substr(0, index));
+      parts.push(token[0]);
+      index = index + token[0].length;
+      _text = _text.slice(index);
+    }
+    parts.push(_text);
+
+    //highlight hashtags
+    parts = parts.map((text) => {
+      if (/^#/.test(text)) {
+        return <Text key={text} style={styles.hashtag}>{text}</Text>;
+      } else {
+        return text;
+      }
+    });
+
+    return (
+      <View>
+        <TextInput
+          multiline={true}
+          style={styles.multiline}
+          onChangeText={(text) => {
+            this.setState({text});
+          }}>
+          <Text>{parts}</Text>
+        </TextInput>
+      </View>
+    );
+  }
+}
+
+var BlurOnSubmitExample = React.createClass({
+  focusNextField(nextField) {
+    this.refs[nextField].focus();
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          ref="1"
+          style={styles.default}
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('2')}
+        />
+        <TextInput
+          ref="2"
+          style={styles.default}
+          keyboardType="email-address"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('3')}
+        />
+        <TextInput
+          ref="3"
+          style={styles.default}
+          keyboardType="url"
+          placeholder="blurOnSubmit = false"
+          returnKeyType="next"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('4')}
+        />
+        <TextInput
+          ref="4"
+          style={styles.default}
+          keyboardType="numeric"
+          placeholder="blurOnSubmit = false"
+          blurOnSubmit={false}
+          onSubmitEditing={() => this.focusNextField('5')}
+        />
+        <TextInput
+          ref="5"
+          style={styles.default}
+          keyboardType="numbers-and-punctuation"
+          placeholder="blurOnSubmit = true"
+          returnKeyType="done"
+        />
+      </View>
+    );
+  }
+});
+
 var styles = StyleSheet.create({
   page: {
     paddingBottom: 300,
@@ -172,6 +312,10 @@ var styles = StyleSheet.create({
     textAlign: 'right',
     width: 24,
   },
+  hashtag: {
+    color: 'blue',
+    fontWeight: 'bold',
+  },
 });
 
 exports.displayName = (undefined: ?string);
@@ -190,6 +334,12 @@ exports.examples = [
       return <RewriteExample />;
     }
   },
+  {
+    title: 'Live Re-Write (no spaces allowed)',
+    render: function() {
+      return <RewriteExampleInvalidCharacters />;
+    }
+  },
   {
     title: 'Auto-capitalize',
     render: function() {
@@ -268,6 +418,27 @@ exports.examples = [
       return <View>{examples}</View>;
     }
   },
+  {
+    title: 'Keyboard appearance',
+    render: function() {
+      var keyboardAppearance = [
+        'default',
+        'light',
+        'dark',
+      ];
+      var examples = keyboardAppearance.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              keyboardAppearance={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
   {
     title: 'Return key types',
     render: function() {
@@ -400,6 +571,27 @@ exports.examples = [
       );
     }
   },
+  {
+    title: 'Blur on submit',
+    render: function(): ReactElement { return <BlurOnSubmitExample />; },
+  },
+  {
+    title: 'Multiline blur on submit',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={styles.multiline}
+            placeholder="blurOnSubmit = true"
+            returnKeyType="next"
+            blurOnSubmit={true}
+            multiline={true}
+            onSubmitEditing={event => alert(event.nativeEvent.text)}
+          />
+        </View>
+      );
+    }
+  },
   {
     title: 'Multiline',
     render: function() {
@@ -437,5 +629,11 @@ exports.examples = [
         </View>
       );
     }
-  }
+  },
+  {
+    title: 'Attributed text',
+    render: function() {
+      return <TokenizedTextExample />;
+    }
+  },
 ];

Examples/UIExplorer/TimerExample.js

@@ -171,9 +171,20 @@ exports.examples = [
           }
           return (
             <View>
-              {timer}
+              {this.state.showTimer && this._renderTimer()}
               <UIExplorerButton onPress={this._toggleTimer}>
-                {toggleText}
+                {this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
+              </UIExplorerButton>
+            </View>
+          );
+        },
+
+        _renderTimer: function() {
+          return (
+            <View>
+              <TimerTester ref="interval" dt={25} type="setInterval" />
+              <UIExplorerButton onPress={() => this.refs.interval.clear() }>
+                Clear interval
               </UIExplorerButton>
             </View>
           );

Examples/UIExplorer/TouchableExample.js

@@ -229,7 +229,7 @@ var styles = StyleSheet.create({
   logBox: {
     padding: 20,
     margin: 10,
-    borderWidth: 1 / PixelRatio.get(),
+    borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#f0f0f0',
     backgroundColor: '#f9f9f9',
   },
@@ -237,7 +237,7 @@ var styles = StyleSheet.create({
     padding: 10,
     margin: 10,
     height: 120,
-    borderWidth: 1 / PixelRatio.get(),
+    borderWidth: StyleSheet.hairlineWidth,
     borderColor: '#f0f0f0',
     backgroundColor: '#f9f9f9',
   },

Examples/UIExplorer/TransformExample.js

@@ -10,6 +10,7 @@
  * 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';
 

Examples/UIExplorer/TransparentHitTestExample.js

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var React = require('react-native');
+var {
+  Text,
+  View,
+  TouchableOpacity,
+} = React;
+
+var TransparentHitTestExample = React.createClass({
+  render: function() {
+    return (
+      <View style={{flex: 1}}>
+        <TouchableOpacity onPress={() => alert('Hi!')}>
+          <Text>HELLO!</Text>
+        </TouchableOpacity>
+
+        <View style={{
+          position: 'absolute',
+          backgroundColor: 'green',
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          opacity: 0.0}} />
+      </View>
+    );
+  },
+});
+
+exports.title = '<TransparentHitTestExample>';
+exports.displayName = 'TransparentHitTestExample';
+exports.description = 'Transparent view receiving touch events';
+exports.examples = [
+  {
+    title: 'TransparentHitTestExample',
+    render(): ReactElement { return <TransparentHitTestExample />; }
+  }
+];

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -8,6 +8,11 @@
 
 /* Begin PBXBuildFile section */
 		1300627F1B59179B0043FE5A /* RCTGzipTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1300627E1B59179B0043FE5A /* RCTGzipTests.m */; };
+		1323F1891C04AB9F0091BED0 /* bunny.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1851C04AB9F0091BED0 /* bunny.png */; };
+		1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1861C04AB9F0091BED0 /* flux@3x.png */; };
+		1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1871C04AB9F0091BED0 /* hawk.png */; };
+		1323F18C1C04AB9F0091BED0 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */; };
+		1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */ = {isa = PBXBuildFile; fileRef = 1323F18E1C04ABEB0091BED0 /* Thumbnails */; };
 		13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FE81AA91428003F314A /* libRCTImage.a */; };
 		134180011AA9153C003F314A /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FEF1AA914B8003F314A /* libRCTText.a */; };
 		1341802C1AA9178B003F314A /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1341802B1AA91779003F314A /* libRCTNetwork.a */; };
@@ -21,6 +26,7 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */; };
 		13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
 		13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
 		143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
@@ -28,11 +34,10 @@
 		147CED4C1AB3532B00DA3E4C /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 147CED4B1AB34F8C00DA3E4C /* libRCTActionSheet.a */; };
 		1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */; };
 		1497CFAD1B21F5E400C1F8F2 /* RCTBridgeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */; };
-		1497CFAE1B21F5E400C1F8F2 /* RCTContextExecutorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */; settings = {COMPILER_FLAGS = "-fno-objc-arc"; }; };
+		1497CFAE1B21F5E400C1F8F2 /* RCTJSCExecutorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */; settings = {COMPILER_FLAGS = "-fno-objc-arc"; }; };
 		1497CFAF1B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */; };
 		1497CFB01B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */; };
 		1497CFB11B21F5E400C1F8F2 /* RCTEventDispatcherTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */; };
-		1497CFB21B21F5E400C1F8F2 /* RCTSparseArrayTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFAA1B21F5E400C1F8F2 /* RCTSparseArrayTests.m */; };
 		1497CFB31B21F5E400C1F8F2 /* RCTUIManagerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */; };
 		14AADF051AC3DBB1002390C9 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
 		14B6DA821B276C5900BF4DD1 /* libRCTTest.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58005BEE1ABA80530062E044 /* libRCTTest.a */; };
@@ -50,8 +55,10 @@
 		14D6D7281B2222EF001FB087 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDED91B0651EA00C62182 /* libRCTWebSocket.a */; };
 		14D6D7291B2222EF001FB087 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14AADF041AC3DB95002390C9 /* libReact.a */; };
 		14DC67F41AB71881001358AB /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 14DC67F11AB71876001358AB /* libRCTPushNotification.a */; };
+		272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */; };
+		27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */; };
+		27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
-		3D36915B1BDA8CBB007B22D8 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */; settings = {ASSET_TAGS = (); }; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
@@ -171,6 +178,11 @@
 /* Begin PBXFileReference section */
 		004D289E1AAF61C70097A701 /* UIExplorerUnitTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UIExplorerUnitTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		1300627E1B59179B0043FE5A /* RCTGzipTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTGzipTests.m; sourceTree = "<group>"; };
+		1323F1851C04AB9F0091BED0 /* bunny.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = bunny.png; sourceTree = "<group>"; };
+		1323F1861C04AB9F0091BED0 /* flux@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "flux@3x.png"; sourceTree = "<group>"; };
+		1323F1871C04AB9F0091BED0 /* hawk.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = hawk.png; sourceTree = "<group>"; };
+		1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = uie_thumb_big.png; sourceTree = "<group>"; };
+		1323F18E1C04ABEB0091BED0 /* Thumbnails */ = {isa = PBXFileReference; lastKnownFileType = folder; path = Thumbnails; sourceTree = "<group>"; };
 		13417FE31AA91428003F314A /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 		13417FEA1AA914B8003F314A /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		134180261AA91779003F314A /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
@@ -187,6 +199,7 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = UIExplorer/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = UIExplorer/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = UIExplorer/main.m; sourceTree = "<group>"; };
+		13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTURLUtilsTests.m; sourceTree = "<group>"; };
 		13CC9D481AEED2B90020D1C2 /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
 		13DB03471B5D2ED500C27245 /* RCTJSONTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSONTests.m; sourceTree = "<group>"; };
 		13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = "<group>"; };
@@ -203,11 +216,10 @@
 		144D21231B2204C5006DB32B /* RCTImageUtilTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageUtilTests.m; sourceTree = "<group>"; };
 		1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTAllocationTests.m; sourceTree = "<group>"; };
 		1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBridgeTests.m; sourceTree = "<group>"; };
-		1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTContextExecutorTests.m; sourceTree = "<group>"; };
+		1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTJSCExecutorTests.m; sourceTree = "<group>"; };
 		1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_NSURLTests.m; sourceTree = "<group>"; };
 		1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_UIFontTests.m; sourceTree = "<group>"; };
 		1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTEventDispatcherTests.m; sourceTree = "<group>"; };
-		1497CFAA1B21F5E400C1F8F2 /* RCTSparseArrayTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTSparseArrayTests.m; sourceTree = "<group>"; };
 		1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerTests.m; sourceTree = "<group>"; };
 		14AADEFF1AC3DB95002390C9 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		14D6D7021B220AE3001FB087 /* NSNotificationCenter+OCMAdditions.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "NSNotificationCenter+OCMAdditions.h"; sourceTree = "<group>"; };
@@ -222,8 +234,12 @@
 		14D6D7101B220EB3001FB087 /* libOCMock.a */ = {isa = PBXFileReference; lastKnownFileType = archive.ar; path = libOCMock.a; sourceTree = "<group>"; };
 		14DC67E71AB71876001358AB /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = ../../Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj; sourceTree = "<group>"; };
 		14E0EEC81AB118F7000DECC3 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
+		272E6B3B1BEA849E001FCF37 /* UpdatePropertiesExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = UpdatePropertiesExampleView.h; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.h; sourceTree = "<group>"; };
+		272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = UpdatePropertiesExampleView.m; path = UIExplorer/NativeExampleViews/UpdatePropertiesExampleView.m; sourceTree = "<group>"; };
+		27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTRootViewIntegrationTests.m; sourceTree = "<group>"; };
+		27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = FlexibleSizeExampleView.m; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m; sourceTree = "<group>"; };
+		27F441EA1BEBE5030039B79C /* FlexibleSizeExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = FlexibleSizeExampleView.h; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.h; sourceTree = "<group>"; };
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
-		3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = uie_thumb_big.png; path = UIExplorer/Images.xcassets/uie_thumb_big.imageset/uie_thumb_big.png; sourceTree = SOURCE_ROOT; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
 		58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
 		83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
@@ -306,6 +322,18 @@
 			name = Libraries;
 			sourceTree = "<group>";
 		};
+		1323F18D1C04ABAC0091BED0 /* Supporting Files */ = {
+			isa = PBXGroup;
+			children = (
+				13B07FB61A68108700A75B9A /* Info.plist */,
+				1323F1851C04AB9F0091BED0 /* bunny.png */,
+				1323F1861C04AB9F0091BED0 /* flux@3x.png */,
+				1323F1871C04AB9F0091BED0 /* hawk.png */,
+				1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */,
+			);
+			name = "Supporting Files";
+			sourceTree = "<group>";
+		};
 		13417FE41AA91428003F314A /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -365,12 +393,14 @@
 		13B07FAE1A68108700A75B9A /* UIExplorer */ = {
 			isa = PBXGroup;
 			children = (
+				272E6B3A1BEA846C001FCF37 /* NativeExampleViews */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
-				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
+				1323F18E1C04ABEB0091BED0 /* Thumbnails */,
+				1323F18D1C04ABAC0091BED0 /* Supporting Files */,
 			);
 			name = UIExplorer;
 			sourceTree = "<group>";
@@ -378,9 +408,10 @@
 		143BC57C1B21E18100462512 /* UIExplorerUnitTests */ = {
 			isa = PBXGroup;
 			children = (
+				13B6C1A21C34225900D3FAF5 /* RCTURLUtilsTests.m */,
 				1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */,
 				1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */,
-				1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */,
+				1497CFA61B21F5E400C1F8F2 /* RCTJSCExecutorTests.m */,
 				1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */,
 				1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */,
 				1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */,
@@ -393,7 +424,6 @@
 				13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */,
 				1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */,
 				138D6A161B53CD440074A87E /* RCTShadowViewTests.m */,
-				1497CFAA1B21F5E400C1F8F2 /* RCTSparseArrayTests.m */,
 				1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */,
 				143BC57E1B21E18100462512 /* Info.plist */,
 				14D6D7101B220EB3001FB087 /* libOCMock.a */,
@@ -427,6 +457,7 @@
 		143BC5961B21E3E100462512 /* UIExplorerIntegrationTests */ = {
 			isa = PBXGroup;
 			children = (
+				27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */,
 				3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */,
 				143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */,
 				83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */,
@@ -438,7 +469,6 @@
 		143BC5971B21E3E100462512 /* Supporting Files */ = {
 			isa = PBXGroup;
 			children = (
-				3D36915A1BDA8CBB007B22D8 /* uie_thumb_big.png */,
 				143BC5981B21E3E100462512 /* Info.plist */,
 			);
 			name = "Supporting Files";
@@ -491,6 +521,17 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		272E6B3A1BEA846C001FCF37 /* NativeExampleViews */ = {
+			isa = PBXGroup;
+			children = (
+				27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */,
+				27F441EA1BEBE5030039B79C /* FlexibleSizeExampleView.h */,
+				272E6B3B1BEA849E001FCF37 /* UpdatePropertiesExampleView.h */,
+				272E6B3C1BEA849E001FCF37 /* UpdatePropertiesExampleView.m */,
+			);
+			name = NativeExampleViews;
+			sourceTree = "<group>";
+		};
 		357858F91B28D2C400341EDB /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -811,8 +852,13 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */,
+				1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */,
+				1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				1323F1891C04AB9F0091BED0 /* bunny.png in Resources */,
+				1323F18C1C04AB9F0091BED0 /* uie_thumb_big.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -820,7 +866,6 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				3D36915B1BDA8CBB007B22D8 /* uie_thumb_big.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -834,10 +879,9 @@
 				1497CFB01B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m in Sources */,
 				144D21241B2204C5006DB32B /* RCTImageUtilTests.m in Sources */,
 				1393D0381B68CD1300E1B601 /* RCTModuleMethodTests.m in Sources */,
-				1497CFB21B21F5E400C1F8F2 /* RCTSparseArrayTests.m in Sources */,
 				1300627F1B59179B0043FE5A /* RCTGzipTests.m in Sources */,
 				1497CFAF1B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m in Sources */,
-				1497CFAE1B21F5E400C1F8F2 /* RCTContextExecutorTests.m in Sources */,
+				1497CFAE1B21F5E400C1F8F2 /* RCTJSCExecutorTests.m in Sources */,
 				1497CFAD1B21F5E400C1F8F2 /* RCTBridgeTests.m in Sources */,
 				1497CFB11B21F5E400C1F8F2 /* RCTEventDispatcherTests.m in Sources */,
 				1497CFB31B21F5E400C1F8F2 /* RCTUIManagerTests.m in Sources */,
@@ -845,6 +889,7 @@
 				1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */,
 				13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */,
 				138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */,
+				13B6C1A31C34225900D3FAF5 /* RCTURLUtilsTests.m in Sources */,
 				8385CF041B87479200C6273E /* RCTImageLoaderHelpers.m in Sources */,
 				8385CEF51B873B5C00C6273E /* RCTImageLoaderTests.m in Sources */,
 			);
@@ -854,7 +899,9 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				272E6B3F1BEA849E001FCF37 /* UpdatePropertiesExampleView.m in Sources */,
 				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */,
 				13B07FC11A68108700A75B9A /* main.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -866,6 +913,7 @@
 				3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */,
 				83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */,
 				143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */,
+				27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -971,6 +1019,12 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.internal.uiexplorer.local;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
+				WARNING_CFLAGS = (
+					"-Wextra",
+					"-Wall",
+					"-Wincompatible-pointer-types",
+					"-Wincompatible-pointer-types-discards-qualifiers",
+				);
 			};
 			name = Debug;
 		};
@@ -991,6 +1045,12 @@
 				PRODUCT_BUNDLE_IDENTIFIER = com.facebook.internal.uiexplorer.local;
 				PRODUCT_NAME = UIExplorer;
 				TARGETED_DEVICE_FAMILY = "1,2";
+				WARNING_CFLAGS = (
+					"-Wextra",
+					"-Wall",
+					"-Wincompatible-pointer-types",
+					"-Wincompatible-pointer-types-discards-qualifiers",
+				);
 			};
 			name = Release;
 		};
@@ -1082,6 +1142,7 @@
 					"$(inherited)",
 				);
 				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
+				GCC_TREAT_INCOMPATIBLE_POINTER_TYPE_WARNINGS_AS_ERRORS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_MISSING_NEWLINE = YES;
 				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
@@ -1109,6 +1170,7 @@
 				WARNING_CFLAGS = (
 					"-Wextra",
 					"-Wall",
+					"-Wincompatible-pointer-types",
 				);
 			};
 			name = Debug;
@@ -1139,6 +1201,7 @@
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_TREAT_INCOMPATIBLE_POINTER_TYPE_WARNINGS_AS_ERRORS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
 				GCC_WARN_ABOUT_MISSING_NEWLINE = YES;
 				GCC_WARN_ABOUT_MISSING_PROTOTYPES = YES;
@@ -1166,6 +1229,7 @@
 				WARNING_CFLAGS = (
 					"-Wextra",
 					"-Wall",
+					"-Wincompatible-pointer-types",
 				);
 			};
 			name = Release;

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

@@ -26,10 +26,10 @@
 
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
-                                            launchOptions:launchOptions];
+  _bridge = [[RCTBridge alloc] initWithDelegate:self
+                                  launchOptions:launchOptions];
 
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
                                                    moduleName:@"UIExplorerApp"
                                             initialProperties:nil];
 

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/Contents.json

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

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

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

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,118 @@
+/**
+ * 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];
+    _currentSizeTextView.editable = NO;
+    _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
+  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,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.
+ */
+
+#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
+  return @[];
+}
+
+@end

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -22,6 +22,9 @@ var {
   AppRegistry,
   NavigatorIOS,
   StyleSheet,
+  Text,
+  TouchableHighlight,
+  View
 } = React;
 
 var UIExplorerApp = React.createClass({
@@ -70,8 +73,76 @@ var styles = StyleSheet.create({
   itemWrapper: {
     backgroundColor: '#eaeaea',
   },
+  bigContainer: {
+    flex: 1,
+    height: 60,
+    backgroundColor: 'gray',
+  },
+  smallContainer: {
+    flex: 1,
+    height: 40,
+    backgroundColor: 'gray',
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  whiteText: {
+    color: 'white',
+  }
 });
 
+var SetPropertiesExampleApp = React.createClass({
+
+  render: function() {
+    var wrapperStyle = {
+      backgroundColor: this.props.color,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
+
+    return (
+      <View style={wrapperStyle}>
+        <Text>
+          Embedded React Native view
+        </Text>
+      </View>
+    );
+  },
+});
+
+var RootViewSizeFlexibilityExampleApp = React.createClass({
+
+  getInitialState: function () {
+    return { toggled: false };
+  },
+
+  _onPressButton: function() {
+    this.setState({ toggled: !this.state.toggled });
+  },
+
+  render: function() {
+    var viewStyle = this.state.toggled ? styles.bigContainer : styles.smallContainer;
+
+    return (
+      <TouchableHighlight onPress={this._onPressButton}>
+        <View style={viewStyle}>
+          <View style={styles.center}>
+            <Text style={styles.whiteText}>
+              React Native Button
+            </Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  },
+});
+
+AppRegistry.registerComponent('SetPropertiesExampleApp', () => SetPropertiesExampleApp);
+AppRegistry.registerComponent('RootViewSizeFlexibilityExampleApp', () => RootViewSizeFlexibilityExampleApp);
 AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
+UIExplorerList.registerComponents();
 
 module.exports = UIExplorerApp;

Examples/UIExplorer/UIExplorerIntegrationTests/RCTLoggingTests.m

@@ -0,0 +1,109 @@
+/**
+ * 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 <XCTest/XCTest.h>
+
+#import "RCTAssert.h"
+#import "RCTLog.h"
+#import "RCTBridge.h"
+
+@interface RCTLoggingTests : XCTestCase
+
+@end
+
+@implementation RCTLoggingTests
+{
+  RCTBridge *_bridge;
+
+  dispatch_semaphore_t _logSem;
+  RCTLogLevel _lastLogLevel;
+  RCTLogSource _lastLogSource;
+  NSString *_lastLogMessage;
+}
+
+- (void)setUp
+{
+#if RUNNING_ON_CI
+  NSURL *scriptURL = [[NSBundle bundleForClass:[RCTBridge class]] URLForResource:@"main" withExtension:@"jsbundle"];
+  RCTAssert(scriptURL != nil, @"Could not locate main.jsBundle");
+#else
+  NSString *app = @"Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp";
+  NSURL *scriptURL = [NSURL URLWithString:[NSString stringWithFormat:@"http://localhost:8081/%@.bundle?platform=ios&dev=true", app]];
+#endif
+
+  _bridge = [[RCTBridge alloc] initWithBundleURL:scriptURL moduleProvider:NULL launchOptions:nil];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:5];
+  while (date.timeIntervalSinceNow > 0 && _bridge.loading) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+  }
+  XCTAssertFalse(_bridge.loading);
+
+  _logSem = dispatch_semaphore_create(0);
+  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+    if (source == RCTLogSourceJavaScript) {
+      _lastLogLevel = level;
+      _lastLogSource = source;
+      _lastLogMessage = message;
+      dispatch_semaphore_signal(_logSem);
+    }
+  });
+}
+
+- (void)tearDown
+{
+  [_bridge invalidate];
+  _bridge = nil;
+
+  RCTSetLogFunction(RCTDefaultLogFunction);
+}
+
+- (void)testLogging
+{
+  [_bridge enqueueJSCall:@"LoggingTestModule.logToConsole" args:@[@"Invoking console.log"]];
+  dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+
+  XCTAssertEqual(_lastLogLevel, RCTLogLevelInfo);
+  XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
+  XCTAssertEqualObjects(_lastLogMessage, @"Invoking console.log");
+
+  [_bridge enqueueJSCall:@"LoggingTestModule.warning" args:@[@"Generating warning"]];
+  dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+
+  XCTAssertEqual(_lastLogLevel, RCTLogLevelWarning);
+  XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
+  XCTAssertEqualObjects(_lastLogMessage, @"Warning: Generating warning");
+
+  [_bridge enqueueJSCall:@"LoggingTestModule.invariant" args:@[@"Invariant failed"]];
+  dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+
+  XCTAssertEqual(_lastLogLevel, RCTLogLevelError);
+  XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
+  XCTAssertEqualObjects(_lastLogMessage, @"Invariant failed");
+
+  [_bridge enqueueJSCall:@"LoggingTestModule.logErrorToConsole" args:@[@"Invoking console.error"]];
+  dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+
+  XCTAssertEqual(_lastLogLevel, RCTLogLevelError);
+  XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
+  XCTAssertEqualObjects(_lastLogMessage, @"Invoking console.error");
+
+  [_bridge enqueueJSCall:@"LoggingTestModule.throwError" args:@[@"Throwing an error"]];
+  dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+
+  XCTAssertEqual(_lastLogLevel, RCTLogLevelError);
+  XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
+  XCTAssertEqualObjects(_lastLogMessage, @"Throwing an error");
+}
+
+@end

Examples/UIExplorer/UIExplorerIntegrationTests/RCTRootViewIntegrationTests.m

@@ -0,0 +1,172 @@
+/**
+ * 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.
+ */
+
+//vs
+
+/**
+ * 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 <XCTest/XCTest.h>
+
+#import "RCTAssert.h"
+
+#import "RCTEventDispatcher.h"
+#import "RCTRootView.h"
+#import "RCTRootViewDelegate.h"
+
+#import <RCTTest/RCTTestRunner.h>
+
+#define RCT_TEST_DATA_CONFIGURATION_BLOCK(appName, testType, input, block) \
+- (void)test##appName##_##testType##_##input                               \
+{                                                                          \
+  [_runner runTest:_cmd                                                    \
+            module:@#appName                                               \
+      initialProps:@{@#input:@YES}                                         \
+configurationBlock:block];                                                 \
+}
+
+#define RCT_TEST_CONFIGURATION_BLOCK(appName, block)  \
+- (void)test##appName                                 \
+{                                                     \
+  [_runner runTest:_cmd                               \
+            module:@#appName                          \
+      initialProps:nil                                \
+configurationBlock:block];                            \
+}
+
+#define RCTNone   RCTRootViewSizeFlexibilityNone
+#define RCTHeight RCTRootViewSizeFlexibilityHeight
+#define RCTWidth  RCTRootViewSizeFlexibilityWidth
+#define RCTBoth   RCTRootViewSizeFlexibilityWidthAndHeight
+
+typedef void (^ControlBlock)(RCTRootView*);
+
+@interface SizeFlexibilityTestDelegate : NSObject<RCTRootViewDelegate>
+@end
+
+@implementation SizeFlexibilityTestDelegate
+
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView
+{
+  [rootView.bridge.eventDispatcher sendAppEventWithName:@"rootViewDidChangeIntrinsicSize"
+                                                   body:@{@"width": @(rootView.intrinsicSize.width),
+                                                          @"height": @(rootView.intrinsicSize.height)}];
+}
+
+@end
+
+static SizeFlexibilityTestDelegate *sizeFlexibilityDelegate()
+{
+  static SizeFlexibilityTestDelegate *delegate;
+  if (delegate == nil) {
+    delegate = [SizeFlexibilityTestDelegate new];
+  }
+
+  return delegate;
+}
+
+static ControlBlock simpleSizeFlexibilityBlock(RCTRootViewSizeFlexibility sizeFlexibility)
+{
+  return ^(RCTRootView *rootView){
+    rootView.delegate = sizeFlexibilityDelegate();
+    rootView.sizeFlexibility = sizeFlexibility;
+  };
+}
+
+static ControlBlock multipleSizeFlexibilityUpdatesBlock(RCTRootViewSizeFlexibility finalSizeFlexibility)
+{
+  return ^(RCTRootView *rootView){
+
+    NSInteger arr[4] = {RCTNone,
+                        RCTHeight,
+                        RCTWidth,
+                        RCTBoth};
+
+    rootView.delegate = sizeFlexibilityDelegate();
+
+    for (int i = 0; i < 4; ++i) {
+      if (arr[i] != finalSizeFlexibility) {
+        rootView.sizeFlexibility = arr[i];
+      }
+    }
+
+    rootView.sizeFlexibility = finalSizeFlexibility;
+  };
+}
+
+static ControlBlock reactContentSizeUpdateBlock(RCTRootViewSizeFlexibility sizeFlexibility)
+{
+  return ^(RCTRootView *rootView){
+    rootView.delegate = sizeFlexibilityDelegate();
+    rootView.sizeFlexibility = sizeFlexibility;
+  };
+}
+
+static ControlBlock propertiesUpdateBlock()
+{
+  return ^(RCTRootView *rootView){
+    rootView.appProperties = @{@"markTestPassed":@YES};
+  };
+}
+
+@interface RCTRootViewIntegrationTests : XCTestCase
+
+@end
+
+@implementation RCTRootViewIntegrationTests
+{
+  RCTTestRunner *_runner;
+}
+
+- (void)setUp
+{
+#if __LP64__
+  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
+#endif
+
+  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
+  RCTAssert((version.majorVersion == 8 && version.minorVersion >= 3) || version.majorVersion >= 9, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
+  _runner = RCTInitRunnerForApp(@"IntegrationTests/RCTRootViewIntegrationTestApp", nil);
+}
+
+#pragma mark Logic Tests
+
+// This list should be kept in sync with RCTRootViewIntegrationTestApp.js
+
+// Simple size flexibility tests - test if the content is measured properly
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, SingleUpdate, none, simpleSizeFlexibilityBlock(RCTNone));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, SingleUpdate, height, simpleSizeFlexibilityBlock(RCTHeight));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, SingleUpdate, width, simpleSizeFlexibilityBlock(RCTWidth));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, SingleUpdate, both, simpleSizeFlexibilityBlock(RCTBoth));
+
+// Consider multiple size flexibility updates in a row. Test if the view's flexibility mode eventually is set to the expected value
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, MultipleUpdates, none, multipleSizeFlexibilityUpdatesBlock(RCTNone));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, MultipleUpdates, height, multipleSizeFlexibilityUpdatesBlock(RCTHeight));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, MultipleUpdates, width, multipleSizeFlexibilityUpdatesBlock(RCTWidth));
+RCT_TEST_DATA_CONFIGURATION_BLOCK(SizeFlexibilityUpdateTest, MultipleUpdates, both, multipleSizeFlexibilityUpdatesBlock(RCTBoth));
+
+// Test if the 'rootViewDidChangeIntrinsicSize' delegate method is called after the RN app decides internally to resize
+RCT_TEST_CONFIGURATION_BLOCK(ReactContentSizeUpdateTest, reactContentSizeUpdateBlock(RCTBoth))
+
+// Test if setting 'appProperties' property updates the RN app
+RCT_TEST_CONFIGURATION_BLOCK(PropertiesUpdateTest, propertiesUpdateBlock())
+
+@end

Examples/UIExplorer/UIExplorerIntegrationTests/RCTUIManagerScenarioTests.m

@@ -12,10 +12,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-
 #import <UIKit/UIKit.h>
 #import <XCTest/XCTest.h>
-#import "RCTSparseArray.h"
 #import "RCTUIManager.h"
 #import "UIView+React.h"
 
@@ -27,9 +25,9 @@
       addChildReactTags:(NSArray *)addChildReactTags
            addAtIndices:(NSArray *)addAtIndices
         removeAtIndices:(NSArray *)removeAtIndices
-               registry:(RCTSparseArray *)registry;
+               registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)registry;
 
-@property (nonatomic, readonly) RCTSparseArray *viewRegistry;
+@property (nonatomic, readonly) NSMutableDictionary<NSNumber *, UIView *> *viewRegistry;
 
 @end
 
@@ -51,13 +49,13 @@
   for (NSInteger i = 1; i <= 20; i++) {
     UIView *registeredView = [UIView new];
     registeredView.reactTag = @(i);
-    _uiManager.viewRegistry[i] = registeredView;
+    _uiManager.viewRegistry[@(i)] = registeredView;
   }
 }
 
 - (void)testManagingChildrenToAddViews
 {
-  UIView *containerView = _uiManager.viewRegistry[20];
+  UIView *containerView = _uiManager.viewRegistry[@20];
   NSMutableArray *addedViews = [NSMutableArray array];
 
   NSArray *tagsToAdd = @[@1, @2, @3, @4, @5];
@@ -73,7 +71,7 @@
             addChildReactTags:tagsToAdd
                  addAtIndices:addAtIndices
               removeAtIndices:nil
-                     registry:_uiManager.viewRegistry];
+                     registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)_uiManager.viewRegistry];
 
   XCTAssertTrue([[containerView reactSubviews] count] == 5,
                @"Expect to have 5 react subviews after calling manage children \
@@ -87,7 +85,7 @@
 
 - (void)testManagingChildrenToRemoveViews
 {
-  UIView *containerView = _uiManager.viewRegistry[20];
+  UIView *containerView = _uiManager.viewRegistry[@20];
   NSMutableArray *removedViews = [NSMutableArray array];
 
   NSArray *removeAtIndices = @[@0, @4, @8, @12, @16];
@@ -96,7 +94,7 @@
     [removedViews addObject:_uiManager.viewRegistry[reactTag]];
   }
   for (NSInteger i = 2; i < 20; i++) {
-    UIView *view = _uiManager.viewRegistry[i];
+    UIView *view = _uiManager.viewRegistry[@(i)];
     [containerView addSubview:view];
   }
 
@@ -107,7 +105,7 @@
             addChildReactTags:nil
                  addAtIndices:nil
               removeAtIndices:removeAtIndices
-                     registry:_uiManager.viewRegistry];
+                     registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)_uiManager.viewRegistry];
 
   XCTAssertEqual(containerView.reactSubviews.count, (NSUInteger)13,
                @"Expect to have 13 react subviews after calling manage children\
@@ -120,7 +118,7 @@
     _uiManager.viewRegistry[view.reactTag] = view;
   }
   for (NSInteger i = 2; i < 20; i++) {
-    UIView *view = _uiManager.viewRegistry[i];
+    UIView *view = _uiManager.viewRegistry[@(i)];
     if (![removedViews containsObject:view]) {
       XCTAssertTrue([view superview] == containerView,
                    @"Should not have removed view with react tag %ld during delete but did", (long)i);
@@ -139,7 +137,7 @@
 // [11,5,1,2,7,8,12,10]
 - (void)testManagingChildrenToAddRemoveAndMove
 {
-  UIView *containerView = _uiManager.viewRegistry[20];
+  UIView *containerView = _uiManager.viewRegistry[@20];
 
   NSArray *removeAtIndices = @[@2, @3, @5, @8];
   NSArray *addAtIndices = @[@0, @6];
@@ -156,7 +154,7 @@
   }
 
   for (NSInteger i = 1; i < 11; i++) {
-    UIView *view = _uiManager.viewRegistry[i];
+    UIView *view = _uiManager.viewRegistry[@(i)];
     [containerView addSubview:view];
   }
 
@@ -166,7 +164,7 @@
             addChildReactTags:tagsToAdd
                  addAtIndices:addAtIndices
               removeAtIndices:removeAtIndices
-                     registry:_uiManager.viewRegistry];
+                     registry:(NSMutableDictionary<NSNumber *, id<RCTComponent>> *)_uiManager.viewRegistry];
 
   XCTAssertTrue([[containerView reactSubviews] count] == 8,
                @"Expect to have 8 react subviews after calling manage children,\
@@ -181,7 +179,7 @@
 
   // Clean up after ourselves
   for (NSInteger i = 1; i < 13; i++) {
-    UIView *view = _uiManager.viewRegistry[i];
+    UIView *view = _uiManager.viewRegistry[@(i)];
     [view removeFromSuperview];
   }
   for (UIView *view in viewsToRemove) {