[Website] Load React Native Web Player from MaxCDN.

Reviewed By: majak

Differential Revision: D3682745

fbshipit-source-id: 108ff292aa79765d8e5bb7fc364717eba662c0ea

.eslintrc

@@ -21,6 +21,7 @@
     "__fbBatchedBridgeConfig": false,
     "alert": false,
     "cancelAnimationFrame": false,
+    "cancelIdleCallback": false,
     "clearImmediate": true,
     "clearInterval": false,
     "clearTimeout": false,
@@ -40,6 +41,7 @@
     "process": false,
     "Promise": true,
     "requestAnimationFrame": true,
+    "requestIdleCallback": true,
     "require": false,
     "Set": true,
     "setImmediate": true,

.flowconfig

@@ -1,7 +1,7 @@
 [ignore]
 
 # We fork some components by platform.
-.*/*.android.js
+.*/*[.]android.js
 
 # Ignore templates with `@flow` in header
 .*/local-cli/generator.*
@@ -9,6 +9,21 @@
 # Ignore malformed json
 .*/node_modules/y18n/test/.*\.json
 
+# Ignore the website subdir
+<PROJECT_ROOT>/website/.*
+
+# Ignore BUCK generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+# Ignore unexpected extra @providesModule
+.*/node_modules/commoner/test/source/widget/share.js
+
+# Ignore duplicate module providers
+# For RN Apps installed via npm, "Libraries" folder is inside node_modules/react-native but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+.*/node_modules/jest-runtime/build/__tests__/.*
+
 [include]
 
 [libs]
@@ -32,9 +47,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(30\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(30\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
+unsafe.enable_getters_and_setters=true
+
 [version]
-^0.27.0
+^0.30.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
 
-(You can skip this if you're fixing a typo or adding an app to the Showcase.)
+> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
 
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 

CONTRIBUTING.md

@@ -14,14 +14,14 @@ We will do our best to keep `master` in good shape, with tests passing at all ti
 
 The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
 
-Please submit your pull request on the *master* branch. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.
+**Please submit your pull request on the `master` branch**. If the fix is critical and should be included in a stable branch please mention it and it will be cherry picked into it.
 
 *Before* submitting a pull request, please make sure the following is done…
 
 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
 
     ```
     $ cd website
@@ -101,7 +101,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 #### JSX
 
-* Prefer `'` over `"` for string literal props
+* Prefer `"` over `'` for string literal props
 * When wrapping opening tags over multiple lines, place one prop per line
 * `{}` of props should hug their values (no spaces)
 * Place the closing `>` of opening tags on the same line as the last prop

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -14,6 +14,8 @@
 		1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1461632C1AC3E22900C2F5AD /* libReact.a */; };
 		5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5F82F1771B85784500FAE87E /* libRCTWebSocket.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */; };
+		E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D7561D4EE534000B7DA8 /* libRCTImage.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -38,6 +40,20 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
+			remoteInfo = RCTNetwork;
+		};
+		E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
+			remoteInfo = RCTImage;
+		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -51,6 +67,8 @@
 		146163271AC3E22900C2F5AD /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = ../../React/React.xcodeproj; sourceTree = "<group>"; };
 		5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
+		E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
+		E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -58,6 +76,8 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				E730D7571D4EE538000B7DA8 /* libRCTImage.a in Frameworks */,
+				E730D7501D4EE4E2000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5F82F1781B85785200FAE87E /* libRCTWebSocket.a in Frameworks */,
 				1461632D1AC3E23900C2F5AD /* libReact.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
@@ -99,6 +119,8 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */,
+				E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */,
 				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
@@ -133,6 +155,22 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		E730D7481D4EE4D0000B7DA8 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		E730D7521D4EE534000B7DA8 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				E730D7561D4EE534000B7DA8 /* libRCTImage.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -143,6 +181,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				68ACCCD51D2BE2D2008E368A /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -174,6 +213,14 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
+				{
+					ProductGroup = E730D7521D4EE534000B7DA8 /* Products */;
+					ProjectRef = E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */;
+				},
+				{
+					ProductGroup = E730D7481D4EE4D0000B7DA8 /* Products */;
+					ProjectRef = E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */;
+				},
 				{
 					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
 					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -216,6 +263,20 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		E730D74C1D4EE4D0000B7DA8 /* libRCTNetwork.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTNetwork.a;
+			remoteRef = E730D74B1D4EE4D0000B7DA8 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		E730D7561D4EE534000B7DA8 /* libRCTImage.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTImage.a;
+			remoteRef = E730D7551D4EE534000B7DA8 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 /* End PBXReferenceProxy section */
 
 /* Begin PBXResourcesBuildPhase section */
@@ -230,6 +291,23 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
+/* Begin PBXShellScriptBuildPhase section */
+		68ACCCD51D2BE2D2008E368A /* Run Script */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Script";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/2048/Game2048.js\n";
+		};
+/* End PBXShellScriptBuildPhase section */
+
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

Examples/2048/2048/AppDelegate.m

@@ -14,41 +14,14 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
-
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios&dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-   * to your Xcode project folder in the terminal, and run
-   *
-   * $ curl 'http://localhost:8081/Examples/2048/Game2048.bundle?platform=ios' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/2048/Game2048" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"Game2048"

Examples/Movies/MovieCell.js

