[0.11.4] Add iOS stubs for Android modules

Cherry-picked https://github.com/facebook/react-native/commit/42eb5464fd8a65ed84b799de5d4dc225349449be

.flowconfig

@@ -10,11 +10,8 @@
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
 .*/node_modules/react-tools/src/React.js
-.*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
 .*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
 .*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
 .*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
 
 # Ignore commoner tests
@@ -38,13 +35,15 @@ Examples/UIExplorer/ImageMocks.js
 [options]
 module.system=haste
 
+munge_underscores=true
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.13.1
+0.14.0

.gitignore

@@ -25,6 +25,12 @@ project.xcworkspace
 # OS X
 .DS_Store
 
+# Android/IJ
+.idea
+.gradle
+local.properties
+*.iml
+
 # Node
 node_modules
 *.log

.travis.yml

@@ -11,19 +11,18 @@ before_install:
   - brew update
 install:
   - brew reinstall xctool nvm
+  - rm -Rf `node -p "require('os').tmpDir()"`/jest_preprocess_cache
   - npm install -g flow-bin@`node -p "require('fs').readFileSync('.flowconfig', 'utf8').split('[version]')[1].trim()"`
   - mkdir -p .nvm
-  - cp $(brew --prefix nvm)/nvm-exec .nvm/
-  - export NVM_DIR=.nvm
+  - export NVM_DIR="$PWD/.nvm"
   - source $(brew --prefix nvm)/nvm.sh
   - nvm install iojs-v2
+  - nvm use iojs-v2
   - npm config set spin=false
   - npm install
 
 script:
 - |
-  nvm use iojs-v2
-
   if [ "$TEST_TYPE" = objc ]
   then
 
@@ -38,7 +37,7 @@ script:
   then
 
     cd website
-    npm install
+    $(which npm) install
     ./setup.sh
     if [ "$TRAVIS_PULL_REQUEST" = false ] && [ "$TRAVIS_BRANCH" = master ]; then
       # Automatically publish the website

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -12,7 +12,7 @@
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1461632C1AC3E22900C2F5AD /* libReact.a */; };
-		58C1E40E1ACF54E9006D1A47 /* libRCTAnimationExperimental.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.a */; };
+		5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F82F1771B85784500FAE87E /* libRCTWebSocket.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 /* End PBXBuildFile section */
 
@@ -24,12 +24,12 @@
 			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
 			remoteInfo = React;
 		};
-		58C1E40A1ACF54B4006D1A47 /* PBXContainerItemProxy */ = {
+		5F82F1761B85784500FAE87E /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
-			containerPortal = 13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */;
+			containerPortal = 5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */;
 			proxyType = 2;
-			remoteGlobalIDString = 134814201AA4EA6300B7C361;
-			remoteInfo = RCTAnimationExperimental;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
 		};
 		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
@@ -41,7 +41,6 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimationExperimental.xcodeproj; path = ../../Libraries/Animation/RCTAnimationExperimental.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* 2048.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = 2048.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = 2048/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = 2048/AppDelegate.m; sourceTree = "<group>"; };
@@ -50,6 +49,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = 2048/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = 2048/main.m; sourceTree = "<group>"; };
 		146163271AC3E22900C2F5AD /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
+		5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -58,8 +58,8 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */,
 				1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */,
-				58C1E40E1ACF54E9006D1A47 /* libRCTAnimationExperimental.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -88,10 +88,10 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		58C1E4071ACF54B4006D1A47 /* Products */ = {
+		5F82F1731B85784500FAE87E /* Products */ = {
 			isa = PBXGroup;
 			children = (
-				58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.a */,
+				5F82F1771B85784500FAE87E /* libRCTWebSocket.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -99,9 +99,9 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
-				13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -174,14 +174,14 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
-				{
-					ProductGroup = 58C1E4071ACF54B4006D1A47 /* Products */;
-					ProjectRef = 13ACB66C1AC2113500FF4204 /* RCTAnimationExperimental.xcodeproj */;
-				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
 				},
+				{
+					ProductGroup = 5F82F1731B85784500FAE87E /* Products */;
+					ProjectRef = 5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */;
+				},
 				{
 					ProductGroup = 146163281AC3E22900C2F5AD /* Products */;
 					ProjectRef = 146163271AC3E22900C2F5AD /* React.xcodeproj */;
@@ -202,11 +202,11 @@
 			remoteRef = 1461632B1AC3E22900C2F5AD /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
-		58C1E40B1ACF54B4006D1A47 /* libRCTAnimationExperimental.a */ = {
+		5F82F1771B85784500FAE87E /* libRCTWebSocket.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
-			path = libRCTAnimationExperimental.a;
-			remoteRef = 58C1E40A1ACF54B4006D1A47 /* PBXContainerItemProxy */;
+			path = libRCTWebSocket.a;
+			remoteRef = 5F82F1761B85784500FAE87E /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
 		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
@@ -266,10 +266,7 @@
 				);
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"/Users/sahrens/src/fbobjc-hg/Libraries/FBReactKit/js/react-native-github/Libraries/Animation/build/Debug-iphoneos",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;
@@ -287,10 +284,7 @@
 				);
 				INFOPLIST_FILE = "$(SRCROOT)/2048/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = (
-					"$(inherited)",
-					"/Users/sahrens/src/fbobjc-hg/Libraries/FBReactKit/js/react-native-github/Libraries/Animation/build/Debug-iphoneos",
-				);
+				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.$(PRODUCT_NAME:rfc1034identifier)";
 				PRODUCT_NAME = 2048;

Examples/2048/2048/AppDelegate.m

@@ -52,6 +52,7 @@
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"Game2048"
+                                               initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

Examples/Movies/Movies/AppDelegate.m

@@ -37,14 +37,14 @@
    * on the same Wi-Fi network.
    */
 
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle"];
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.ios.includeRequire.runModule.bundle"];
 
   /**
    * OPTION 2
    * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
    * to your Xcode project folder in the terminal, and run
    *
-   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle' -o main.jsbundle
+   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
    *
    * then add the `main.jsbundle` file to your project and uncomment this line:
    */
@@ -53,6 +53,7 @@
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"MoviesApp"
+                                               initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

Examples/Movies/MoviesApp.android.js

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

Examples/Movies/SearchBar.android.js

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

Examples/Movies/android/app/build.gradle

@@ -0,0 +1,35 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 22
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.facebook.react.movies"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:22.2.0'
+
+    // Depend on pre-built React Native
+    compile 'com.facebook.react:react-native:0.11.+'
+    
+    // Depend on React Native source.
+    // This is useful for testing your changes when working on React Native.
+    // compile project(':ReactAndroid')
+}

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

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

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

@@ -0,0 +1,21 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.facebook.react.movies">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@drawable/rotten_tomatoes_icon"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MoviesActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>

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

@@ -0,0 +1,89 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+package com.facebook.react.movies;
+
+import android.app.Activity;
+import android.os.Bundle;
+import android.view.KeyEvent;
+
+import com.facebook.react.LifecycleState;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactRootView;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.shell.MainReactPackage;
+
+public class MoviesActivity extends Activity implements DefaultHardwareBackBtnHandler {
+
+  private ReactInstanceManager mReactInstanceManager;
+
+  @Override
+  protected void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+    setContentView(R.layout.activity_main);
+
+    mReactInstanceManager = ReactInstanceManager.builder()
+        .setApplication(getApplication())
+        .setBundleAssetName("MoviesApp.android.bundle")
+        .setJSMainModuleName("Examples/Movies/MoviesApp.android")
+        .addPackage(new MainReactPackage())
+        .setUseDeveloperSupport(true)
+        .setInitialLifecycleState(LifecycleState.RESUMED)
+        .build();
+
+    ((ReactRootView) findViewById(R.id.react_root_view))
+        .startReactApplication(mReactInstanceManager, "MoviesApp", null);
+  }
+
+  @Override
+  public boolean onKeyUp(int keyCode, KeyEvent event) {
+    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+      mReactInstanceManager.showDevOptionsDialog();
+      return true;
+    }
+    return super.onKeyUp(keyCode, event);
+  }
+
+  @Override
+  protected void onPause() {
+    super.onPause();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onPause();
+    }
+  }
+
+  @Override
+  protected void onResume() {
+    super.onResume();
+
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onResume(this);
+    }
+  }
+
+  @Override
+  public void onBackPressed() {
+    if (mReactInstanceManager != null) {
+      mReactInstanceManager.onBackPressed();
+    } else {
+      super.onBackPressed();
+    }
+  }
+
+  @Override
+  public void invokeDefaultOnBackPressed() {
+    super.onBackPressed();
+  }
+}

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

@@ -0,0 +1,12 @@
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MoviesApp">
+
+    <com.facebook.react.ReactRootView
+      android:layout_width="match_parent"
+      android:layout_height="match_parent"
+      android:id="@+id/react_root_view"/>
+
+</RelativeLayout>

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

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

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

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

Examples/SampleApp/_flowconfig

@@ -10,11 +10,8 @@
 # Ignore react-tools where there are overlaps, but don't ignore anything that
 # react-native relies on
 .*/node_modules/react-tools/src/React.js
-.*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
 .*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
 .*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
-.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
 .*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
 
 
@@ -35,13 +32,15 @@ node_modules/react-native/Libraries/react-native/react-native-interface.js
 [options]
 module.system=haste
 
+munge_underscores=true
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-3]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-0.13.1
+0.14.0

Examples/SampleApp/_watchmanconfig

@@ -0,0 +1 @@
+{}

Examples/SampleApp/android/app/build.gradle

@@ -0,0 +1,35 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.facebook.react.sample"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.0'
+
+    // Depend on pre-built React Native
+    compile 'com.facebook.react:react-native:0.11.+'
+    
+    // Depend on React Native source.
+    // This is useful for testing your changes when working on React Native.
+    // compile project(':ReactAndroid')
+}

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

@@ -0,0 +1,17 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}

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

@@ -0,0 +1,21 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.facebook.react.sample">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>

Examples/SampleApp/android/app/src/main/java/com/facebook/react/sample/MainActivity.java

@@ -0,0 +1,88 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+package com.facebook.react.sample;
+
+import android.app.Activity;
+import android.os.Bundle;
+import android.view.KeyEvent;
+
+import com.facebook.react.LifecycleState;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactRootView;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.facebook.react.shell.MainReactPackage;
+import com.facebook.soloader.SoLoader;
+
+public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
+
+    private ReactInstanceManager mReactInstanceManager;
+    private ReactRootView mReactRootView;
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        SoLoader.init(this, false);
+        mReactRootView = new ReactRootView(this);
+
+        mReactInstanceManager = ReactInstanceManager.builder()
+                .setApplication(getApplication())
+                .setBundleAssetName("index.android.bundle")
+                .setJSMainModuleName("Examples/SampleApp/index.android")
+                .addPackage(new MainReactPackage())
+                .setUseDeveloperSupport(BuildConfig.DEBUG)
+                .setInitialLifecycleState(LifecycleState.RESUMED)
+                .build();
+
+        mReactRootView.startReactApplication(
+                mReactInstanceManager,
+                "SampleApp",
+                null);
+
+        setContentView(mReactRootView);
+    }
+
+    @Override
+    public boolean onKeyUp(int keyCode, KeyEvent event) {
+        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
+            mReactInstanceManager.showDevOptionsDialog();
+            return true;
+        }
+        return super.onKeyUp(keyCode, event);
+
+    }
+
+    @Override
+    public void invokeDefaultOnBackPressed() {
+        super.onBackPressed();
+    }
+
+    @Override
+    protected void onPause() {
+        super.onPause();
+
+        if (mReactInstanceManager != null) {
+            mReactInstanceManager.onPause();
+        }
+    }
+
+    @Override
+    protected void onResume() {
+        super.onResume();
+
+        if (mReactInstanceManager != null) {
+            mReactInstanceManager.onResume(this);
+        }
+    }
+}

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

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

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

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

Examples/SampleApp/iOS/SampleApp.xcodeproj/project.pbxproj

@@ -106,27 +106,27 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = iOS/main.jsbundle; sourceTree = "<group>"; };
-		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
-		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
-		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
-		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
-		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
+		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
+		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
+		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
+		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
+		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
 		00E356EE1AD99517003FC87E /* SampleAppTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = SampleAppTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* SampleAppTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = SampleAppTests.m; sourceTree = "<group>"; };
-		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
-		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
+		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
+		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* SampleApp.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = SampleApp.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = iOS/AppDelegate.h; sourceTree = "<group>"; };
-		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = iOS/AppDelegate.m; sourceTree = "<group>"; };
+		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
+		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
 		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
-		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = iOS/Images.xcassets; sourceTree = "<group>"; };
-		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = iOS/Info.plist; sourceTree = "<group>"; };
-		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = iOS/main.m; sourceTree = "<group>"; };
-		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
-		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
-		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
+		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../../React/React.xcodeproj; sourceTree = "<group>"; };
+		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
+		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -233,15 +233,15 @@
 		13B07FAE1A68108700A75B9A /* SampleApp */ = {
 			isa = PBXGroup;
 			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
+				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FB71A68108700A75B9A /* main.m */,
 			);
-			name = SampleApp;
+			path = SampleApp;
 			sourceTree = "<group>";
 		};
 		146834001AC3E56700842450 /* Products */ = {
@@ -289,8 +289,8 @@
 			isa = PBXGroup;
 			children = (
 				13B07FAE1A68108700A75B9A /* SampleApp */,
-				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* SampleAppTests */,
+				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 			);
 			indentWidth = 2;
@@ -548,7 +548,6 @@
 				13B07FB21A68108700A75B9A /* Base */,
 			);
 			name = LaunchScreen.xib;
-			path = iOS;
 			sourceTree = "<group>";
 		};
 /* End PBXVariantGroup section */
@@ -566,6 +565,11 @@
 					"DEBUG=1",
 					"$(inherited)",
 				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../../../React/**",
+				);
 				INFOPLIST_FILE = SampleAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -583,6 +587,11 @@
 					"$(SDKROOT)/Developer/Library/Frameworks",
 					"$(inherited)",
 				);
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../../../React/**",
+				);
 				INFOPLIST_FILE = SampleAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -598,9 +607,9 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../../React/**",
+					"$(SRCROOT)/../../../React/**",
 				);
-				INFOPLIST_FILE = "iOS/Info.plist";
+				INFOPLIST_FILE = "$(SRCROOT)/SampleApp/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = SampleApp;
@@ -614,9 +623,9 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
-					"$(SRCROOT)/../../React/**",
+					"$(SRCROOT)/../../../React/**",
 				);
-				INFOPLIST_FILE = "iOS/Info.plist";
+				INFOPLIST_FILE = "$(SRCROOT)/SampleApp/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = "-ObjC";
 				PRODUCT_NAME = SampleApp;

Examples/SampleApp/iOS/SampleApp.xcodeproj/xcshareddata/xcschemes/SampleApp.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0620"
+   LastUpgradeVersion = "0630"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

Examples/SampleApp/iOS/SampleApp/AppDelegate.m

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "AppDelegate.h"
+
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/SampleApp/index.ios.bundle"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle
+   * from the root of your project directory, run
+   *
+   * $ react-native bundle --minify
+   *
+   * see http://facebook.github.io/react-native/docs/runningondevice.html
+   */
+
+//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      moduleName:@"SampleApp"
+                                               initialProperties:nil
+                                                   launchOptions:launchOptions];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+@end

Examples/SampleApp/iOS/SampleApp/Base.lproj/LaunchScreen.xib

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6751" systemVersion="14C1510" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6736"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>

Examples/SampleApp/iOS/SampleAppTests/SampleAppTests.m

@@ -10,8 +10,7 @@
 #import <UIKit/UIKit.h>
 #import <XCTest/XCTest.h>
 
-#import "RCTAssert.h"
-#import "RCTRedBox.h"
+#import "RCTLog.h"
 #import "RCTRootView.h"
 
 #define TIMEOUT_SECONDS 240