@@ -31,8 +31,8 @@ var getStyleFromScore = require('./getStyleFromScore');
 var getImageSource = require('./getImageSource');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieCell = React.createClass({
-  render: function() {
+class MovieCell extends React.Component {
+  render() {
     var criticsScore = this.props.movie.ratings.critics_score;
     var TouchableElement = TouchableHighlight;
     if (Platform.OS === 'android') {
@@ -66,7 +66,7 @@ var MovieCell = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   textContainer: {

Examples/Movies/MovieScreen.js

@@ -29,8 +29,8 @@ var getImageSource = require('./getImageSource');
 var getStyleFromScore = require('./getStyleFromScore');
 var getTextFromScore = require('./getTextFromScore');
 
-var MovieScreen = React.createClass({
-  render: function() {
+class MovieScreen extends React.Component {
+  render() {
     return (
       <ScrollView contentContainerStyle={styles.contentContainer}>
         <View style={styles.mainSection}>
@@ -57,11 +57,11 @@ var MovieScreen = React.createClass({
         <Cast actors={this.props.movie.abridged_cast} />
       </ScrollView>
     );
-  },
-});
+  }
+}
 
-var Ratings = React.createClass({
-  render: function() {
+class Ratings extends React.Component {
+  render() {
     var criticsScore = this.props.ratings.critics_score;
     var audienceScore = this.props.ratings.audience_score;
 
@@ -81,11 +81,11 @@ var Ratings = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var Cast = React.createClass({
-  render: function() {
+class Cast extends React.Component {
+  render() {
     if (!this.props.actors) {
       return null;
     }
@@ -100,8 +100,8 @@ var Cast = React.createClass({
         )}
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   contentContainer: {

Examples/Movies/Movies.xcodeproj/project.pbxproj

@@ -200,6 +200,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				68ACCCEE1D2BE57F008E368A /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -320,6 +321,22 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
+/* Begin PBXShellScriptBuildPhase section */
+		68ACCCEE1D2BE57F008E368A /* ShellScript */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/Movies/MoviesApp.ios.js\n";
+		};
+/* End PBXShellScriptBuildPhase section */
+
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

Examples/Movies/Movies/AppDelegate.m

@@ -14,6 +14,7 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"
 
@@ -21,35 +22,7 @@
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
-
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-   * to your Xcode project folder in the terminal, and run
-   *
-   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/Movies/MoviesApp.ios" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"MoviesApp"

Examples/Movies/MoviesApp.android.js

@@ -65,8 +65,8 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
   }
 };
 
-var MoviesApp = React.createClass({
-  render: function() {
+class MoviesApp extends React.Component {
+  render() {
     var initialRoute = {name: 'search'};
     return (
       <Navigator
@@ -77,7 +77,7 @@ var MoviesApp = React.createClass({
       />
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/Movies/MoviesApp.ios.js

@@ -26,8 +26,8 @@ var {
 
 var SearchScreen = require('./SearchScreen');
 
-var MoviesApp = React.createClass({
-  render: function() {
+class MoviesApp extends React.Component {
+  render() {
     return (
       <NavigatorIOS
         style={styles.container}
@@ -38,7 +38,7 @@ var MoviesApp = React.createClass({
       />
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/Movies/SearchBar.android.js

@@ -30,8 +30,8 @@ var {
 
 var IS_RIPPLE_EFFECT_SUPPORTED = Platform.Version >= 21;
 
-var SearchBar = React.createClass({
-  render: function() {
+class SearchBar extends React.Component {
+  render() {
     var background = IS_RIPPLE_EFFECT_SUPPORTED ?
       TouchableNativeFeedback.SelectableBackgroundBorderless() :
       TouchableNativeFeedback.SelectableBackground();
@@ -67,7 +67,7 @@ var SearchBar = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   searchBar: {

Examples/Movies/SearchBar.ios.js

@@ -25,8 +25,8 @@ var {
   View,
 } = ReactNative;
 
-var SearchBar = React.createClass({
-  render: function() {
+class SearchBar extends React.Component {
+  render() {
     return (
       <View style={styles.searchBar}>
         <TextInput
@@ -44,7 +44,7 @@ var SearchBar = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   searchBar: {

Examples/Movies/SearchScreen.js

@@ -318,8 +318,8 @@ var SearchScreen = React.createClass({
   },
 });
 
-var NoMovies = React.createClass({
-  render: function() {
+class NoMovies extends React.Component {
+  render() {
     var text = '';
     if (this.props.filter) {
       text = `No results for "${this.props.filter}"`;
@@ -335,7 +335,7 @@ var NoMovies = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -16,6 +16,7 @@
 		58C572511AA6229D00CDF9C8 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58C5724D1AA6224400CDF9C8 /* libRCTText.a */; };
 		5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5FF8942D1B8556F8007731BE /* libRCTWebSocket.a */; };
 		832044981B492C2500E297FC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832044951B492C1E00E297FC /* libRCTSettings.a */; };
+		E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -54,6 +55,13 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTSettings;
 		};
+		E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
+			remoteInfo = RCTNetwork;
+		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -69,6 +77,7 @@
 		587650DA1A9EB0DB008B8F17 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = ../../Libraries/WebSocket/RCTWebSocket.xcodeproj; sourceTree = "<group>"; };
 		8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = ../../Libraries/Settings/RCTSettings.xcodeproj; sourceTree = "<group>"; };
+		E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -76,6 +85,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				E730D7731D4EE604000B7DA8 /* libRCTNetwork.a in Frameworks */,
 				5FF8942E1B85571A007731BE /* libRCTWebSocket.a in Frameworks */,
 				144C5F691AC3E5E300B004E7 /* libReact.a in Frameworks */,
 				1341803E1AA91802003F314A /* libRCTImage.a in Frameworks */,
@@ -119,6 +129,7 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */,
 				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
@@ -171,6 +182,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		E730D7691D4EE5FC000B7DA8 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -181,6 +200,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				681C70ED1D2BE73C00E71791 /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -216,6 +236,10 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
+				{
+					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
+					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
+				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -276,6 +300,13 @@
 			remoteRef = 832044941B492C1E00E297FC /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTNetwork.a;
+			remoteRef = E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 /* End PBXReferenceProxy section */
 
 /* Begin PBXResourcesBuildPhase section */
@@ -290,6 +321,22 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
+/* Begin PBXShellScriptBuildPhase section */
+		681C70ED1D2BE73C00E71791 /* ShellScript */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/TicTacToe/TicTacToeApp.js\n";
+		};
+/* End PBXShellScriptBuildPhase section */
+
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

Examples/TicTacToe/TicTacToe/AppDelegate.m

@@ -14,41 +14,14 @@
 
 #import "AppDelegate.h"
 
+#import "RCTBundleURLProvider.h"
 #import "RCTRootView.h"
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
-  NSURL *jsCodeLocation;
-
-  /**
-   * Loading JavaScript code - uncomment the one you want.
-   *
-   * OPTION 1
-   * Load from development server. Start the server from the repository root:
-   *
-   * $ npm start
-   *
-   * To run on device, change `localhost` to the IP address of your computer
-   * (you can get this by typing `ifconfig` into the terminal and selecting the
-   * `inet` value under `en0:`) and make sure your computer and iOS device are
-   * on the same Wi-Fi network.
-   */
-
-  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios&dev=true"];
-
-  /**
-   * OPTION 2
-   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-   * to your Xcode project folder in the terminal, and run
-   *
-   * $ curl 'http://localhost:8081/Examples/TicTacToe/TicTacToeApp.bundle?platform=ios' -o main.jsbundle
-   *
-   * then add the `main.jsbundle` file to your project and uncomment this line:
-   */
-
-//  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/TicTacToe/TicTacToeApp" fallbackResource:nil];
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                       moduleName:@"TicTacToeApp"

Examples/TicTacToe/TicTacToeApp.js

@@ -94,8 +94,8 @@ class Board {
   }
 }
 
-var Cell = React.createClass({
-  cellStyle() {
+class Cell extends React.Component {
+  cellStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellX;
@@ -104,9 +104,9 @@ var Cell = React.createClass({
       default:
         return null;
     }
-  },
+  };
 
-  textStyle() {
+  textStyle = () => {
     switch (this.props.player) {
       case 1:
         return styles.cellTextX;
@@ -115,9 +115,9 @@ var Cell = React.createClass({
       default:
         return {};
     }
-  },
+  };
 
-  textContents() {
+  textContents = () => {
     switch (this.props.player) {
       case 1:
         return 'X';
@@ -126,7 +126,7 @@ var Cell = React.createClass({
       default:
         return '';
     }
-  },
+  };
 
   render() {
     return (
@@ -142,9 +142,9 @@ var Cell = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-var GameEndOverlay = React.createClass({
+class GameEndOverlay extends React.Component {
   render() {
     var board = this.props.board;
 
@@ -175,7 +175,7 @@ var GameEndOverlay = React.createClass({
       </View>
     );
   }
-});
+}
 
 var TicTacToeApp = React.createClass({
   getInitialState() {

Examples/UIExplorer/ToastAndroidExample.android.js

@@ -1,70 +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');
-var ReactNative = require('react-native');
-var {
-  StyleSheet,
-  Text,
-  ToastAndroid,
-  TouchableWithoutFeedback,
-} = ReactNative;
-
-var UIExplorerBlock = require('UIExplorerBlock');
-var UIExplorerPage = require('UIExplorerPage');
-
-var ToastExample = React.createClass({
-
-  statics: {
-    title: 'Toast Example',
-    description: 'Example that demonstrates the use of an Android Toast to provide feedback.',
-  },
-
-  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/UIExplorer.xcodeproj/project.pbxproj

@@ -13,7 +13,6 @@
 		1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1861C04AB9F0091BED0 /* flux@3x.png */; };
 		1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1871C04AB9F0091BED0 /* hawk.png */; };
 		1323F18C1C04AB9F0091BED0 /* uie_thumb_big.png in Resources */ = {isa = PBXBuildFile; fileRef = 1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */; };
-		1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */ = {isa = PBXBuildFile; fileRef = 1323F18E1C04ABEB0091BED0 /* Thumbnails */; };
 		13417FE91AA91432003F314A /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FE81AA91428003F314A /* libRCTImage.a */; };
 		134180011AA9153C003F314A /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 13417FEF1AA914B8003F314A /* libRCTText.a */; };
 		1341802C1AA9178B003F314A /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1341802B1AA91779003F314A /* libRCTNetwork.a */; };
@@ -63,7 +62,9 @@
 		27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */; };
 		27F441EC1BEBE5030039B79C /* FlexibleSizeExampleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */; };
 		3578590A1B28D2CF00341EDB /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 357859011B28D2C500341EDB /* libRCTLinking.a */; };
+		3D299BAF1D33EBFA00FA1057 /* RCTLoggingTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3D299BAE1D33EBFA00FA1057 /* RCTLoggingTests.m */; };
 		3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */; };
+		3DD981D61D33C6FB007DC7BE /* TestBundle.js in Resources */ = {isa = PBXBuildFile; fileRef = 3DD981D51D33C6FB007DC7BE /* TestBundle.js */; };
 		68FF44381CF6111500720EFD /* RCTBundleURLProviderTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */; };
 		834C36EC1AF8DED70019C93C /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 834C36D21AF8DA610019C93C /* libRCTSettings.a */; };
 		83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */; };
@@ -191,11 +192,10 @@
 		004D289E1AAF61C70097A701 /* UIExplorerUnitTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = UIExplorerUnitTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		1300627E1B59179B0043FE5A /* RCTGzipTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTGzipTests.m; sourceTree = "<group>"; };
 		13129DD31C85F87C007D611C /* RCTModuleInitNotificationRaceTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTModuleInitNotificationRaceTests.m; sourceTree = "<group>"; };
-		1323F1851C04AB9F0091BED0 /* bunny.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = bunny.png; sourceTree = "<group>"; };
-		1323F1861C04AB9F0091BED0 /* flux@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "flux@3x.png"; sourceTree = "<group>"; };
-		1323F1871C04AB9F0091BED0 /* hawk.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = hawk.png; sourceTree = "<group>"; };
-		1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = uie_thumb_big.png; sourceTree = "<group>"; };
-		1323F18E1C04ABEB0091BED0 /* Thumbnails */ = {isa = PBXFileReference; lastKnownFileType = folder; path = Thumbnails; sourceTree = "<group>"; };
+		1323F1851C04AB9F0091BED0 /* bunny.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = bunny.png; path = js/bunny.png; sourceTree = "<group>"; };
+		1323F1861C04AB9F0091BED0 /* flux@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "flux@3x.png"; path = "js/flux@3x.png"; sourceTree = "<group>"; };
+		1323F1871C04AB9F0091BED0 /* hawk.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = hawk.png; path = js/hawk.png; sourceTree = "<group>"; };
+		1323F1881C04AB9F0091BED0 /* uie_thumb_big.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = uie_thumb_big.png; path = js/uie_thumb_big.png; sourceTree = "<group>"; };
 		13417FE31AA91428003F314A /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
 		13417FEA1AA914B8003F314A /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = ../../Libraries/Text/RCTText.xcodeproj; sourceTree = "<group>"; };
 		134180261AA91779003F314A /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = ../../Libraries/Network/RCTNetwork.xcodeproj; sourceTree = "<group>"; };
@@ -220,12 +220,6 @@
 		13DF61B51B67A45000EDB188 /* RCTMethodArgumentTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTMethodArgumentTests.m; sourceTree = "<group>"; };
 		13E5019C1D07A502005F35D8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = ../../Libraries/NativeAnimation/RCTAnimation.xcodeproj; 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>"; };
-		143BC5821B21E18100462512 /* testSliderExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testSliderExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
-		143BC5831B21E18100462512 /* testSwitchExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testSwitchExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
-		143BC5841B21E18100462512 /* testTabBarExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testTabBarExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
-		143BC5851B21E18100462512 /* testTextExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testTextExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
-		143BC5861B21E18100462512 /* testViewExampleSnapshot_1@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "testViewExampleSnapshot_1@2x.png"; sourceTree = "<group>"; };
 		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>"; };
@@ -256,7 +250,9 @@
 		27F441E81BEBE5030039B79C /* FlexibleSizeExampleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = FlexibleSizeExampleView.m; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.m; sourceTree = "<group>"; };
 		27F441EA1BEBE5030039B79C /* FlexibleSizeExampleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = FlexibleSizeExampleView.h; path = UIExplorer/NativeExampleViews/FlexibleSizeExampleView.h; sourceTree = "<group>"; };
 		357858F81B28D2C400341EDB /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = ../../Libraries/LinkingIOS/RCTLinking.xcodeproj; sourceTree = "<group>"; };
+		3D299BAE1D33EBFA00FA1057 /* RCTLoggingTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTLoggingTests.m; sourceTree = "<group>"; };
 		3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = UIExplorerIntegrationTests.m; sourceTree = "<group>"; };
+		3DD981D51D33C6FB007DC7BE /* TestBundle.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = TestBundle.js; sourceTree = "<group>"; };
 		58005BE41ABA80530062E044 /* RCTTest.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTTest.xcodeproj; path = ../../Libraries/RCTTest/RCTTest.xcodeproj; sourceTree = "<group>"; };
 		68FF44371CF6111500720EFD /* RCTBundleURLProviderTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTBundleURLProviderTests.m; sourceTree = "<group>"; };
 		83636F8E1B53F22C009F943E /* RCTUIManagerScenarioTests.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTUIManagerScenarioTests.m; sourceTree = "<group>"; };
@@ -418,7 +414,6 @@
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
 				13B07FB71A68108700A75B9A /* main.m */,
-				1323F18E1C04ABEB0091BED0 /* Thumbnails */,
 				1323F18D1C04ABAC0091BED0 /* Supporting Files */,
 			);
 			name = UIExplorer;
@@ -457,37 +452,17 @@
 				1497CFAB1B21F5E400C1F8F2 /* RCTUIManagerTests.m */,
 				13BCE84E1C9C209600DD7AAD /* RCTComponentPropsTests.m */,
 				143BC57E1B21E18100462512 /* Info.plist */,
+				3DD981D51D33C6FB007DC7BE /* TestBundle.js */,
 				14D6D7101B220EB3001FB087 /* libOCMock.a */,
 				14D6D7011B220AE3001FB087 /* OCMock */,
-				143BC57F1B21E18100462512 /* ReferenceImages */,
 			);
 			path = UIExplorerUnitTests;
 			sourceTree = "<group>";
 		};
-		143BC57F1B21E18100462512 /* ReferenceImages */ = {
-			isa = PBXGroup;
-			children = (
-				143BC5801B21E18100462512 /* Examples-UIExplorer-UIExplorerApp */,
-			);
-			path = ReferenceImages;
-			sourceTree = "<group>";
-		};
-		143BC5801B21E18100462512 /* Examples-UIExplorer-UIExplorerApp */ = {
-			isa = PBXGroup;
-			children = (
-				143BC5811B21E18100462512 /* testLayoutExampleSnapshot_1@2x.png */,
-				143BC5821B21E18100462512 /* testSliderExampleSnapshot_1@2x.png */,
-				143BC5831B21E18100462512 /* testSwitchExampleSnapshot_1@2x.png */,
-				143BC5841B21E18100462512 /* testTabBarExampleSnapshot_1@2x.png */,
-				143BC5851B21E18100462512 /* testTextExampleSnapshot_1@2x.png */,
-				143BC5861B21E18100462512 /* testViewExampleSnapshot_1@2x.png */,
-			);
-			path = "Examples-UIExplorer-UIExplorerApp";
-			sourceTree = "<group>";
-		};
 		143BC5961B21E3E100462512 /* UIExplorerIntegrationTests */ = {
 			isa = PBXGroup;
 			children = (
+				3D299BAE1D33EBFA00FA1057 /* RCTLoggingTests.m */,
 				27B885551BED29AF00008352 /* RCTRootViewIntegrationTests.m */,
 				3DB99D0B1BA0340600302749 /* UIExplorerIntegrationTests.m */,
 				143BC5A01B21E45C00462512 /* UIExplorerSnapshotTests.m */,
@@ -646,6 +621,7 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
+				68CD48B71D2BCB2C007E06A9 /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -887,6 +863,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				3DD981D61D33C6FB007DC7BE /* TestBundle.js in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -895,7 +872,6 @@
 			buildActionMask = 2147483647;
 			files = (
 				1323F18A1C04AB9F0091BED0 /* flux@3x.png in Resources */,
-				1323F18F1C04ABEB0091BED0 /* Thumbnails in Resources */,
 				1323F18B1C04AB9F0091BED0 /* hawk.png in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
@@ -913,6 +889,23 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
+/* Begin PBXShellScriptBuildPhase section */
+		68CD48B71D2BCB2C007E06A9 /* Run Script */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Script";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/UIExplorer/js/UIExplorerApp.ios.js";
+		};
+/* End PBXShellScriptBuildPhase section */
+
 /* Begin PBXSourcesBuildPhase section */
 		004D289A1AAF61C70097A701 /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
@@ -958,6 +951,7 @@
 			files = (
 				3DB99D0C1BA0340600302749 /* UIExplorerIntegrationTests.m in Sources */,
 				83636F8F1B53F22C009F943E /* RCTUIManagerScenarioTests.m in Sources */,
+				3D299BAF1D33EBFA00FA1057 /* RCTLoggingTests.m in Sources */,
 				143BC5A11B21E45C00462512 /* UIExplorerSnapshotTests.m in Sources */,
 				27B885561BED29AF00008352 /* RCTRootViewIntegrationTests.m in Sources */,
 			);

Examples/UIExplorer/UIExplorer/AppDelegate.m

@@ -15,6 +15,7 @@
 #import "AppDelegate.h"
 
 #import "RCTBridge.h"
+#import "RCTBundleURLProvider.h"
 #import "RCTJavaScriptLoader.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"
@@ -34,8 +35,7 @@
   NSDictionary *initProps = nil;
   NSString *_routeUri = [[NSUserDefaults standardUserDefaults] stringForKey:@"route"];
   if (_routeUri) {
-    initProps = @{@"exampleFromAppetizeParams":
-                    [NSString stringWithFormat:@"rnuiexplorer://example/%@Example", _routeUri]};
+    initProps = @{@"exampleFromAppetizeParams": [NSString stringWithFormat:@"rnuiexplorer://example/%@Example", _routeUri]};
   }
 
   RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:_bridge
@@ -52,41 +52,13 @@
 
 - (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.bundle?platform=ios&dev=true"];
-
-    /**
-     * OPTION 2
-     * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
-     * to your Xcode project folder and run
-     *
-     * $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios' -o main.jsbundle
-     *
-     * then add the `main.jsbundle` file to your project and uncomment this line:
-     */
-
-  //  sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"Examples/UIExplorer/js/UIExplorerApp.ios" fallbackResource:nil];
 
   if (!getenv("CI_USE_PACKAGER")) {
-     sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   }
 
-  return sourceURL;
+  return jsCodeLocation;
 }
 
 

Examples/UIExplorer/UIExplorerIntegrationTests/RCTLoggingTests.m

@@ -36,28 +36,27 @@
 {
   NSURL *scriptURL;
   if (getenv("CI_USE_PACKAGER")) {
-    NSString *app = @"Examples/UIExplorer/UIExplorerIntegrationTests/js/IntegrationTestsApp";
+    NSString *app = @"IntegrationTests/IntegrationTestsApp";
     scriptURL = [NSURL URLWithString:[NSString stringWithFormat:@"http://localhost:8081/%@.bundle?platform=ios&dev=true", app]];
-    RCTAssert(scriptURL != nil, @"No scriptURL set");
   } else {
     scriptURL = [[NSBundle bundleForClass:[RCTBridge class]] URLForResource:@"main" withExtension:@"jsbundle"];
-    RCTAssert(scriptURL != nil, @"Could not locate main.jsBundle");
   }
+  RCTAssert(scriptURL != nil, @"No scriptURL set");
 
   _bridge = [[RCTBridge alloc] initWithBundleURL:scriptURL moduleProvider:NULL launchOptions:nil];
-  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:5];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:60];
   while (date.timeIntervalSinceNow > 0 && _bridge.loading) {
     [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
   }
   XCTAssertFalse(_bridge.loading);
 
   _logSem = dispatch_semaphore_create(0);
-  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, __unused NSString *fileName, __unused NSNumber *lineNumber, NSString *message) {
     if (source == RCTLogSourceJavaScript) {
-      _lastLogLevel = level;
-      _lastLogSource = source;
-      _lastLogMessage = message;
-      dispatch_semaphore_signal(_logSem);
+      self->_lastLogLevel = level;
+      self->_lastLogSource = source;
+      self->_lastLogMessage = message;
+      dispatch_semaphore_signal(self->_logSem);
     }
   });
 }
@@ -96,6 +95,11 @@
   [_bridge enqueueJSCall:@"LoggingTestModule.logErrorToConsole" args:@[@"Invoking console.error"]];
   dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
 
+  // For local bundles, we'll first get a warning about symbolication
+  if ([_bridge.bundleURL isFileURL]) {
+    dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+  }
+
   XCTAssertEqual(_lastLogLevel, RCTLogLevelError);
   XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
   XCTAssertEqualObjects(_lastLogMessage, @"Invoking console.error");
@@ -103,6 +107,11 @@
   [_bridge enqueueJSCall:@"LoggingTestModule.throwError" args:@[@"Throwing an error"]];
   dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
 
+  // For local bundles, we'll first get a warning about symbolication
+  if ([_bridge.bundleURL isFileURL]) {
+    dispatch_semaphore_wait(_logSem, DISPATCH_TIME_FOREVER);
+  }
+
   XCTAssertEqual(_lastLogLevel, RCTLogLevelError);
   XCTAssertEqual(_lastLogSource, RCTLogSourceJavaScript);
   XCTAssertEqualObjects(_lastLogMessage, @"Throwing an error");

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -32,7 +32,7 @@
 
 - (void)setUp
 {
-  _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/UIExplorerApp.ios", nil);
+  _runner = RCTInitRunnerForApp(@"Examples/UIExplorer/js/UIExplorerApp.ios", nil);
   _runner.recordMode = NO;
 }
 

Examples/UIExplorer/UIExplorerUnitTests/RCTBridgeTests.m

@@ -92,6 +92,11 @@ RCT_EXPORT_MODULE()
   block();
 }
 
+- (void)executeAsyncBlockOnJavaScriptQueue:(dispatch_block_t)block
+{
+  block();
+}
+
 - (void)injectJSONText:(NSString *)script
    asGlobalObjectNamed:(NSString *)objectName
               callback:(RCTJavaScriptCompleteBlock)onComplete
@@ -151,8 +156,9 @@ RCT_EXPORT_MODULE(TestModule)
   [super setUp];
 
   _unregisteredTestModule = [UnregisteredTestModule new];
-  _bridge = [[RCTBridge alloc] initWithBundleURL:nil
-                                  moduleProvider:^{ return @[self, _unregisteredTestModule]; }
+  NSBundle *bundle = [NSBundle bundleForClass:[self class]];
+  _bridge = [[RCTBridge alloc] initWithBundleURL:[bundle URLForResource:@"TestBundle" withExtension:@"js"]
+                                  moduleProvider:^{ return @[self, self->_unregisteredTestModule]; }
                                    launchOptions:nil];
 
   _bridge.executorClass = [TestExecutor class];
@@ -232,7 +238,7 @@ RCT_EXPORT_MODULE(TestModule)
 
   dispatch_sync(_methodQueue, ^{
     // clear the queue
-    XCTAssertTrue(_testMethodCalled);
+    XCTAssertTrue(self->_testMethodCalled);
   });
 }
 
@@ -263,7 +269,7 @@ RCT_EXPORT_MODULE(TestModule)
   [_bridge.batchedBridge handleBuffer:buffer];
 
   dispatch_sync(_unregisteredTestModule.methodQueue, ^{
-    XCTAssertTrue(_unregisteredTestModule.testMethodCalled);
+    XCTAssertTrue(self->_unregisteredTestModule.testMethodCalled);
   });
 }
 

Examples/UIExplorer/UIExplorerUnitTests/RCTBundleURLProviderTests.m

@@ -60,7 +60,6 @@ static NSURL *ipBundleURL()
   RCTSwapInstanceMethods([NSBundle class],
                          @selector(URLForResource:withExtension:),
                           @selector(RCT_URLForResource:withExtension:));
-  [[RCTBundleURLProvider sharedSettings] setDefaults];
 }
 
 - (void)tearDown

Examples/UIExplorer/UIExplorerUnitTests/RCTComponentPropsTests.m

@@ -95,7 +95,8 @@ RCT_CUSTOM_VIEW_PROPERTY(customProp, NSString, RCTPropsTestView)
 {
   [super setUp];
 
-  _bridge = [[RCTBridge alloc] initWithBundleURL:nil
+  NSBundle *bundle = [NSBundle bundleForClass:[self class]];
+  _bridge = [[RCTBridge alloc] initWithBundleURL:[bundle URLForResource:@"TestBundle" withExtension:@"js"]
                                   moduleProvider:nil
                                    launchOptions:nil];
 }

Examples/UIExplorer/UIExplorerUnitTests/RCTEventDispatcherTests.m

@@ -19,7 +19,7 @@
 #import "RCTEventDispatcher.h"
 #import "RCTBridge+Private.h"
 
-@interface RCTTestEvent : NSObject  <RCTEvent>
+@interface RCTTestEvent : NSObject <RCTEvent>
 @property (atomic, assign, readwrite) BOOL canCoalesce;
 @end
 
@@ -54,7 +54,7 @@
 
 + (NSString *)moduleDotMethod
 {
-  return @"RCTDeviceEventEmitter.emit";
+  return @"MyCustomEventemitter.emit";
 }
 
 - (NSArray *)arguments
@@ -100,8 +100,10 @@
 
 - (void)testLegacyEventsAreImmediatelyDispatched
 {
-  [[_bridge expect] enqueueJSCall:_JSMethod
-                             args:[_testEvent arguments]];
+  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter"
+                           method:@"emit"
+                             args:[_testEvent arguments]
+                       completion:NULL];
 
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdeprecated-declarations"
@@ -154,9 +156,8 @@
   [_eventDispatcher sendEvent:_testEvent];
   [_bridge verify];
 
-
   // eventsEmittingBlock would be called when js is no longer busy, which will result in emitting events
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[_testEvent arguments]];
   eventsEmittingBlock();
   [_bridge verify];
@@ -174,7 +175,7 @@
     eventsEmittingBlock = block;
     return YES;
   }] queue:RCTJSThread];
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[_testEvent arguments]];
 
   RCTTestEvent *ignoredEvent = [[RCTTestEvent alloc] initWithViewTag:nil
@@ -201,9 +202,9 @@
     eventsEmittingBlock = block;
     return YES;
   }] queue:RCTJSThread];
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[firstEvent arguments]];
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[_testEvent arguments]];
 
 
@@ -231,9 +232,9 @@
     eventsEmittingBlock = block;
     return YES;
   }] queue:RCTJSThread];
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[firstEvent arguments]];
-  [[_bridge expect] enqueueJSCall:@"RCTDeviceEventEmitter.emit"
+  [[_bridge expect] enqueueJSCall:[[_testEvent class] moduleDotMethod]
                              args:[secondEvent arguments]];
 
 

Examples/UIExplorer/UIExplorerUnitTests/RCTImageLoaderTests.m

@@ -33,7 +33,15 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
 
 @end
 
-@implementation RCTImageLoaderTests
+@implementation RCTImageLoaderTests {
+  NSURL *_bundleURL;
+}
+
+- (void)setUp
+{
+  NSBundle *bundle = [NSBundle bundleForClass:[self class]];
+  _bundleURL = [bundle URLForResource:@"TestBundle" withExtension:@"js"];
+}
 
 - (void)testImageLoading
 {
@@ -47,7 +55,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
     return nil;
   }];
 
-  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader]; } launchOptions:nil];
+  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:_bundleURL moduleProvider:^{ return @[loader]; } launchOptions:nil];
 
   NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://facebook.github.io/react/img/logo_og.png"]];
   [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
@@ -78,7 +86,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
     return nil;
   }];
 
-  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[loader1, loader2]; } launchOptions:nil];
+  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:_bundleURL moduleProvider:^{ return @[loader1, loader2]; } launchOptions:nil];
 
   NSURLRequest *urlRequest = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://facebook.github.io/react/img/logo_og.png"]];
   [bridge.imageLoader loadImageWithURLRequest:urlRequest size:CGSizeMake(100, 100) scale:1.0 clipped:YES resizeMode:RCTResizeModeContain progressBlock:^(int64_t progress, int64_t total) {
@@ -103,7 +111,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
     return nil;
   }];
 
-  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder]; } launchOptions:nil];
+  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:_bundleURL moduleProvider:^{ return @[decoder]; } launchOptions:nil];
 
   RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 clipped:NO resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);
@@ -132,7 +140,7 @@ RCTDefineImageDecoder(RCTImageLoaderTestsDecoder2)
     return nil;
   }];
 
-  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:nil moduleProvider:^{ return @[decoder1, decoder2]; } launchOptions:nil];
+  NS_VALID_UNTIL_END_OF_SCOPE RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:_bundleURL moduleProvider:^{ return @[decoder1, decoder2]; } launchOptions:nil];
 
   RCTImageLoaderCancellationBlock cancelBlock = [bridge.imageLoader decodeImageData:data size:CGSizeMake(1, 1) scale:1.0 clipped:NO resizeMode:RCTResizeModeStretch completionBlock:^(NSError *decodeError, id decodedImage) {
     XCTAssertEqualObjects(decodedImage, image);

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleInitNotificationRaceTests.m

@@ -21,6 +21,7 @@
 #import "RCTUtils.h"
 #import "RCTUIManager.h"
 #import "RCTViewManager.h"
+#import "RCTJavaScriptExecutor.h"
 
 #define RUN_RUNLOOP_WHILE(CONDITION) \
 { \
@@ -99,7 +100,8 @@ RCT_EXPORT_MODULE()
 
 - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
 {
-  return nil;
+  NSBundle *bundle = [NSBundle bundleForClass:[self class]];
+  return [bundle URLForResource:@"TestBundle" withExtension:@"js"];
 }
 
 - (NSArray *)extraModulesForBridge:(__unused RCTBridge *)bridge

Examples/UIExplorer/UIExplorerUnitTests/RCTModuleInitTests.m

@@ -19,6 +19,7 @@
 #import "RCTBridge+Private.h"
 #import "RCTBridgeModule.h"
 #import "RCTUtils.h"
+#import "RCTJavaScriptExecutor.h"
 
 #define RUN_RUNLOOP_WHILE(CONDITION) \
 { \
@@ -147,7 +148,8 @@ RCT_EXPORT_MODULE()
 
 - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
 {
-  return nil;
+  NSBundle *bundle = [NSBundle bundleForClass:[self class]];
+  return [bundle URLForResource:@"TestBundle" withExtension:@"js"];
 }
 
 - (NSArray *)extraModulesForBridge:(__unused RCTBridge *)bridge
@@ -225,7 +227,7 @@ RCT_EXPORT_MODULE()
 
   __block RCTTestCustomSetBridgeModule *module;
   dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
-    module = [_bridge moduleForClass:[RCTTestCustomSetBridgeModule class]];
+    module = [self->_bridge moduleForClass:[RCTTestCustomSetBridgeModule class]];
   });
 
   RUN_RUNLOOP_WHILE(!module);
@@ -253,7 +255,7 @@ RCT_EXPORT_MODULE()
 
   __block RCTLazyInitModule *module;
   dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
-    module = [_bridge moduleForClass:[RCTLazyInitModule class]];
+    module = [self->_bridge moduleForClass:[RCTLazyInitModule class]];
   });
 
   RUN_RUNLOOP_WHILE(!module);

Examples/UIExplorer/UIExplorerUnitTests/RCTShadowViewTests.m

@@ -28,10 +28,10 @@
 {
   [super setUp];
 
-  self.parentView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex_direction = CSS_FLEX_DIRECTION_COLUMN;
-    style->dimensions[0] = 440;
-    style->dimensions[1] = 440;
+  self.parentView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlexDirection(node, CSSFlexDirectionColumn);
+    CSSNodeStyleSetWidth(node, 440);
+    CSSNodeStyleSetHeight(node, 440);
   }];
   self.parentView.reactTag = @1; // must be valid rootView tag
 }
@@ -50,43 +50,43 @@
 //
 - (void)testApplyingLayoutRecursivelyToShadowView
 {
-  RCTShadowView *leftView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex = 1;
+  RCTShadowView *leftView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
   }];
 
-  RCTShadowView *centerView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex = 2;
-    style->margin[0] = 10;
-    style->margin[2] = 10;
+  RCTShadowView *centerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 2);
+    CSSNodeStyleSetMarginLeft(node, 10);
+    CSSNodeStyleSetMarginRight(node, 10);
   }];
 
-  RCTShadowView *rightView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex = 1;
+  RCTShadowView *rightView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
   }];
 
-  RCTShadowView *mainView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex_direction = CSS_FLEX_DIRECTION_ROW;
-    style->flex = 2;
-    style->margin[1] = 10;
-    style->margin[3] = 10;
+  RCTShadowView *mainView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlexDirection(node, CSSFlexDirectionRow);
+    CSSNodeStyleSetFlex(node, 2);
+    CSSNodeStyleSetMarginTop(node, 10);
+    CSSNodeStyleSetMarginBottom(node, 10);
   }];
 
   [mainView insertReactSubview:leftView atIndex:0];
   [mainView insertReactSubview:centerView atIndex:1];
   [mainView insertReactSubview:rightView atIndex:2];
 
-  RCTShadowView *headerView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex = 1;
+  RCTShadowView *headerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
   }];
 
-  RCTShadowView *footerView = [self _shadowViewWithStyle:^(css_style_t *style) {
-    style->flex = 1;
+  RCTShadowView *footerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
   }];
 
-  self.parentView.cssNode->style.padding[0] = 10;
-  self.parentView.cssNode->style.padding[1] = 10;
-  self.parentView.cssNode->style.padding[2] = 10;
-  self.parentView.cssNode->style.padding[3] = 10;
+  CSSNodeStyleSetPaddingLeft(self.parentView.cssNode, 10);
+  CSSNodeStyleSetPaddingTop(self.parentView.cssNode, 10);
+  CSSNodeStyleSetPaddingRight(self.parentView.cssNode, 10);
+  CSSNodeStyleSetPaddingBottom(self.parentView.cssNode, 10);
 
   [self.parentView insertReactSubview:headerView atIndex:0];
   [self.parentView insertReactSubview:mainView atIndex:1];
@@ -106,12 +106,35 @@
   XCTAssertTrue(CGRectEqualToRect([rightView measureLayoutRelativeToAncestor:self.parentView], CGRectMake(330, 120, 100, 200)));
 }
 
+- (void)testAncestorCheck
+{
+  RCTShadowView *centerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
+  }];
+  
+  RCTShadowView *mainView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
+  }];
+  
+  [mainView insertReactSubview:centerView atIndex:0];
+
+  RCTShadowView *footerView = [self _shadowViewWithConfig:^(CSSNodeRef node) {
+    CSSNodeStyleSetFlex(node, 1);
+  }];
+  
+  [self.parentView insertReactSubview:mainView atIndex:0];
+  [self.parentView insertReactSubview:footerView atIndex:1];
+  
+  XCTAssertTrue([centerView viewIsDescendantOf:mainView]);
+  XCTAssertFalse([footerView viewIsDescendantOf:mainView]);
+}
+
 - (void)testAssignsSuggestedWidthDimension
 {
-  [self _withShadowViewWithStyle:^(css_style_t *style) {
-                                   style->position[CSS_LEFT] = 0;
-                                   style->position[CSS_TOP] = 0;
-                                   style->dimensions[CSS_HEIGHT] = 10;
+  [self _withShadowViewWithStyle:^(CSSNodeRef node) {
+                                   CSSNodeStyleSetPositionLeft(node, 0);
+                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetHeight(node, 10);
                                  }
             assertRelativeLayout:CGRectMake(0, 0, 3, 10)
         withIntrinsicContentSize:CGSizeMake(3, UIViewNoIntrinsicMetric)];
@@ -119,10 +142,10 @@
 
 - (void)testAssignsSuggestedHeightDimension
 {
-  [self _withShadowViewWithStyle:^(css_style_t *style) {
-                                   style->position[CSS_LEFT] = 0;
-                                   style->position[CSS_TOP] = 0;
-                                   style->dimensions[CSS_WIDTH] = 10;
+  [self _withShadowViewWithStyle:^(CSSNodeRef node) {
+                                   CSSNodeStyleSetPositionLeft(node, 0);
+                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetWidth(node, 10);
                                  }
             assertRelativeLayout:CGRectMake(0, 0, 10, 4)
         withIntrinsicContentSize:CGSizeMake(UIViewNoIntrinsicMetric, 4)];
@@ -130,11 +153,11 @@
 
 - (void)testDoesNotOverrideDimensionStyleWithSuggestedDimensions
 {
-  [self _withShadowViewWithStyle:^(css_style_t *style) {
-                                   style->position[CSS_LEFT] = 0;
-                                   style->position[CSS_TOP] = 0;
-                                   style->dimensions[CSS_WIDTH] = 10;
-                                   style->dimensions[CSS_HEIGHT] = 10;
+  [self _withShadowViewWithStyle:^(CSSNodeRef node) {
+                                   CSSNodeStyleSetPositionLeft(node, 0);
+                                   CSSNodeStyleSetPositionTop(node, 0);
+                                   CSSNodeStyleSetWidth(node, 10);
+                                   CSSNodeStyleSetHeight(node, 10);
                                  }
           assertRelativeLayout:CGRectMake(0, 0, 10, 10)
       withIntrinsicContentSize:CGSizeMake(3, 4)];
@@ -142,20 +165,20 @@
 
 - (void)testDoesNotAssignSuggestedDimensionsWhenStyledWithFlexAttribute
 {
-  float parentWidth = self.parentView.cssNode->style.dimensions[CSS_WIDTH];
-  float parentHeight = self.parentView.cssNode->style.dimensions[CSS_HEIGHT];
-  [self _withShadowViewWithStyle:^(css_style_t *style) {
-                                   style->flex = 1;
+  float parentWidth = CSSNodeStyleGetWidth(self.parentView.cssNode);
+  float parentHeight = CSSNodeStyleGetHeight(self.parentView.cssNode);
+  [self _withShadowViewWithStyle:^(CSSNodeRef node) {
+                                   CSSNodeStyleSetFlex(node, 1);
                                  }
             assertRelativeLayout:CGRectMake(0, 0, parentWidth, parentHeight)
         withIntrinsicContentSize:CGSizeMake(3, 4)];
 }
 
-- (void)_withShadowViewWithStyle:(void(^)(css_style_t *style))styleBlock
+- (void)_withShadowViewWithStyle:(void(^)(CSSNodeRef node))configBlock
             assertRelativeLayout:(CGRect)expectedRect
         withIntrinsicContentSize:(CGSize)contentSize
 {
-  RCTShadowView *view = [self _shadowViewWithStyle:styleBlock];
+  RCTShadowView *view = [self _shadowViewWithConfig:configBlock];
   [self.parentView insertReactSubview:view atIndex:0];
   view.intrinsicContentSize = contentSize;
   [self.parentView collectViewsWithUpdatedFrames];
@@ -166,14 +189,10 @@
                 NSStringFromCGRect(actualRect));
 }
 
-- (RCTRootShadowView *)_shadowViewWithStyle:(void(^)(css_style_t *style))styleBlock
+- (RCTRootShadowView *)_shadowViewWithConfig:(void(^)(CSSNodeRef node))configBlock
 {
   RCTRootShadowView *shadowView = [RCTRootShadowView new];
-
-  css_style_t style = shadowView.cssNode->style;
-  styleBlock(&style);
-  shadowView.cssNode->style = style;
-
+  configBlock(shadowView.cssNode);
   return shadowView;
 }
 

Examples/UIExplorer/UIExplorerUnitTests/TestBundle.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+

Examples/UIExplorer/android/app/build.gradle

@@ -59,7 +59,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     bundleAssetName: "UIExplorerApp.android.bundle",
-    entryFile: file("../../UIExplorerApp.android.js"),
+    entryFile: file("../../js/UIExplorerApp.android.js"),
     root: "../../../../",
     inputExcludes: ["android/**", "./**"]
 ]

Examples/UIExplorer/android/app/src/main/java/com/facebook/react/uiapp/UIExplorerApplication.java

@@ -30,7 +30,7 @@ public class UIExplorerApplication extends Application implements ReactApplicati
   private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
     @Override
     public String getJSMainModuleName() {
-      return "Examples/UIExplorer/UIExplorerApp.android";
+      return "Examples/UIExplorer/js/UIExplorerApp.android";
     }
 
     @Override

Examples/UIExplorer/js/AccessibilityAndroidExample.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -29,40 +36,35 @@ var UIExplorerPage = require('./UIExplorerPage');
 
 var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
 
-var AccessibilityAndroidExample = React.createClass({
+class AccessibilityAndroidExample extends React.Component {
+  static title = 'Accessibility';
+  static description = 'Examples of using Accessibility API.';
 
-  statics: {
-    title: 'Accessibility',
-    description: 'Examples of using Accessibility API.',
-  },
+  state = {
+    count: 0,
+    backgroundImportantForAcc: 0,
+    forgroundImportantForAcc: 0,
+  };
 
-  getInitialState: function() {
-    return {
-      count: 0,
-      backgroundImportantForAcc: 0,
-      forgroundImportantForAcc: 0,
-    };
-  },
-
-  _addOne: function() {
+  _addOne = () => {
     this.setState({
       count: ++this.state.count,
     });
-  },
+  };
 
-  _changeBackgroundImportantForAcc: function() {
+  _changeBackgroundImportantForAcc = () => {
     this.setState({
       backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  _changeForgroundImportantForAcc: function() {
+  _changeForgroundImportantForAcc = () => {
     this.setState({
       forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title={'Accessibility'}>
 
@@ -195,8 +197,8 @@ var AccessibilityAndroidExample = React.createClass({
 
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
    embedded: {

Examples/UIExplorer/js/AccessibilityIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -22,7 +29,7 @@ var {
   View,
 } = ReactNative;
 
-var AccessibilityIOSExample = React.createClass({
+class AccessibilityIOSExample extends React.Component {
   render() {
     return (
       <View>
@@ -53,8 +60,8 @@ var AccessibilityIOSExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 exports.title = 'AccessibilityIOS';
 exports.description = 'Interface to show iOS\' accessibility samples';

Examples/UIExplorer/js/ActionSheetIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -35,12 +42,10 @@ var BUTTONS = [
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 
-var ActionSheetExample = React.createClass({
-  getInitialState() {
-    return {
-      clicked: 'none',
-    };
-  },
+class ActionSheetExample extends React.Component {
+  state = {
+    clicked: 'none',
+  };
 
   render() {
     return (
@@ -53,9 +58,9 @@ var ActionSheetExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -64,15 +69,13 @@ var ActionSheetExample = React.createClass({
     (buttonIndex) => {
       this.setState({ clicked: BUTTONS[buttonIndex] });
     });
-  }
-});
+  };
+}
 
-var ActionSheetTintExample = React.createClass({
-  getInitialState() {
-    return {
-      clicked: 'none',
-    };
-  },
+class ActionSheetTintExample extends React.Component {
+  state = {
+    clicked: 'none',
+  };
 
   render() {
     return (
@@ -85,9 +88,9 @@ var ActionSheetTintExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -97,15 +100,13 @@ var ActionSheetTintExample = React.createClass({
     (buttonIndex) => {
       this.setState({ clicked: BUTTONS[buttonIndex] });
     });
-  }
-});
+  };
+}
 
-var ShareActionSheetExample = React.createClass({
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
+class ShareActionSheetExample extends React.Component {
+  state = {
+    text: ''
+  };
 
   render() {
     return (
@@ -118,9 +119,9 @@ var ShareActionSheetExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showShareActionSheet() {
+  showShareActionSheet = () => {
     ActionSheetIOS.showShareActionSheetWithOptions({
       url: this.props.url,
       message: 'message to go with the shared url',
@@ -139,15 +140,13 @@ var ShareActionSheetExample = React.createClass({
       }
       this.setState({text});
     });
-  }
-});
+  };
+}
 
-var ShareScreenshotExample = React.createClass({
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
+class ShareScreenshotExample extends React.Component {
+  state = {
+    text: ''
+  };
 
   render() {
     return (
@@ -160,9 +159,9 @@ var ShareScreenshotExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showShareActionSheet() {
+  showShareActionSheet = () => {
     // Take the snapshot (returns a temp file uri)
     UIManager.takeSnapshot('window').then((uri) => {
       // Share image data
@@ -183,8 +182,8 @@ var ShareScreenshotExample = React.createClass({
         this.setState({text});
       });
     }).catch((error) => alert(error));
-  }
-});
+  };
+}
 
 var style = StyleSheet.create({
   button: {

Examples/UIExplorer/js/ActivityIndicatorExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -15,34 +22,43 @@
  */
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {
-  ActivityIndicator,
-  StyleSheet,
-  View,
-} = ReactNative;
-const TimerMixin = require('react-timer-mixin');
+import React, { Component } from 'react';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 
-const ToggleAnimatingActivityIndicator = React.createClass({
-  mixins: [TimerMixin],
+/**
+ * Optional Flowtype state and timer types definition
+ */
+type State = { animating: boolean; };
+type Timer = number;
 
-  getInitialState() {
-    return {
+class ToggleAnimatingActivityIndicator extends Component {
+  /**
+   * Optional Flowtype state and timer types
+   */
+  state: State;
+  _timer: Timer;
+
+  constructor(props) {
+    super(props);
+    this.state = {
       animating: true,
     };
-  },
-
-  setToggleTimeout() {
-    this.setTimeout(() => {
-      this.setState({animating: !this.state.animating});
-      this.setToggleTimeout();
-    }, 2000);
-  },
+  }
 
   componentDidMount() {
     this.setToggleTimeout();
-  },
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timer);
+  }
+
+  setToggleTimeout() {
+    this._timer = setTimeout(() => {
+      this.setState({animating: !this.state.animating});
+      this.setToggleTimeout();
+    }, 2000);
+  }
 
   render() {
     return (
@@ -53,7 +69,9 @@ const ToggleAnimatingActivityIndicator = React.createClass({
       />
     );
   }
-});
+}
+
+
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -106,8 +124,8 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
           size="large"
+          color="white"
         />
       );
     }
@@ -154,8 +172,21 @@ exports.examples = [
       );
     }
   },
+  {
+    platform: 'android',
+    title: 'Custom size (size: 75)',
+    render() {
+      return (
+        <ActivityIndicator
+          style={styles.centering}
+          size={75}
+        />
+      );
+    }
+  },
 ];
 
+
 const styles = StyleSheet.create({
   centering: {
     alignItems: 'center',

Examples/UIExplorer/js/AdSupportIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -37,15 +44,13 @@ exports.examples = [
   }
 ];
 
-var AdSupportIOSExample = React.createClass({
-  getInitialState: function() {
-    return {
-      deviceID: 'No IDFA yet',
-      hasAdvertiserTracking: 'unset',
-    };
-  },
+class AdSupportIOSExample extends React.Component {
+  state = {
+    deviceID: 'No IDFA yet',
+    hasAdvertiserTracking: 'unset',
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     AdSupportIOS.getAdvertisingId(
       this._onDeviceIDSuccess,
       this._onDeviceIDFailure
@@ -55,33 +60,33 @@ var AdSupportIOSExample = React.createClass({
       this._onHasTrackingSuccess,
       this._onHasTrackingFailure
     );
-  },
+  }
 
-  _onHasTrackingSuccess: function(hasTracking) {
+  _onHasTrackingSuccess = (hasTracking) => {
     this.setState({
       'hasAdvertiserTracking': hasTracking,
     });
-  },
+  };
 
-  _onHasTrackingFailure: function(e) {
+  _onHasTrackingFailure = (e) => {
     this.setState({
       'hasAdvertiserTracking': 'Error!',
     });
-  },
+  };
 
-  _onDeviceIDSuccess: function(deviceID) {
+  _onDeviceIDSuccess = (deviceID) => {
     this.setState({
       'deviceID': deviceID,
     });
-  },
+  };
 
-  _onDeviceIDFailure: function(e) {
+  _onDeviceIDFailure = (e) => {
     this.setState({
       'deviceID': 'Error!',
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <Text>
@@ -95,7 +100,7 @@ var AdSupportIOSExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/AlertExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -34,9 +41,8 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after
 /**
  * Simple alert examples.
  */
-var SimpleAlertExampleBlock = React.createClass({
-
-  render: function() {
+class SimpleAlertExampleBlock extends React.Component {
+  render() {
     return (
       <View>
         <TouchableHighlight style={styles.wrapper}
@@ -102,23 +108,23 @@ var SimpleAlertExampleBlock = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-var AlertExample = React.createClass({
-  statics: {
-    title: 'Alert',
-    description: 'Alerts display a concise and informative message ' +
-    'and prompt the user to make a decision.',
-  },
-  render: function() {
+class AlertExample extends React.Component {
+  static title = 'Alert';
+
+  static description = 'Alerts display a concise and informative message ' +
+  'and prompt the user to make a decision.';
+
+  render() {
     return (
       <UIExplorerBlock title={'Alert'}>
         <SimpleAlertExampleBlock />
       </UIExplorerBlock>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   wrapper: {

Examples/UIExplorer/js/AlertIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExApp.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExBobble.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExChained.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExScroll.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExSet.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AnimatedGratuitousApp/AnExTilt.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/AppStateExample.js

@@ -31,33 +31,36 @@ const {
   View
 } = ReactNative;
 
-var AppStateSubscription = React.createClass({
-  getInitialState() {
-    return {
-      appState: AppState.currentState,
-      previousAppStates: [],
-      memoryWarnings: 0,
-    };
-  },
-  componentDidMount: function() {
+class AppStateSubscription extends React.Component {
+  state = {
+    appState: AppState.currentState,
+    previousAppStates: [],
+    memoryWarnings: 0,
+  };
+
+  componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
     AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     AppState.removeEventListener('change', this._handleAppStateChange);
     AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
-  },
-  _handleMemoryWarning: function() {
+  }
+
+  _handleMemoryWarning = () => {
     this.setState({memoryWarnings: this.state.memoryWarnings + 1});
-  },
-  _handleAppStateChange: function(appState) {
+  };
+
+  _handleAppStateChange = (appState) => {
     var previousAppStates = this.state.previousAppStates.slice();
     previousAppStates.push(this.state.appState);
     this.setState({
       appState,
       previousAppStates,
     });
-  },
+  };
+
   render() {
     if (this.props.showMemoryWarnings) {
       return (
@@ -79,7 +82,7 @@ var AppStateSubscription = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = 'AppState';
 exports.description = 'app background status';

Examples/UIExplorer/js/AssetScaledImageExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -24,13 +31,10 @@ var {
   ScrollView
 } = ReactNative;
 
-var AssetScaledImageExample = React.createClass({
-
-  getInitialState() {
-    return {
-      asset: this.props.asset
-    };
-  },
+class AssetScaledImageExample extends React.Component {
+  state = {
+    asset: this.props.asset
+  };
 
   render() {
     var image = this.state.asset.node.image;
@@ -50,8 +54,8 @@ var AssetScaledImageExample = React.createClass({
         </View>
       </ScrollView>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/AsyncStorageExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -28,12 +35,17 @@ var PickerItemIOS = PickerIOS.Item;
 var STORAGE_KEY = '@AsyncStorageExample:key';
 var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
 
-var BasicStorageExample = React.createClass({
+class BasicStorageExample extends React.Component {
+  state = {
+    selectedValue: COLORS[0],
+    messages: [],
+  };
+
   componentDidMount() {
     this._loadInitialState().done();
-  },
+  }
 
-  async _loadInitialState() {
+  _loadInitialState = async () => {
     try {
       var value = await AsyncStorage.getItem(STORAGE_KEY);
       if (value !== null){
@@ -45,14 +57,7 @@ var BasicStorageExample = React.createClass({
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
-
-  getInitialState() {
-    return {
-      selectedValue: COLORS[0],
-      messages: [],
-    };
-  },
+  };
 
   render() {
     var color = this.state.selectedValue;
@@ -84,9 +89,9 @@ var BasicStorageExample = React.createClass({
         {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
       </View>
     );
-  },
+  }
 
-  async _onValueChange(selectedValue) {
+  _onValueChange = async (selectedValue) => {
     this.setState({selectedValue});
     try {
       await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -94,21 +99,21 @@ var BasicStorageExample = React.createClass({
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
+  };
 
-  async _removeStorage() {
+  _removeStorage = async () => {
     try {
       await AsyncStorage.removeItem(STORAGE_KEY);
       this._appendMessage('Selection removed from disk.');
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
+  };
 
-  _appendMessage(message) {
+  _appendMessage = (message) => {
     this.setState({messages: this.state.messages.concat(message)});
-  },
-});
+  };
+}
 
 exports.title = 'AsyncStorage';
 exports.description = 'Asynchronous local disk storage.';

Examples/UIExplorer/js/BorderExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/BoxShadowExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/CameraRollExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -34,15 +41,12 @@ const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
 const CAMERA_ROLL_VIEW = 'camera_roll_view';
 
-const CameraRollExample = React.createClass({
-
-  getInitialState() {
-    return {
-      groupTypes: 'SavedPhotos',
-      sliderValue: 1,
-      bigImages: true,
-    };
-  },
+class CameraRollExample extends React.Component {
+  state = {
+    groupTypes: 'SavedPhotos',
+    sliderValue: 1,
+    bigImages: true,
+  };
 
   render() {
     return (
@@ -64,9 +68,9 @@ const CameraRollExample = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  loadAsset(asset){
+  loadAsset = (asset) => {
     if (this.props.navigator) {
       this.props.navigator.push({
         title: 'Camera Roll Image',
@@ -75,9 +79,9 @@ const CameraRollExample = React.createClass({
         passProps: { asset: asset },
       });
     }
-  },
+  };
 
-  _renderImage(asset) {
+  _renderImage = (asset) => {
     const imageSize = this.state.bigImages ? 150 : 75;
     const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
     const location = asset.node.location.longitude ?
@@ -98,22 +102,22 @@ const CameraRollExample = React.createClass({
         </View>
       </TouchableOpacity>
     );
-  },
+  };
 
-  _onSliderChange(value) {
+  _onSliderChange = (value) => {
     const options = CameraRoll.GroupTypesOptions;
     const index = Math.floor(value * options.length * 0.99);
     const groupTypes = options[index];
     if (groupTypes !== this.state.groupTypes) {
       this.setState({groupTypes: groupTypes});
     }
-  },
+  };
 
-  _onSwitchChange(value) {
+  _onSwitchChange = (value) => {
     this.refs[CAMERA_ROLL_VIEW].rendererChanged();
     this.setState({ bigImages: value });
-  }
-});
+  };
+}
 
 const styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/CameraRollView.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -191,7 +198,7 @@ var CameraRollView = React.createClass({
 
   _renderFooterSpinner: function() {
     if (!this.state.noMore) {
-      return <ActivityIndicator style={styles.spinner} />;
+      return <ActivityIndicator />;
     }
     return null;
   },

Examples/UIExplorer/js/ClipboardExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -23,14 +30,12 @@ var {
   Text,
 } = ReactNative;
 
-var ClipboardExample = React.createClass({
-  getInitialState() {
-    return {
-      content: 'Content will appear here'
-    };
-  },
+class ClipboardExample extends React.Component {
+  state = {
+    content: 'Content will appear here'
+  };
 
-  async _setClipboardContent(){
+  _setClipboardContent = async () => {
     Clipboard.setString('Hello World');
     try {
       var content = await Clipboard.getString();
@@ -38,7 +43,7 @@ var ClipboardExample = React.createClass({
     } catch (e) {
       this.setState({content:e.message});
     }
-  },
+  };
 
   render() {
     return (
@@ -52,7 +57,7 @@ var ClipboardExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';

Examples/UIExplorer/js/DatePickerAndroidExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -25,26 +32,21 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var DatePickerAndroidExample = React.createClass({
+class DatePickerAndroidExample extends React.Component {
+  static title = 'DatePickerAndroid';
+  static description = 'Standard Android date picker dialog';
 
-  statics: {
-    title: 'DatePickerAndroid',
-    description: 'Standard Android date picker dialog',
-  },
+  state = {
+    presetDate: new Date(2020, 4, 5),
+    allDate: new Date(2020, 4, 5),
+    simpleText: 'pick a date',
+    minText: 'pick a date, no earlier than today',
+    maxText: 'pick a date, no later than today',
+    presetText: 'pick a date, preset to 2020/5/5',
+    allText: 'pick a date between 2020/5/1 and 2020/5/10',
+  };
 
-  getInitialState() {
-    return {
-      presetDate: new Date(2020, 4, 5),
-      allDate: new Date(2020, 4, 5),
-      simpleText: 'pick a date',
-      minText: 'pick a date, no earlier than today',
-      maxText: 'pick a date, no later than today',
-      presetText: 'pick a date, preset to 2020/5/5',
-      allText: 'pick a date between 2020/5/1 and 2020/5/10',
-    };
-  },
-
-  async showPicker(stateKey, options) {
+  showPicker = async (stateKey, options) => {
     try {
       var newState = {};
       const {action, year, month, day} = await DatePickerAndroid.open(options);
@@ -59,7 +61,7 @@ var DatePickerAndroidExample = React.createClass({
     } catch ({code, message}) {
       console.warn(`Error in example '${stateKey}': `, message);
     }
-  },
+  };
 
   render() {
     return (
@@ -106,8 +108,8 @@ var DatePickerAndroidExample = React.createClass({
           </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   text: {

Examples/UIExplorer/js/DatePickerIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -25,34 +32,30 @@ var {
   View,
 } = ReactNative;
 
-var DatePickerExample = React.createClass({
-  getDefaultProps: function () {
-    return {
-      date: new Date(),
-      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
-    };
-  },
+class DatePickerExample extends React.Component {
+  static defaultProps = {
+    date: new Date(),
+    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+  };
 
-  getInitialState: function() {
-    return {
-      date: this.props.date,
-      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
-    };
-  },
+  state = {
+    date: this.props.date,
+    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+  };
 
-  onDateChange: function(date) {
+  onDateChange = (date) => {
     this.setState({date: date});
-  },
+  };
 
-  onTimezoneChange: function(event) {
+  onTimezoneChange = (event) => {
     var offset = parseInt(event.nativeEvent.text, 10);
     if (isNaN(offset)) {
       return;
     }
     this.setState({timeZoneOffsetInHours: offset});
-  },
+  };
 
-  render: function() {
+  render() {
     // Ideally, the timezone input would be a picker rather than a
     // text input, but we don't have any pickers yet :(
     return (
@@ -96,11 +99,11 @@ var DatePickerExample = React.createClass({
         />
       </View>
     );
-  },
-});
+  }
+}
 
-var WithLabel = React.createClass({
-  render: function() {
+class WithLabel extends React.Component {
+  render() {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.labelView}>
@@ -112,10 +115,10 @@ var WithLabel = React.createClass({
       </View>
     );
   }
-});
+}
 
-var Heading = React.createClass({
-  render: function() {
+class Heading extends React.Component {
+  render() {
     return (
       <View style={styles.headingContainer}>
         <Text style={styles.heading}>
@@ -124,7 +127,7 @@ var Heading = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';

Examples/UIExplorer/js/ExampleTypes.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/GeolocationExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -38,17 +45,15 @@ exports.examples = [
   }
 ];
 
-var GeolocationExample = React.createClass({
-  watchID: (null: ?number),
+class GeolocationExample extends React.Component {
+  state = {
+    initialPosition: 'unknown',
+    lastPosition: 'unknown',
+  };
 
-  getInitialState: function() {
-    return {
-      initialPosition: 'unknown',
-      lastPosition: 'unknown',
-    };
-  },
+  watchID: ?number = null;
 
-  componentDidMount: function() {
+  componentDidMount() {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         var initialPosition = JSON.stringify(position);
@@ -61,13 +66,13 @@ var GeolocationExample = React.createClass({
       var lastPosition = JSON.stringify(position);
       this.setState({lastPosition});
     });
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     navigator.geolocation.clearWatch(this.watchID);
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <View>
         <Text>
@@ -81,7 +86,7 @@ var GeolocationExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/ImageCapInsetsExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -25,8 +32,8 @@ var {
   View,
 } = ReactNative;
 
-var ImageCapInsetsExample = React.createClass({
-  render: function() {
+class ImageCapInsetsExample extends React.Component {
+  render() {
     return (
       <View>
         <View style={styles.background}>
@@ -54,7 +61,7 @@ var ImageCapInsetsExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   background: {

Examples/UIExplorer/js/ImageEditingExample.js

@@ -1,5 +1,11 @@
-
-/**
+/*
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/ImageExample.js

@@ -165,7 +165,7 @@ var MultipleSourcesExample = React.createClass({
   },
   render: function() {
     return (
-      <View style={styles.container}>
+      <View>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
           <Text
             style={styles.touchableText}
@@ -180,7 +180,7 @@ var MultipleSourcesExample = React.createClass({
         </View>
         <Text>Container image size: {this.state.width}x{this.state.height} </Text>
         <View
-          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
+          style={{height: this.state.height, width: this.state.width}} >
           <Image
             style={{flex: 1}}
             source={[
@@ -587,7 +587,20 @@ exports.examples = [
     render: function() {
       return <MultipleSourcesExample />;
     },
-    platform: 'android',
+  },
+  {
+    title: 'Legacy local image',
+    description:
+      'Images shipped with the native bundle, but not managed ' +
+      'by the JS packager',
+    render: function() {
+      return (
+        <Image
+          source={require('image!hawk')}
+          style={styles.base}
+        />
+      );
+    },
   },
 ];
 

Examples/UIExplorer/js/KeyboardAvoidingViewExample.js

@@ -26,24 +26,20 @@ const {
 const UIExplorerBlock = require('./UIExplorerBlock');
 const UIExplorerPage = require('./UIExplorerPage');
 
-const KeyboardAvoidingViewExample = React.createClass({
-  statics: {
-    title: '<KeyboardAvoidingView>',
-    description: 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.',
-  },
+class KeyboardAvoidingViewExample extends React.Component {
+  static title = '<KeyboardAvoidingView>';
+  static description = 'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
 
-  getInitialState() {
-    return {
-      behavior: 'padding',
-      modalOpen: false,
-    };
-  },
+  state = {
+    behavior: 'padding',
+    modalOpen: false,
+  };
 
-  onSegmentChange(segment: String) {
+  onSegmentChange = (segment: String) => {
     this.setState({behavior: segment.toLowerCase()});
-  },
+  };
 
-  renderExample() {
+  renderExample = () => {
     return (
       <View style={styles.outerContainer}>
         <Modal animationType="fade" visible={this.state.modalOpen}>
@@ -69,7 +65,7 @@ const KeyboardAvoidingViewExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
+  };
 
   render() {
     return (
@@ -79,8 +75,8 @@ const KeyboardAvoidingViewExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   outerContainer: {

Examples/UIExplorer/js/LayoutAnimationExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -25,25 +32,22 @@ const {
   TouchableOpacity,
 } = ReactNative;
 
-const AddRemoveExample = React.createClass({
-
-  getInitialState() {
-    return {
-      views: [],
-    };
-  },
+class AddRemoveExample extends React.Component {
+  state = {
+    views: [],
+  };
 
   componentWillUpdate() {
     LayoutAnimation.easeInEaseOut();
-  },
+  }
 
-  _onPressAddView() {
+  _onPressAddView = () => {
     this.setState((state) => ({views: [...state.views, {}]}));
-  },
+  };
 
-  _onPressRemoveView() {
+  _onPressRemoveView = () => {
     this.setState((state) => ({views: state.views.slice(0, -1)}));
-  },
+  };
 
   render() {
     const views = this.state.views.map((view, i) =>
@@ -68,8 +72,8 @@ const AddRemoveExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const GreenSquare = () =>
   <View style={styles.greenSquare}>
@@ -81,18 +85,15 @@ const BlueSquare = () =>
     <Text>Blue square</Text>
   </View>;
 
-const CrossFadeExample = React.createClass({
+class CrossFadeExample extends React.Component {
+  state = {
+    toggled: false,
+  };
 
-  getInitialState() {
-    return {
-      toggled: false,
-    };
-  },
-
-  _onPressToggle() {
+  _onPressToggle = () => {
     LayoutAnimation.easeInEaseOut();
     this.setState((state) => ({toggled: !state.toggled}));
-  },
+  };
 
   render() {
     return (
@@ -111,8 +112,8 @@ const CrossFadeExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/LayoutEventsExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -47,15 +54,14 @@ type State = {
   viewStyle: { margin: number },
 };
 
-var LayoutEventExample = React.createClass({
-  getInitialState(): State {
-    return {
-      viewStyle: {
-        margin: 20,
-      },
-    };
-  },
-  animateViewLayout: function() {
+class LayoutEventExample extends React.Component {
+  state: State = {
+    viewStyle: {
+      margin: 20,
+    },
+  };
+
+  animateViewLayout = () => {
     LayoutAnimation.configureNext(
       LayoutAnimation.Presets.spring,
       () => {
@@ -68,29 +74,35 @@ var LayoutEventExample = React.createClass({
         margin: this.state.viewStyle.margin > 20 ? 20 : 60,
       }
     });
-  },
-  addWrapText: function() {
+  };
+
+  addWrapText = () => {
     this.setState(
       {extraText: '  And a bunch more text to wrap around a few lines.'},
       this.changeContainer
     );
-  },
-  changeContainer: function() {
+  };
+
+  changeContainer = () => {
     this.setState({containerStyle: {width: 280}});
-  },
-  onViewLayout: function(e: LayoutEvent) {
+  };
+
+  onViewLayout = (e: LayoutEvent) => {
     console.log('received view layout event\n', e.nativeEvent);
     this.setState({viewLayout: e.nativeEvent.layout});
-  },
-  onTextLayout: function(e: LayoutEvent) {
+  };
+
+  onTextLayout = (e: LayoutEvent) => {
     console.log('received text layout event\n', e.nativeEvent);
     this.setState({textLayout: e.nativeEvent.layout});
-  },
-  onImageLayout: function(e: LayoutEvent) {
+  };
+
+  onImageLayout = (e: LayoutEvent) => {
     console.log('received image layout event\n', e.nativeEvent);
     this.setState({imageLayout: e.nativeEvent.layout});
-  },
-  render: function() {
+  };
+
+  render() {
     var viewStyle = [styles.view, this.state.viewStyle];
     var textLayout = this.state.textLayout || {width: '?', height: '?'};
     var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
@@ -124,7 +136,7 @@ var LayoutEventExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   view: {

Examples/UIExplorer/js/LayoutExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -26,8 +33,8 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var Circle = React.createClass({
-  render: function() {
+class Circle extends React.Component {
+  render() {
     var size = this.props.size || 20;
     var backgroundColor = this.props.bgColor || '#527fe4';
     return (
@@ -42,10 +49,10 @@ var Circle = React.createClass({
       />
     );
   }
-});
+}
 
-var CircleBlock = React.createClass({
-  render: function() {
+class CircleBlock extends React.Component {
+  render() {
     var circleStyle = {
       flexDirection: 'row',
       backgroundColor: '#f6f7f8',
@@ -59,17 +66,14 @@ var CircleBlock = React.createClass({
       </View>
     );
   }
-});
+}
 
-var LayoutExample = React.createClass({
-  statics: {
-    title: 'Layout - Flexbox',
-    description: 'Examples of using the flexbox API to layout views.',
-  },
+class LayoutExample extends React.Component {
+  static title = 'Layout - Flexbox';
+  static description = 'Examples of using the flexbox API to layout views.';
+  static displayName = 'LayoutExample';
 
-  displayName: 'LayoutExample',
-
-  render: function() {
+  render() {
     var fiveColoredCircles = [
       <Circle bgColor="#527fe4" key="blue" />,
       <Circle bgColor="#D443E3" key="violet" />,
@@ -161,7 +165,7 @@ var LayoutExample = React.createClass({
       </UIExplorerPage>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   overlay: {

Examples/UIExplorer/js/LinkingExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -24,13 +31,12 @@ var {
 } = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');
 
-var OpenURLButton = React.createClass({
-
-  propTypes: {
+class OpenURLButton extends React.Component {
+  static propTypes = {
     url: React.PropTypes.string,
-  },
+  };
 
-  handleClick: function() {
+  handleClick = () => {
     Linking.canOpenURL(this.props.url).then(supported => {
       if (supported) {
         Linking.openURL(this.props.url);
@@ -38,9 +44,9 @@ var OpenURLButton = React.createClass({
         console.log('Don\'t know how to open URI: ' + this.props.url);
       }
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <TouchableOpacity
         onPress={this.handleClick}>
@@ -50,16 +56,13 @@ var OpenURLButton = React.createClass({
       </TouchableOpacity>
     );
   }
-});
+}
 
-var IntentAndroidExample = React.createClass({
+class IntentAndroidExample extends React.Component {
+  static title = 'Linking';
+  static description = 'Shows how to use Linking to open URLs.';
 
-  statics: {
-    title: 'Linking',
-    description: 'Shows how to use Linking to open URLs.',
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerBlock title="Open external URLs">
         <OpenURLButton url={'https://www.facebook.com'} />
@@ -70,8 +73,8 @@ var IntentAndroidExample = React.createClass({
         <OpenURLButton url={'tel:9876543210'} />
       </UIExplorerBlock>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/ListViewExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -58,7 +65,7 @@ var ListViewSimpleExample = React.createClass({
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
           renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={this._renderSeperator}
+          renderSeparator={this._renderSeparator}
         />
       </UIExplorerPage>
     );
@@ -100,7 +107,7 @@ var ListViewSimpleExample = React.createClass({
     )});
   },
 
-  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+  _renderSeparator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
     return (
       <View
         key={`${sectionID}-${rowID}`}

Examples/UIExplorer/js/ListViewGridLayoutExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *

Examples/UIExplorer/js/ListViewPagingExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -50,26 +57,28 @@ var THUMB_URLS = [
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;
 
-var Thumb = React.createClass({
-  getInitialState: function() {
-    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
-  },
-  componentWillMount: function() {
+class Thumb extends React.Component {
+  componentWillMount() {
     UIManager.setLayoutAnimationEnabledExperimental &&
       UIManager.setLayoutAnimationEnabledExperimental(true);
-  },
-  _getThumbIdx: function() {
+  }
+
+  _getThumbIdx = () => {
     return Math.floor(Math.random() * THUMB_URLS.length);
-  },
-  _onPressThumb: function() {
+  };
+
+  _onPressThumb = () => {
     var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
     LayoutAnimation.configureNext(config);
     this.setState({
       thumbIndex: this._getThumbIdx(),
       dir: this.state.dir === 'row' ? 'column' : 'row',
     });
-  },
-  render: function() {
+  };
+
+  state = {thumbIndex: this._getThumbIdx(), dir: 'row'};
+
+  render() {
     return (
       <TouchableOpacity
         onPress={this._onPressThumb}
@@ -87,15 +96,16 @@ var Thumb = React.createClass({
       </TouchableOpacity>
     );
   }
-});
+}
 
-var ListViewPagingExample = React.createClass({
-  statics: {
-    title: '<ListView> - Paging',
-    description: 'Floating headers & layout animations.'
-  },
+class ListViewPagingExample extends React.Component {
+  state: *;
+  static title = '<ListView> - Paging';
+  static description = 'Floating headers & layout animations.';
 
-  getInitialState: function() {
+  // $FlowFixMe found when converting React.createClass to ES6
+  constructor(props) {
+    super(props);
     var getSectionData = (dataBlob, sectionID) => {
       return dataBlob[sectionID];
     };
@@ -125,17 +135,18 @@ var ListViewPagingExample = React.createClass({
         dataBlob[rowName] = rowName;
       }
     }
-    return {
+
+    this.state = {
       dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
       headerPressCount: 0,
     };
-  },
+  }
 
-  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement<any> {
+  renderRow = (rowData: string, sectionID: string, rowID: string): ReactElement<any> => {
     return (<Thumb text={rowData}/>);
-  },
+  };
 
-  renderSectionHeader: function(sectionData: string, sectionID: string) {
+  renderSectionHeader = (sectionData: string, sectionID: string) => {
     return (
       <View style={styles.section}>
         <Text style={styles.text}>
@@ -143,9 +154,9 @@ var ListViewPagingExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  };
 
-  renderHeader: function() {
+  renderHeader = () => {
     var headerLikeText = this.state.headerPressCount % 2 ?
       <View><Text style={styles.text}>1 Like</Text></View> :
       null;
@@ -159,9 +170,9 @@ var ListViewPagingExample = React.createClass({
         </View>
       </TouchableOpacity>
     );
-  },
+  };
 
-  renderFooter: function() {
+  renderFooter = () => {
     return (
       <View style={styles.header}>
         <Text onPress={() => console.log('Footer!')} style={styles.text}>
@@ -169,9 +180,9 @@ var ListViewPagingExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <ListView
         style={styles.listview}
@@ -186,15 +197,14 @@ var ListViewPagingExample = React.createClass({
         scrollRenderAheadDistance={500}
       />
     );
-  },
+  }
 
-  _onPressHeader: function() {
+  _onPressHeader = () => {
     var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
     LayoutAnimation.configureNext(config);
     this.setState({headerPressCount: this.state.headerPressCount + 1});
-  },
-
-});
+  };
+}
 
 var styles = StyleSheet.create({
   listview: {

Examples/UIExplorer/js/MapViewExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -153,16 +160,13 @@ var MapRegionInput = React.createClass({
 
 });
 
-var MapViewExample = React.createClass({
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      mapRegion: undefined,
-      mapRegionInput: undefined,
-      annotations: [],
-    };
-  },
+class MapViewExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    mapRegion: undefined,
+    mapRegionInput: undefined,
+    annotations: [],
+  };
 
   render() {
     return (
@@ -180,23 +184,23 @@ var MapViewExample = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  _getAnnotations(region) {
+  _getAnnotations = (region) => {
     return [{
       longitude: region.longitude,
       latitude: region.latitude,
       title: 'You Are Here',
     }];
-  },
+  };
 
-  _onRegionChange(region) {
+  _onRegionChange = (region) => {
     this.setState({
       mapRegionInput: region,
     });
-  },
+  };
 
-  _onRegionChangeComplete(region) {
+  _onRegionChangeComplete = (region) => {
     if (this.state.isFirstLoad) {
       this.setState({
         mapRegionInput: region,
@@ -204,27 +208,23 @@ var MapViewExample = React.createClass({
         isFirstLoad: false,
       });
     }
-  },
+  };
 
-  _onRegionInputChanged(region) {
+  _onRegionInputChanged = (region) => {
     this.setState({
       mapRegion: region,
       mapRegionInput: region,
       annotations: this._getAnnotations(region),
     });
-  },
+  };
+}
 
-});
-
-var AnnotationExample = React.createClass({
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      annotations: [],
-      mapRegion: undefined,
-    };
-  },
+class AnnotationExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    annotations: [],
+    mapRegion: undefined,
+  };
 
   render() {
     if (this.state.isFirstLoad) {
@@ -248,13 +248,17 @@ var AnnotationExample = React.createClass({
         annotations={this.state.annotations}
       />
     );
-  },
+  }
+}
 
-});
+class DraggableAnnotationExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    annotations: [],
+    mapRegion: undefined,
+  };
 
-var DraggableAnnotationExample = React.createClass({
-
-  createAnnotation(longitude, latitude) {
+  createAnnotation = (longitude, latitude) => {
     return {
       longitude,
       latitude,
@@ -268,15 +272,7 @@ var DraggableAnnotationExample = React.createClass({
         console.log('Drag state: ' + event.state);
       },
     };
-  },
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      annotations: [],
-      mapRegion: undefined,
-    };
-  },
+  };
 
   render() {
     if (this.state.isFirstLoad) {
@@ -298,9 +294,8 @@ var DraggableAnnotationExample = React.createClass({
         annotations={this.state.annotations}
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   map: {

Examples/UIExplorer/js/ModalExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -31,20 +38,18 @@ exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';
 
-var Button = React.createClass({
-  getInitialState() {
-    return {
-      active: false,
-    };
-  },
+class Button extends React.Component {
+  state = {
+    active: false,
+  };
 
-  _onHighlight() {
+  _onHighlight = () => {
     this.setState({active: true});
-  },
+  };
 
-  _onUnhighlight() {
+  _onUnhighlight = () => {
     this.setState({active: false});
-  },
+  };
 
   render() {
     var colorStyle = {
@@ -61,28 +66,26 @@ var Button = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-var ModalExample = React.createClass({
-  getInitialState() {
-    return {
-      animationType: 'none',
-      modalVisible: false,
-      transparent: false,
-    };
-  },
+class ModalExample extends React.Component {
+  state = {
+    animationType: 'none',
+    modalVisible: false,
+    transparent: false,
+  };
 
-  _setModalVisible(visible) {
+  _setModalVisible = (visible) => {
     this.setState({modalVisible: visible});
-  },
+  };
 
-  _setAnimationType(type) {
+  _setAnimationType = (type) => {
     this.setState({animationType: type});
-  },
+  };
 
-  _toggleTransparent() {
+  _toggleTransparent = () => {
     this.setState({transparent: !this.state.transparent});
-  },
+  };
 
   render() {
     var modalBackgroundStyle = {
@@ -137,8 +140,8 @@ var ModalExample = React.createClass({
         </Button>
       </View>
     );
-  },
-});
+  }
+}
 
 exports.examples = [
   {

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -22,40 +22,34 @@
  */
 'use strict';
 
-var React = require('react');
-var ReactNative = require('react-native');
-var {
+const React = require('react');
+const ReactNative = require('react-native');
+const {
   View,
   Text,
   Animated,
   StyleSheet,
   TouchableWithoutFeedback,
 } = ReactNative;
-var UIExplorerButton = require('./UIExplorerButton');
 
-var Tester = React.createClass({
-  current: 0,
-  getInitialState() {
-    return {
-      native: new Animated.Value(0),
-      js: new Animated.Value(0),
-    };
-  },
+class Tester extends React.Component {
+  state = {
+    native: new Animated.Value(0),
+    js: new Animated.Value(0),
+  };
 
-  onPress() {
+  current = 0;
+
+  onPress = () => {
     this.current = this.current ? 0 : 1;
     const config = {
       ...this.props.config,
       toValue: this.current,
     };
-    try {
-      Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
-    } catch (e) {
-      // uncomment this if you want to get the redbox errors!
-      throw e;
-    }
+
+    Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
     Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
-  },
+  };
 
   render() {
     return (
@@ -76,8 +70,54 @@ var Tester = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-});
+  }
+}
+
+class ValueListenerExample extends React.Component {
+  state = {
+    anim: new Animated.Value(0),
+    progress: 0,
+  };
+  _current = 0;
+
+  componentDidMount() {
+    this.state.anim.addListener((e) => this.setState({ progress: e.value }));
+  }
+
+  componentWillUnmount() {
+    this.state.anim.removeAllListeners();
+  }
+
+  _onPress = () => {
+    this._current = this._current ? 0 : 1;
+    const config = {
+      duration: 1000,
+      toValue: this._current,
+    };
+
+    Animated.timing(this.state.anim, { ...config, useNativeDriver: true }).start();
+  };
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={this._onPress}>
+        <View>
+          <View style={styles.row}>
+            <Animated.View
+              style={[
+                styles.block,
+                {
+                  opacity: this.state.anim,
+                }
+              ]}
+            />
+          </View>
+          <Text>Value: {this.state.progress}</Text>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   row: {
@@ -305,4 +345,13 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Animated value listener',
+    platform: 'android',
+    render: function() {
+      return (
+        <ValueListenerExample />
+      );
+    },
+  },
 ];

Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js

@@ -267,7 +267,7 @@ const YourNavigator = createAppNavigationContainer(class extends Component {
           key={'stack_' + tabKey}
           onNavigateBack={this._back}
           navigationState={scenes}
-          renderOverlay={this._renderHeader}
+          renderHeader={this._renderHeader}
           renderScene={this._renderScene}
           style={styles.navigatorCardStack}
         />
@@ -333,10 +333,10 @@ const YourHeader = createAppNavigationContainer(class extends Component {
     this.props.navigate({type: 'pop'});
   }
 
-  _renderTitleComponent(): ReactElement {
+  _renderTitleComponent(props: Object): ReactElement {
     return (
       <NavigationHeader.Title>
-        {this.props.scene.route.key}
+        {props.scene.route.key}
       </NavigationHeader.Title>
     );
   }
@@ -359,7 +359,7 @@ const YourScene = createAppNavigationContainer(class extends Component {
 
   render(): ReactElement {
     return (
-      <ScrollView style={styles.scrollView}>
+      <ScrollView>
         <NavigationExampleRow
           text="Push Route"
           onPress={this._pushRoute}
@@ -463,9 +463,6 @@ const styles = StyleSheet.create({
   navigatorCardStack: {
     flex: 20,
   },
-  scrollView: {
-    marginTop: 64
-  },
   tabs: {
     flex: 1,
     flexDirection: 'row',

Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js

@@ -165,7 +165,7 @@ class YourNavigator extends React.Component {
 class YourScene extends React.Component {
   render() {
     return (
-      <ScrollView style={styles.scrollView}>
+      <ScrollView>
         <NavigationExampleRow
           text={'route = ' + this.props.route.key}
         />
@@ -190,9 +190,6 @@ const styles = StyleSheet.create({
   navigator: {
     flex: 1,
   },
-  scrollView: {
-    marginTop: 64
-  },
 });
 
 module.exports = YourApplication;

Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -23,8 +30,8 @@ var {
   TouchableHighlight,
 } = ReactNative;
 
-var NavigationExampleRow = React.createClass({
-  render: function() {
+class NavigationExampleRow extends React.Component {
+  render() {
     if (this.props.onPress) {
       return (
         <TouchableHighlight
@@ -44,8 +51,8 @@ var NavigationExampleRow = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js

@@ -41,18 +41,14 @@ const EXAMPLES = {
 
 const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
-const NavigationExperimentalExample = React.createClass({
-  statics: {
-    title: 'Navigation (Experimental)',
-    description: 'Upcoming navigation APIs and animated navigation views',
-    external: true,
-  },
+class NavigationExperimentalExample extends React.Component {
+  static title = 'Navigation (Experimental)';
+  static description = 'Upcoming navigation APIs and animated navigation views';
+  static external = true;
 
-  getInitialState: function() {
-    return {
-      example: null,
-    };
-  },
+  state = {
+    example: null,
+  };
 
   componentDidMount() {
     AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
@@ -66,16 +62,16 @@ const NavigationExperimentalExample = React.createClass({
         example,
       });
     });
-  },
+  }
 
-  setExample: function(example) {
+  setExample = (example) => {
     this.setState({
       example,
     });
     AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
-  },
+  };
 
-  _renderMenu: function() {
+  _renderMenu = () => {
     let exitRow = null;
     if (this.props.onExampleExit) {
       exitRow = (
@@ -93,9 +89,9 @@ const NavigationExperimentalExample = React.createClass({
         </ScrollView>
       </View>
     );
-  },
+  };
 
-  _renderExampleList: function() {
+  _renderExampleList = () => {
     return Object.keys(EXAMPLES).map(exampleName => (
       <NavigationExampleRow
         key={exampleName}
@@ -105,13 +101,13 @@ const NavigationExperimentalExample = React.createClass({
         }}
       />
     ));
-  },
+  };
 
-  _exitInnerExample: function() {
+  _exitInnerExample = () => {
     this.setExample('menu');
-  },
+  };
 
-  handleBackAction: function() {
+  handleBackAction = () => {
     const wasHandledByExample = (
       this.exampleRef &&
       this.exampleRef.handleBackAction &&
@@ -125,9 +121,9 @@ const NavigationExperimentalExample = React.createClass({
       return true;
     }
     return false;
-  },
+  };
 
-  render: function() {
+  render() {
     if (this.state.example === 'menu') {
       return this._renderMenu();
     }
@@ -141,8 +137,8 @@ const NavigationExperimentalExample = React.createClass({
       );
     }
     return null;
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   menu: {

Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js

@@ -222,7 +222,7 @@ class ExampleScene extends Component {
     const width = layout.initWidth;
     const translateX = position.interpolate({
       inputRange,
-      outputRange: [width, 0, -10],
+      outputRange: ([width, 0, -10]: Array<number>),
     });
 
     return {

Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-pager-example.js

@@ -137,8 +137,6 @@ class Example extends Component {
 class ExampleNavigator extends Component {
   _render: Function;
   _renderScene: Function;
-  _back: Function;
-  _forward: Function;
 
   props: {
     navigate: Function,
@@ -154,8 +152,6 @@ class ExampleNavigator extends Component {
     super(props, context);
     this._render = this._render.bind(this);
     this._renderScene = this._renderScene.bind(this);
-    this._back = this._back.bind(this);
-    this._forward = this._forward.bind(this);
   }
 
   render(): ReactElement<any> {
@@ -195,14 +191,6 @@ class ExampleNavigator extends Component {
       />
     );
   }
-
-  _back(): void {
-    this.props.navigate('back');
-  }
-
-  _forward(): void {
-    this.props.navigate('forward');
-  }
 }
 
 class ExampleScene extends Component {
@@ -261,10 +249,6 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
   },
-  scrollView: {
-    flex: 1,
-    padding: 50,
-  },
   heading: {
     alignItems : 'center',
     flex: 1,

Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -43,9 +50,8 @@ class NavButton extends React.Component {
   }
 }
 
-var BreadcrumbNavSample = React.createClass({
-
-  componentWillMount: function() {
+class BreadcrumbNavSample extends React.Component {
+  componentWillMount() {
     this._navBarRouteMapper = {
       rightContentForRoute: function(route, navigator) {
         return null;
@@ -75,9 +81,9 @@ var BreadcrumbNavSample = React.createClass({
         );
       }
     };
-  },
+  }
 
-  _renderScene: function(route, navigator) {
+  _renderScene = (route, navigator) => {
     return (
       <ScrollView style={styles.scene}>
         <NavButton
@@ -102,9 +108,9 @@ var BreadcrumbNavSample = React.createClass({
         />
       </ScrollView>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         style={styles.container}
@@ -117,11 +123,8 @@ var BreadcrumbNavSample = React.createClass({
         }
       />
     );
-  },
-
-
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   scene: {

Examples/UIExplorer/js/Navigator/JumpingNavSample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -99,8 +106,8 @@ class JumpingNavBar extends React.Component {
   }
 }
 
-var JumpingNavSample = React.createClass({
-  render: function() {
+class JumpingNavSample extends React.Component {
+  render() {
     return (
       <Navigator
         debugOverlay={false}
@@ -126,9 +133,9 @@ var JumpingNavSample = React.createClass({
         }
       />
     );
-  },
+  }
 
-  renderScene: function(route, navigator) {
+  renderScene = (route, navigator) => {
     var backBtn;
     var forwardBtn;
     if (ROUTE_STACK.indexOf(route) !== 0) {
@@ -178,8 +185,8 @@ var JumpingNavSample = React.createClass({
         />
       </ScrollView>
     );
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   button: {

Examples/UIExplorer/js/Navigator/NavigationBarSample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -85,9 +92,8 @@ function newRandomRoute() {
   };
 }
 
-var NavigationBarSample = React.createClass({
-
-  componentWillMount: function() {
+class NavigationBarSample extends React.Component {
+  componentWillMount() {
     var navigator = this.props.navigator;
 
     var callback = (event) => {
@@ -106,13 +112,13 @@ var NavigationBarSample = React.createClass({
       navigator.navigationContext.addListener('willfocus', callback),
       navigator.navigationContext.addListener('didfocus', callback),
     ];
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <Navigator
         debugOverlay={false}
@@ -147,9 +153,8 @@ var NavigationBarSample = React.createClass({
         }
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/Navigator/NavigatorExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -105,14 +112,11 @@ class NavMenu extends React.Component {
   }
 }
 
-var TabBarExample = React.createClass({
+class TabBarExample extends React.Component {
+  static title = '<Navigator>';
+  static description = 'JS-implemented navigation';
 
-  statics: {
-    title: '<Navigator>',
-    description: 'JS-implemented navigation',
-  },
-
-  renderScene: function(route, nav) {
+  renderScene = (route, nav) => {
     switch (route.id) {
       case 'navbar':
         return <NavigationBarSample navigator={nav} />;
@@ -129,9 +133,9 @@ var TabBarExample = React.createClass({
           />
         );
     }
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         ref={this._setNavigatorRef}
@@ -146,14 +150,13 @@ var TabBarExample = React.createClass({
         }}
       />
     );
-  },
+  }
 
-
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
+  }
 
-  _setNavigatorRef: function(navigator) {
+  _setNavigatorRef = (navigator) => {
     if (navigator !== this._navigator) {
       this._navigator = navigator;
 
@@ -175,8 +178,8 @@ var TabBarExample = React.createClass({
         ];
       }
     }
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/NavigatorIOSColorsExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -23,9 +30,8 @@ var {
   View
 } = ReactNative;
 
-var EmptyPage = React.createClass({
-
-  render: function() {
+class EmptyPage extends React.Component {
+  render() {
     return (
       <View style={styles.emptyPage}>
         <Text style={styles.emptyPageText}>
@@ -33,18 +39,14 @@ var EmptyPage = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
+}
 
-});
+class NavigatorIOSColors extends React.Component {
+  static title = '<NavigatorIOS> - Custom';
+  static description = 'iOS navigation with custom nav bar colors';
 
-var NavigatorIOSColors = React.createClass({
-
-  statics: {
-    title: '<NavigatorIOS> - Custom',
-    description: 'iOS navigation with custom nav bar colors',
-  },
-
-  render: function() {
+  render() {
     // Set StatusBar with light contents to get better contrast
     StatusBar.setBarStyle('light-content');
 
@@ -70,9 +72,8 @@ var NavigatorIOSColors = React.createClass({
         translucent={true}
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/NavigatorIOSExample.js

@@ -36,8 +36,8 @@ const {
   View,
 } = ReactNative;
 
-const EmptyPage = React.createClass({
-  render: function() {
+class EmptyPage extends React.Component {
+  render() {
     return (
       <View style={styles.emptyPage}>
         <Text style={styles.emptyPageText}>
@@ -45,11 +45,11 @@ const EmptyPage = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
-const NavigatorIOSExamplePage = React.createClass({
-  render: function() {
+class NavigatorIOSExamplePage extends React.Component {
+  render() {
     var recurseTitle = 'Recurse Navigation';
     if (!this.props.depth || this.props.depth === 1) {
       recurseTitle += ' - more examples here';
@@ -128,9 +128,9 @@ const NavigatorIOSExamplePage = React.createClass({
         <View style={styles.line}/>
       </ScrollView>
     );
-  },
+  }
 
-  _renderReplace: function() {
+  _renderReplace = () => {
     if (!this.props.depth) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -148,9 +148,9 @@ const NavigatorIOSExamplePage = React.createClass({
         }
       });
     });
-  },
+  };
 
-  _renderReplacePrevious: function() {
+  _renderReplacePrevious = () => {
     if (!this.props.depth || this.props.depth < 2) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -165,9 +165,9 @@ const NavigatorIOSExamplePage = React.createClass({
         wrapperStyle: styles.customWrapperStyle,
       });
     });
-  },
+  };
 
-  _renderReplacePreviousAndPop: function() {
+  _renderReplacePreviousAndPop = () => {
     if (!this.props.depth || this.props.depth < 2) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -182,9 +182,9 @@ const NavigatorIOSExamplePage = React.createClass({
         wrapperStyle: styles.customWrapperStyle,
       });
     });
-  },
+  };
 
-  _renderRow: function(title: string, onPress: Function) {
+  _renderRow = (title: string, onPress: Function) => {
     return (
       <View>
         <TouchableHighlight onPress={onPress}>
@@ -197,17 +197,15 @@ const NavigatorIOSExamplePage = React.createClass({
         <View style={styles.separator} />
       </View>
     );
-  },
-});
+  };
+}
 
-const NavigatorIOSExample = React.createClass({
-  statics: {
-    title: '<NavigatorIOS>',
-    description: 'iOS navigation capabilities',
-    external: true,
-  },
+class NavigatorIOSExample extends React.Component {
+  static title = '<NavigatorIOS>';
+  static description = 'iOS navigation capabilities';
+  static external = true;
 
-  render: function() {
+  render() {
     const {onExampleExit} = this.props;
     return (
       <NavigatorIOS
@@ -217,12 +215,11 @@ const NavigatorIOSExample = React.createClass({
           component: NavigatorIOSExamplePage,
           passProps: {onExampleExit},
         }}
-        itemWrapperStyle={styles.itemWrapper}
         tintColor="#008888"
       />
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/NetInfoExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -24,31 +31,33 @@ const {
   TouchableWithoutFeedback,
 } = ReactNative;
 
-const ConnectionInfoSubscription = React.createClass({
-  getInitialState() {
-    return {
-      connectionInfoHistory: [],
-    };
-  },
-  componentDidMount: function() {
+class ConnectionInfoSubscription extends React.Component {
+  state = {
+    connectionInfoHistory: [],
+  };
+
+  componentDidMount() {
     NetInfo.addEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.removeEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  _handleConnectionInfoChange: function(connectionInfo) {
+  }
+
+  _handleConnectionInfoChange = (connectionInfo) => {
     const connectionInfoHistory = this.state.connectionInfoHistory.slice();
     connectionInfoHistory.push(connectionInfo);
     this.setState({
       connectionInfoHistory,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -56,15 +65,14 @@ const ConnectionInfoSubscription = React.createClass({
         </View>
     );
   }
-});
+}
 
-const ConnectionInfoCurrent = React.createClass({
-  getInitialState() {
-    return {
-      connectionInfo: null,
-    };
-  },
-  componentDidMount: function() {
+class ConnectionInfoCurrent extends React.Component {
+  state = {
+    connectionInfo: null,
+  };
+
+  componentDidMount() {
     NetInfo.addEventListener(
         'change',
         this._handleConnectionInfoChange
@@ -72,18 +80,21 @@ const ConnectionInfoCurrent = React.createClass({
     NetInfo.fetch().done(
         (connectionInfo) => { this.setState({connectionInfo}); }
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.removeEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  _handleConnectionInfoChange: function(connectionInfo) {
+  }
+
+  _handleConnectionInfoChange = (connectionInfo) => {
     this.setState({
       connectionInfo,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -91,15 +102,14 @@ const ConnectionInfoCurrent = React.createClass({
         </View>
     );
   }
-});
+}
 
-const IsConnected = React.createClass({
-  getInitialState() {
-    return {
-      isConnected: null,
-    };
-  },
-  componentDidMount: function() {
+class IsConnected extends React.Component {
+  state = {
+    isConnected: null,
+  };
+
+  componentDidMount() {
     NetInfo.isConnected.addEventListener(
         'change',
         this._handleConnectivityChange
@@ -107,18 +117,21 @@ const IsConnected = React.createClass({
     NetInfo.isConnected.fetch().done(
         (isConnected) => { this.setState({isConnected}); }
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.isConnected.removeEventListener(
         'change',
         this._handleConnectivityChange
     );
-  },
-  _handleConnectivityChange: function(isConnected) {
+  }
+
+  _handleConnectivityChange = (isConnected) => {
     this.setState({
       isConnected,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -126,19 +139,19 @@ const IsConnected = React.createClass({
         </View>
     );
   }
-});
+}
 
-const IsConnectionExpensive = React.createClass({
-  getInitialState() {
-    return {
-      isConnectionExpensive: (null : ?boolean),
-    };
-  },
-  _checkIfExpensive() {
+class IsConnectionExpensive extends React.Component {
+  state = {
+    isConnectionExpensive: (null : ?boolean),
+  };
+
+  _checkIfExpensive = () => {
     NetInfo.isConnectionExpensive().then(
         isConnectionExpensive => { this.setState({isConnectionExpensive}); }
     );
-  },
+  };
+
   render() {
     return (
         <View>
@@ -154,7 +167,7 @@ const IsConnectionExpensive = React.createClass({
         </View>
     );
   }
-});
+}
 
 exports.title = 'NetInfo';
 exports.description = 'Monitor network status';

Examples/UIExplorer/js/PermissionsExampleAndroid.android.js

@@ -40,15 +40,13 @@ exports.framework = 'React';
 exports.title = '<Permissions>';
 exports.description = 'Permissions example for API 23+.';
 
-const PermissionsExample = React.createClass({
-  getInitialState: function() {
-    return {
-      permission: 'android.permission.WRITE_EXTERNAL_STORAGE',
-      hasPermission: 'Not Checked',
-    };
-  },
+class PermissionsExample extends React.Component {
+  state = {
+    permission: 'android.permission.WRITE_EXTERNAL_STORAGE',
+    hasPermission: 'Not Checked',
+  };
 
-  render: function() {
+  render() {
     return (
       <View style={styles.container}>
         <Text style={styles.text}>Permission Name:</Text>
@@ -72,15 +70,15 @@ const PermissionsExample = React.createClass({
         </TouchableWithoutFeedback>
       </View>
     );
-  },
+  }
 
-  _updateText: function(event: Object) {
+  _updateText = (event: Object) => {
     this.setState({
       permission: event.nativeEvent.text,
     });
-  },
+  };
 
-  _checkPermission: function() {
+  _checkPermission = () => {
     Permissions.checkPermission(
       this.state.permission,
       (permission: string, result: boolean) => {
@@ -89,9 +87,9 @@ const PermissionsExample = React.createClass({
         });
       },
       this._showError);
-  },
+  };
 
-  _shouldExplainPermission: function() {
+  _shouldExplainPermission = () => {
     Permissions.shouldShowRequestPermissionRationale(
       this.state.permission,
       (permission: string, shouldShow: boolean) => {
@@ -110,9 +108,9 @@ const PermissionsExample = React.createClass({
         }
       },
       this._showError);
-  },
+  };
 
-  _requestPermission: function() {
+  _requestPermission = () => {
     Permissions.requestPermission(
       this.state.permission,
       (permission: string, result: boolean) => {
@@ -121,12 +119,12 @@ const PermissionsExample = React.createClass({
         });
       },
       this._showError);
-  },
+  };
 
-  _showError: function() {
+  _showError = () => {
     DialogManager.showAlert({message: 'Error'}, {}, {});
-  }
-});
+  };
+}
 
 exports.examples = [
   {

Examples/UIExplorer/js/PickerExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -26,26 +33,22 @@ const {
   Text,
   TouchableWithoutFeedback,
 } = ReactNative;
+// $FlowFixMe found when converting React.createClass to ES6
 const Item = Picker.Item;
 
-const PickerExample = React.createClass({
+class PickerExample extends React.Component {
+  static title = '<Picker>';
+  static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
 
-  statics: {
-    title: '<Picker>',
-    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
-  },
+  state = {
+    selected1: 'key1',
+    selected2: 'key1',
+    selected3: 'key1',
+    color: 'red',
+    mode: Picker.MODE_DIALOG,
+  };
 
-  getInitialState: function() {
-    return {
-      selected1: 'key1',
-      selected2: 'key1',
-      selected3: 'key1',
-      color: 'red',
-      mode: Picker.MODE_DIALOG,
-    };
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title="<Picker>">
         <UIExplorerBlock title="Basic Picker">
@@ -114,21 +117,21 @@ const PickerExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
+  }
 
-  changeMode: function() {
+  changeMode = () => {
     const newMode = this.state.mode === Picker.MODE_DIALOG
         ? Picker.MODE_DROPDOWN
         : Picker.MODE_DIALOG;
     this.setState({mode: newMode});
-  },
+  };
 
-  onValueChange: function(key: string, value: string) {
+  onValueChange = (key: string, value: string) => {
     const newState = {};
     newState[key] = value;
     this.setState(newState);
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   picker: {

Examples/UIExplorer/js/PickerIOSExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -66,15 +73,13 @@ var CAR_MAKES_AND_MODELS = {
   },
 };
 
-var PickerExample = React.createClass({
-  getInitialState: function() {
-    return {
-      carMake: 'cadillac',
-      modelIndex: 3,
-    };
-  },
+class PickerExample extends React.Component {
+  state = {
+    carMake: 'cadillac',
+    modelIndex: 3,
+  };
 
-  render: function() {
+  render() {
     var make = CAR_MAKES_AND_MODELS[this.state.carMake];
     var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
     return (
@@ -107,18 +112,16 @@ var PickerExample = React.createClass({
         <Text>You selected: {selectionString}</Text>
       </View>
     );
-  },
-});
+  }
+}
 
-var PickerStyleExample = React.createClass({
-  getInitialState: function() {
-    return {
-      carMake: 'cadillac',
-      modelIndex: 0,
-    };
-  },
+class PickerStyleExample extends React.Component {
+  state = {
+    carMake: 'cadillac',
+    modelIndex: 0,
+  };
 
-  render: function() {
+  render() {
     var make = CAR_MAKES_AND_MODELS[this.state.carMake];
     var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
     return (
@@ -135,8 +138,8 @@ var PickerStyleExample = React.createClass({
         ))}
       </PickerIOS>
     );
-  },
-});
+  }
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';