@@ -23,7 +22,6 @@
 
 @implementation SampleAppTests
 
-
 - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
 {
   if (test(view)) {
@@ -37,18 +35,23 @@
   return NO;
 }
 
-- (void)testRendersWelcomeScreen {
+- (void)testRendersWelcomeScreen
+{
   UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
   NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
   BOOL foundElement = NO;
-  NSString *redboxError = nil;
+
+  __block NSString *redboxError = nil;
+  RCTSetLogFunction(^(RCTLogLevel level, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+    if (level >= RCTLogLevelError) {
+      redboxError = message;
+    }
+  });
 
   while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
     [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
     [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
 
-    redboxError = [[RCTRedBox sharedInstance] currentErrorMessage];
-
     foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
       if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
         return YES;
@@ -57,6 +60,8 @@
     }];
   }
 
+  RCTSetLogFunction(RCTDefaultLogFunction);
+
   XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
   XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
 }

Examples/SampleApp/index.android.js

@@ -0,0 +1,52 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+} = React;
+
+var SampleApp = React.createClass({
+  render: function() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          Welcome to React Native!
+        </Text>
+        <Text style={styles.instructions}>
+          To get started, edit index.android.js
+        </Text>
+        <Text style={styles.instructions}>
+          Shake or press menu button for dev menu
+        </Text>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});
+
+AppRegistry.registerComponent('SampleApp', () => SampleApp);

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 144C5F681AC3E5D800B004E7 /* libReact.a */; };
 		58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C5724D1AA6224400CDF9C8 /* libRCTText.a */; };
+		5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */; };
 		832044981B492C2500E297FC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832044951B492C1E00E297FC /* libRCTSettings.a */; };
 /* End PBXBuildFile section */
 
@@ -39,6 +40,13 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		5FF8942C1B8556F8007731BE /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
+		};
 		832044941B492C1E00E297FC /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -59,6 +67,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = TicTacToe/main.m; sourceTree = "<group>"; };
 		144C5F631AC3E5D800B004E7 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
+		5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -67,6 +76,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */,
 				144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */,
 				1341803E1AA91802003F314A /* libRCTImage.a in Frameworks */,
 				58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */,
@@ -109,6 +119,7 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
 				8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */,
@@ -125,6 +136,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		5FF894291B8556F8007731BE /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		832044901B492C1E00E297FC /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -205,6 +224,10 @@
 					ProductGroup = 58C572481AA6224300CDF9C8 /* Products */;
 					ProjectRef = 587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */;
 				},
+				{
+					ProductGroup = 5FF894291B8556F8007731BE /* Products */;
+					ProjectRef = 5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */;
+				},
 				{
 					ProductGroup = 144C5F641AC3E5D800B004E7 /* Products */;
 					ProjectRef = 144C5F631AC3E5D800B004E7 /* React.xcodeproj */;
@@ -239,6 +262,13 @@
 			remoteRef = 58C5724C1AA6224400CDF9C8 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTWebSocket.a;
+			remoteRef = 5FF8942C1B8556F8007731BE /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		832044951B492C1E00E297FC /* libRCTSettings.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

Examples/TicTacToe/TicTacToe/AppDelegate.m

@@ -52,6 +52,7 @@
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"TicTacToeApp"
+                                                initialProperties:nil
                                                    launchOptions:launchOptions];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

Examples/UIExplorer/AccessibilityAndroidExample.android.js

@@ -0,0 +1,213 @@
+/**
+ * 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 {
+  StyleSheet,
+  Text,
+  View,
+  ToastAndroid,
+  TouchableWithoutFeedback,
+} = React;
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
+
+var AccessibilityAndroidExample = React.createClass({
+
+  statics: {
+    title: 'Accessibility',
+    description: 'Examples of using Accessibility API.',
+  },
+
+  getInitialState: function() {
+    return {
+      count: 0,
+      backgroundImportantForAcc: 0,
+      forgroundImportantForAcc: 0,
+    };
+  },
+
+  _addOne: function() {
+    this.setState({
+      count: ++this.state.count,
+    });
+  },
+
+  _changeBackgroundImportantForAcc: function() {
+    this.setState({
+      backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  _changeForgroundImportantForAcc: function() {
+    this.setState({
+      forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title={'Accessibility'}>
+
+        <UIExplorerBlock title="Nonaccessible view with TextViews">
+          <View>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable normal view.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews wihout label">
+          <View accessible={true}>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view without label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews with label">
+          <View accessible={true}
+            accessibilityLabel="I have label, so I read it instead of embedded text.">
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view with label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Touchable with component type = button">
+          <TouchableWithoutFeedback
+            onPress={() => ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)}
+            accessibilityComponentType="button">
+            <View style={styles.embedded}>
+              <Text>Click me</Text>
+              <Text>Or not</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="LiveRegion">
+          <TouchableWithoutFeedback onPress={this._addOne}>
+            <View style={styles.embedded}>
+              <Text>Click me</Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <Text accessibilityLiveRegion="polite">
+            Clicked {this.state.count} times
+          </Text>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Overlapping views and importantForAccessibility property">
+          <View style={styles.container}>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 10,
+                right: 10,
+                height: 100,
+                backgroundColor: 'green'}}
+              accessible={true}
+              accessibilityLabel="First layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.backgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 25}}>
+                  Hello
+                </Text>
+              </View>
+            </View>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 25,
+                right: 10,
+                height: 110,
+                backgroundColor: 'yellow', opacity: 0.5}}
+              accessible={true}
+              accessibilityLabel="Second layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.forgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 20}}>
+                  world
+                </Text>
+              </View>
+            </View>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeBackgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for background layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Background layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.backgroundImportantForAcc]}
+            </Text>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeForgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for forground layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Forground layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.forgroundImportantForAcc]}
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+   embedded: {
+    backgroundColor: 'yellow',
+    padding:10,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 10,
+    height:150,
+  },
+});
+
+module.exports = AccessibilityAndroidExample;

Examples/UIExplorer/AccessibilityAndroidExample.js

@@ -0,0 +1,256 @@
+/**
+ * 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 {
+  StyleSheet,
+  Text,
+  View,
+  TouchableWithoutFeedback,
+} = React;
+var ToastAndroid = require('ToastAndroid');
+var AccessibilityInfo = require('AccessibilityInfo');
+
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
+
+var AccessibilityAndroidExample = React.createClass({
+
+  statics: {
+    title: 'Accessibility',
+    description: 'Examples of using Accessibility API.',
+  },
+
+  getInitialState: function() {
+    return {
+      count: 0,
+      talkbackEnabled: false,
+      backgroundImportantForAcc: 0,
+      forgroundImportantForAcc: 0,
+    };
+  },
+
+   componentDidMount: function() {
+    AccessibilityInfo.addEventListener(
+      'change',
+      this._handleTouchExplorationChange
+    );
+    AccessibilityInfo.fetch().done((enabled) => {
+      this.setState({
+        count: this.state.count,
+        talkbackEnabled: enabled}); }
+    );
+  },
+
+  componentWillUnmount: function() {
+    AccessibilityInfo.removeEventListener(
+      'change',
+      this._handleTouchExplorationChange
+    );
+  },
+
+  _handleTouchExplorationChange: function(isEnabled) {
+    this.setState({
+      count: this.state.count,
+      talkbackEnabled: isEnabled,
+    });
+  },
+
+  _showAccessibilityToast: function() {
+    var text = 'TouchExploration is ' + (this.state.talkbackEnabled ? 'enabled' : 'disabled');
+    ToastAndroid.show(text, ToastAndroid.SHORT);
+  },
+
+  _addOne: function() {
+    this.setState({
+      count: ++this.state.count,
+      talkbackEnabled: this.state.talkbackEnabled,
+    });
+  },
+
+  _changeBackgroundImportantForAcc: function() {
+    this.setState({
+      backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  _changeForgroundImportantForAcc: function() {
+    this.setState({
+      forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
+    });
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title={'Accessibility'}>
+
+        <UIExplorerBlock title="Nonaccessible view with TextViews">
+          <View>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable normal view.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews wihout label">
+          <View accessible={true}>
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view without label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Accessible view with TextViews with label">
+          <View accessible={true}
+            accessibilityLabel="I have label, so I read it instead of embedded text.">
+            <Text style={{color: 'green',}}>
+              This is
+            </Text>
+            <Text style={{color: 'blue'}}>
+              nontouchable accessible view with label.
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Touchable with component type = button">
+          <TouchableWithoutFeedback
+            onPress={() => ToastAndroid.show('Toasts work by default', ToastAndroid.SHORT)}>
+            <View style={styles.embedded} accessibilityComponentType="button">
+              <Text>Click me</Text>
+              <Text>Or not</Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="LiveRegion">
+          <TouchableWithoutFeedback onPress={this._addOne}>
+            <View style={styles.embedded} accessibilityComponentType="button">
+              <Text>Click me</Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <Text accessibilityLiveRegion="polite">
+            Clicked {this.state.count} times
+          </Text>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Check if TouchExploration is enabled">
+          <TouchableWithoutFeedback onPress={this._showAccessibilityToast}>
+            <View style={styles.embedded}>
+              <Text>
+                Click to check TouchExploration
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+
+        <UIExplorerBlock title="Overlapping views and importantForAccessibility property">
+          <View style={styles.container}>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 10,
+                right: 10,
+                height: 100,
+                backgroundColor: 'green'}}
+              accessible={true}
+              accessibilityLabel="First layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.backgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 25}}>
+                  Hello
+                </Text>
+              </View>
+            </View>
+            <View
+              style={{
+                position: 'absolute',
+                left: 10,
+                top: 25,
+                right: 10,
+                height: 110,
+                backgroundColor: 'yellow', opacity: 0.5}}
+              accessible={true}
+              accessibilityLabel="Second layout"
+              importantForAccessibility={
+                importantForAccessibilityValues[this.state.forgroundImportantForAcc]}>
+              <View accessible={true}>
+                <Text style={{fontSize: 20}}>
+                  world
+                </Text>
+              </View>
+            </View>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeBackgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for background layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Background layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.backgroundImportantForAcc]}
+            </Text>
+          </View>
+          <TouchableWithoutFeedback onPress={this._changeForgroundImportantForAcc}>
+            <View style={styles.embedded}>
+              <Text>
+                Change importantForAccessibility for forground layout.
+              </Text>
+            </View>
+          </TouchableWithoutFeedback>
+          <View accessible={true}>
+            <Text>
+              Forground layout importantForAccessibility
+            </Text>
+            <Text>
+              {importantForAccessibilityValues[this.state.forgroundImportantForAcc]}
+            </Text>
+          </View>
+        </UIExplorerBlock>
+
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+   embedded: {
+    backgroundColor: 'yellow',
+    padding:10,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 10,
+    height:150,
+  },
+});
+
+module.exports = AccessibilityAndroidExample;

Examples/UIExplorer/AnimationExample/AnExApp.js

@@ -38,9 +38,11 @@ class Circle extends React.Component {
     super();
     this._onLongPress = this._onLongPress.bind(this);
     this._toggleIsActive = this._toggleIsActive.bind(this);
-    this.state = {isActive: false};
-    this.state.pan = new Animated.ValueXY(); // Vectors reduce boilerplate.  (step1: uncomment)
-    this.state.pop = new Animated.Value(0);  // Initial value.               (step2a: uncomment)
+    this.state = {
+      isActive: false,
+      pan: new Animated.ValueXY(), // Vectors reduce boilerplate.  (step1: uncomment)
+      pop: new Animated.Value(0),  // Initial value.               (step2a: uncomment)
+    };
   }
 
   _onLongPress(): void {

Examples/UIExplorer/AsyncStorageExample.js

@@ -29,18 +29,23 @@ var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
 
 var BasicStorageExample = React.createClass({
   componentDidMount() {
-    AsyncStorage.getItem(STORAGE_KEY)
-      .then((value) => {
-        if (value !== null){
-          this.setState({selectedValue: value});
-          this._appendMessage('Recovered selection from disk: ' + value);
-        } else {
-          this._appendMessage('Initialized with no selection on disk.');
-        }
-      })
-      .catch((error) => this._appendMessage('AsyncStorage error: ' + error.message))
-      .done();
+    this._loadInitialState().done();
   },
+
+  async _loadInitialState() {
+    try {
+      var value = await AsyncStorage.getItem(STORAGE_KEY);
+      if (value !== null){
+        this.setState({selectedValue: value});
+        this._appendMessage('Recovered selection from disk: ' + value);
+      } else {
+        this._appendMessage('Initialized with no selection on disk.');
+      }
+    } catch (error) {
+      this._appendMessage('AsyncStorage error: ' + error.message);
+    }
+  },
+
   getInitialState() {
     return {
       selectedValue: COLORS[0],
@@ -80,19 +85,23 @@ var BasicStorageExample = React.createClass({
     );
   },
 
-  _onValueChange(selectedValue) {
+  async _onValueChange(selectedValue) {
     this.setState({selectedValue});
-    AsyncStorage.setItem(STORAGE_KEY, selectedValue)
-      .then(() => this._appendMessage('Saved selection to disk: ' + selectedValue))
-      .catch((error) => this._appendMessage('AsyncStorage error: ' + error.message))
-      .done();
+    try {
+      await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
+      this._appendMessage('Saved selection to disk: ' + selectedValue);
+    } catch (error) {
+      this._appendMessage('AsyncStorage error: ' + error.message);
+    }
   },
 
-  _removeStorage() {
-    AsyncStorage.removeItem(STORAGE_KEY)
-      .then(() => this._appendMessage('Selection removed from disk.'))
-      .catch((error) => { this._appendMessage('AsyncStorage error: ' + error.message) })
-      .done();
+  async _removeStorage() {
+    try {
+      await AsyncStorage.removeItem(STORAGE_KEY);
+      this._appendMessage('Selection removed from disk.');
+    } catch (error) {
+      this._appendMessage('AsyncStorage error: ' + error.message);
+    }
   },
 
   _appendMessage(message) {

Examples/UIExplorer/ImageEditingExample.js

@@ -0,0 +1,305 @@
+
+/**
+ * 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 {
+  CameraRoll,
+  Image,
+  NativeModules,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+var ImageEditingManager = NativeModules.ImageEditingManager;
+var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;
+
+var PAGE_SIZE = 20;
+
+type ImageOffset = {
+  x: number;
+  y: number;
+};
+
+type ImageSize = {
+  width: number;
+  height: number;
+};
+
+type TransformData = {
+  offset: ImageOffset;
+  size: ImageSize;
+}
+
+class SquareImageCropper extends React.Component {
+  _isMounted: boolean;
+  _transformData: TransformData;
+
+  constructor(props) {
+    super(props);
+    this._isMounted = true;
+    this.state = {
+      randomPhoto: null,
+      measuredSize: null,
+      croppedImageURI: null,
+      cropError: null,
+    };
+    this._fetchRandomPhoto();
+  }
+
+  _fetchRandomPhoto() {
+    CameraRoll.getPhotos(
+      {first: PAGE_SIZE},
+      (data) => {
+        if (!this._isMounted) {
+          return;
+        }
+        var edges = data.edges;
+        var edge = edges[Math.floor(Math.random() * edges.length)];
+        var randomPhoto = edge && edge.node && edge.node.image;
+        if (randomPhoto) {
+          this.setState({randomPhoto});
+        }
+      },
+      (error) => undefined
+    );
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  render() {
+    if (!this.state.measuredSize) {
+      return (
+        <View
+          style={styles.container}
+          onLayout={(event) => {
+            var measuredWidth = event.nativeEvent.layout.width;
+            if (!measuredWidth) {
+              return;
+            }
+            this.setState({
+              measuredSize: {width: measuredWidth, height: measuredWidth},
+            });
+          }}
+        />
+      );
+    }
+
+    if (!this.state.croppedImageURI) {
+      return this._renderImageCropper();
+    }
+    return this._renderCroppedImage();
+  }
+
+  _renderImageCropper() {
+    if (!this.state.randomPhoto) {
+      return (
+        <View style={styles.container} />
+      );
+    }
+    var error = null;
+    if (this.state.cropError) {
+      error = (
+        <Text>{this.state.cropError.message}</Text>
+      );
+    }
+    return (
+      <View style={styles.container}>
+        <Text>Drag the image within the square to crop:</Text>
+        <ImageCropper
+          image={this.state.randomPhoto}
+          size={this.state.measuredSize}
+          style={[styles.imageCropper, this.state.measuredSize]}
+          onTransformDataChange={(data) => this._transformData = data}
+        />
+        <TouchableHighlight
+          style={styles.cropButtonTouchable}
+          onPress={this._crop.bind(this)}>
+          <View style={styles.cropButton}>
+            <Text style={styles.cropButtonLabel}>
+              Crop
+            </Text>
+          </View>
+        </TouchableHighlight>
+        {error}
+      </View>
+    );
+  }
+
+  _renderCroppedImage() {
+    return (
+      <View style={styles.container}>
+        <Text>Here is the cropped image:</Text>
+        <Image
+          source={{uri: this.state.croppedImageURI}}
+          style={[styles.imageCropper, this.state.measuredSize]}
+        />
+        <TouchableHighlight
+          style={styles.cropButtonTouchable}
+          onPress={this._reset.bind(this)}>
+          <View style={styles.cropButton}>
+            <Text style={styles.cropButtonLabel}>
+              Try again
+            </Text>
+          </View>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+
+  _crop() {
+    ImageEditingManager.cropImage(
+      this.state.randomPhoto.uri,
+      this._transformData,
+      (croppedImageURI) => this.setState({croppedImageURI}),
+      (cropError) => this.setState({cropError})
+    );
+  }
+
+  _reset() {
+    this.setState({
+      randomPhoto: null,
+      croppedImageURI: null,
+      cropError: null,
+    });
+    this._fetchRandomPhoto();
+  }
+
+}
+
+class ImageCropper extends React.Component {
+  _scaledImageSize: ImageSize;
+  _contentOffset: ImageOffset;
+
+  componentWillMount() {
+    // Scale an image to the minimum size that is large enough to completely
+    // fill the crop box.
+    var widthRatio = this.props.image.width / this.props.size.width;
+    var heightRatio = this.props.image.height / this.props.size.height;
+    if (widthRatio < heightRatio) {
+      this._scaledImageSize = {
+        width: this.props.size.width,
+        height: this.props.image.height / widthRatio,
+      };
+    } else {
+      this._scaledImageSize = {
+        width: this.props.image.width / heightRatio,
+        height: this.props.size.height,
+      };
+    }
+    this._contentOffset = {
+      x: (this._scaledImageSize.width - this.props.size.width) / 2,
+      y: (this._scaledImageSize.height - this.props.size.height) / 2,
+    };
+    this._updateTransformData(
+      this._contentOffset,
+      this._scaledImageSize,
+      this.props.size
+    );
+  }
+
+  _onScroll(event) {
+    this._updateTransformData(
+      event.nativeEvent.contentOffset,
+      event.nativeEvent.contentSize,
+      event.nativeEvent.layoutMeasurement
+    );
+  }
+
+  _updateTransformData(offset, scaledImageSize, croppedImageSize) {
+    var offsetRatioX = offset.x / scaledImageSize.width;
+    var offsetRatioY = offset.y / scaledImageSize.height;
+    var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
+    var sizeRatioY = croppedImageSize.height / scaledImageSize.height;
+
+    this.props.onTransformDataChange && this.props.onTransformDataChange({
+      offset: {
+        x: this.props.image.width * offsetRatioX,
+        y: this.props.image.height * offsetRatioY,
+      },
+      size: {
+        width: this.props.image.width * sizeRatioX,
+        height: this.props.image.height * sizeRatioY,
+      },
+    });
+  }
+
+  render() {
+    var decelerationRate =
+      RCTScrollViewConsts && RCTScrollViewConsts.DecelerationRate ?
+        RCTScrollViewConsts.DecelerationRate.Fast :
+        0;
+
+    return (
+      <ScrollView
+        alwaysBounceVertical={true}
+        automaticallyAdjustContentInsets={false}
+        contentOffset={this._contentOffset}
+        decelerationRate={decelerationRate}
+        horizontal={true}
+        maximumZoomScale={3.0}
+        onMomentumScrollEnd={this._onScroll.bind(this)}
+        onScrollEndDrag={this._onScroll.bind(this)}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        style={this.props.style}
+        scrollEventThrottle={16}>
+        <Image source={this.props.image} style={this._scaledImageSize} />
+      </ScrollView>
+    );
+  }
+
+}
+
+exports.framework = 'React';
+exports.title = 'ImageEditingManager';
+exports.description = 'Cropping and scaling with ImageEditingManager';
+exports.examples = [{
+  title: 'Image Cropping',
+  render() {
+    return <SquareImageCropper/>;
+  }
+}];
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+  imageCropper: {
+    alignSelf: 'center',
+    marginTop: 12,
+  },
+  cropButtonTouchable: {
+    alignSelf: 'center',
+    marginTop: 12,
+  },
+  cropButton: {
+    padding: 12,
+    backgroundColor: 'blue',
+    borderRadius: 4,
+  },
+  cropButtonLabel: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

Examples/UIExplorer/ImageExample.js

@@ -340,7 +340,7 @@ exports.examples = [
 ];
 
 var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
-var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small.png'};
+var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small_2x.png'};
 
 var styles = StyleSheet.create({
   base: {

Examples/UIExplorer/ImageMocks.js

@@ -15,37 +15,37 @@
  */
 'use strict';
 
+/* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
+ * into a proptype shape */
 declare module 'image!story-background' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
   declare var uri: string;
   declare var isStatic: boolean;
 }
 
+/* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
+ * into a proptype shape */
 declare module 'image!uie_comment_highlighted' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
   declare var uri: string;
   declare var isStatic: boolean;
 }
 
+/* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
+ * into a proptype shape */
 declare module 'image!uie_comment_normal' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
   declare var uri: string;
   declare var isStatic: boolean;
 }
 
+/* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
+ * into a proptype shape */
 declare module 'image!uie_thumb_normal' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
   declare var uri: string;
   declare var isStatic: boolean;
 }
 
+/* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
+ * into a proptype shape */
 declare module 'image!uie_thumb_selected' {
-  /* $FlowIssue #7387208 - There's a flow bug preventing this type from flowing
-   * into a proptype shape */
   declare var uri: string;
   declare var isStatic: boolean;
 }

Examples/UIExplorer/LayoutEventsExample.js

@@ -49,8 +49,7 @@ var LayoutEventExample = React.createClass({
       () => {
         console.log('layout animation done.');
         this.addWrapText();
-      },
-      (error) => { throw new Error(JSON.stringify(error)); }
+      }
     );
     this.setState({
       viewStyle: {
@@ -139,11 +138,11 @@ var styles = StyleSheet.create({
   },
 });
 
-exports.title = 'onLayout';
+exports.title = 'Layout Events';
 exports.description = 'Layout events can be used to measure view size and position.';
 exports.examples = [
 {
-  title: 'onLayout',
+  title: 'LayoutEventExample',
   render: function(): ReactElement {
     return <LayoutEventExample />;
   },

Examples/UIExplorer/ModalExample.js

@@ -0,0 +1,172 @@
+/**
+ * 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 {
+  Modal,
+  StyleSheet,
+  SwitchIOS,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+exports.displayName = (undefined: ?string);
+exports.framework = 'React';
+exports.title = '<Modal>';
+exports.description = 'Component for presenting modal views.';
+
+var Button = React.createClass({
+  getInitialState() {
+    return {
+      active: false,
+    };
+  },
+
+  _onHighlight() {
+    this.setState({active: true});
+  },
+
+  _onUnhighlight() {
+    this.setState({active: false});
+  },
+
+  render() {
+    var colorStyle = {
+      color: this.state.active ? '#fff' : '#000',
+    };
+    return (
+      <TouchableHighlight
+        onHideUnderlay={this._onUnhighlight}
+        onPress={this.props.onPress}
+        onShowUnderlay={this._onHighlight}
+        style={[styles.button, this.props.style]}
+        underlayColor="#a9d9d4">
+          <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text>
+      </TouchableHighlight>
+    );
+  }
+});
+
+var ModalExample = React.createClass({
+  getInitialState() {
+    return {
+      animated: true,
+      modalVisible: false,
+      transparent: false,
+    };
+  },
+
+  _setModalVisible(visible) {
+    this.setState({modalVisible: visible});
+  },
+
+  _toggleAnimated() {
+    this.setState({animated: !this.state.animated});
+  },
+
+  _toggleTransparent() {
+    this.setState({transparent: !this.state.transparent});
+  },
+
+  render() {
+    var modalBackgroundStyle = {
+      backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
+    };
+    var innerContainerTransparentStyle = this.state.transparent
+      ? {backgroundColor: '#fff', padding: 20}
+      : null;
+
+    return (
+      <View>
+        <Modal
+          animated={this.state.animated}
+          transparent={this.state.transparent}
+          visible={this.state.modalVisible}>
+          <View style={[styles.container, modalBackgroundStyle]}>
+            <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
+              <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text>
+              <Button
+                onPress={this._setModalVisible.bind(this, false)}
+                style={styles.modalButton}>
+                Close
+              </Button>
+            </View>
+          </View>
+        </Modal>
+
+        <View style={styles.row}>
+          <Text style={styles.rowTitle}>Animated</Text>
+          <SwitchIOS value={this.state.animated} onValueChange={this._toggleAnimated} />
+        </View>
+
+        <View style={styles.row}>
+          <Text style={styles.rowTitle}>Transparent</Text>
+          <SwitchIOS value={this.state.transparent} onValueChange={this._toggleTransparent} />
+        </View>
+
+        <Button onPress={this._setModalVisible.bind(this, true)}>
+          Present
+        </Button>
+      </View>
+    );
+  },
+});
+
+exports.examples = [
+  {
+    title: 'Modal Presentation',
+    description: 'Modals can be presented with or without animation',
+    render: () => <ModalExample />,
+  },
+];
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 20,
+  },
+  innerContainer: {
+    borderRadius: 10,
+  },
+  row: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: 20,
+  },
+  rowTitle: {
+    flex: 1,
+    fontWeight: 'bold',
+  },
+  button: {
+    borderRadius: 5,
+    flex: 1,
+    height: 44,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  buttonText: {
+    fontSize: 18,
+    margin: 5,
+    textAlign: 'center',
+  },
+  modalButton: {
+    marginTop: 10,
+  },
+});

Examples/UIExplorer/ProgressBarAndroidExample.android.js

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

Examples/UIExplorer/ScrollViewSimpleExample.js

@@ -0,0 +1,83 @@
+/**
+ * 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 {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity
+} = React;
+
+var NUM_ITEMS = 20;
+
+var ScrollViewSimpleExample = React.createClass({
+  statics: {
+    title: '<ScrollView>',
+    description: 'Component that enables scrolling through child components.'
+  },
+
+  makeItems: function(nItems: number, styles): Array<any> {
+    var items = [];
+    for (var i = 0; i < nItems; i++) {
+       items[i] = (
+         <TouchableOpacity key={i} style={styles}>
+           <Text>{'Item ' + i}</Text>
+         </TouchableOpacity>
+       );
+    }
+    return items;
+  },
+
+  render: function() {
+    // One of the items is a horizontal scroll view
+    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
+    items[4] = (
+      <ScrollView key={'scrollView'} horizontal={true}>
+        {this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])}
+      </ScrollView>
+    );
+
+    var verticalScrollView = (
+      <ScrollView style={styles.verticalScrollView}>
+        {items}
+      </ScrollView>
+    );
+
+    return verticalScrollView;
+  }
+});
+
+var styles = StyleSheet.create({
+  verticalScrollView: {
+    margin: 10,
+  },
+  itemWrapper: {
+    backgroundColor: '#dddddd',
+    alignItems: 'center',
+    borderRadius: 5,
+    borderWidth: 5,
+    borderColor: '#a52a2a',
+    padding: 30,
+    margin: 5,
+  },
+  horizontalItemWrapper: {
+    padding: 50
+  }
+});
+
+module.exports = ScrollViewSimpleExample;

Examples/UIExplorer/SwitchAndroidExample.android.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.
+ */
+'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/TabBarIOSExample.js

@@ -23,6 +23,8 @@ var {
   View,
 } = React;
 
+var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
+
 var TabBarExample = React.createClass({
   statics: {
     title: '<TabBarIOS>',
@@ -55,6 +57,7 @@ var TabBarExample = React.createClass({
         barTintColor="darkslateblue">
         <TabBarIOS.Item
           title="Blue Tab"
+          icon={{uri: base64Icon, scale: 3}}
           selected={this.state.selectedTab === 'blueTab'}
           onPress={() => {
             this.setState({

Examples/UIExplorer/TextExample.android.js

@@ -0,0 +1,349 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var Entity = React.createClass({
+  render: function() {
+    return (
+      <Text style={{fontWeight: 'bold', color: '#527fe4'}}>
+        {this.props.children}
+      </Text>
+    );
+  }
+});
+
+var AttributeToggler = React.createClass({
+  getInitialState: function() {
+    return {fontWeight: 'bold', fontSize: 15};
+  },
+  toggleWeight: function() {
+    this.setState({
+      fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
+    });
+  },
+  increaseSize: function() {
+    this.setState({
+      fontSize: this.state.fontSize + 1
+    });
+  },
+  render: function() {
+    var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
+    return (
+      <View>
+        <Text style={curStyle}>
+          Tap the controls below to change attributes.
+        </Text>
+        <Text>
+          <Text>See how it will even work on <Text style={curStyle}>this nested text</Text></Text>
+        </Text>
+        <Text>
+          <Text onPress={this.toggleWeight}>Toggle Weight</Text>
+          {' (with highlight onPress)'}
+        </Text>
+        <Text onPress={this.increaseSize} suppressHighlighting={true}>
+          Increase Size (suppressHighlighting true)
+        </Text>
+      </View>
+    );
+  }
+});
+
+var TextExample = React.createClass({
+  statics: {
+    title: '<Text>',
+    description: 'Base component for rendering styled text.',
+  },
+  render: function() {
+    return (
+      <UIExplorerPage title="<Text>">
+        <UIExplorerBlock title="Wrap">
+          <Text>
+            The text should wrap if it goes on multiple lines.
+            See, this is going to the next line.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Padding">
+          <Text style={{padding: 10}}>
+            This text is indented by 10px padding on all sides.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Family">
+          <Text style={{fontFamily: 'sans-serif'}}>
+            Sans-Serif
+          </Text>
+          <Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
+            Sans-Serif Bold
+          </Text>
+          <Text style={{fontFamily: 'serif'}}>
+            Serif
+          </Text>
+          <Text style={{fontFamily: 'serif', fontWeight: 'bold'}}>
+            Serif Bold
+          </Text>
+          <Text style={{fontFamily: 'monospace'}}>
+            Monospace
+          </Text>
+          <Text style={{fontFamily: 'monospace', fontWeight: 'bold'}}>
+            Monospace Bold (After 5.0)
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Android Material Design fonts">
+          <View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
+            <View style={{flex: 1}}>
+              <Text style={{fontFamily: 'sans-serif'}}>
+                Roboto Regular
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontStyle: 'italic'}}>
+                Roboto Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
+                Roboto Bold
+              </Text>
+              <Text style={{fontFamily: 'sans-serif', fontStyle: 'italic', fontWeight: 'bold'}}>
+                Roboto Bold Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-light'}}>
+                Roboto Light
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-light', fontStyle: 'italic'}}>
+                Roboto Light Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-thin'}}>
+                Roboto Thin (After 4.2)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-thin', fontStyle: 'italic'}}>
+                Roboto Thin Italic (After 4.2)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed'}}>
+                Roboto Condensed
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed', fontStyle: 'italic'}}>
+                Roboto Condensed Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-condensed', fontWeight: 'bold'}}>
+                Roboto Condensed Bold
+              </Text>
+              <Text style={{
+                  fontFamily: 'sans-serif-condensed',
+                  fontStyle: 'italic',
+                  fontWeight: 'bold'}}>
+                Roboto Condensed Bold Italic
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-medium'}}>
+                Roboto Medium (After 5.0)
+              </Text>
+              <Text style={{fontFamily: 'sans-serif-medium', fontStyle: 'italic'}}>
+                Roboto Medium Italic (After 5.0)
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Size">
+          <Text style={{fontSize: 23}}>
+            Size 23
+          </Text>
+          <Text style={{fontSize: 8}}>
+            Size 8
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Color">
+          <Text style={{color: 'red'}}>
+            Red color
+          </Text>
+          <Text style={{color: 'blue'}}>
+            Blue color
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Weight">
+          <Text style={{fontWeight: 'bold'}}>
+            Move fast and be bold
+          </Text>
+          <Text style={{fontWeight: 'normal'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Style">
+          <Text style={{fontStyle: 'italic'}}>
+            Move fast and be bold
+          </Text>
+          <Text style={{fontStyle: 'normal'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Font Style and Weight">
+          <Text style={{fontStyle: 'italic', fontWeight: 'bold'}}>
+            Move fast and be bold
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Nested">
+          <Text onPress={() => console.log('1st')}>
+            (Normal text,
+            <Text style={{fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
+              (and bold
+              <Text style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}} onPress={() => console.log('3rd')}>
+                (and tiny bold italic blue
+                <Text style={{fontWeight: 'normal', fontStyle: 'normal'}} onPress={() => console.log('4th')}>
+                  (and tiny normal blue)
+                </Text>
+                )
+              </Text>
+              )
+            </Text>
+            )
+          </Text>
+          <Text style={{fontFamily: 'serif'}} onPress={() => console.log('1st')}>
+            (Serif
+            <Text style={{fontStyle: 'italic', fontWeight: 'bold'}} onPress={() => console.log('2nd')}>
+              (Serif Bold Italic
+              <Text
+                style={{fontFamily: 'monospace', fontStyle: 'normal', fontWeight: 'normal'}}
+                onPress={() => console.log('3rd')}>
+                (Monospace Normal
+                <Text
+                  style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
+                  onPress={() => console.log('4th')}>
+                  (Sans-Serif Bold
+                  <Text style={{fontWeight: 'normal'}} onPress={() => console.log('5th')}>
+                    (and Sans-Serif Normal)
+                  </Text>
+                  )
+                </Text>
+                )
+              </Text>
+              )
+            </Text>
+            )
+          </Text>
+          <Text style={{fontSize: 12}}>
+            <Entity>Entity Name</Entity>
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Text Align">
+          <Text>
+            auto (default) - english LTR
+          </Text>
+          <Text>
+            أحب اللغة العربية auto (default) - arabic RTL
+          </Text>
+          <Text style={{textAlign: 'left'}}>
+            left left left left left left left left left left left left left left left
+          </Text>
+          <Text style={{textAlign: 'center'}}>
+            center center center center center center center center center center center
+          </Text>
+          <Text style={{textAlign: 'right'}}>
+            right right right right right right right right right right right right right
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Unicode">
+          <View style={{flex: 1}}>
+            <View style={{flexDirection: 'row'}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1, alignItems: 'center'}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+            <View style={{flex: 1}}>
+              <Text style={{backgroundColor: 'red'}}>
+                星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
+              </Text>
+            </View>
+          </View>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Spaces">
+          <Text>
+            A {'generated'} {' '} {'string'} and    some &nbsp;&nbsp;&nbsp; spaces
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Line Height">
+          <Text style={{lineHeight: 35}}>
+            Holisticly formulate inexpensive ideas before best-of-breed benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite magnetic potentialities rather than client-focused interfaces.
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Empty Text">
+          <Text />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toggling Attributes">
+          <AttributeToggler />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="backgroundColor attribute">
+          <Text style={{backgroundColor: '#ffaaaa'}}>
+            Red background,
+            <Text style={{backgroundColor: '#aaaaff'}}>
+              {' '}blue background,
+              <Text>
+                {' '}inherited blue background,
+                <Text style={{backgroundColor: '#aaffaa'}}>
+                  {' '}nested green background.
+                </Text>
+              </Text>
+            </Text>
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="containerBackgroundColor attribute">
+          <View style={{flexDirection: 'row', height: 85}}>
+            <View style={{backgroundColor: '#ffaaaa', width: 150}} />
+            <View style={{backgroundColor: '#aaaaff', width: 150}} />
+          </View>
+          <Text style={[styles.backgroundColorText, {top: -80}]}>
+            Default containerBackgroundColor (inherited) + backgroundColor wash
+          </Text>
+          <Text style={[styles.backgroundColorText, {top: -70, backgroundColor: 'transparent'}]}>
+            {"containerBackgroundColor: 'transparent' + backgroundColor wash"}
+          </Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="numberOfLines attribute">
+          <Text numberOfLines={1}>
+            Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
+          </Text>
+          <Text numberOfLines={2} style={{marginTop: 20}}>
+            Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
+          </Text>
+          <Text style={{marginTop: 20}}>
+            No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
+          </Text>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  backgroundColorText: {
+    left: 5,
+    backgroundColor: 'rgba(100, 100, 100, 0.3)'
+  },
+});
+
+module.exports = TextExample;

Examples/UIExplorer/TextExample.ios.js

@@ -378,6 +378,25 @@ exports.examples = [
       </View>
     );
   },
+}, {
+  title: 'allowFontScaling attribute',
+  render: function() {
+    return (
+      <View>
+        <Text>
+          By default, text will respect Text Size accessibility setting on iOS.
+          It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
+          {" "}<Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size</Text>
+        </Text>
+        <Text style={{marginTop: 10}}>
+          You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
+        </Text>
+        <Text allowFontScaling={false} style={{marginTop: 20}}>
+          This text will not scale.
+        </Text>
+      </View>
+    );
+  },
 }];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/TextInputExample.android.js

@@ -0,0 +1,316 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Text,
+  TextInput,
+  View,
+  StyleSheet,
+} = React;
+
+var TextEventsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      curText: '<No Event>',
+      prevText: '<No Event>',
+      prev2Text: '<No Event>',
+    };
+  },
+
+  updateText: function(text) {
+    this.setState((state) => {
+      return {
+        curText: text,
+        prevText: state.curText,
+        prev2Text: state.prevText,
+      };
+    });
+  },
+
+  render: function() {
+    return (
+      <View>
+        <TextInput
+          autoCapitalize="none"
+          placeholder="Enter text to see events"
+          autoCorrect={false}
+          onFocus={() => this.updateText('onFocus')}
+          onBlur={() => this.updateText('onBlur')}
+          onChange={(event) => this.updateText(
+            'onChange text: ' + event.nativeEvent.text
+          )}
+          onEndEditing={(event) => this.updateText(
+            'onEndEditing text: ' + event.nativeEvent.text
+          )}
+          onSubmitEditing={(event) => this.updateText(
+            'onSubmitEditing text: ' + event.nativeEvent.text
+          )}
+          style={styles.singleLine}
+        />
+        <Text style={styles.eventLabel}>
+          {this.state.curText}{'\n'}
+          (prev: {this.state.prevText}){'\n'}
+          (prev2: {this.state.prev2Text})
+        </Text>
+      </View>
+    );
+  }
+});
+
+class RewriteExample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+  render() {
+    return (
+      <TextInput
+        onChangeText={(text) => {
+          text = text.replace(/ /g, '_');
+          this.setState({text});
+        }}
+        style={styles.singleLine}
+        value={this.state.text}
+      />
+    );
+  }
+}
+
+var styles = StyleSheet.create({
+  multiline: {
+    height: 60,
+    fontSize: 16,
+    padding: 4,
+    marginBottom: 10,
+  },
+  eventLabel: {
+    margin: 3,
+    fontSize: 12,
+  },
+  singleLine: {
+    fontSize: 16,
+    padding: 4,
+  },
+  singleLineWithHeightTextInput: {
+    height: 30,
+  },
+});
+
+exports.title = '<TextInput>';
+exports.description = 'Single and multi-line text inputs.';
+exports.examples = [
+  {
+    title: 'Auto-focus',
+    render: function() {
+      return <TextInput autoFocus={true} style={styles.singleLine} />;
+    }
+  },
+  {
+    title: "Live Re-Write (<sp>  ->  '_')",
+    render: function() {
+      return <RewriteExample />;
+    }
+  },
+  {
+    title: 'Auto-capitalize',
+    render: function() {
+      var autoCapitalizeTypes = [
+        'none',
+        'sentences',
+        'words',
+        'characters',
+      ];
+      var examples = autoCapitalizeTypes.map((type) => {
+        return (
+          <TextInput
+            autoCapitalize={type}
+            placeholder={'autoCapitalize: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Auto-correct',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            autoCorrect={true}
+            placeholder="This has autoCorrect"
+            style={styles.singleLine}
+          />
+          <TextInput
+            autoCorrect={false}
+            placeholder="This does not have autoCorrect"
+            style={styles.singleLine}
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Keyboard types',
+    render: function() {
+      var keyboardTypes = [
+        'default',
+        'email-address',
+        'numeric',
+      ];
+      var examples = keyboardTypes.map((type) => {
+        return (
+          <TextInput
+            keyboardType={type}
+            placeholder={'keyboardType: ' + type}
+            style={styles.singleLine}
+          />
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
+  {
+    title: 'Event handling',
+    render: function(): ReactElement { return <TextEventsExample />; },
+  },
+  {
+    title: 'Colors and text inputs',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            style={[styles.singleLine]}
+            defaultValue="Default color text"
+          />
+          <TextInput
+            style={[styles.singleLine, {color: 'green'}]}
+            defaultValue="Green Text"
+          />
+          <TextInput
+            placeholder="Default placeholder text color"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Red placeholder text color"
+            placeholderTextColor="red"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Default underline color"
+            style={styles.singleLine}
+          />
+          <TextInput
+            placeholder="Blue underline color"
+            style={styles.singleLine}
+            underlineColorAndroid="blue"
+          />
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Text input, themes and heights',
+    render: function() {
+      return (
+        <TextInput
+          placeholder="If you set height, beware of padding set from themes"
+          style={[styles.singleLineWithHeightTextInput]}
+        />
+      );
+    }
+  },
+  {
+    title: 'Passwords',
+    render: function() {
+      return (
+        <TextInput
+          defaultValue="iloveturtles"
+          password={true}
+          style={styles.singleLine}
+        />
+      );
+    }
+  },
+  {
+    title: 'Editable',
+    render: function() {
+      return (
+        <TextInput
+           defaultValue="Can't touch this! (>'-')> ^(' - ')^ <('-'<) (>'-')> ^(' - ')^"
+           editable={false}
+           style={styles.singleLine}
+         />
+      );
+    }
+  },
+  {
+    title: 'Multiline',
+    render: function() {
+      return (
+        <View>
+          <TextInput
+            autoCorrect={true}
+            placeholder="multiline, aligned top-left"
+            placeholderTextColor="red"
+            multiline={true}
+            textAlign="start"
+            textAlignVertical="top"
+            style={styles.multiline}
+          />
+          <TextInput
+            autoCorrect={true}
+            placeholder="multiline, aligned center"
+            placeholderTextColor="green"
+            multiline={true}
+            textAlign="center"
+            textAlignVertical="center"
+            style={[styles.multiline]}
+          />
+          <TextInput
+            autoCorrect={true}
+            multiline={true}
+            textAlign="end"
+            textAlignVertical="bottom"
+            style={[styles.multiline, {color: 'blue'}]}>
+            <Text style={styles.multiline}>multiline with children, aligned bottom-right</Text>
+          </TextInput>
+        </View>
+      );
+    }
+  },
+  {
+    title: 'Fixed number of lines',
+    platform: 'android',
+    render: function() {
+      return (
+        <View>
+          <TextInput numberOfLines={2}
+            multiline={true}
+            placeholder="Two line input"
+          />
+          <TextInput numberOfLines={5}
+            multiline={true}
+            placeholder="Five line input"
+          />
+        </View>
+      );
+    }
+  },
+];

Examples/UIExplorer/ToastAndroidExample.android.js

@@ -0,0 +1,68 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  ToastAndroid,
+  TouchableWithoutFeedback
+} = React;
+
+var UIExplorerBlock = require('UIExplorerBlock');
+var UIExplorerPage = require('UIExplorerPage');
+
+var ToastExample = React.createClass({
+
+  statics: {
+    title: 'Toast Example',
+    description: 'Toast Example',
+  },
+
+  getInitialState: function() {
+    return {};
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage title="ToastAndroid">
+        <UIExplorerBlock title="Simple toast">
+          <TouchableWithoutFeedback
+            onPress={() =>
+              ToastAndroid.show('This is a toast with short duration', ToastAndroid.SHORT)}>
+            <Text style={styles.text}>Click me.</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toast with long duration">
+          <TouchableWithoutFeedback
+            onPress={() =>
+              ToastAndroid.show('This is a toast with long duration', ToastAndroid.LONG)}>
+            <Text style={styles.text}>Click me too.</Text>
+          </TouchableWithoutFeedback>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  text: {
+    color: 'black',
+  },
+});
+
+module.exports = ToastExample;

Examples/UIExplorer/ToolbarAndroidExample.android.js

@@ -0,0 +1,119 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  Text,
+  View,
+} = React;
+var UIExplorerBlock = require('./UIExplorerBlock');
+var UIExplorerPage = require('./UIExplorerPage');
+
+var SwitchAndroid = require('SwitchAndroid');
+var ToolbarAndroid = require('ToolbarAndroid');
+
+var ToolbarAndroidExample = React.createClass({
+  statics: {
+    title: '<ToolbarAndroid>',
+    description: 'Examples of using the Android toolbar.'
+  },
+  getInitialState: function() {
+    return {
+      actionText: 'Example app with toolbar component',
+      toolbarSwitch: false,
+      colorProps: {
+        titleColor: '#3b5998',
+        subtitleColor: '#6a7180',
+      },
+    };
+  },
+  render: function() {
+    return (
+      <UIExplorerPage title="<ToolbarAndroid>">
+        <UIExplorerBlock title="Toolbar with title/subtitle and actions">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            navIcon={require('image!ic_menu_black_24dp')}
+            onActionSelected={this._onActionSelected}
+            onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
+            style={styles.toolbar}
+            subtitle={this.state.actionText}
+            title="Toolbar" />
+          <Text>{this.state.actionText}</Text>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
+          <ToolbarAndroid
+            logo={require('image!launcher_icon')}
+            style={styles.toolbar}>
+            <View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
+              <SwitchAndroid
+                value={this.state.toolbarSwitch}
+                onValueChange={(value) => this.setState({'toolbarSwitch': value})} />
+              <Text>{'\'Tis but a switch'}</Text>
+            </View>
+          </ToolbarAndroid>
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with no icon">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            style={styles.toolbar}
+            subtitle="There be no icon here" />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with navIcon & logo, no title">
+          <ToolbarAndroid
+            actions={toolbarActions}
+            logo={require('image!launcher_icon')}
+            navIcon={require('image!ic_menu_black_24dp')}
+            style={styles.toolbar} />
+        </UIExplorerBlock>
+        <UIExplorerBlock title="Toolbar with custom title colors">
+          <ToolbarAndroid
+            navIcon={require('image!ic_menu_black_24dp')}
+            onIconClicked={() => this.setState({colorProps: {}})}
+            title="Wow, such toolbar"
+            style={styles.toolbar}
+            subtitle="Much native"
+            {...this.state.colorProps} />
+          <Text>
+            Touch the icon to reset the custom colors to the default (theme-provided) ones.
+          </Text>
+        </UIExplorerBlock>
+      </UIExplorerPage>
+    );
+  },
+  _onActionSelected: function(position) {
+    this.setState({
+      actionText: 'Selected ' + toolbarActions[position].title,
+    });
+  },
+});
+
+var toolbarActions = [
+  {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
+  {title: 'Filter'},
+  {title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
+];
+
+var styles = StyleSheet.create({
+  toolbar: {
+    backgroundColor: '#e9eaed',
+    height: 56,
+  },
+});
+
+module.exports = ToolbarAndroidExample;

Examples/UIExplorer/TouchableExample.js

@@ -27,6 +27,7 @@ var {
 } = React;
 
 exports.displayName = (undefined: ?string);
+exports.description = 'Touchable and onPress examples';
 exports.title = '<Touchable*> and onPress';
 exports.examples = [
 {

Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj

@@ -15,15 +15,17 @@
 		134A8A2A1AACED7A00945AAE /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 134A8A251AACED6A00945AAE /* libRCTGeolocation.a */; };
 		138D6A171B53CD440074A87E /* RCTCacheTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 138D6A151B53CD440074A87E /* RCTCacheTests.m */; };
 		138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 138D6A161B53CD440074A87E /* RCTShadowViewTests.m */; };
+		1393D0381B68CD1300E1B601 /* RCTModuleMethodTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */; };
 		139FDEDB1B0651FB00C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDED91B0651EA00C62182 /* libRCTWebSocket.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		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 */; };
 		13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DB03471B5D2ED500C27245 /* RCTJSONTests.m */; };
+		13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */; };
 		141FC1211B222EBB004D5FFB /* IntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 141FC1201B222EBB004D5FFB /* IntegrationTests.m */; };
 		143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */; };
-		144D21241B2204C5006DB32B /* RCTClipRectTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 144D21231B2204C5006DB32B /* RCTClipRectTests.m */; };
+		144D21241B2204C5006DB32B /* RCTImageUtilTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 144D21231B2204C5006DB32B /* RCTImageUtilTests.m */; };
 		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 */; };
@@ -52,6 +54,7 @@
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
+		83A936C81B7E0F08005B9C36 /* RCTConvert_UIColorTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */; };
 		D85B829E1AB6D5D7003F4FE2 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D85B829C1AB6D5CE003F4FE2 /* libRCTVibration.a */; };
 /* End PBXBuildFile section */
 
@@ -166,6 +169,7 @@
 		134A8A201AACED6A00945AAE /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
 		138D6A151B53CD440074A87E /* RCTCacheTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTCacheTests.m; sourceTree = "<group>"; };
 		138D6A161B53CD440074A87E /* RCTShadowViewTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTShadowViewTests.m; sourceTree = "<group>"; };
+		1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModuleMethodTests.m; sourceTree = "<group>"; };
 		139FDECA1B0651EA00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* UIExplorer.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = UIExplorer.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = UIExplorer/AppDelegate.h; sourceTree = "<group>"; };
@@ -176,6 +180,7 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = UIExplorer/main.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>"; };
 		141FC1201B222EBB004D5FFB /* IntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = IntegrationTests.m; sourceTree = "<group>"; };
 		143BC57E1B21E18100462512 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		143BC5811B21E18100462512 /* testLayoutExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testLayoutExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
@@ -187,7 +192,7 @@
 		143BC5951B21E3E100462512 /* UIExplorerIntegrationTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UIExplorerIntegrationTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		143BC5981B21E3E100462512 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerSnapshotTests.m; sourceTree = "<group>"; };
-		144D21231B2204C5006DB32B /* RCTClipRectTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTClipRectTests.m; sourceTree = "<group>"; };
+		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>"; };
@@ -212,6 +217,7 @@
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; 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>"; };
+		83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTConvert_UIColorTests.m; sourceTree = "<group>"; };
 		D85B82911AB6D5CE003F4FE2 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = ../../Libraries/Vibration/RCTVibration.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -353,13 +359,16 @@
 				1497CFA41B21F5E400C1F8F2 /* RCTAllocationTests.m */,
 				1497CFA51B21F5E400C1F8F2 /* RCTBridgeTests.m */,
 				138D6A151B53CD440074A87E /* RCTCacheTests.m */,
-				144D21231B2204C5006DB32B /* RCTClipRectTests.m */,
 				1497CFA61B21F5E400C1F8F2 /* RCTContextExecutorTests.m */,
 				1497CFA71B21F5E400C1F8F2 /* RCTConvert_NSURLTests.m */,
+				83A936C71B7E0F08005B9C36 /* RCTConvert_UIColorTests.m */,
 				1497CFA81B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m */,
 				1497CFA91B21F5E400C1F8F2 /* RCTEventDispatcherTests.m */,
 				1300627E1B59179B0043FE5A /* RCTGzipTests.m */,
+				144D21231B2204C5006DB32B /* RCTImageUtilTests.m */,
 				13DB03471B5D2ED500C27245 /* RCTJSONTests.m */,
+				13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */,
+				1393D0371B68CD1300E1B601 /* RCTModuleMethodTests.m */,
 				138D6A161B53CD440074A87E /* RCTShadowViewTests.m */,
 				1497CFAA1B21F5E400C1F8F2 /* RCTSparseArrayTests.m */,
 				1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */,
@@ -787,7 +796,8 @@
 			buildActionMask = 2147483647;
 			files = (
 				1497CFB01B21F5E400C1F8F2 /* RCTConvert_UIFontTests.m in Sources */,
-				144D21241B2204C5006DB32B /* RCTClipRectTests.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 */,
@@ -798,6 +808,8 @@
 				138D6A171B53CD440074A87E /* RCTCacheTests.m in Sources */,
 				13DB03481B5D2ED500C27245 /* RCTJSONTests.m in Sources */,
 				1497CFAC1B21F5E400C1F8F2 /* RCTAllocationTests.m in Sources */,
+				83A936C81B7E0F08005B9C36 /* RCTConvert_UIColorTests.m in Sources */,
+				13DF61B61B67A45000EDB188 /* RCTMethodArgumentTests.m in Sources */,
 				138D6A181B53CD440074A87E /* RCTShadowViewTests.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -14,56 +14,77 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBridge.h"
+#import "RCTJavaScriptLoader.h"
 #import "RCTRootView.h"
 
+@interface AppDelegate() <RCTBridgeDelegate>
+
+@end
+
 @implementation AppDelegate
 
 - (BOOL)application:(__unused UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self
+                                            launchOptions:launchOptions];
 
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle?dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-   * to your Xcode project folder and run
-   *
-   * $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-
-#if RUNNING_ON_CI
-   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"UIExplorerApp"
-                                                   launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:@"UIExplorerApp"
+                                            initialProperties:nil];
 
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [[UIViewController alloc] init];
+  UIViewController *rootViewController = [UIViewController new];
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
   return YES;
 }
 
+- (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
+{
+    NSURL *sourceURL;
+
+    /**
+     * Loading JavaScript code - uncomment the one you want.
+     *
+     * OPTION 1
+     * Load from development server. Start the server from the repository root:
+     *
+     * $ npm start
+     *
+     * To run on device, change `localhost` to the IP address of your computer
+     * (you can get this by typing `ifconfig` into the terminal and selecting the
+     * `inet` value under `en0:`) and make sure your computer and iOS device are
+     * on the same Wi-Fi network.
+     */
+
+    sourceURL = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle?dev=true"];
+
+    /**
+     * OPTION 2
+     * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
+     * to your Xcode project folder and run
+     *
+     * $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.includeRequire.runModule.bundle' -o main.jsbundle
+     *
+     * then add the `main.jsbundle` file to your project and uncomment this line:
+     */
+
+  //  sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  #if RUNNING_ON_CI
+     sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  #endif
+
+  return sourceURL;
+}
+
+- (void)loadSourceForBridge:(RCTBridge *)bridge
+                  withBlock:(RCTSourceLoadBlock)loadCallback
+{
+  [RCTJavaScriptLoader loadBundleAtURL:[self sourceURLForBridge:bridge]
+                            onComplete:loadCallback];
+}
+
 @end

Examples/UIExplorer/UIExplorerApp.android.js

@@ -18,34 +18,42 @@
 
 var React = require('react-native');
 var {
+  AppRegistry,
+  BackAndroid,
   Dimensions,
+  DrawerLayoutAndroid,
   StyleSheet,
+  ToolbarAndroid,
   View,
 } = React;
-var UIExplorerList = require('./UIExplorerList');
-
-// TODO: these should be exposed by the 'react-native' module.
-var DrawerLayoutAndroid = require('DrawerLayoutAndroid');
-var ToolbarAndroid = require('ToolbarAndroid');
+var UIExplorerList = require('./UIExplorerList.android');
 
 var DRAWER_WIDTH_LEFT = 56;
 
 var UIExplorerApp = React.createClass({
-
   getInitialState: function() {
     return {
-      example: {
-        title: 'UIExplorer',
-        component: this._renderHome(),
-      },
+      example: this._getUIExplorerHome(),
     };
   },
 
+  _getUIExplorerHome: function() {
+    return {
+      title: 'UIExplorer',
+      component: this._renderHome(),
+    };
+  },
+
+  componentWillMount: function() {
+    BackAndroid.addEventListener('hardwareBackPress', this._handleBackButtonPress);
+  },
+
   render: function() {
     return (
       <DrawerLayoutAndroid
         drawerPosition={DrawerLayoutAndroid.positions.Left}
         drawerWidth={Dimensions.get('window').width - DRAWER_WIDTH_LEFT}
+        keyboardDismissMode="on-drag"
         ref={(drawer) => { this.drawer = drawer; }}
         renderNavigationView={this._renderNavigationView}>
         {this._renderNavigation()}
@@ -64,14 +72,11 @@ var UIExplorerApp = React.createClass({
 
   onSelectExample: function(example) {
     this.drawer.closeDrawer();
-    if (example.title === 'UIExplorer') {
-      example.component = this._renderHome();
+    if (example.title === this._getUIExplorerHome().title) {
+      example = this._getUIExplorerHome();
     }
     this.setState({
-      example: {
-        title: example.title,
-        component: example.component,
-      },
+      example: example,
     });
   },
 
@@ -105,16 +110,16 @@ var UIExplorerApp = React.createClass({
     );
   },
 
+  _handleBackButtonPress: function() {
+    if (this.state.example.title !== this._getUIExplorerHome().title) {
+      this.onSelectExample(this._getUIExplorerHome());
+      return true;
+    }
+    return false;
+  },
 });
 
 var styles = StyleSheet.create({
-  messageText: {
-    fontSize: 17,
-    fontWeight: '500',
-    padding: 15,
-    marginTop: 50,
-    marginLeft: 15,
-  },
   container: {
     flex: 1,
   },
@@ -124,4 +129,6 @@ var styles = StyleSheet.create({
   },
 });
 
+AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
+
 module.exports = UIExplorerApp;

Examples/UIExplorer/UIExplorerIntegrationTests/IntegrationTests.m

@@ -26,11 +26,11 @@
 - (void)setUp
 {
 #if __LP64__
-  RCTAssert(false, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
+  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, @"Tests should be run on iOS 8.3, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
+  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
+  RCTAssert(version.majorVersion == 8 || version.minorVersion >= 3, @"Tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp", nil);
 }
 

Examples/UIExplorer/UIExplorerIntegrationTests/RCTUIManagerScenarioTests.m

@@ -45,12 +45,12 @@
 {
   [super setUp];
 
-  _uiManager = [[RCTUIManager alloc] init];
+  _uiManager = [RCTUIManager new];
 
   // Register 20 views to use in the tests
   for (NSInteger i = 1; i <= 20; i++) {
-    UIView *registeredView = [[UIView alloc] init];
-    [registeredView setReactTag:@(i)];
+    UIView *registeredView = [UIView new];
+    registeredView.reactTag = @(i);
     _uiManager.viewRegistry[i] = registeredView;
   }
 }
@@ -92,7 +92,7 @@
 
   NSArray *removeAtIndices = @[@0, @4, @8, @12, @16];
   for (NSNumber *index in removeAtIndices) {
-    NSNumber *reactTag = @([index integerValue] + 2);
+    NSNumber *reactTag = @(index.integerValue + 2);
     [removedViews addObject:_uiManager.viewRegistry[reactTag]];
   }
   for (NSInteger i = 2; i < 20; i++) {

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -32,11 +32,12 @@
 
 - (void)setUp
 {
-#ifdef __LP64__
-  RCTAssert(!__LP64__, @"Snapshot tests should be run on 32-bit device simulators (e.g. iPhone 5)");
+#if __LP64__
+  RCTAssert(NO, @"Tests should be run on 32-bit device simulators (e.g. iPhone 5)");
 #endif
-  NSString *version = [[UIDevice currentDevice] systemVersion];
-  RCTAssert([version isEqualToString:@"8.3"], @"Snapshot tests should be run on iOS 8.3, found %@", version);
+
+  NSOperatingSystemVersion version = [NSProcessInfo processInfo].operatingSystemVersion;
+  RCTAssert(version.majorVersion == 8 || version.minorVersion >= 3, @"Snapshot tests should be run on iOS 8.3+, found %zd.%zd.%zd", version.majorVersion, version.minorVersion, version.patchVersion);
   _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/UIExplorerApp.ios", nil);
   _runner.recordMode = NO;
 }

Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp.js

@@ -10,6 +10,8 @@
  */
 'use strict';
 
+require('regenerator/runtime');
+
 var React = require('react-native');
 
 var {

Examples/UIExplorer/UIExplorerIntegrationTests/js/LayoutEventsTest.js

@@ -51,8 +51,7 @@ var LayoutEventsTest = React.createClass({
       () => {
         debug('layout animation done.');
         this.checkLayout(this.addWrapText);
-      },
-      (error) => { throw new Error(JSON.stringify(error)); }
+      }
     );
     this.setState({viewStyle: {margin: 60}});
   },

Examples/UIExplorer/UIExplorerIntegrationTests/js/PromiseTest.js

@@ -17,13 +17,18 @@ var PromiseTest = React.createClass({
 
   shouldResolve: false,
   shouldReject: false,
+  shouldSucceedAsync: false,
+  shouldThrowAsync: false,
 
   componentDidMount() {
     Promise.all([
       this.testShouldResolve(),
       this.testShouldReject(),
+      this.testShouldSucceedAsync(),
+      this.testShouldThrowAsync(),
     ]).then(() => RCTTestModule.markTestPassed(
-      this.shouldResolve && this.shouldReject
+      this.shouldResolve && this.shouldReject &&
+      this.shouldSucceedAsync && this.shouldThrowAsync
     ));
   },
 
@@ -41,6 +46,24 @@ var PromiseTest = React.createClass({
       .catch(() => this.shouldReject = true);
   },
 
+  async testShouldSucceedAsync() {
+    try {
+      await RCTTestModule.shouldResolve();
+      this.shouldSucceedAsync = true;
+    } catch (e) {
+      this.shouldSucceedAsync = false;
+    }
+  },
+
+  async testShouldThrowAsync() {
+    try {
+      await RCTTestModule.shouldReject();
+      this.shouldThrowAsync = false;
+    } catch (e) {
+      this.shouldThrowAsync = true;
+    }
+  },
+
   render() {
     return <React.View />;
   }

Examples/UIExplorer/UIExplorerList.android.js

@@ -0,0 +1,99 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  StyleSheet,
+  View,
+} = React;
+var UIExplorerListBase = require('./UIExplorerListBase');
+
+var COMPONENTS = [
+  require('./ImageExample'),
+  require('./ProgressBarAndroidExample'),
+  require('./ScrollViewSimpleExample'),
+  require('./SwitchAndroidExample'),
+  require('./TextExample.android'),
+  require('./TextInputExample.android'),
+  require('./ToolbarAndroidExample'),
+  require('./TouchableExample'),
+  require('./ViewExample'),
+];
+
+var APIS = [
+  require('./AccessibilityAndroidExample.android'),
+  require('./BorderExample'),
+  require('./LayoutEventsExample'),
+  require('./LayoutExample'),
+  require('./PanResponderExample'),
+  require('./PointerEventsExample'),
+  require('./TimerExample'),
+  require('./ToastAndroidExample.android'),
+  require('./XHRExample'),
+];
+
+type Props = {
+  onSelectExample: Function,
+  isInDrawer: bool,
+};
+
+class UIExplorerList extends React.Component {
+  props: Props;
+
+  render() {
+    return (
+      <UIExplorerListBase
+        components={COMPONENTS}
+        apis={APIS}
+        searchText=""
+        renderAdditionalView={this.renderAdditionalView.bind(this)}
+        onPressRow={this.onPressRow.bind(this)}
+      />
+    );
+  }
+
+  renderAdditionalView(renderRow, renderTextInput): React.Component {
+    if (this.props.isInDrawer) {
+      var homePage = renderRow({
+        title: 'UIExplorer',
+        description: 'List of examples',
+      }, -1);
+      return (
+        <View>
+          {homePage}
+        </View>
+      );
+    }
+    return renderTextInput(styles.searchTextInput);
+  }
+
+  onPressRow(example: any) {
+    var Component = UIExplorerListBase.makeRenderable(example);
+    this.props.onSelectExample({
+      title: Component.title,
+      component: Component,
+    });
+  }
+}
+
+var styles = StyleSheet.create({
+  searchTextInput: {
+    padding: 2,
+  },
+});
+
+module.exports = UIExplorerList;

Examples/UIExplorer/UIExplorerList.ios.js

@@ -37,6 +37,7 @@ var COMPONENTS = [
   require('./ListViewGridLayoutExample'),
   require('./ListViewPagingExample'),
   require('./MapViewExample'),
+  require('./ModalExample'),
   require('./Navigator/NavigatorExample'),
   require('./NavigatorIOSColorsExample'),
   require('./NavigatorIOSExample'),
@@ -48,7 +49,7 @@ var COMPONENTS = [
   require('./SwitchIOSExample'),
   require('./TabBarIOSExample'),
   require('./TextExample.ios'),
-  require('./TextInputExample'),
+  require('./TextInputExample.ios'),
   require('./TouchableExample'),
   require('./ViewExample'),
   require('./WebViewExample'),
@@ -73,7 +74,8 @@ var APIS = [
   require('./StatusBarIOSExample'),
   require('./TimerExample'),
   require('./VibrationIOSExample'),
-  require('./XHRExample'),
+  require('./XHRExample.ios'),
+  require('./ImageEditingExample'),
 ];
 
 // Register suitable examples for snapshot tests
@@ -121,32 +123,6 @@ class UIExplorerList extends React.Component {
     );
   }
 
-  componentDidMount() {
-    var wasUIExplorer = false;
-    var didOpenExample = false;
-
-    this.props.navigator.navigationContext.addListener('didfocus', (event) => {
-      var isUIExplorer = event.data.route.title === 'UIExplorer';
-
-      if (!didOpenExample && isUIExplorer) {
-        didOpenExample = true;
-
-        var visibleExampleTitle = Settings.get('visibleExample');
-        if (visibleExampleTitle) {
-          var predicate = (example) => example.title === visibleExampleTitle;
-          var foundExample = APIS.find(predicate) || COMPONENTS.find(predicate);
-          if (foundExample) {
-            setTimeout(() => this._openExample(foundExample), 100);
-          }
-        } else if (!wasUIExplorer && isUIExplorer) {
-          Settings.set({visibleExample: null});
-        }
-      }
-
-      wasUIExplorer = isUIExplorer;
-    });
-  }
-
   renderAdditionalView(renderRow: Function, renderTextInput: Function): React.Component {
     return renderTextInput(styles.searchTextInput);
   }
@@ -169,7 +145,6 @@ class UIExplorerList extends React.Component {
   }
 
   onPressRow(example: any) {
-    Settings.set({visibleExample: example.title});
     this._openExample(example);
   }
 }

Examples/UIExplorer/UIExplorerList.js

@@ -1,344 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @flow
- */
-'use strict';
-
-var React = require('react-native');
-var {
-  AppRegistry,
-  ListView,
-  PixelRatio,
-  Platform,
-  Settings,
-  StyleSheet,
-  Text,
-  TextInput,
-  TouchableHighlight,
-  View,
-} = React;
-
-var { TestModule } = React.addons;
-
-import type { ExampleModule } from 'ExampleTypes';
-import type { NavigationContext } from 'NavigationContext';
-
-var createExamplePage = require('./createExamplePage');
-
-var COMMON_COMPONENTS = [
-  require('./ImageExample'),
-  require('./LayoutEventsExample'),
-  require('./ListViewExample'),
-  require('./ListViewGridLayoutExample'),
-  require('./ListViewPagingExample'),
-  require('./MapViewExample'),
-  require('./Navigator/NavigatorExample'),
-  require('./ScrollViewExample'),
-  require('./TextInputExample'),
-  require('./TouchableExample'),
-  require('./ViewExample'),
-  require('./WebViewExample'),
-];
-
-var COMMON_APIS = [
-  require('./AnimationExample/AnExApp'),
-  require('./GeolocationExample'),
-  require('./LayoutExample'),
-  require('./PanResponderExample'),
-  require('./PointerEventsExample'),
-];
-
-if (Platform.OS === 'ios') {
-  var COMPONENTS = COMMON_COMPONENTS.concat([
-    require('./ActivityIndicatorIOSExample'),
-    require('./DatePickerIOSExample'),
-    require('./NavigatorIOSColorsExample'),
-    require('./NavigatorIOSExample'),
-    require('./PickerIOSExample'),
-    require('./ProgressViewIOSExample'),
-    require('./SegmentedControlIOSExample'),
-    require('./SliderIOSExample'),
-    require('./SwitchIOSExample'),
-    require('./TabBarIOSExample'),
-    require('./TextExample.ios'),
-  ]);
-
-  var APIS = COMMON_APIS.concat([
-    require('./AccessibilityIOSExample'),
-    require('./ActionSheetIOSExample'),
-    require('./AdSupportIOSExample'),
-    require('./AlertIOSExample'),
-    require('./AppStateIOSExample'),
-    require('./AsyncStorageExample'),
-    require('./TransformExample'),
-    require('./BorderExample'),
-    require('./CameraRollExample.ios'),
-    require('./NetInfoExample'),
-    require('./PushNotificationIOSExample'),
-    require('./StatusBarIOSExample'),
-    require('./TimerExample'),
-    require('./VibrationIOSExample'),
-    require('./XHRExample'),
-  ]);
-
-} else if (Platform.OS === 'android') {
-  var COMPONENTS = COMMON_COMPONENTS.concat([
-  ]);
-
-  var APIS = COMMON_APIS.concat([
-  ]);
-}
-
-var ds = new ListView.DataSource({
-  rowHasChanged: (r1, r2) => r1 !== r2,
-  sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
-});
-
-function makeRenderable(example: any): ReactClass<any, any, any> {
-  return example.examples ?
-    createExamplePage(null, example) :
-    example;
-}
-
-// Register suitable examples for snapshot tests
-COMPONENTS.concat(APIS).forEach((Example) => {
-  if (Example.displayName) {
-    var Snapshotter = React.createClass({
-      componentDidMount: function() {
-        // View is still blank after first RAF :\
-        global.requestAnimationFrame(() =>
-          global.requestAnimationFrame(() => TestModule.verifySnapshot(
-            TestModule.markTestPassed
-          )
-        ));
-      },
-      render: function() {
-        var Renderable = makeRenderable(Example);
-        return <Renderable />;
-      },
-    });
-    AppRegistry.registerComponent(Example.displayName, () => Snapshotter);
-  }
-});
-
-type Props = {
-  navigator: {
-    navigationContext: NavigationContext,
-    push: (route: {title: string, component: ReactClass<any,any,any>}) => void,
-  },
-  onExternalExampleRequested: Function,
-  onSelectExample: Function,
-  isInDrawer: bool,
-};
-
-class UIExplorerList extends React.Component {
-  props: Props;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      dataSource: ds.cloneWithRowsAndSections({
-        components: COMPONENTS,
-        apis: APIS,
-      }),
-      searchText: Platform.OS === 'ios' ? Settings.get('searchText') : '',
-    };
-  }
-
-  componentWillMount() {
-    this.props.navigator.navigationContext.addListener('didfocus', function(event) {
-      if (event.data.route.title === 'UIExplorer') {
-        Settings.set({visibleExample: null});
-      }
-    });
-  }
-
-  componentDidMount() {
-    this._search(this.state.searchText);
-  }
-
-  render() {
-    if (Platform.OS === 'ios' ||
-      (Platform.OS === 'android' && !this.props.isInDrawer)) {
-      var platformTextInputStyle =
-        Platform.OS === 'ios' ? styles.searchTextInputIOS :
-        Platform.OS === 'android' ? styles.searchTextInputAndroid : {};
-      var textInput = (
-        <View style={styles.searchRow}>
-          <TextInput
-            autoCapitalize="none"
-            autoCorrect={false}
-            clearButtonMode="always"
-            onChangeText={this._search.bind(this)}
-            placeholder="Search..."
-            style={[styles.searchTextInput, platformTextInputStyle]}
-            testID="explorer_search"
-            value={this.state.searchText}
-          />
-        </View>);
-    }
-
-    var homePage;
-    if (Platform.OS === 'android' && this.props.isInDrawer) {
-      homePage = this._renderRow({
-        title: 'UIExplorer',
-        description: 'List of examples',
-      }, -1);
-    }
-
-    return (
-      <View style={styles.listContainer}>
-        {textInput}
-        {homePage}
-        <ListView
-          style={styles.list}
-          dataSource={this.state.dataSource}
-          renderRow={this._renderRow.bind(this)}
-          renderSectionHeader={this._renderSectionHeader}
-          keyboardShouldPersistTaps={true}
-          automaticallyAdjustContentInsets={false}
-          keyboardDismissMode="on-drag"
-        />
-      </View>
-    );
-  }
-
-  _renderSectionHeader(data: any, section: string) {
-    return (
-      <View style={styles.sectionHeader}>
-        <Text style={styles.sectionHeaderTitle}>
-          {section.toUpperCase()}
-        </Text>
-      </View>
-    );
-  }
-
-  _renderRow(example: any, i: number) {
-    return (
-      <View key={i}>
-        <TouchableHighlight onPress={() => this._onPressRow(example)}>
-          <View style={styles.row}>
-            <Text style={styles.rowTitleText}>
-              {example.title}
-            </Text>
-            <Text style={styles.rowDetailText}>
-              {example.description}
-            </Text>
-          </View>
-        </TouchableHighlight>
-        <View style={styles.separator} />
-      </View>
-    );
-  }
-
-  _search(text: mixed) {
-    var regex = new RegExp(text, 'i');
-    var filter = (component) => regex.test(component.title);
-
-    this.setState({
-      dataSource: ds.cloneWithRowsAndSections({
-        components: COMPONENTS.filter(filter),
-        apis: APIS.filter(filter),
-      }),
-      searchText: text,
-    });
-    Settings.set({searchText: text});
-  }
-
-  _openExample(example: any) {
-    if (example.external) {
-      this.props.onExternalExampleRequested(example);
-      return;
-    }
-
-    var Component = makeRenderable(example);
-    if (Platform.OS === 'ios') {
-      this.props.navigator.push({
-        title: Component.title,
-        component: Component,
-      });
-    } else if (Platform.OS === 'android') {
-      this.props.onSelectExample({
-        title: Component.title,
-        component: Component,
-      });
-    }
-  }
-
-  _onPressRow(example: any) {
-    Settings.set({visibleExample: example.title});
-    this._openExample(example);
-  }
-}
-
-var styles = StyleSheet.create({
-  listContainer: {
-    flex: 1,
-  },
-  list: {
-    backgroundColor: '#eeeeee',
-  },
-  sectionHeader: {
-    padding: 5,
-  },
-  group: {
-    backgroundColor: 'white',
-  },
-  sectionHeaderTitle: {
-    fontWeight: '500',
-    fontSize: 11,
-  },
-  row: {
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    paddingHorizontal: 15,
-    paddingVertical: 8,
-  },
-  separator: {
-    height: 1 / PixelRatio.get(),
-    backgroundColor: '#bbbbbb',
-    marginLeft: 15,
-  },
-  rowTitleText: {
-    fontSize: 17,
-    fontWeight: '500',
-  },
-  rowDetailText: {
-    fontSize: 15,
-    color: '#888888',
-    lineHeight: 20,
-  },
-  searchRow: {
-    backgroundColor: '#eeeeee',
-    paddingTop: 75,
-    paddingLeft: 10,
-    paddingRight: 10,
-    paddingBottom: 10,
-  },
-  searchTextInput: {
-    backgroundColor: 'white',
-    borderColor: '#cccccc',
-    borderRadius: 3,
-    borderWidth: 1,
-    paddingLeft: 8,
-  },
-  searchTextInputIOS: {
-    height: 30,
-  },
-  searchTextInputAndroid: {
-    padding: 2,
-  },
-});
-
-module.exports = UIExplorerList;

Examples/UIExplorer/UIExplorerUnitTests/RCTAllocationTests.m

@@ -17,6 +17,7 @@
 
 #import "RCTBridge.h"
 #import "RCTContextExecutor.h"
+#import "RCTModuleMethod.h"
 #import "RCTRootView.h"
 
 #define RUN_RUNLOOP_WHILE(CONDITION) \
@@ -41,15 +42,16 @@ _Pragma("clang diagnostic pop")
 @end
 
 @interface AllocationTestModule : NSObject<RCTBridgeModule, RCTInvalidating>
+
+@property (nonatomic, assign, getter=isValid) BOOL valid;
+
 @end
 
 @implementation AllocationTestModule
 
 RCT_EXPORT_MODULE();
 
-@synthesize valid = _valid;
-
-- (id)init
+- (instancetype)init
 {
   if ((self = [super init])) {
     _valid = YES;
@@ -62,6 +64,11 @@ RCT_EXPORT_MODULE();
   _valid = NO;
 }
 
+RCT_EXPORT_METHOD(test:(__unused NSString *)a
+                      :(__unused NSNumber *)b
+                      :(__unused RCTResponseSenderBlock)c
+                      :(__unused RCTResponseErrorBlock)d) {}
+
 @end
 
 @interface RCTAllocationTests : XCTestCase
@@ -75,6 +82,7 @@ RCT_EXPORT_MODULE();
   @autoreleasepool {
     RCTRootView *view = [[RCTRootView alloc] initWithBundleURL:nil
                                                     moduleName:@""
+                                             initialProperties:nil
                                                  launchOptions:nil];
     weakBridge = view.bridge;
     XCTAssertNotNil(weakBridge, @"RCTBridge should have been created");
@@ -86,7 +94,7 @@ RCT_EXPORT_MODULE();
 
 - (void)testModulesAreInvalidated
 {
-  AllocationTestModule *module = [[AllocationTestModule alloc] init];
+  AllocationTestModule *module = [AllocationTestModule new];
   @autoreleasepool {
     RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil
                                               moduleProvider:^{
@@ -97,10 +105,6 @@ RCT_EXPORT_MODULE();
     (void)bridge;
   }
 
-  /**
-   * Sleep on the main thread to allow js thread deallocations then run the runloop
-   * to allow the module to be deallocated on the main thread
-   */
   RUN_RUNLOOP_WHILE(module.isValid)
   XCTAssertFalse(module.isValid, @"AllocationTestModule should have been invalidated by the bridge");
 }
@@ -109,7 +113,7 @@ RCT_EXPORT_MODULE();
 {
   __weak AllocationTestModule *weakModule;
   @autoreleasepool {
-    AllocationTestModule *module = [[AllocationTestModule alloc] init];
+    AllocationTestModule *module = [AllocationTestModule new];
     RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil
                                 moduleProvider:^{
                                   return @[module];
@@ -124,6 +128,19 @@ RCT_EXPORT_MODULE();
   XCTAssertNil(weakModule, @"AllocationTestModule should have been deallocated");
 }
 
+- (void)testModuleMethodsAreDeallocated
+{
+  __weak RCTModuleMethod *weakMethod;
+  @autoreleasepool {
+    __autoreleasing RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:@"test:(NSString *)a :(nonnull NSNumber *)b :(RCTResponseSenderBlock)c :(RCTResponseErrorBlock)d" JSMethodName:@"" moduleClass:[AllocationTestModule class]];
+    weakMethod = method;
+    XCTAssertNotNil(method, @"RCTModuleMethod should have been created");
+  }
+
+  RUN_RUNLOOP_WHILE(weakMethod)
+  XCTAssertNil(weakMethod, @"RCTModuleMethod should have been deallocated");
+}
+
 - (void)testJavaScriptExecutorIsDeallocated
 {
   __weak id<RCTJavaScriptExecutor> weakExecutor;
@@ -162,15 +179,15 @@ RCT_EXPORT_MODULE();
   RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil
                                             moduleProvider:nil
                                              launchOptions:nil];
-  __weak id rootContentView;
+  __weak UIView *rootContentView;
   @autoreleasepool {
-    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@""];
+    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"" initialProperties:nil];
     RUN_RUNLOOP_WHILE(!(rootContentView = [rootView valueForKey:@"contentView"]))
-    XCTAssertTrue([rootContentView isValid], @"RCTContentView should be valid");
+    XCTAssertTrue(rootContentView.userInteractionEnabled, @"RCTContentView should be valid");
     (void)rootView;
   }
 
-  XCTAssertFalse([rootContentView isValid], @"RCTContentView should have been invalidated");
+  XCTAssertFalse(rootContentView.userInteractionEnabled, @"RCTContentView should have been invalidated");
 }
 
 - (void)testUnderlyingBridgeIsDeallocated

Examples/UIExplorer/UIExplorerUnitTests/RCTBridgeTests.m

@@ -120,10 +120,22 @@ RCT_EXPORT_MODULE(TestModule)
   [_bridge invalidate];
 }
 
+#define RUN_RUNLOOP_WHILE(CONDITION) \
+_Pragma("clang diagnostic push") \
+_Pragma("clang diagnostic ignored \"-Wshadow\"") \
+NSDate *timeout = [[NSDate date] dateByAddingTimeInterval:0.1]; \
+while ((CONDITION) && [timeout timeIntervalSinceNow] > 0) { \
+  [[NSRunLoop currentRunLoop] runMode:NSDefaultRunLoopMode beforeDate:timeout]; \
+} \
+_Pragma("clang diagnostic pop")
+
 - (void)testHookRegistration
 {
   TestExecutor *executor =  [_bridge.batchedBridge valueForKey:@"_javaScriptExecutor"];
-  NSString *injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"];
+
+  NSString *injectedStuff;
+  RUN_RUNLOOP_WHILE(!(injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+
   NSDictionary *moduleConfig = RCTJSONParse(injectedStuff, NULL);
   NSDictionary *remoteModuleConfig = moduleConfig[@"remoteModuleConfig"];
   NSDictionary *testModuleConfig = remoteModuleConfig[@"TestModule"];
@@ -142,7 +154,10 @@ RCT_EXPORT_MODULE(TestModule)
 - (void)testCallNativeMethod
 {
   TestExecutor *executor =  [_bridge.batchedBridge valueForKey:@"_javaScriptExecutor"];
-  NSString *injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"];
+
+  NSString *injectedStuff;
+  RUN_RUNLOOP_WHILE(!(injectedStuff = executor.injectedStuff[@"__fbBatchedBridgeConfig"]));
+
   NSDictionary *moduleConfig = RCTJSONParse(injectedStuff, NULL);
   NSDictionary *remoteModuleConfig = moduleConfig[@"remoteModuleConfig"];
   NSDictionary *testModuleConfig = remoteModuleConfig[@"TestModule"];
@@ -170,7 +185,7 @@ RCT_EXPORT_MODULE(TestModule)
 }
 
 RCT_EXPORT_METHOD(testMethod:(NSInteger)integer
-                  number:(NSNumber *)number
+                  number:(nonnull NSNumber *)number
                   string:(NSString *)string
                   dictionary:(NSDictionary *)dict
                   callback:(RCTResponseSenderBlock)callback)

Examples/UIExplorer/UIExplorerUnitTests/RCTCacheTests.m

@@ -37,7 +37,7 @@
 
 - (void)setUp
 {
-  self.cache = [[RCTCache alloc] init];
+  self.cache = [RCTCache new];
   self.cache.countLimit = 3;
   self.cache.totalCostLimit = 100;
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTContextExecutorTests.m

@@ -33,7 +33,7 @@
 - (void)setUp
 {
   [super setUp];
-  _executor = [[RCTContextExecutor alloc] init];
+  _executor = [RCTContextExecutor new];
   [_executor setUp];
 }
 
@@ -129,7 +129,7 @@ static uint64_t _get_time_nanoseconds(void)
   ";
 
   [_executor executeApplicationScript:script sourceURL:[NSURL URLWithString:@"http://localhost:8081/"] onComplete:^(__unused NSError *error) {
-    NSMutableArray *params = [[NSMutableArray alloc] init];
+    NSMutableArray *params = [NSMutableArray new];
     id data = @1;
     for (int i = 0; i < 4; i++) {
       double samples[runs / frequency];

Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_NSURLTests.m

@@ -26,8 +26,7 @@
 #define TEST_URL(name, _input, _expectedURL) \
 - (void)test_##name { \
   NSURL *result = [RCTConvert NSURL:_input]; \
-  NSURL *expected = (_expectedURL) ? [NSURL URLWithString:_expectedURL ?: @""] : nil; \
-  XCTAssertEqualObjects(result.absoluteURL, expected); \
+  XCTAssertEqualObjects(result.absoluteString, _expectedURL); \
 } \
 
 #define TEST_PATH(name, _input, _expectedPath) \
@@ -52,7 +51,9 @@ TEST_BUNDLE_PATH(imageAt2XPath, @"images/foo@2x.jpg",  @"images/foo@2x.jpg")
 TEST_BUNDLE_PATH(imageFile, @"foo.jpg",  @"foo.jpg")
 
 // User documents
-TEST_PATH(documentsFolder, @"~/Documents", [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject])
+TEST_PATH(documentsFolder, @"~/Documents",
+          [NSSearchPathForDirectoriesInDomains
+           (NSDocumentDirectory, NSUserDomainMask, YES) firstObject])
 
 // Remote files
 TEST_URL(fullURL, @"http://example.com/blah/hello.jsbundle", @"http://example.com/blah/hello.jsbundle")
@@ -61,6 +62,13 @@ TEST_URL(urlWithEncodedSpaces, @"http://example.com/blah%20blah/foo", @"http://e
 TEST_URL(imageURL, @"http://example.com/foo@2x.jpg",  @"http://example.com/foo@2x.jpg")
 TEST_URL(imageURLWithSpaces, @"http://example.com/blah foo@2x.jpg",  @"http://example.com/blah%20foo@2x.jpg")
 
+// Unicode
+TEST_URL(unicodeURL,
+         @"https://ru.wikipedia.org/wiki/\u0417\u0430\u0433\u043B\u0430\u0432"
+         "\u043D\u0430\u044F_\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430",
+         @"https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2"
+         "%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0")
+
 // Data URLs
 - (void)testDataURL
 {

Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_UIColorTests.m

@@ -0,0 +1,79 @@
+/**
+ * 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 "RCTConvert.h"
+
+@interface RCTConvert_UIColorTests : XCTestCase
+
+@end
+
+@implementation RCTConvert_UIColorTests
+
+#define XCTAssertEqualColors(color1, color2) do { \
+  CGFloat r1, g1, b1, a1; \
+  CGFloat r2, g2, b2, a2; \
+  XCTAssertTrue([(color1) getRed:&r1 green:&g1 blue:&b1 alpha:&a1] && \
+    [(color2) getRed:&r2 green:&g2 blue:&b2 alpha:&a2] && \
+    r1 == r2 && g1 == g2 && b1 == b2 && a1 == a2, \
+    @"rgba(%d, %d, %d, %.3f) != rgba(%d, %d, %d, %.3f)", \
+    (int)(r1 * 255), (int)(g1 * 255), (int)(b1 * 255), a1, \
+    (int)(r2 * 255), (int)(g2 * 255), (int)(b2 * 255), a2 \
+  ); \
+} while (0)
+
+- (void)testHex3
+{
+  UIColor *color = [RCTConvert UIColor:@"#333"];
+  UIColor *expected = [UIColor colorWithWhite:0.2 alpha:1.0];
+  XCTAssertEqualColors(color, expected);
+}
+
+- (void)testHex6
+{
+  UIColor *color = [RCTConvert UIColor:@"#666"];
+  UIColor *expected = [UIColor colorWithWhite:0.4 alpha:1.0];
+  XCTAssertEqualColors(color, expected);
+}
+
+- (void)testRGB
+{
+  UIColor *color = [RCTConvert UIColor:@"rgb(51, 102, 153)"];
+  UIColor *expected = [UIColor colorWithRed:0.2 green:0.4 blue:0.6 alpha:1.0];
+  XCTAssertEqualColors(color, expected);
+}
+
+- (void)testRGBA
+{
+  UIColor *color = [RCTConvert UIColor:@"rgba(51, 102, 153, 0.5)"];
+  UIColor *expected = [UIColor colorWithRed:0.2 green:0.4 blue:0.6 alpha:0.5];
+  XCTAssertEqualColors(color, expected);
+}
+
+- (void)testHSL
+{
+  UIColor *color = [RCTConvert UIColor:@"hsl(30, 50%, 50%)"];
+  UIColor *expected = [UIColor colorWithHue:30.0 / 360.0 saturation:0.5 brightness:0.5 alpha:1.0];
+  XCTAssertEqualColors(color, expected);
+}
+
+- (void)testHSLA
+{
+  UIColor *color = [RCTConvert UIColor:@"hsla(30, 50%, 50%, 0.5)"];
+  UIColor *expected = [UIColor colorWithHue:30.0 / 360.0 saturation:0.5 brightness:0.5 alpha:0.5];
+  XCTAssertEqualColors(color, expected);
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTConvert_UIFontTests.m

@@ -162,8 +162,8 @@
 - (void)testFamilyStyleAndWeight
 {
   {
-    UIFont *expected = [UIFont fontWithName:@"HelveticaNeue-UltraLightItalic" size:14];
-    UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Helvetica Neue", @"fontStyle": @"italic", @"fontWeight": @"100"}];
+    UIFont *expected = [UIFont fontWithName:@"HelveticaNeue-LightItalic" size:14];
+    UIFont *result = [RCTConvert UIFont:@{@"fontFamily": @"Helvetica Neue", @"fontStyle": @"italic", @"fontWeight": @"300"}];
     RCTAssertEqualFonts(expected, result);
   }
   {

Examples/UIExplorer/UIExplorerUnitTests/RCTEventDispatcherTests.m

@@ -61,10 +61,10 @@
   [super setUp];
 
   _bridge = [OCMockObject mockForClass:[RCTBridge class]];
-  _eventDispatcher = [[RCTEventDispatcher alloc] init];
+  _eventDispatcher = [RCTEventDispatcher new];
   ((id<RCTBridgeModule>)_eventDispatcher).bridge = _bridge;
 
-  _eventName = @"sampleEvent";
+  _eventName = RCTNormalizeInputEventName(@"sampleEvent");
   _body = @{ @"foo": @"bar" };
   _testEvent = [[RCTTestEvent alloc] initWithViewTag:nil
                                            eventName:_eventName
@@ -125,7 +125,7 @@
 
 - (void)testDifferentEventTypesDontCoalesce
 {
-  NSString *firstEventName = @"firstEvent";
+  NSString *firstEventName = RCTNormalizeInputEventName(@"firstEvent");
   RCTTestEvent *firstEvent = [[RCTTestEvent alloc] initWithViewTag:nil
                                                            eventName:firstEventName
                                                                 body:_body];

Examples/UIExplorer/UIExplorerUnitTests/RCTGzipTests.m

@@ -67,7 +67,7 @@ extern BOOL RCTIsGzippedData(NSData *data);
                           @"headers": @{@"Content-Encoding": @"gzip"},
                           };
 
-  RCTNetworking *networker = [[RCTNetworking alloc] init];
+  RCTNetworking *networker = [RCTNetworking new];
   __block NSURLRequest *request = nil;
   [networker buildRequest:query completionBlock:^(NSURLRequest *_request) {
     request = _request;

Examples/UIExplorer/UIExplorerUnitTests/RCTImageUtilTests.m

@@ -33,11 +33,11 @@ RCTAssertEqualPoints(a.origin, b.origin); \
 RCTAssertEqualSizes(a.size, b.size); \
 }
 
-@interface RCTClipRectTests : XCTestCase
+@interface RCTImageUtilTests : XCTestCase
 
 @end
 
-@implementation RCTClipRectTests
+@implementation RCTImageUtilTests
 
 - (void)testLandscapeSourceLandscapeTarget
 {
@@ -46,19 +46,19 @@ RCTAssertEqualSizes(a.size, b.size); \
 
   {
     CGRect expected = {CGPointZero, {100, 20}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleToFill);
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {CGPointZero, {100, 10}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {{-50, 0}, {200, 20}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -69,20 +69,20 @@ RCTAssertEqualSizes(a.size, b.size); \
   CGSize target = {100, 20};
 
   {
-    CGRect expected = {CGPointZero, {10, 20}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleToFill);
+    CGRect expected = {CGPointZero, {100, 20}};
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {CGPointZero, {2, 20}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
     RCTAssertEqualRects(expected, result);
   }
 
   {
-    CGRect expected = {{0, -49}, {10, 100}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect expected = {{0, -490}, {100, 1000}};
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -93,20 +93,20 @@ RCTAssertEqualSizes(a.size, b.size); \
   CGSize target = {20, 50};
 
   {
-    CGRect expected = {CGPointZero, {10, 50}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleToFill);
+    CGRect expected = {CGPointZero, {20, 50}};
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
     RCTAssertEqualRects(expected, result);
   }
 
   {
     CGRect expected = {CGPointZero, {5, 50}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFit);
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFit);
     RCTAssertEqualRects(expected, result);
   }
 
   {
-    CGRect expected = {{0, -37.5}, {10, 100}};
-    CGRect result = RCTClipRect(content, 2, target, 2, UIViewContentModeScaleAspectFill);
+    CGRect expected = {{0, -75}, {20, 200}};
+    CGRect result = RCTTargetRect(content, target, 2, UIViewContentModeScaleAspectFill);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -117,8 +117,8 @@ RCTAssertEqualSizes(a.size, b.size); \
   CGSize target = {20, 50};
 
   {
-    CGRect expected = {{0, -38}, {10, 100}};
-    CGRect result = RCTClipRect(content, 1, target, 1, UIViewContentModeScaleAspectFill);
+    CGRect expected = {{0, -75}, {20, 200}};
+    CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleAspectFill);
     RCTAssertEqualRects(expected, result);
   }
 }
@@ -129,7 +129,7 @@ RCTAssertEqualSizes(a.size, b.size); \
   CGSize target = {3, 3};
 
   CGRect expected = {CGPointZero, {3, 3}};
-  CGRect result = RCTClipRect(content, 2, target, 1, UIViewContentModeScaleToFill);
+  CGRect result = RCTTargetRect(content, target, 1, UIViewContentModeScaleToFill);
   RCTAssertEqualRects(expected, result);
 }
 

Examples/UIExplorer/UIExplorerUnitTests/RCTMethodArgumentTests.m

@@ -0,0 +1,144 @@
+/**
+ * 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 "RCTModuleMethod.h"
+
+@interface RCTMethodArgumentTests : XCTestCase
+
+@end
+
+@implementation RCTMethodArgumentTests
+
+extern void RCTParseObjCMethodName(NSString **objCMethodName, NSArray **argTypes);
+
+- (void)testOneArgument
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(NSInteger)foo";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:");
+  XCTAssertEqual(arguments.count, (NSUInteger)1);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSInteger");
+}
+
+- (void)testTwoArguments
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(NSInteger)foo bar:(BOOL)bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSInteger");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testSpaces
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo : (NSInteger)foo bar : (BOOL) bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSInteger");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testNewlines
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo : (NSInteger)foo\nbar : (BOOL) bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSInteger");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testUnnamedArgs
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(NSInteger)foo:(BOOL)bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo::");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSInteger");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testUntypedUnnamedArgs
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:foo:bar:bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:::");
+  XCTAssertEqual(arguments.count, (NSUInteger)3);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"id");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"id");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[2]).type, @"id");
+}
+
+- (void)testAttributes
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(__attribute__((nonnull)) NSString *)foo bar:(__unused BOOL)bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSString");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testNullability
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(nullable NSString *)foo bar:(nonnull NSNumber *)bar baz:(id)baz";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:baz:");
+  XCTAssertEqual(arguments.count, (NSUInteger)3);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSString");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"NSNumber");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[2]).type, @"id");
+  XCTAssertEqual(((RCTMethodArgument *)arguments[0]).nullability, RCTNullable);
+  XCTAssertEqual(((RCTMethodArgument *)arguments[1]).nullability, RCTNonnullable);
+  XCTAssertEqual(((RCTMethodArgument *)arguments[2]).nullability, RCTNullabilityUnspecified);
+}
+
+- (void)testSemicolonStripping
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(NSString *)foo bar:(BOOL)bar;";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSString");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"BOOL");
+}
+
+- (void)testUnused
+{
+  NSArray *arguments;
+  NSString *methodName = @"foo:(__unused NSString *)foo bar:(NSNumber *)bar";
+  RCTParseObjCMethodName(&methodName, &arguments);
+  XCTAssertEqualObjects(methodName, @"foo:bar:");
+  XCTAssertEqual(arguments.count, (NSUInteger)2);
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[0]).type, @"NSString");
+  XCTAssertEqualObjects(((RCTMethodArgument *)arguments[1]).type, @"NSNumber");
+  XCTAssertTrue(((RCTMethodArgument *)arguments[0]).unused);
+  XCTAssertFalse(((RCTMethodArgument *)arguments[1]).unused);
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleMethodTests.m

@@ -0,0 +1,124 @@
+/**
+ * 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 "RCTBridgeModule.h"
+#import "RCTModuleMethod.h"
+#import "RCTLog.h"
+
+static BOOL RCTLogsError(void (^block)(void))
+{
+  __block BOOL loggedError = NO;
+  RCTPerformBlockWithLogFunction(block, ^(RCTLogLevel level,
+                                          __unused NSString *fileName,
+                                          __unused NSNumber *lineNumber,
+                                          __unused NSString *message) {
+    loggedError = (level == RCTLogLevelError);
+  });
+  return loggedError;
+}
+
+@interface RCTModuleMethodTests : XCTestCase <RCTBridgeModule>
+
+@end
+
+@implementation RCTModuleMethodTests
+{
+  CGRect _s;
+}
+
++ (NSString *)moduleName { return nil; }
+
+- (void)doFooWithBar:(__unused NSString *)bar { }
+
+- (void)testNonnull
+{
+  NSString *methodName = @"doFooWithBar:(nonnull NSString *)bar";
+  RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                               JSMethodName:nil
+                                                                moduleClass:[self class]];
+  XCTAssertFalse(RCTLogsError(^{
+    [method invokeWithBridge:nil module:self arguments:@[@"Hello World"]];
+  }));
+
+  XCTAssertTrue(RCTLogsError(^{
+    [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
+  }));
+}
+
+- (void)doFooWithNumber:(__unused NSNumber *)n { }
+- (void)doFooWithDouble:(__unused double)n { }
+- (void)doFooWithInteger:(__unused NSInteger)n { }
+- (void)doFooWithCGRect:(CGRect)s { _s = s; }
+
+- (void)testNumbersNonnull
+{
+  {
+    // Specifying an NSNumber param without nonnull isn't allowed
+    XCTAssertTrue(RCTLogsError(^{
+      NSString *methodName = @"doFooWithNumber:(NSNumber *)n";
+      RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                                   JSMethodName:nil
+                                                                    moduleClass:[self class]];
+      // Invoke method to trigger parsing
+      [method invokeWithBridge:nil module:self arguments:@[@1]];
+    }));
+  }
+
+  {
+    NSString *methodName = @"doFooWithNumber:(nonnull NSNumber *)n";
+    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                                 JSMethodName:nil
+                                                                  moduleClass:[self class]];
+    XCTAssertTrue(RCTLogsError(^{
+      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
+    }));
+  }
+
+  {
+    NSString *methodName = @"doFooWithDouble:(double)n";
+    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                                 JSMethodName:nil
+                                                                  moduleClass:[self class]];
+    XCTAssertTrue(RCTLogsError(^{
+      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
+    }));
+  }
+
+  {
+    NSString *methodName = @"doFooWithInteger:(NSInteger)n";
+    RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                                 JSMethodName:nil
+                                                                  moduleClass:[self class]];
+    XCTAssertTrue(RCTLogsError(^{
+      [method invokeWithBridge:nil module:self arguments:@[[NSNull null]]];
+    }));
+  }
+}
+
+- (void)testStructArgument
+{
+  NSString *methodName = @"doFooWithCGRect:(CGRect)s";
+  RCTModuleMethod *method = [[RCTModuleMethod alloc] initWithObjCMethodName:methodName
+                                                               JSMethodName:nil
+                                                                moduleClass:[self class]];
+
+  CGRect r = CGRectMake(10, 20, 30, 40);
+  [method invokeWithBridge:nil module:self arguments:@[@[@10, @20, @30, @40]]];
+  XCTAssertTrue(CGRectEqualToRect(r, _s));
+}
+
+@end

Examples/UIExplorer/UIExplorerUnitTests/RCTShadowViewTests.m

@@ -99,7 +99,7 @@
 
 - (RCTShadowView *)_shadowViewWithStyle:(void(^)(css_style_t *style))styleBlock
 {
-  RCTShadowView *shadowView = [[RCTShadowView alloc] init];
+  RCTShadowView *shadowView = [RCTShadowView new];
 
   css_style_t style = shadowView.cssNode->style;
   styleBlock(&style);

Examples/UIExplorer/UIExplorerUnitTests/RCTSparseArrayTests.m

@@ -25,13 +25,13 @@
 
 - (void)testDictionary
 {
-  NSObject<RCTViewNodeProtocol> *myView = [[UIView alloc] init];
+  id<RCTComponent> myView = [UIView new];
   myView.reactTag = @4;
 
-  NSObject<RCTViewNodeProtocol> *myOtherView = [[UIView alloc] init];
+  id<RCTComponent> myOtherView = [UIView new];
   myOtherView.reactTag = @5;
 
-  RCTSparseArray *registry = [[RCTSparseArray alloc] init];
+  RCTSparseArray *registry = [RCTSparseArray new];
   XCTAssertNil(registry[@4], @"how did you have a view when none are registered?");
   XCTAssertNil(registry[@5], @"how did you have a view when none are registered?");
 

Examples/UIExplorer/UIExplorerUnitTests/RCTUIManagerTests.m

@@ -44,12 +44,12 @@
 {
   [super setUp];
 
-  _uiManager = [[RCTUIManager alloc] init];
+  _uiManager = [RCTUIManager new];
 
   // Register 20 views to use in the tests
   for (NSInteger i = 1; i <= 20; i++) {
-    UIView *registeredView = [[UIView alloc] init];
-    [registeredView setReactTag:@(i)];
+    UIView *registeredView = [UIView new];
+    registeredView.reactTag = @(i);
     _uiManager.viewRegistry[i] = registeredView;
   }
 }
@@ -91,7 +91,7 @@
 
   NSArray *removeAtIndices = @[@0, @4, @8, @12, @16];
   for (NSNumber *index in removeAtIndices) {
-    NSNumber *reactTag = @([index integerValue] + 2);
+    NSNumber *reactTag = @(index.integerValue + 2);
     [removedViews addObject:_uiManager.viewRegistry[reactTag]];
   }
   for (NSInteger i = 2; i < 20; i++) {

Examples/UIExplorer/XHRExample.android.js

@@ -0,0 +1,326 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  PixelRatio,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableHighlight,
+  View,
+} = React;
+
+// TODO t7093728 This is a simlified XHRExample.ios.js.
+// Once we have Camera roll, Toast, Intent (for opening URLs)
+// we should make this consistent with iOS.
+
+class Downloader extends React.Component {
+
+  xhr: XMLHttpRequest;
+  cancelled: boolean;
+
+  constructor(props) {
+    super(props);
+    this.cancelled = false;
+    this.state = {
+      status: '',
+      contentSize: 1,
+      downloaded: 0,
+    };
+  }
+
+  download() {
+    this.xhr && this.xhr.abort();
+
+    var xhr = this.xhr || new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === xhr.HEADERS_RECEIVED) {
+        var contentSize = parseInt(xhr.getResponseHeader('Content-Length'), 10);
+        this.setState({
+          contentSize: contentSize,
+          downloaded: 0,
+        });
+      } else if (xhr.readyState === xhr.LOADING) {
+        this.setState({
+          downloaded: xhr.responseText.length,
+        });
+        console.log(xhr.responseText.length);
+      } else if (xhr.readyState === xhr.DONE) {
+        if (this.cancelled) {
+          this.cancelled = false;
+          return;
+        }
+        if (xhr.status === 200) {
+          this.setState({
+            status: 'Download complete!',
+          });
+        } else if (xhr.status !== 0) {
+          this.setState({
+            status: 'Error: Server returned HTTP status of ' + xhr.status + ' ' + xhr.responseText,
+          });
+        } else {
+          this.setState({
+            status: 'Error: ' + xhr.responseText,
+          });
+        }
+      }
+    };
+    xhr.open('GET', 'http://www.gutenberg.org/cache/epub/100/pg100.txt');
+    xhr.send();
+    this.xhr = xhr;
+
+    this.setState({status: 'Downloading...'});
+  }
+
+  componentWillUnmount() {
+    this.cancelled = true;
+    this.xhr && this.xhr.abort();
+  }
+
+  render() {
+    var button = this.state.status === 'Downloading...' ? (
+      <View style={styles.wrapper}>
+        <View style={styles.button}>
+          <Text>...</Text>
+        </View>
+      </View>
+    ) : (
+      <TouchableHighlight
+        style={styles.wrapper}
+        onPress={this.download.bind(this)}>
+        <View style={styles.button}>
+         <Text>Download 5MB Text File</Text>
+        </View>
+      </TouchableHighlight>
+    );
+
+    return (
+      <View>
+        {button}
+        <Text>{this.state.status}</Text>
+      </View>
+    );
+  }
+}
+
+class FormUploader extends React.Component {
+
+  _isMounted: boolean;
+  _addTextParam: () => void;
+  _upload: () => void;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isUploading: false,
+      uploadProgress: null,
+      textParams: [],
+    };
+    this._isMounted = true;
+    this._addTextParam = this._addTextParam.bind(this);
+    this._upload = this._upload.bind(this);
+  }
+
+  _addTextParam() {
+    var textParams = this.state.textParams;
+    textParams.push({name: '', value: ''});
+    this.setState({textParams});
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  _onTextParamNameChange(index, text) {
+    var textParams = this.state.textParams;
+    textParams[index].name = text;
+    this.setState({textParams});
+  }
+
+  _onTextParamValueChange(index, text) {
+    var textParams = this.state.textParams;
+    textParams[index].value = text;
+    this.setState({textParams});
+  }
+
+  _upload() {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', 'http://posttestserver.com/post.php');
+    xhr.onload = () => {
+      this.setState({isUploading: false});
+      if (xhr.status !== 200) {
+        console.log(
+          'Upload failed',
+          'Expected HTTP 200 OK response, got ' + xhr.status
+        );
+        return;
+      }
+      if (!xhr.responseText) {
+        console.log(
+          'Upload failed',
+          'No response payload.'
+        );
+        return;
+      }
+      var index = xhr.responseText.indexOf('http://www.posttestserver.com/');
+      if (index === -1) {
+        console.log(
+          'Upload failed',
+          'Invalid response payload.'
+        );
+        return;
+      }
+      var url = xhr.responseText.slice(index).split('\n')[0];
+      console.log('Upload successful: ' + url);
+    };
+    var formdata = new FormData();
+    this.state.textParams.forEach(
+      (param) => formdata.append(param.name, param.value)
+    );
+    if (xhr.upload) {
+      xhr.upload.onprogress = (event) => {
+        console.log('upload onprogress', event);
+        if (event.lengthComputable) {
+          this.setState({uploadProgress: event.loaded / event.total});
+        }
+      };
+    }
+    xhr.send(formdata);
+    this.setState({isUploading: true});
+  }
+
+  render() {
+    var textItems = this.state.textParams.map((item, index) => (
+      <View style={styles.paramRow}>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChangeText={this._onTextParamNameChange.bind(this, index)}
+          placeholder="name..."
+          style={styles.textInput}
+        />
+        <Text style={styles.equalSign}>=</Text>
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          onChangeText={this._onTextParamValueChange.bind(this, index)}
+          placeholder="value..."
+          style={styles.textInput}
+        />
+      </View>
+    ));
+    var uploadButtonLabel = this.state.isUploading ? 'Uploading...' : 'Upload';
+    var uploadProgress = this.state.uploadProgress;
+    if (uploadProgress !== null) {
+      uploadButtonLabel += ' ' + Math.round(uploadProgress * 100) + '%';
+    }
+    var uploadButton = (
+      <View style={styles.uploadButtonBox}>
+        <Text style={styles.uploadButtonLabel}>{uploadButtonLabel}</Text>
+      </View>
+    );
+    if (!this.state.isUploading) {
+      uploadButton = (
+        <TouchableHighlight onPress={this._upload}>
+          {uploadButton}
+        </TouchableHighlight>
+      );
+    }
+    return (
+      <View>
+        {textItems}
+        <View>
+          <Text
+            style={[styles.textButton, styles.addTextParamButton]}
+            onPress={this._addTextParam}>
+            Add a text param
+          </Text>
+        </View>
+        <View style={styles.uploadButton}>
+          {uploadButton}
+        </View>
+      </View>
+    );
+  }
+}
+
+
+exports.framework = 'React';
+exports.title = 'XMLHttpRequest';
+exports.description = 'XMLHttpRequest';
+exports.examples = [{
+  title: 'File Download',
+  render() {
+    return <Downloader/>;
+  }
+}, {
+  title: 'multipart/form-data Upload',
+  render() {
+    return <FormUploader/>;
+  }
+}];
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 8,
+  },
+  paramRow: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    alignItems: 'center',
+    borderBottomWidth: 1 / PixelRatio.get(),
+    borderBottomColor: 'grey',
+  },
+  textButton: {
+    color: 'blue',
+  },
+  addTextParamButton: {
+    marginTop: 8,
+  },
+  textInput: {
+    flex: 1,
+    borderRadius: 3,
+    borderColor: 'grey',
+    borderWidth: 1,
+    height: 30,
+    paddingLeft: 8,
+  },
+  equalSign: {
+    paddingHorizontal: 4,
+  },
+  uploadButton: {
+    marginTop: 16,
+  },
+  uploadButtonBox: {
+    flex: 1,
+    paddingVertical: 12,
+    alignItems: 'center',
+    backgroundColor: 'blue',
+    borderRadius: 4,
+  },
+  uploadButtonLabel: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

Examples/UIExplorer/XHRExample.ios.js

@@ -144,7 +144,6 @@ class FormUploader extends React.Component {
     CameraRoll.getPhotos(
       {first: PAGE_SIZE},
       (data) => {
-        console.log('isMounted', this._isMounted);
         if (!this._isMounted) {
           return;
         }