[Website] Load React Native Web Player from MaxCDN.

Reviewed By: majak

Differential Revision: D3682745

fbshipit-source-id: 108ff292aa79765d8e5bb7fc364717eba662c0ea

.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.*
@@ -47,11 +47,11 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-9]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-9]\\|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.29.0
+^0.30.0

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,8 +2,6 @@ Thanks for submitting a pull request! Please provide enough information so that
 
 > **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.**
 
-(You can skip this if you're fixing a typo or adding an app to the Showcase.)
-
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 
 Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

CONTRIBUTING.md

@@ -21,7 +21,7 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 1. Fork the repo and create your branch from `master`.
 2. **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

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 */
@@ -175,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 */;
@@ -217,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 */

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/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 */
@@ -217,6 +236,10 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
+				{
+					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
+					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
+				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -277,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 */

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/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/RCTShadowViewTests.m

@@ -106,6 +106,29 @@
   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:^(CSSNodeRef node) {

Examples/UIExplorer/js/AccessibilityAndroidExample.android.js

@@ -36,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'}>
 
@@ -202,8 +197,8 @@ var AccessibilityAndroidExample = React.createClass({
 
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
    embedded: {

Examples/UIExplorer/js/AccessibilityIOSExample.js

@@ -29,7 +29,7 @@ var {
   View,
 } = ReactNative;
 
-var AccessibilityIOSExample = React.createClass({
+class AccessibilityIOSExample extends React.Component {
   render() {
     return (
       <View>
@@ -60,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

@@ -42,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 (
@@ -60,9 +58,9 @@ var ActionSheetExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -71,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 (
@@ -92,9 +88,9 @@ var ActionSheetTintExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -104,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 (
@@ -125,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',
@@ -146,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 (
@@ -167,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
@@ -190,8 +182,8 @@ var ShareScreenshotExample = React.createClass({
         this.setState({text});
       });
     }).catch((error) => alert(error));
-  }
-});
+  };
+}
 
 var style = StyleSheet.create({
   button: {

Examples/UIExplorer/js/ActivityIndicatorExample.js

@@ -22,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 (
@@ -60,7 +69,9 @@ const ToggleAnimatingActivityIndicator = React.createClass({
       />
     );
   }
-});
+}
+
+
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
@@ -113,8 +124,8 @@ exports.examples = [
       return (
         <ActivityIndicator
           style={[styles.centering, styles.gray]}
-          color="white"
           size="large"
+          color="white"
         />
       );
     }
@@ -161,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

@@ -44,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
@@ -62,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>
@@ -102,7 +100,7 @@ var AdSupportIOSExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/AlertExample.js

@@ -41,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}
@@ -109,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/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

@@ -31,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;
@@ -57,8 +54,8 @@ var AssetScaledImageExample = React.createClass({
         </View>
       </ScrollView>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/AsyncStorageExample.js

@@ -35,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){
@@ -52,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;
@@ -91,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);
@@ -101,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/CameraRollExample.js

@@ -41,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 (
@@ -71,9 +68,9 @@ const CameraRollExample = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  loadAsset(asset){
+  loadAsset = (asset) => {
     if (this.props.navigator) {
       this.props.navigator.push({
         title: 'Camera Roll Image',
@@ -82,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 ?
@@ -105,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/ClipboardExample.js

@@ -30,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();
@@ -45,7 +43,7 @@ var ClipboardExample = React.createClass({
     } catch (e) {
       this.setState({content:e.message});
     }
-  },
+  };
 
   render() {
     return (
@@ -59,7 +57,7 @@ var ClipboardExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';

Examples/UIExplorer/js/DatePickerAndroidExample.js

@@ -32,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);
@@ -66,7 +61,7 @@ var DatePickerAndroidExample = React.createClass({
     } catch ({code, message}) {
       console.warn(`Error in example '${stateKey}': `, message);
     }
-  },
+  };
 
   render() {
     return (
@@ -113,8 +108,8 @@ var DatePickerAndroidExample = React.createClass({
           </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   text: {

Examples/UIExplorer/js/DatePickerIOSExample.js

@@ -32,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 (
@@ -103,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}>
@@ -119,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}>
@@ -131,7 +127,7 @@ var Heading = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';

Examples/UIExplorer/js/GeolocationExample.js

@@ -45,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);
@@ -68,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>
@@ -88,7 +86,7 @@ var GeolocationExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/ImageCapInsetsExample.js

@@ -32,8 +32,8 @@ var {
   View,
 } = ReactNative;
 
-var ImageCapInsetsExample = React.createClass({
-  render: function() {
+class ImageCapInsetsExample extends React.Component {
+  render() {
     return (
       <View>
         <View style={styles.background}>
@@ -61,7 +61,7 @@ var ImageCapInsetsExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   background: {

Examples/UIExplorer/js/ImageExample.js

@@ -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

@@ -32,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) =>
@@ -75,8 +72,8 @@ const AddRemoveExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const GreenSquare = () =>
   <View style={styles.greenSquare}>
@@ -88,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 (
@@ -118,8 +112,8 @@ const CrossFadeExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/LayoutEventsExample.js

@@ -54,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,
       () => {
@@ -75,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: '?'};
@@ -131,7 +136,7 @@ var LayoutEventExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   view: {

Examples/UIExplorer/js/LayoutExample.js

@@ -33,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 (
@@ -49,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',
@@ -66,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" />,
@@ -168,7 +165,7 @@ var LayoutExample = React.createClass({
       </UIExplorerPage>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   overlay: {

Examples/UIExplorer/js/LinkingExample.js

@@ -31,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);
@@ -45,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}>
@@ -57,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'} />
@@ -77,8 +73,8 @@ var IntentAndroidExample = React.createClass({
         <OpenURLButton url={'tel:9876543210'} />
       </UIExplorerBlock>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/ListViewPagingExample.js

@@ -57,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}
@@ -94,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];
     };
@@ -132,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}>
@@ -150,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;
@@ -166,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}>
@@ -176,9 +180,9 @@ var ListViewPagingExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <ListView
         style={styles.listview}
@@ -193,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

@@ -160,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 (
@@ -187,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,
@@ -211,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) {
@@ -255,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,
@@ -275,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) {
@@ -305,9 +294,8 @@ var DraggableAnnotationExample = React.createClass({
         annotations={this.state.annotations}
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   map: {

Examples/UIExplorer/js/ModalExample.js

@@ -38,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 = {
@@ -68,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 = {
@@ -144,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

@@ -30,8 +30,8 @@ var {
   TouchableHighlight,
 } = ReactNative;
 
-var NavigationExampleRow = React.createClass({
-  render: function() {
+class NavigationExampleRow extends React.Component {
+  render() {
     if (this.props.onPress) {
       return (
         <TouchableHighlight
@@ -51,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-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

@@ -50,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;
@@ -82,9 +81,9 @@ var BreadcrumbNavSample = React.createClass({
         );
       }
     };
-  },
+  }
 
-  _renderScene: function(route, navigator) {
+  _renderScene = (route, navigator) => {
     return (
       <ScrollView style={styles.scene}>
         <NavButton
@@ -109,9 +108,9 @@ var BreadcrumbNavSample = React.createClass({
         />
       </ScrollView>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         style={styles.container}
@@ -124,11 +123,8 @@ var BreadcrumbNavSample = React.createClass({
         }
       />
     );
-  },
-
-
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   scene: {

Examples/UIExplorer/js/Navigator/JumpingNavSample.js

@@ -106,8 +106,8 @@ class JumpingNavBar extends React.Component {
   }
 }
 
-var JumpingNavSample = React.createClass({
-  render: function() {
+class JumpingNavSample extends React.Component {
+  render() {
     return (
       <Navigator
         debugOverlay={false}
@@ -133,9 +133,9 @@ var JumpingNavSample = React.createClass({
         }
       />
     );
-  },
+  }
 
-  renderScene: function(route, navigator) {
+  renderScene = (route, navigator) => {
     var backBtn;
     var forwardBtn;
     if (ROUTE_STACK.indexOf(route) !== 0) {
@@ -185,8 +185,8 @@ var JumpingNavSample = React.createClass({
         />
       </ScrollView>
     );
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   button: {

Examples/UIExplorer/js/Navigator/NavigationBarSample.js

@@ -92,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) => {
@@ -113,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}
@@ -154,9 +153,8 @@ var NavigationBarSample = React.createClass({
         }
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/Navigator/NavigatorExample.js

@@ -112,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} />;
@@ -136,9 +133,9 @@ var TabBarExample = React.createClass({
           />
         );
     }
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         ref={this._setNavigatorRef}
@@ -153,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;
 
@@ -182,8 +178,8 @@ var TabBarExample = React.createClass({
         ];
       }
     }
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/NavigatorIOSColorsExample.js

@@ -30,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}>
@@ -40,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');
 
@@ -77,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
@@ -220,8 +218,8 @@ const NavigatorIOSExample = React.createClass({
         tintColor="#008888"
       />
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/NetInfoExample.js

@@ -31,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>
@@ -63,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
@@ -79,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>
@@ -98,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
@@ -114,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>
@@ -133,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>
@@ -161,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

@@ -33,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">
@@ -121,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

@@ -73,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 (
@@ -114,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 (
@@ -142,8 +138,8 @@ var PickerStyleExample = React.createClass({
         ))}
       </PickerIOS>
     );
-  },
-});
+  }
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';

Examples/UIExplorer/js/PointerEventsExample.js

@@ -30,26 +30,28 @@ var {
   View,
 } = ReactNative;
 
-var ExampleBox = React.createClass({
-  getInitialState: function() {
-    return {
-      log: [],
-    };
-  },
-  handleLog: function(msg) {
+class ExampleBox extends React.Component {
+  state = {
+    log: [],
+  };
+
+  handleLog = (msg) => {
     this.state.log = this.state.log.concat([msg]);
-  },
-  flushReactChanges: function() {
+  };
+
+  flushReactChanges = () => {
     this.forceUpdate();
-  },
+  };
+
   /**
    * Capture phase of bubbling to append separator before any of the bubbling
    * happens.
    */
-  handleTouchCapture: function() {
+  handleTouchCapture = () => {
     this.state.log = this.state.log.concat(['---']);
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <View>
         <View
@@ -66,11 +68,10 @@ var ExampleBox = React.createClass({
       </View>
     );
   }
-});
+}
 
-
-var NoneExample = React.createClass({
-  render: function() {
+class NoneExample extends React.Component {
+  render() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -96,14 +97,14 @@ var NoneExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 /**
  * Special demo text that makes itself untouchable so that it doesn't destroy
  * the experiment and confuse the output.
  */
-var DemoText = React.createClass({
-  render: function() {
+class DemoText extends React.Component {
+  render() {
     return (
       <View pointerEvents="none">
         <Text
@@ -113,10 +114,10 @@ var DemoText = React.createClass({
       </View>
     );
   }
-});
+}
 
-var BoxNoneExample = React.createClass({
-  render: function() {
+class BoxNoneExample extends React.Component {
+  render() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -150,10 +151,10 @@ var BoxNoneExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var BoxOnlyExample = React.createClass({
-  render: function() {
+class BoxOnlyExample extends React.Component {
+  render() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -187,7 +188,7 @@ var BoxOnlyExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 type ExampleClass = {
   Component: ReactClass<any>,

Examples/UIExplorer/js/ProgressBarAndroidExample.android.js

@@ -52,14 +52,11 @@ var MovingBar = React.createClass({
   },
 });
 
-var ProgressBarAndroidExample = React.createClass({
+class ProgressBarAndroidExample extends React.Component {
+  static title = '<ProgressBarAndroid>';
+  static description = 'Horizontal bar to show the progress of some operation.';
 
-  statics: {
-    title: '<ProgressBarAndroid>',
-    description: 'Horizontal bar to show the progress of some operation.',
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title="ProgressBar Examples">
         <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
@@ -79,7 +76,7 @@ var ProgressBarAndroidExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 module.exports = ProgressBarAndroidExample;

Examples/UIExplorer/js/PushNotificationIOSExample.js

@@ -33,8 +33,8 @@ var {
   View,
 } = ReactNative;
 
-var Button = React.createClass({
-  render: function() {
+class Button extends React.Component {
+  render() {
     return (
       <TouchableHighlight
         underlayColor={'white'}
@@ -46,7 +46,7 @@ var Button = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
 class NotificationExample extends React.Component {
   componentWillMount() {

Examples/UIExplorer/js/RefreshControlExample.js

@@ -49,11 +49,12 @@ const styles = StyleSheet.create({
   },
 });
 
-const Row = React.createClass({
-  _onClick: function() {
+class Row extends React.Component {
+  _onClick = () => {
     this.props.onClick(this.props.data);
-  },
-  render: function() {
+  };
+
+  render() {
     return (
      <TouchableWithoutFeedback onPress={this._onClick} >
         <View style={styles.row}>
@@ -63,30 +64,26 @@ const Row = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-});
+  }
+}
 
-const RefreshControlExample = React.createClass({
-  statics: {
-    title: '<RefreshControl>',
-    description: 'Adds pull-to-refresh support to a scrollview.'
-  },
+class RefreshControlExample extends React.Component {
+  static title = '<RefreshControl>';
+  static description = 'Adds pull-to-refresh support to a scrollview.';
 
-  getInitialState() {
-    return {
-      isRefreshing: false,
-      loaded: 0,
-      rowData: Array.from(new Array(20)).map(
-        (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
-    };
-  },
+  state = {
+    isRefreshing: false,
+    loaded: 0,
+    rowData: Array.from(new Array(20)).map(
+      (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
+  };
 
-  _onClick(row) {
+  _onClick = (row) => {
     row.clicks++;
     this.setState({
       rowData: this.state.rowData,
     });
-  },
+  };
 
   render() {
     const rows = this.state.rowData.map((row, ii) => {
@@ -109,9 +106,9 @@ const RefreshControlExample = React.createClass({
         {rows}
       </ScrollView>
     );
-  },
+  }
 
-  _onRefresh() {
+  _onRefresh = () => {
     this.setState({isRefreshing: true});
     setTimeout(() => {
       // prepend 10 items
@@ -128,7 +125,7 @@ const RefreshControlExample = React.createClass({
         rowData: rowData,
       });
     }, 5000);
-  },
-});
+  };
+}
 
 module.exports = RefreshControlExample;

Examples/UIExplorer/js/ScrollViewExample.js

@@ -84,18 +84,19 @@ exports.examples = [
   }
 }];
 
-var Thumb = React.createClass({
-  shouldComponentUpdate: function(nextProps, nextState) {
+class Thumb extends React.Component {
+  shouldComponentUpdate(nextProps, nextState) {
     return false;
-  },
-  render: function() {
+  }
+
+  render() {
     return (
       <View style={styles.button}>
         <Image style={styles.img} source={{uri:this.props.uri}} />
       </View>
     );
   }
-});
+}
 
 var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
 THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS

Examples/UIExplorer/js/ScrollViewSimpleExample.js

@@ -33,12 +33,11 @@ var {
 
 var NUM_ITEMS = 20;
 
-var ScrollViewSimpleExample = React.createClass({
-  statics: {
-    title: '<ScrollView>',
-    description: 'Component that enables scrolling through child components.'
-  },
-  makeItems: function(nItems: number, styles): Array<any> {
+class ScrollViewSimpleExample extends React.Component {
+  static title = '<ScrollView>';
+  static description = 'Component that enables scrolling through child components.';
+
+  makeItems = (nItems: number, styles): Array<any> => {
     var items = [];
     for (var i = 0; i < nItems; i++) {
        items[i] = (
@@ -48,9 +47,9 @@ var ScrollViewSimpleExample = React.createClass({
        );
     }
     return items;
-  },
+  };
 
-  render: function() {
+  render() {
     // One of the items is a horizontal scroll view
     var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
     items[4] = (
@@ -67,7 +66,7 @@ var ScrollViewSimpleExample = React.createClass({
 
     return verticalScrollView;
   }
-});
+}
 
 var styles = StyleSheet.create({
   verticalScrollView: {

Examples/UIExplorer/js/SegmentedControlIOSExample.js

@@ -31,7 +31,7 @@ var {
   StyleSheet
 } = ReactNative;
 
-var BasicSegmentedControlExample = React.createClass({
+class BasicSegmentedControlExample extends React.Component {
   render() {
     return (
       <View>
@@ -44,9 +44,9 @@ var BasicSegmentedControlExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var PreSelectedSegmentedControlExample = React.createClass({
+class PreSelectedSegmentedControlExample extends React.Component {
   render() {
     return (
       <View>
@@ -56,9 +56,9 @@ var PreSelectedSegmentedControlExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var MomentarySegmentedControlExample = React.createClass({
+class MomentarySegmentedControlExample extends React.Component {
   render() {
     return (
       <View>
@@ -68,9 +68,9 @@ var MomentarySegmentedControlExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var DisabledSegmentedControlExample = React.createClass({
+class DisabledSegmentedControlExample extends React.Component {
   render() {
     return (
       <View>
@@ -79,10 +79,10 @@ var DisabledSegmentedControlExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var ColorSegmentedControlExample = React.createClass({
+class ColorSegmentedControlExample extends React.Component {
   render() {
     return (
       <View>
@@ -94,17 +94,15 @@ var ColorSegmentedControlExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var EventSegmentedControlExample = React.createClass({
-  getInitialState() {
-    return {
-      values: ['One', 'Two', 'Three'],
-      value: 'Not selected',
-      selectedIndex: undefined
-    };
-  },
+class EventSegmentedControlExample extends React.Component {
+  state = {
+    values: ['One', 'Two', 'Three'],
+    value: 'Not selected',
+    selectedIndex: undefined
+  };
 
   render() {
     return (
@@ -122,20 +120,20 @@ var EventSegmentedControlExample = React.createClass({
           onValueChange={this._onValueChange} />
       </View>
     );
-  },
+  }
 
-  _onChange(event) {
+  _onChange = (event) => {
     this.setState({
       selectedIndex: event.nativeEvent.selectedSegmentIndex,
     });
-  },
+  };
 
-  _onValueChange(value) {
+  _onValueChange = (value) => {
     this.setState({
       value: value,
     });
-  }
-});
+  };
+}
 
 var styles = StyleSheet.create({
   text: {

Examples/UIExplorer/js/ShareExample.js

@@ -0,0 +1,124 @@
+/**
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ *
+ * @flow
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  StyleSheet,
+  View,
+  Text,
+  TouchableHighlight,
+  Share,
+} = ReactNative;
+
+exports.framework = 'React';
+exports.title = 'Share';
+exports.description = 'Share data with other Apps.';
+exports.examples = [{
+  title: 'Share Text Content',
+  render() {
+    return <ShareMessageExample />;
+  }
+}];
+
+class ShareMessageExample extends React.Component {
+  _shareMessage: Function;
+  _shareText: Function;
+  _showResult: Function;
+  state: any;
+
+  constructor(props) {
+    super(props);
+
+    this._shareMessage = this._shareMessage.bind(this);
+    this._shareText = this._shareText.bind(this);
+    this._showResult = this._showResult.bind(this);
+
+    this.state = {
+      result: ''
+    };
+  }
+
+  render() {
+    return (
+      <View>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={this._shareMessage}>
+          <View style={styles.button}>
+            <Text>Click to share message</Text>
+          </View>
+        </TouchableHighlight>
+        <TouchableHighlight style={styles.wrapper}
+          onPress={this._shareText}>
+          <View style={styles.button}>
+            <Text>Click to share message, URL and title</Text>
+          </View>
+        </TouchableHighlight>
+        <Text>{this.state.result}</Text>
+      </View>
+    );
+  }
+
+  _shareMessage() {
+    Share.share({
+      message: 'React Native | A framework for building native apps using React'
+    })
+    .then(this._showResult)
+    .catch((error) => this.setState({result: 'error: ' + error.message}));
+  }
+
+  _shareText() {
+    Share.share({
+      message: 'A framework for building native apps using React',
+      url: 'http://facebook.github.io/react-native/',
+      title: 'React Native'
+    }, {
+      dialogTitle: 'Share React Native website',
+      excludedActivityTypes: [
+        'com.apple.UIKit.activity.PostToTwitter'
+      ],
+      tintColor: 'green'
+    })
+    .then(this._showResult)
+    .catch((error) => this.setState({result: 'error: ' + error.message}));
+  }
+
+  _showResult(result) {
+    if (result.action === Share.sharedAction) {
+      if (result.activityType) {
+        this.setState({result: 'shared with an activityType: ' + result.activityType});
+      } else {
+        this.setState({result: 'shared'});
+      }
+    } else if (result.action === Share.dismissedAction) {
+      this.setState({result: 'dismissed'});
+    }
+  }
+
+}
+
+
+var styles = StyleSheet.create({
+  wrapper: {
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  button: {
+    backgroundColor: '#eeeeee',
+    padding: 10,
+  },
+});

Examples/UIExplorer/js/SliderExample.js

@@ -31,18 +31,14 @@ var {
   View,
 } = ReactNative;
 
-var SliderExample = React.createClass({
-  getDefaultProps() {
-    return {
-      value: 0,
-    }
-  },
+class SliderExample extends React.Component {
+  static defaultProps = {
+    value: 0,
+  };
 
-  getInitialState() {
-    return {
-      value: this.props.value,
-    };
-  },
+  state = {
+    value: this.props.value,
+  };
 
   render() {
     return (
@@ -56,15 +52,13 @@ var SliderExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var SlidingCompleteExample = React.createClass({
-  getInitialState() {
-    return {
-      slideCompletionValue: 0,
-      slideCompletionCount: 0,
-    };
-  },
+class SlidingCompleteExample extends React.Component {
+  state = {
+    slideCompletionValue: 0,
+    slideCompletionCount: 0,
+  };
 
   render() {
     return (
@@ -80,7 +74,7 @@ var SlidingCompleteExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   slider: {

Examples/UIExplorer/js/SliderIOSExample.js

@@ -31,12 +31,10 @@ var {
   View,
 } = ReactNative;
 
-var SliderExample = React.createClass({
-  getInitialState() {
-    return {
-      value: 0,
-    };
-  },
+class SliderExample extends React.Component {
+  state = {
+    value: 0,
+  };
 
   render() {
     return (
@@ -50,7 +48,7 @@ var SliderExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   slider: {

Examples/UIExplorer/js/SnapshotExample.js

@@ -32,12 +32,10 @@ var {
   View,
 } = ReactNative;
 
-var ScreenshotExample = React.createClass({
-  getInitialState() {
-    return {
-      uri: undefined,
-    };
-  },
+class ScreenshotExample extends React.Component {
+  state = {
+    uri: undefined,
+  };
 
   render() {
     return (
@@ -48,15 +46,15 @@ var ScreenshotExample = React.createClass({
         <Image style={style.image} source={{uri: this.state.uri}}/>
       </View>
     );
-  },
+  }
 
-  takeScreenshot() {
+  takeScreenshot = () => {
     UIManager
       .takeSnapshot('window', {format: 'jpeg', quality: 0.8}) // See UIManager.js for options
       .then((uri) => this.setState({uri}))
       .catch((error) => alert(error));
-  }
-});
+  };
+}
 
 var style = StyleSheet.create({
   button: {

Examples/UIExplorer/js/StatusBarExample.js

@@ -56,31 +56,29 @@ function getValue<T>(values: Array<T>, index: number): T {
   return values[index % values.length];
 }
 
-const StatusBarHiddenExample = React.createClass({
-  getInitialState() {
-    return {
-      animated: true,
-      hidden: false,
-      showHideTransition: getValue(showHideTransitions, 0),
-    };
-  },
+class StatusBarHiddenExample extends React.Component {
+  state = {
+    animated: true,
+    hidden: false,
+    showHideTransition: getValue(showHideTransitions, 0),
+  };
 
-  _showHideTransitionIndex: 0,
+  _showHideTransitionIndex = 0;
 
-  _onChangeAnimated() {
+  _onChangeAnimated = () => {
     this.setState({animated: !this.state.animated});
-  },
+  };
 
-  _onChangeHidden() {
+  _onChangeHidden = () => {
     this.setState({hidden: !this.state.hidden});
-  },
+  };
 
-  _onChangeTransition() {
+  _onChangeTransition = () => {
     this._showHideTransitionIndex++;
     this.setState({
       showHideTransition: getValue(showHideTransitions, this._showHideTransitionIndex),
     });
-  },
+  };
 
   render() {
     return (
@@ -116,27 +114,25 @@ const StatusBarHiddenExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-const StatusBarStyleExample = React.createClass({
-  getInitialState() {
-    return {
-      animated: true,
-      barStyle: getValue(barStyles, this._barStyleIndex),
-    };
-  },
+class StatusBarStyleExample extends React.Component {
+  _barStyleIndex = 0;
 
-  _barStyleIndex: 0,
-
-  _onChangeBarStyle() {
+  _onChangeBarStyle = () => {
     this._barStyleIndex++;
     this.setState({barStyle: getValue(barStyles, this._barStyleIndex)});
-  },
+  };
 
-  _onChangeAnimated() {
+  _onChangeAnimated = () => {
     this.setState({animated: !this.state.animated});
-  },
+  };
+
+  state = {
+    animated: true,
+    barStyle: getValue(barStyles, this._barStyleIndex),
+  };
 
   render() {
     return (
@@ -161,21 +157,19 @@ const StatusBarStyleExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-const StatusBarNetworkActivityExample = React.createClass({
-  getInitialState() {
-    return {
-      networkActivityIndicatorVisible: false,
-    };
-  },
+class StatusBarNetworkActivityExample extends React.Component {
+  state = {
+    networkActivityIndicatorVisible: false,
+  };
 
-  _onChangeNetworkIndicatorVisible() {
+  _onChangeNetworkIndicatorVisible = () => {
     this.setState({
       networkActivityIndicatorVisible: !this.state.networkActivityIndicatorVisible,
     });
-  },
+  };
 
   render() {
     return (
@@ -195,27 +189,25 @@ const StatusBarNetworkActivityExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-const StatusBarBackgroundColorExample = React.createClass({
-  getInitialState() {
-    return {
-      animated: true,
-      backgroundColor: getValue(colors, 0),
-    };
-  },
+class StatusBarBackgroundColorExample extends React.Component {
+  state = {
+    animated: true,
+    backgroundColor: getValue(colors, 0),
+  };
 
-  _colorIndex: 0,
+  _colorIndex = 0;
 
-  _onChangeBackgroundColor() {
+  _onChangeBackgroundColor = () => {
     this._colorIndex++;
     this.setState({backgroundColor: getValue(colors, this._colorIndex)});
-  },
+  };
 
-  _onChangeAnimated() {
+  _onChangeAnimated = () => {
     this.setState({animated: !this.state.animated});
-  },
+  };
 
   render() {
     return (
@@ -240,22 +232,19 @@ const StatusBarBackgroundColorExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
+class StatusBarTranslucentExample extends React.Component {
+  state = {
+    translucent: false,
+  };
 
-const StatusBarTranslucentExample = React.createClass({
-  getInitialState() {
-    return {
-      translucent: false,
-    };
-  },
-
-  _onChangeTranslucent() {
+  _onChangeTranslucent = () => {
     this.setState({
       translucent: !this.state.translucent,
     });
-  },
+  };
 
   render() {
     return (
@@ -272,10 +261,10 @@ const StatusBarTranslucentExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-const StatusBarStaticIOSExample = React.createClass({
+class StatusBarStaticIOSExample extends React.Component {
   render() {
     return (
       <View>
@@ -335,10 +324,10 @@ const StatusBarStaticIOSExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-const StatusBarStaticAndroidExample = React.createClass({
+class StatusBarStaticAndroidExample extends React.Component {
   render() {
     return (
       <View>
@@ -400,8 +389,8 @@ const StatusBarStaticAndroidExample = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
 const examples = [{
   title: 'StatusBar hidden',

Examples/UIExplorer/js/SwipeableListViewExample.js

@@ -0,0 +1,184 @@
+/**
+ * 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 {
+  Image,
+  SwipeableListView,
+  TouchableHighlight,
+  StyleSheet,
+  RecyclerViewBackedScrollView,
+  Text,
+  View,
+  Alert,
+} = ReactNative;
+
+var UIExplorerPage = require('./UIExplorerPage');
+
+var SwipeableListViewSimpleExample = React.createClass({
+  statics: {
+    title: '<SwipeableListView>',
+    description: 'Performant, scrollable, swipeable list of data.'
+  },
+
+  getInitialState: function() {
+    var ds = SwipeableListView.getNewDataSource();
+    return {
+      dataSource: ds.cloneWithRowsAndSections(...this._genDataSource({})),
+    };
+  },
+
+  _pressData: ({}: {[key: number]: boolean}),
+
+  componentWillMount: function() {
+    this._pressData = {};
+  },
+
+  render: function() {
+    return (
+      <UIExplorerPage
+        title={this.props.navigator ? null : '<SwipeableListView>'}
+        noSpacer={true}
+        noScroll={true}>
+        <SwipeableListView
+          dataSource={this.state.dataSource}
+          maxSwipeDistance={100}
+          renderQuickActions={(rowData: Object, sectionID: string, rowID: string) => {
+            return (<View style={styles.actionsContainer}>
+              <TouchableHighlight onPress={() => {
+                Alert.alert('Tips', 'You could do something with this row: ' + rowData.text);
+              }}>
+                <Text>Remove</Text>
+              </TouchableHighlight>
+            </View>);
+          }}
+          renderRow={this._renderRow}
+          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
+          renderSeparator={this._renderSeperator}
+        />
+      </UIExplorerPage>
+    );
+  },
+
+  _renderRow: function(rowData: Object, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
+    var rowHash = Math.abs(hashCode(rowData.id));
+    var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
+    return (
+      <TouchableHighlight onPress={() => {}}>
+        <View>
+          <View style={styles.row}>
+            <Image style={styles.thumb} source={imgSource} />
+            <Text style={styles.text}>
+              {rowData.id + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
+            </Text>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  },
+
+  _genDataSource: function(pressData: {[key: number]: boolean}): Array<any> {
+    var dataBlob = {};
+    var sectionIDs = ['Section 0'];
+    var rowIDs = [[]];
+    /**
+     * dataBlob example below:
+      {
+        'Section 0': {
+          'Row 0': {
+            id: '0',
+            text: 'row 0 text'
+          },
+          'Row 1': {
+            id: '1',
+            text: 'row 1 text'
+          }
+        }
+      }
+    */
+    // only one section in this example
+    dataBlob['Section 0'] = {};
+    for (var ii = 0; ii < 100; ii++) {
+      var pressedText = pressData[ii] ? ' (pressed)' : '';
+      dataBlob[sectionIDs[0]]['Row ' + ii] = {id: 'Row ' + ii, text: 'Row ' + ii + pressedText};
+      rowIDs[0].push('Row ' + ii);
+    }
+    return [dataBlob, sectionIDs, rowIDs];
+  },
+
+  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: adjacentRowHighlighted ? 4 : 1,
+          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
+        }}
+      />
+    );
+  }
+});
+
+var THUMB_URLS = [
+  require('./Thumbnails/like.png'),
+  require('./Thumbnails/dislike.png'),
+  require('./Thumbnails/call.png'),
+  require('./Thumbnails/fist.png'),
+  require('./Thumbnails/bandaged.png'),
+  require('./Thumbnails/flowers.png'),
+  require('./Thumbnails/heart.png'),
+  require('./Thumbnails/liking.png'),
+  require('./Thumbnails/party.png'),
+  require('./Thumbnails/poke.png'),
+  require('./Thumbnails/superlike.png'),
+  require('./Thumbnails/victory.png'),
+  ];
+var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
+
+/* eslint no-bitwise: 0 */
+var hashCode = function(str) {
+  var hash = 15;
+  for (var ii = str.length - 1; ii >= 0; ii--) {
+    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
+  }
+  return hash;
+};
+
+var styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 10,
+    backgroundColor: '#F6F6F6',
+  },
+  thumb: {
+    width: 64,
+    height: 64,
+  },
+  text: {
+    flex: 1,
+  },
+  actionsContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+});
+
+module.exports = SwipeableListViewSimpleExample;

Examples/UIExplorer/js/SwitchExample.js

@@ -31,13 +31,12 @@ var {
   View
 } = ReactNative;
 
-var BasicSwitchExample = React.createClass({
-  getInitialState() {
-    return {
-      trueSwitchIsOn: true,
-      falseSwitchIsOn: false,
-    };
-  },
+class BasicSwitchExample extends React.Component {
+  state = {
+    trueSwitchIsOn: true,
+    falseSwitchIsOn: false,
+  };
+
   render() {
     return (
       <View>
@@ -51,9 +50,9 @@ var BasicSwitchExample = React.createClass({
       </View>
     );
   }
-});
+}
 
-var DisabledSwitchExample = React.createClass({
+class DisabledSwitchExample extends React.Component {
   render() {
     return (
       <View>
@@ -66,16 +65,15 @@ var DisabledSwitchExample = React.createClass({
           value={false} />
       </View>
     );
-  },
-});
+  }
+}
+
+class ColorSwitchExample extends React.Component {
+  state = {
+    colorTrueSwitchIsOn: true,
+    colorFalseSwitchIsOn: false,
+  };
 
-var ColorSwitchExample = React.createClass({
-  getInitialState() {
-    return {
-      colorTrueSwitchIsOn: true,
-      colorFalseSwitchIsOn: false,
-    };
-  },
   render() {
     return (
       <View>
@@ -94,16 +92,15 @@ var ColorSwitchExample = React.createClass({
           value={this.state.colorTrueSwitchIsOn} />
       </View>
     );
-  },
-});
+  }
+}
+
+class EventSwitchExample extends React.Component {
+  state = {
+    eventSwitchIsOn: false,
+    eventSwitchRegressionIsOn: true,
+  };
 
-var EventSwitchExample = React.createClass({
-  getInitialState() {
-    return {
-      eventSwitchIsOn: false,
-      eventSwitchRegressionIsOn: true,
-    };
-  },
   render() {
     return (
       <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
@@ -132,7 +129,7 @@ var EventSwitchExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var examples = [
   {

Examples/UIExplorer/js/TabBarIOSExample.js

@@ -33,32 +33,27 @@ var {
 
 var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
 
-var TabBarExample = React.createClass({
-  statics: {
-    title: '<TabBarIOS>',
-    description: 'Tab-based navigation.',
-  },
+class TabBarExample extends React.Component {
+  static title = '<TabBarIOS>';
+  static description = 'Tab-based navigation.';
+  static displayName = 'TabBarExample';
 
-  displayName: 'TabBarExample',
+  state = {
+    selectedTab: 'redTab',
+    notifCount: 0,
+    presses: 0,
+  };
 
-  getInitialState: function() {
-    return {
-      selectedTab: 'redTab',
-      notifCount: 0,
-      presses: 0,
-    };
-  },
-
-  _renderContent: function(color: string, pageText: string, num?: number) {
+  _renderContent = (color: string, pageText: string, num?: number) => {
     return (
       <View style={[styles.tabContent, {backgroundColor: color}]}>
         <Text style={styles.tabText}>{pageText}</Text>
         <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
       </View>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <TabBarIOS
         unselectedTintColor="yellow"
@@ -103,9 +98,8 @@ var TabBarExample = React.createClass({
         </TabBarIOS.Item>
       </TabBarIOS>
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   tabContent: {

Examples/UIExplorer/js/TextExample.android.js

@@ -33,31 +33,32 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var Entity = React.createClass({
-  render: function() {
+class Entity extends React.Component {
+  render() {
     return (
       <Text style={{fontWeight: 'bold', color: '#527fe4'}}>
         {this.props.children}
       </Text>
     );
   }
-});
+}
 
-var AttributeToggler = React.createClass({
-  getInitialState: function() {
-    return {fontWeight: 'bold', fontSize: 15};
-  },
-  toggleWeight: function() {
+class AttributeToggler extends React.Component {
+  state = {fontWeight: 'bold', fontSize: 15};
+
+  toggleWeight = () => {
     this.setState({
       fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
     });
-  },
-  increaseSize: function() {
+  };
+
+  increaseSize = () => {
     this.setState({
       fontSize: this.state.fontSize + 1
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
     return (
       <View>
@@ -77,14 +78,13 @@ var AttributeToggler = React.createClass({
       </View>
     );
   }
-});
+}
 
-var TextExample = React.createClass({
-  statics: {
-    title: '<Text>',
-    description: 'Base component for rendering styled text.',
-  },
-  render: function() {
+class TextExample extends React.Component {
+  static title = '<Text>';
+  static description = 'Base component for rendering styled text.';
+
+  render() {
     return (
       <UIExplorerPage title="<Text>">
         <UIExplorerBlock title="Wrap">
@@ -400,21 +400,21 @@ var TextExample = React.createClass({
             Demo text shadow
           </Text>
         </UIExplorerBlock>
-        <UIExplorerBlock title="Line break mode">
+        <UIExplorerBlock title="Ellipsize mode">
           <Text numberOfLines={1}>
             This very long text should be truncated with dots in the end.
           </Text>
-          <Text lineBreakMode="middle" numberOfLines={1}>
+          <Text ellipsizeMode="middle" numberOfLines={1}>
             This very long text should be truncated with dots in the middle.
           </Text>
-          <Text lineBreakMode="head" numberOfLines={1}>
+          <Text ellipsizeMode="head" numberOfLines={1}>
             This very long text should be truncated with dots in the beginning.
           </Text>
         </UIExplorerBlock>
       </UIExplorerPage>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   backgroundColorText: {

Examples/UIExplorer/js/TextExample.ios.js

@@ -31,31 +31,32 @@ var {
   View,
 } = ReactNative;
 
-var Entity = React.createClass({
-  render: function() {
+class Entity extends React.Component {
+  render() {
     return (
       <Text style={{fontWeight: '500', color: '#527fe4'}}>
         {this.props.children}
       </Text>
     );
   }
-});
+}
 
-var AttributeToggler = React.createClass({
-  getInitialState: function() {
-    return {fontWeight: 'bold', fontSize: 15};
-  },
-  toggleWeight: function() {
+class AttributeToggler extends React.Component {
+  state = {fontWeight: 'bold', fontSize: 15};
+
+  toggleWeight = () => {
     this.setState({
       fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
     });
-  },
-  increaseSize: function() {
+  };
+
+  increaseSize = () => {
     this.setState({
       fontSize: this.state.fontSize + 1
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
     return (
       <View>
@@ -78,7 +79,7 @@ var AttributeToggler = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = '<Text>';
 exports.description = 'Base component for rendering styled text.';
@@ -445,20 +446,20 @@ exports.examples = [
     );
   },
 }, {
-  title: 'Line break mode',
+  title: 'Ellipsize mode',
   render: function() {
     return (
       <View>
         <Text numberOfLines={1}>
           This very long text should be truncated with dots in the end.
         </Text>
-        <Text lineBreakMode="middle" numberOfLines={1}>
+        <Text ellipsizeMode="middle" numberOfLines={1}>
           This very long text should be truncated with dots in the middle.
         </Text>
-        <Text lineBreakMode="head" numberOfLines={1}>
+        <Text ellipsizeMode="head" numberOfLines={1}>
           This very long text should be truncated with dots in the beginning.
         </Text>
-        <Text lineBreakMode="clip" numberOfLines={1}>
+        <Text ellipsizeMode="clip" numberOfLines={1}>
           This very looooooooooooooooooooooooooooong text should be clipped.
         </Text>
       </View>

Examples/UIExplorer/js/TextInputExample.android.js

@@ -31,16 +31,14 @@ var {
   StyleSheet,
 } = ReactNative;
 
-var TextEventsExample = React.createClass({
-  getInitialState: function() {
-    return {
-      curText: '<No Event>',
-      prevText: '<No Event>',
-      prev2Text: '<No Event>',
-    };
-  },
+class TextEventsExample extends React.Component {
+  state = {
+    curText: '<No Event>',
+    prevText: '<No Event>',
+    prev2Text: '<No Event>',
+  };
 
-  updateText: function(text) {
+  updateText = (text) => {
     this.setState((state) => {
       return {
         curText: text,
@@ -48,9 +46,9 @@ var TextEventsExample = React.createClass({
         prev2Text: state.prevText,
       };
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -78,7 +76,7 @@ var TextEventsExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 class AutoExpandingTextInput extends React.Component {
   constructor(props) {
@@ -189,12 +187,12 @@ class TokenizedTextExample extends React.Component {
   }
 }
 
-var BlurOnSubmitExample = React.createClass({
-  focusNextField(nextField) {
+class BlurOnSubmitExample extends React.Component {
+  focusNextField = (nextField) => {
     this.refs[nextField].focus();
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -241,7 +239,7 @@ var BlurOnSubmitExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   multiline: {

Examples/UIExplorer/js/TextInputExample.ios.js

@@ -31,8 +31,8 @@ var {
   StyleSheet,
 } = ReactNative;
 
-var WithLabel = React.createClass({
-  render: function() {
+class WithLabel extends React.Component {
+  render() {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.label}>
@@ -41,20 +41,18 @@ var WithLabel = React.createClass({
         {this.props.children}
       </View>
     );
-  },
-});
+  }
+}
 
-var TextEventsExample = React.createClass({
-  getInitialState: function() {
-    return {
-      curText: '<No Event>',
-      prevText: '<No Event>',
-      prev2Text: '<No Event>',
-      prev3Text: '<No Event>',
-    };
-  },
+class TextEventsExample extends React.Component {
+  state = {
+    curText: '<No Event>',
+    prevText: '<No Event>',
+    prev2Text: '<No Event>',
+    prev3Text: '<No Event>',
+  };
 
-  updateText: function(text) {
+  updateText = (text) => {
     this.setState((state) => {
       return {
         curText: text,
@@ -63,9 +61,9 @@ var TextEventsExample = React.createClass({
         prev3Text: state.prev2Text,
       };
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -102,7 +100,7 @@ var TextEventsExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 class AutoExpandingTextInput extends React.Component {
   state: any;
@@ -242,12 +240,12 @@ class TokenizedTextExample extends React.Component {
   }
 }
 
-var BlurOnSubmitExample = React.createClass({
-  focusNextField(nextField) {
+class BlurOnSubmitExample extends React.Component {
+  focusNextField = (nextField) => {
     this.refs[nextField].focus();
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -294,7 +292,7 @@ var BlurOnSubmitExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   page: {
@@ -691,6 +689,13 @@ exports.examples = [
             multiline={true}
             style={styles.multiline}
           />
+          <TextInput
+            defaultValue="uneditable multiline text input with phone number detection: 88888888."
+            editable={false}
+            multiline={true}
+            style={styles.multiline}
+            dataDetectorTypes="phoneNumber"
+          />
           <TextInput
             placeholder="multiline with children"
             multiline={true}

Examples/UIExplorer/js/TimePickerAndroidExample.js

@@ -32,27 +32,19 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var TimePickerAndroidExample = React.createClass({
+class TimePickerAndroidExample extends React.Component {
+  static title = 'TimePickerAndroid';
+  static description = 'Standard Android time picker dialog';
 
-  statics: {
-    title: 'TimePickerAndroid',
-    description: 'Standard Android time picker dialog',
-  },
+  state = {
+    isoFormatText: 'pick a time (24-hour format)',
+    presetHour: 4,
+    presetMinute: 4,
+    presetText: 'pick a time, default: 4:04AM',
+    simpleText: 'pick a time',
+  };
 
-  getInitialState() {
-    // *Text, *Hour and *Minute are set by successCallback -- this updates the text with the time
-    // picked by the user and makes it so the next time they open it the hour and minute they picked
-    // before is displayed.
-    return {
-      isoFormatText: 'pick a time (24-hour format)',
-      presetHour: 4,
-      presetMinute: 4,
-      presetText: 'pick a time, default: 4:04AM',
-      simpleText: 'pick a time',
-    };
-  },
-
-  async showPicker(stateKey, options) {
+  showPicker = async (stateKey, options) => {
     try {
       const {action, minute, hour} = await TimePickerAndroid.open(options);
       var newState = {};
@@ -67,7 +59,7 @@ var TimePickerAndroidExample = React.createClass({
     } catch ({code, message}) {
       console.warn(`Error in example '${stateKey}': `, message);
     }
-  },
+  };
 
   render() {
     return (
@@ -100,8 +92,8 @@ var TimePickerAndroidExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 /**
  * Returns e.g. '3:05'.

Examples/UIExplorer/js/TimerExample.js

@@ -40,19 +40,17 @@ function burnCPU(milliseconds) {
   while (performanceNow() < (start + milliseconds)) {}
 }
 
-var RequestIdleCallbackTester = React.createClass({
-  _idleTimer: (null: any),
-  _iters: 0,
+class RequestIdleCallbackTester extends React.Component {
+  state = {
+    message: '-',
+  };
 
-  getInitialState() {
-    return {
-      message: '-',
-    };
-  },
+  _idleTimer: any = null;
+  _iters = 0;
 
   componentWillUnmount() {
     cancelIdleCallback(this._idleTimer);
-  },
+  }
 
   render() {
     return (
@@ -76,9 +74,9 @@ var RequestIdleCallbackTester = React.createClass({
         <Text>{this.state.message}</Text>
       </View>
     );
-  },
+  }
 
-  _run(shouldBurnCPU) {
+  _run = (shouldBurnCPU) => {
     cancelIdleCallback(this._idleTimer);
     this._idleTimer = requestIdleCallback((deadline) => {
       let message = '';
@@ -89,9 +87,9 @@ var RequestIdleCallbackTester = React.createClass({
       }
       this.setState({message: `${message} ${deadline.timeRemaining()}ms remaining in frame`});
     });
-  },
+  };
 
-  _runBackground() {
+  _runBackground = () => {
     cancelIdleCallback(this._idleTimer);
     const handler = (deadline) => {
       while (deadline.timeRemaining() > 5) {
@@ -102,13 +100,13 @@ var RequestIdleCallbackTester = React.createClass({
       this._idleTimer = requestIdleCallback(handler);
     };
     this._idleTimer = requestIdleCallback(handler);
-  },
+  };
 
-  _stopBackground() {
+  _stopBackground = () => {
     this._iters = 0;
     cancelIdleCallback(this._idleTimer);
-  }
-});
+  };
+}
 
 var TimerTester = React.createClass({
   mixins: [TimerMixin],
@@ -245,14 +243,12 @@ exports.examples = [
     description: 'Execute function fn every t milliseconds until cancelled ' +
       'or component is unmounted.',
     render: function(): ReactElement<any> {
-      var IntervalExample = React.createClass({
-        getInitialState: function() {
-          return {
-            showTimer: true,
-          };
-        },
+      class IntervalExample extends React.Component {
+        state = {
+          showTimer: true,
+        };
 
-        render: function() {
+        render() {
           if (this.state.showTimer) {
             var timer = [
               <TimerTester ref="interval" dt={25} type="setInterval" />,
@@ -273,9 +269,9 @@ exports.examples = [
               </UIExplorerButton>
             </View>
           );
-        },
+        }
 
-        _renderTimer: function() {
+        _renderTimer = () => {
           return (
             <View>
               <TimerTester ref="interval" dt={25} type="setInterval" />
@@ -284,12 +280,13 @@ exports.examples = [
               </UIExplorerButton>
             </View>
           );
-        },
+        };
 
-        _toggleTimer: function() {
+        _toggleTimer = () => {
           this.setState({showTimer: !this.state.showTimer});
-        },
-      });
+        };
+      }
+
       return <IntervalExample />;
     },
   },

Examples/UIExplorer/js/ToastAndroidExample.android.js

@@ -35,18 +35,12 @@ var {
 var UIExplorerBlock = require('UIExplorerBlock');
 var UIExplorerPage = require('UIExplorerPage');
 
-var ToastExample = React.createClass({
+class ToastExample extends React.Component {
+  static title = 'Toast Example';
+  static description = 'Example that demonstrates the use of an Android Toast to provide feedback.';
+  state = {};
 
-  statics: {
-    title: 'Toast Example',
-    description: 'Example that demonstrates the use of an Android Toast to provide feedback.',
-  },
-
-  getInitialState: function() {
-    return {};
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title="ToastAndroid">
         <UIExplorerBlock title="Simple toast">
@@ -101,8 +95,8 @@ var ToastExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   text: {

Examples/UIExplorer/js/ToolbarAndroidExample.android.js

@@ -35,22 +35,20 @@ var UIExplorerPage = require('./UIExplorerPage');
 var SwitchAndroid = require('SwitchAndroid');
 var ToolbarAndroid = require('ToolbarAndroid');
 
-var ToolbarAndroidExample = React.createClass({
-  statics: {
-    title: '<ToolbarAndroid>',
-    description: 'Examples of using the Android toolbar.'
-  },
-  getInitialState: function() {
-    return {
-      actionText: 'Example app with toolbar component',
-      toolbarSwitch: false,
-      colorProps: {
-        titleColor: '#3b5998',
-        subtitleColor: '#6a7180',
-      },
-    };
-  },
-  render: function() {
+class ToolbarAndroidExample extends React.Component {
+  static title = '<ToolbarAndroid>';
+  static description = 'Examples of using the Android toolbar.';
+
+  state = {
+    actionText: 'Example app with toolbar component',
+    toolbarSwitch: false,
+    colorProps: {
+      titleColor: '#3b5998',
+      subtitleColor: '#6a7180',
+    },
+  };
+
+  render() {
     return (
       <UIExplorerPage title="<ToolbarAndroid>">
         <UIExplorerBlock title="Toolbar with title/subtitle and actions">
@@ -117,13 +115,14 @@ var ToolbarAndroidExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-  _onActionSelected: function(position) {
+  }
+
+  _onActionSelected = (position) => {
     this.setState({
       actionText: 'Selected ' + toolbarActions[position].title,
     });
-  },
-});
+  };
+}
 
 var toolbarActions = [
   {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},

Examples/UIExplorer/js/TouchableExample.js

@@ -119,18 +119,18 @@ exports.examples = [
    },
  }];
 
-var TextOnPressBox = React.createClass({
-  getInitialState: function() {
-    return {
-      timesPressed: 0,
-    };
-  },
-  textOnPress: function() {
+class TextOnPressBox extends React.Component {
+  state = {
+    timesPressed: 0,
+  };
+
+  textOnPress = () => {
     this.setState({
       timesPressed: this.state.timesPressed + 1,
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x text onPress';
@@ -153,15 +153,14 @@ var TextOnPressBox = React.createClass({
       </View>
     );
   }
-});
+}
 
-var TouchableFeedbackEvents = React.createClass({
-  getInitialState: function() {
-    return {
-      eventLog: [],
-    };
-  },
-  render: function() {
+class TouchableFeedbackEvents extends React.Component {
+  state = {
+    eventLog: [],
+  };
+
+  render() {
     return (
       <View testID="touchable_feedback_events">
         <View style={[styles.row, {justifyContent: 'center'}]}>
@@ -185,22 +184,22 @@ var TouchableFeedbackEvents = React.createClass({
         </View>
       </View>
     );
-  },
-  _appendEvent: function(eventName) {
+  }
+
+  _appendEvent = (eventName) => {
     var limit = 6;
     var eventLog = this.state.eventLog.slice(0, limit - 1);
     eventLog.unshift(eventName);
     this.setState({eventLog});
-  },
-});
+  };
+}
 
-var TouchableDelayEvents = React.createClass({
-  getInitialState: function() {
-    return {
-      eventLog: [],
-    };
-  },
-  render: function() {
+class TouchableDelayEvents extends React.Component {
+  state = {
+    eventLog: [],
+  };
+
+  render() {
     return (
       <View testID="touchable_delay_events">
         <View style={[styles.row, {justifyContent: 'center'}]}>
@@ -224,27 +223,28 @@ var TouchableDelayEvents = React.createClass({
         </View>
       </View>
     );
-  },
-  _appendEvent: function(eventName) {
+  }
+
+  _appendEvent = (eventName) => {
     var limit = 6;
     var eventLog = this.state.eventLog.slice(0, limit - 1);
     eventLog.unshift(eventName);
     this.setState({eventLog});
-  },
-});
+  };
+}
 
-var ForceTouchExample = React.createClass({
-  getInitialState: function() {
-    return {
-      force: 0,
-    };
-  },
-  _renderConsoleText: function() {
+class ForceTouchExample extends React.Component {
+  state = {
+    force: 0,
+  };
+
+  _renderConsoleText = () => {
     return View.forceTouchAvailable ?
       'Force: ' + this.state.force.toFixed(3) :
       '3D Touch is not available on this device';
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <View testID="touchable_3dtouch_event">
         <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
@@ -264,21 +264,21 @@ var ForceTouchExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
-var TouchableHitSlop = React.createClass({
-  getInitialState: function() {
-    return {
-      timesPressed: 0,
-    };
-  },
-  onPress: function() {
+class TouchableHitSlop extends React.Component {
+  state = {
+    timesPressed: 0,
+  };
+
+  onPress = () => {
     this.setState({
       timesPressed: this.state.timesPressed + 1,
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var log = '';
     if (this.state.timesPressed > 1) {
       log = this.state.timesPressed + 'x onPress';
@@ -307,10 +307,10 @@ var TouchableHitSlop = React.createClass({
       </View>
     );
   }
-});
+}
 
-var TouchableDisabled = React.createClass({
-  render: function() {
+class TouchableDisabled extends React.Component {
+  render() {
     return (
       <View>
         <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>
@@ -373,7 +373,7 @@ var TouchableDisabled = React.createClass({
       </View>
     );
   }
-});
+}
 
 var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
 

Examples/UIExplorer/js/TransformExample.js

@@ -30,24 +30,22 @@ var {
   View,
 } = ReactNative;
 
-var Flip = React.createClass({
-  getInitialState() {
-    return {
-      theta: new Animated.Value(45),
-    };
-  },
+class Flip extends React.Component {
+  state = {
+    theta: new Animated.Value(45),
+  };
 
   componentDidMount() {
     this._animate();
-  },
+  }
 
-  _animate() {
+  _animate = () => {
     this.state.theta.setValue(0);
     Animated.timing(this.state.theta, {
       toValue: 360,
       duration: 5000,
     }).start(this._animate);
-  },
+  };
 
   render() {
     return (
@@ -83,7 +81,7 @@ var Flip = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/TransparentHitTestExample.js

@@ -19,8 +19,8 @@ var {
   TouchableOpacity,
 } = ReactNative;
 
-var TransparentHitTestExample = React.createClass({
-  render: function() {
+class TransparentHitTestExample extends React.Component {
+  render() {
     return (
       <View style={{flex: 1}}>
         <TouchableOpacity onPress={() => alert('Hi!')}>
@@ -37,8 +37,8 @@ var TransparentHitTestExample = React.createClass({
           opacity: 0.0}} />
       </View>
     );
-  },
-});
+  }
+}
 
 exports.title = '<TransparentHitTestExample>';
 exports.displayName = 'TransparentHitTestExample';

Examples/UIExplorer/js/UIExplorerApp.ios.js

@@ -66,7 +66,7 @@ class UIExplorerApp extends React.Component {
   _handleBack: Function;
   _handleAction: Function;
   _renderCard: Function;
-  _renderOverlay: Function;
+  _renderHeader: Function;
   _renderScene: Function;
   _renderTitleComponent: Function;
   state: State;
@@ -78,7 +78,7 @@ class UIExplorerApp extends React.Component {
   componentWillMount() {
     this._handleAction = this._handleAction.bind(this);
     this._handleBack = this._handleAction.bind(this, {type: 'back'});
-    this._renderOverlay = this._renderOverlay.bind(this);
+    this._renderHeader = this._renderHeader.bind(this);
     this._renderScene = this._renderScene.bind(this);
     this._renderTitleComponent = this._renderTitleComponent.bind(this);
   }
@@ -137,14 +137,14 @@ class UIExplorerApp extends React.Component {
       <NavigationCardStack
         navigationState={this.state.stack}
         style={styles.container}
-        renderOverlay={this._renderOverlay}
+        renderHeader={this._renderHeader}
         renderScene={this._renderScene}
-
+        onNavigateBack={this._handleBack}
       />
     );
   }
 
-  _renderOverlay(props: NavigationSceneRendererProps): ReactElement<any> {
+  _renderHeader(props: NavigationSceneRendererProps): ReactElement<any> {
     return (
       <NavigationHeader
         {...props}
@@ -194,7 +194,6 @@ const styles = StyleSheet.create({
   },
   exampleContainer: {
     flex: 1,
-    paddingTop: NavigationHeader.HEIGHT,
   },
 });
 
@@ -206,16 +205,17 @@ AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Example: UIExplorerExample) => {
   const ExampleModule = Example.module;
   if (ExampleModule.displayName) {
-    const Snapshotter = React.createClass({
-      render: function() {
+    class Snapshotter extends React.Component {
+      render() {
         const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
             <Renderable />
           </SnapshotViewIOS>
         );
-      },
-    });
+      }
+    }
+
     AppRegistry.registerComponent(ExampleModule.displayName, () => Snapshotter);
   }
 });

Examples/UIExplorer/js/UIExplorerBlock.js

@@ -31,17 +31,20 @@ var {
   View,
 } = ReactNative;
 
-var UIExplorerBlock = React.createClass({
-  propTypes: {
+class UIExplorerBlock extends React.Component {
+  props: {
+    title?: string,
+    description?: string,
+  };
+
+  static propTypes = {
     title: React.PropTypes.string,
     description: React.PropTypes.string,
-  },
+  };
 
-  getInitialState: function() {
-    return {description: (null: ?string)};
-  },
+  state = {description: (null: ?string)};
 
-  render: function() {
+  render() {
     var description;
     if (this.props.description) {
       description =
@@ -59,12 +62,14 @@ var UIExplorerBlock = React.createClass({
           {description}
         </View>
         <View style={styles.children}>
-          {this.props.children}
+          {
+            // $FlowFixMe found when converting React.createClass to ES6
+            this.props.children}
         </View>
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/UIExplorerButton.js

@@ -30,23 +30,28 @@ var {
   TouchableHighlight,
 } = ReactNative;
 
-var UIExplorerButton = React.createClass({
-  propTypes: {
+class UIExplorerButton extends React.Component {
+  props: {onPress?: Function};
+
+  static propTypes = {
     onPress: React.PropTypes.func,
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <TouchableHighlight
         onPress={this.props.onPress}
         style={styles.button}
         underlayColor="grey">
         <Text>
-          {this.props.children}
+          {
+            // $FlowFixMe found when converting React.createClass to ES6
+            this.props.children}
         </Text>
       </TouchableHighlight>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   button: {

Examples/UIExplorer/js/UIExplorerList.android.js

@@ -74,6 +74,10 @@ var ComponentExamples: Array<UIExplorerExample> = [
     key: 'StatusBarExample',
     module: require('./StatusBarExample'),
   },
+  {
+    key: 'SwipeableListViewExample',
+    module: require('./SwipeableListViewExample')
+  },
   {
     key: 'SwitchExample',
     module: require('./SwitchExample'),
@@ -181,6 +185,10 @@ const APIExamples = [
     key: 'PointerEventsExample',
     module: require('./PointerEventsExample'),
   },
+  {
+    key: 'ShareExample',
+    module: require('./ShareExample'),
+  },
   {
     key: 'TimePickerAndroidExample',
     module: require('./TimePickerAndroidExample'),

Examples/UIExplorer/js/UIExplorerList.ios.js

@@ -116,6 +116,10 @@ const ComponentExamples: Array<UIExplorerExample> = [
     key: 'StatusBarExample',
     module: require('./StatusBarExample'),
   },
+  {
+    key: 'SwipeableListViewExample',
+    module: require('./SwipeableListViewExample')
+  },
   {
     key: 'SwitchExample',
     module: require('./SwitchExample'),
@@ -247,6 +251,10 @@ const APIExamples: Array<UIExplorerExample> = [
     key: 'RCTRootViewIOSExample',
     module: require('./RCTRootViewIOSExample'),
   },
+  {
+    key: 'ShareExample',
+    module: require('./ShareExample'),
+  },
   {
     key: 'SnapshotExample',
     module: require('./SnapshotExample'),

Examples/UIExplorer/js/UIExplorerPage.js

@@ -33,21 +33,27 @@ var {
 
 var UIExplorerTitle = require('./UIExplorerTitle');
 
-var UIExplorerPage = React.createClass({
+class UIExplorerPage extends React.Component {
+  props: {
+    keyboardShouldPersistTaps?: boolean,
+    noScroll?: boolean,
+    noSpacer?: boolean,
+  };
 
-  propTypes: {
+  static propTypes = {
     keyboardShouldPersistTaps: React.PropTypes.bool,
     noScroll: React.PropTypes.bool,
     noSpacer: React.PropTypes.bool,
-  },
+  };
 
-  render: function() {
+  render() {
     var ContentWrapper;
     var wrapperProps = {};
     if (this.props.noScroll) {
       ContentWrapper = (View: ReactClass<any>);
     } else {
       ContentWrapper = (ScrollView: ReactClass<any>);
+      // $FlowFixMe found when converting React.createClass to ES6
       wrapperProps.automaticallyAdjustContentInsets = !this.props.title;
       wrapperProps.keyboardShouldPersistTaps = true;
       wrapperProps.keyboardDismissMode = 'interactive';
@@ -62,13 +68,15 @@ var UIExplorerPage = React.createClass({
         <ContentWrapper
           style={styles.wrapper}
           {...wrapperProps}>
-            {this.props.children}
+            {
+              // $FlowFixMe found when converting React.createClass to ES6
+              this.props.children}
             {spacer}
         </ContentWrapper>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/UIExplorerTitle.js

@@ -31,8 +31,8 @@ var {
   View,
 } = ReactNative;
 
-var UIExplorerTitle = React.createClass({
-  render: function() {
+class UIExplorerTitle extends React.Component {
+  render() {
     return (
       <View style={styles.container}>
         <Text style={styles.text}>
@@ -41,7 +41,7 @@ var UIExplorerTitle = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/ViewExample.js

@@ -46,12 +46,10 @@ var styles = StyleSheet.create({
   },
 });
 
-var ViewBorderStyleExample = React.createClass({
-  getInitialState() {
-    return {
-      showBorder: true
-    };
-  },
+class ViewBorderStyleExample extends React.Component {
+  state = {
+    showBorder: true
+  };
 
   render() {
     return (
@@ -80,19 +78,17 @@ var ViewBorderStyleExample = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-
-  _handlePress() {
-    this.setState({showBorder: !this.state.showBorder});
   }
-});
 
-var ZIndexExample = React.createClass({
-  getInitialState() {
-    return {
-      flipped: false
-    };
-  },
+  _handlePress = () => {
+    this.setState({showBorder: !this.state.showBorder});
+  };
+}
+
+class ZIndexExample extends React.Component {
+  state = {
+    flipped: false
+  };
 
   render() {
     const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
@@ -127,12 +123,12 @@ var ZIndexExample = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-
-  _handlePress() {
-    this.setState({flipped: !this.state.flipped});
   }
-});
+
+  _handlePress = () => {
+    this.setState({flipped: !this.state.flipped});
+  };
+}
 
 exports.title = '<View>';
 exports.description = 'Basic building block of all UI, examples that ' +

Examples/UIExplorer/js/ViewPagerAndroidExample.android.js

@@ -45,16 +45,16 @@ var IMAGE_URIS = [
   'http://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
 ];
 
-var LikeCount = React.createClass({
-  getInitialState: function() {
-    return {
-      likes: 7,
-    };
-  },
-  onClick: function() {
+class LikeCount extends React.Component {
+  state = {
+    likes: 7,
+  };
+
+  onClick = () => {
     this.setState({likes: this.state.likes + 1});
-  },
-  render: function() {
+  };
+
+  render() {
     var thumbsUp = '\uD83D\uDC4D';
     return (
       <View style={styles.likeContainer}>
@@ -68,16 +68,17 @@ var LikeCount = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
-var Button = React.createClass({
-  _handlePress: function() {
+class Button extends React.Component {
+  _handlePress = () => {
     if (this.props.enabled && this.props.onPress) {
       this.props.onPress();
     }
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
         <View style={[styles.button, this.props.enabled ? {} : styles.buttonDisabled]}>
@@ -86,10 +87,10 @@ var Button = React.createClass({
       </TouchableWithoutFeedback>
     );
   }
-});
+}
 
-var ProgressBar = React.createClass({
-  render: function() {
+class ProgressBar extends React.Component {
+  render() {
     var fractionalPosition = (this.props.progress.position + this.props.progress.offset);
     var progressBarSize = (fractionalPosition / (PAGES - 1)) * this.props.size;
     return (
@@ -98,43 +99,40 @@ var ProgressBar = React.createClass({
       </View>
     );
   }
-});
+}
 
-var ViewPagerAndroidExample = React.createClass({
-  statics: {
-    title: '<ViewPagerAndroid>',
-    description: 'Container that allows to flip left and right between child views.'
-  },
-  getInitialState: function() {
-    return {
-      page: 0,
-      animationsAreEnabled: true,
-      scrollEnabled: true,
-      progress: {
-        position: 0,
-        offset: 0,
-      },
-    };
-  },
+class ViewPagerAndroidExample extends React.Component {
+  static title = '<ViewPagerAndroid>';
+  static description = 'Container that allows to flip left and right between child views.';
 
-  onPageSelected: function(e) {
+  state = {
+    page: 0,
+    animationsAreEnabled: true,
+    scrollEnabled: true,
+    progress: {
+      position: 0,
+      offset: 0,
+    },
+  };
+
+  onPageSelected = (e) => {
     this.setState({page: e.nativeEvent.position});
-  },
+  };
 
-  onPageScroll: function(e) {
+  onPageScroll = (e) => {
     this.setState({progress: e.nativeEvent});
-  },
+  };
 
-  onPageScrollStateChanged: function(state : ViewPagerScrollState) {
+  onPageScrollStateChanged = (state : ViewPagerScrollState) => {
     this.setState({scrollState: state});
-  },
+  };
 
-  move: function(delta) {
+  move = (delta) => {
     var page = this.state.page + delta;
     this.go(page);
-  },
+  };
 
-  go: function(page) {
+  go = (page) => {
     if (this.state.animationsAreEnabled) {
       this.viewPager.setPage(page);
     } else {
@@ -142,9 +140,9 @@ var ViewPagerAndroidExample = React.createClass({
     }
 
     this.setState({page});
-  },
+  };
 
-  render: function() {
+  render() {
     var pages = [];
     for (var i = 0; i < PAGES; i++) {
       var pageStyle = {
@@ -207,8 +205,8 @@ var ViewPagerAndroidExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   buttons: {

Examples/UIExplorer/js/WebViewExample.js

@@ -42,30 +42,27 @@ var TEXT_INPUT_REF = 'urlInput';
 var WEBVIEW_REF = 'webview';
 var DEFAULT_URL = 'https://m.facebook.com';
 
-var WebViewExample = React.createClass({
+class WebViewExample extends React.Component {
+  state = {
+    url: DEFAULT_URL,
+    status: 'No Page Loaded',
+    backButtonEnabled: false,
+    forwardButtonEnabled: false,
+    loading: true,
+    scalesPageToFit: true,
+  };
 
-  getInitialState: function() {
-    return {
-      url: DEFAULT_URL,
-      status: 'No Page Loaded',
-      backButtonEnabled: false,
-      forwardButtonEnabled: false,
-      loading: true,
-      scalesPageToFit: true,
-    };
-  },
+  inputText = '';
 
-  inputText: '',
-
-  handleTextInputChange: function(event) {
+  handleTextInputChange = (event) => {
     var url = event.nativeEvent.text;
     if (!/^[a-zA-Z-_]+:/.test(url)) {
       url = 'http://' + url;
     }
     this.inputText = url;
-  },
+  };
 
-  render: function() {
+  render() {
     this.inputText = this.state.url;
 
     return (
@@ -120,26 +117,26 @@ var WebViewExample = React.createClass({
         </View>
       </View>
     );
-  },
+  }
 
-  goBack: function() {
+  goBack = () => {
     this.refs[WEBVIEW_REF].goBack();
-  },
+  };
 
-  goForward: function() {
+  goForward = () => {
     this.refs[WEBVIEW_REF].goForward();
-  },
+  };
 
-  reload: function() {
+  reload = () => {
     this.refs[WEBVIEW_REF].reload();
-  },
+  };
 
-  onShouldStartLoadWithRequest: function(event) {
+  onShouldStartLoadWithRequest = (event) => {
     // Implement any custom loading logic here, don't forget to return!
     return true;
-  },
+  };
 
-  onNavigationStateChange: function(navState) {
+  onNavigationStateChange = (navState) => {
     this.setState({
       backButtonEnabled: navState.canGoBack,
       forwardButtonEnabled: navState.canGoForward,
@@ -148,13 +145,13 @@ var WebViewExample = React.createClass({
       loading: navState.loading,
       scalesPageToFit: true
     });
-  },
+  };
 
-  onSubmitEditing: function(event) {
+  onSubmitEditing = (event) => {
     this.pressGoButton();
-  },
+  };
 
-  pressGoButton: function() {
+  pressGoButton = () => {
     var url = this.inputText.toLowerCase();
     if (url === this.state.url) {
       this.reload();
@@ -165,17 +162,17 @@ var WebViewExample = React.createClass({
     }
     // dismiss keyboard
     this.refs[TEXT_INPUT_REF].blur();
-  },
+  };
+}
 
-});
-
-var Button = React.createClass({
-  _handlePress: function() {
+class Button extends React.Component {
+  _handlePress = () => {
     if (this.props.enabled !== false && this.props.onPress) {
       this.props.onPress();
     }
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
         <View style={styles.button}>
@@ -184,17 +181,14 @@ var Button = React.createClass({
       </TouchableWithoutFeedback>
     );
   }
-});
+}
 
-var ScaledWebView = React.createClass({
+class ScaledWebView extends React.Component {
+  state = {
+    scalingEnabled: true,
+  };
 
-  getInitialState: function() {
-    return {
-      scalingEnabled: true,
-    }
-  },
-
-  render: function() {
+  render() {
     return (
       <View>
         <WebView
@@ -220,8 +214,8 @@ var ScaledWebView = React.createClass({
         </View>
       </View>
     );
-  },
-})
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/createExamplePage.js

@@ -39,13 +39,11 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
   : ReactClass<any> {
   invariant(!!exampleModule.examples, 'The module must have examples');
 
-  var ExamplePage = React.createClass({
-    statics: {
-      title: exampleModule.title,
-      description: exampleModule.description,
-    },
+  class ExamplePage extends React.Component {
+    static title = exampleModule.title;
+    static description = exampleModule.description;
 
-    getBlock: function(example: Example, i) {
+    getBlock = (example: Example, i) => {
       // Filter platform-specific examples
       var {title, description, platform} = example;
       if (platform) {
@@ -82,16 +80,16 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
           {renderedComponent}
         </UIExplorerBlock>
       );
-    },
+    };
 
-    render: function() {
+    render() {
       return (
         <UIExplorerPage title={title}>
           {exampleModule.examples.map(this.getBlock)}
         </UIExplorerPage>
       );
     }
-  });
+  }
 
   return ExamplePage;
 };

IntegrationTests/AppEventsTest.js

@@ -32,24 +32,25 @@ type State = {
   elapsed?: string,
 };
 
-var AppEventsTest = React.createClass({
-  getInitialState(): State {
-    return {sent: 'none', received: 'none'};
-  },
-  componentDidMount: function() {
+class AppEventsTest extends React.Component {
+  state: State = {sent: 'none', received: 'none'};
+
+  componentDidMount() {
     NativeAppEventEmitter.addListener('testEvent', this.receiveEvent);
     var event = {data: TEST_PAYLOAD, ts: Date.now()};
     TestModule.sendAppEvent('testEvent', event);
     this.setState({sent: event});
-  },
-  receiveEvent: function(event: any) {
+  }
+
+  receiveEvent = (event: any) => {
     if (deepDiffer(event.data, TEST_PAYLOAD)) {
       throw new Error('Received wrong event: ' + JSON.stringify(event));
     }
     var elapsed = (Date.now() - event.ts) + 'ms';
     this.setState({received: event, elapsed}, TestModule.markTestCompleted);
-  },
-  render: function() {
+  };
+
+  render() {
     return (
       <View style={styles.container}>
         <Text>
@@ -58,7 +59,7 @@ var AppEventsTest = React.createClass({
       </View>
     );
   }
-});
+}
 
 AppEventsTest.displayName = 'AppEventsTest';
 

IntegrationTests/AsyncStorageTest.js

@@ -167,13 +167,11 @@ function testOptimizedMultiGet() {
 }
 
 
-var AsyncStorageTest = React.createClass({
-  getInitialState() {
-    return {
-      messages: 'Initializing...',
-      done: false,
-    };
-  },
+class AsyncStorageTest extends React.Component {
+  state = {
+    messages: 'Initializing...',
+    done: false,
+  };
 
   componentDidMount() {
     done = () => this.setState({done: true}, TestModule.markTestCompleted);
@@ -182,7 +180,7 @@ var AsyncStorageTest = React.createClass({
       DEBUG && console.log(msg);
     };
     AsyncStorage.clear(testSetAndGet);
-  },
+  }
 
   render() {
     return (
@@ -195,7 +193,7 @@ var AsyncStorageTest = React.createClass({
       </View>
     );
   }
-});
+}
 
 AsyncStorageTest.displayName = 'AsyncStorageTest';
 

IntegrationTests/ImageSnapshotTest.js

@@ -18,16 +18,16 @@ var {
 } = ReactNative;
 var { TestModule } = ReactNative.NativeModules;
 
-var ImageSnapshotTest = React.createClass({
+class ImageSnapshotTest extends React.Component {
   componentDidMount() {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
-  },
+  }
 
-  done(success : boolean) {
+  done = (success : boolean) => {
     TestModule.markTestPassed(success);
-  },
+  };
 
   render() {
     return (
@@ -37,7 +37,7 @@ var ImageSnapshotTest = React.createClass({
         onLoad={() => TestModule.verifySnapshot(this.done)} />
     );
   }
-});
+}
 
 ImageSnapshotTest.displayName = 'ImageSnapshotTest';
 

IntegrationTests/IntegrationTestHarnessTest.js

@@ -19,17 +19,20 @@ var {
 } = ReactNative;
 var { TestModule } = ReactNative.NativeModules;
 
-var IntegrationTestHarnessTest = React.createClass({
-  propTypes: {
+class IntegrationTestHarnessTest extends React.Component {
+  props: {
+    shouldThrow?: boolean,
+    waitOneFrame?: boolean,
+  };
+
+  static propTypes = {
     shouldThrow: React.PropTypes.bool,
     waitOneFrame: React.PropTypes.bool,
-  },
+  };
 
-  getInitialState() {
-    return {
-      done: false,
-    };
-  },
+  state = {
+    done: false,
+  };
 
   componentDidMount() {
     if (this.props.waitOneFrame) {
@@ -37,9 +40,9 @@ var IntegrationTestHarnessTest = React.createClass({
     } else {
       this.runTest();
     }
-  },
+  }
 
-  runTest() {
+  runTest = () => {
     if (this.props.shouldThrow) {
       throw new Error('Throwing error because shouldThrow');
     }
@@ -49,7 +52,7 @@ var IntegrationTestHarnessTest = React.createClass({
       throw new Error('RCTTestModule.markTestCompleted not defined.');
     }
     this.setState({done: true}, TestModule.markTestCompleted);
-  },
+  };
 
   render() {
     return (
@@ -61,7 +64,7 @@ var IntegrationTestHarnessTest = React.createClass({
       </View>
     );
   }
-});
+}
 
 IntegrationTestHarnessTest.displayName = 'IntegrationTestHarnessTest';
 

IntegrationTests/IntegrationTestsApp.js

@@ -42,13 +42,12 @@ require('LoggingTestModule');
 
 type Test = any;
 
-var IntegrationTestsApp = React.createClass({
-  getInitialState: function() {
-    return {
-      test: (null: ?Test),
-    };
-  },
-  render: function() {
+class IntegrationTestsApp extends React.Component {
+  state = {
+    test: (null: ?Test),
+  };
+
+  render() {
     if (this.state.test) {
       return (
         <ScrollView>
@@ -79,7 +78,7 @@ var IntegrationTestsApp = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {

IntegrationTests/PromiseTest.js

@@ -15,11 +15,11 @@ var ReactNative = require('react-native');
 var { View } = ReactNative;
 var { TestModule } = ReactNative.NativeModules;
 
-var PromiseTest = React.createClass({
-  shouldResolve: false,
-  shouldReject: false,
-  shouldSucceedAsync: false,
-  shouldThrowAsync: false,
+class PromiseTest extends React.Component {
+  shouldResolve = false;
+  shouldReject = false;
+  shouldSucceedAsync = false;
+  shouldThrowAsync = false;
 
   componentDidMount() {
     Promise.all([
@@ -28,48 +28,49 @@ var PromiseTest = React.createClass({
       this.testShouldSucceedAsync(),
       this.testShouldThrowAsync(),
     ]).then(() => TestModule.markTestPassed(
+      // $FlowFixMe found when converting React.createClass to ES6
       this.shouldResolve && this.shouldReject &&
+      // $FlowFixMe found when converting React.createClass to ES6
       this.shouldSucceedAsync && this.shouldThrowAsync
     ));
-  },
+  }
 
-  testShouldResolve() {
+  testShouldResolve = () => {
     return TestModule
       .shouldResolve()
       .then(() => this.shouldResolve = true)
       .catch(() => this.shouldResolve = false);
-  },
+  };
 
-  testShouldReject() {
+  testShouldReject = () => {
     return TestModule
       .shouldReject()
       .then(() => this.shouldReject = false)
       .catch(() => this.shouldReject = true);
-  },
+  };
 
-  async testShouldSucceedAsync() : Promise<any> {
+  testShouldSucceedAsync = async (): Promise<any> => {
     try {
       await TestModule.shouldResolve();
       this.shouldSucceedAsync = true;
     } catch (e) {
       this.shouldSucceedAsync = false;
     }
-  },
+  };
 
-  async testShouldThrowAsync() : Promise<any> {
+  testShouldThrowAsync = async (): Promise<any> => {
     try {
       await TestModule.shouldReject();
       this.shouldThrowAsync = false;
     } catch (e) {
       this.shouldThrowAsync = true;
     }
-  },
+  };
 
-  render() : ReactElement<any> {
+  render(): ReactElement<any> {
     return <View />;
   }
-
-});
+}
 
 PromiseTest.displayName = 'PromiseTest';
 

IntegrationTests/PropertiesUpdateTest.js

@@ -16,8 +16,7 @@ var {
 
 var { TestModule } = ReactNative.NativeModules;
 
-var PropertiesUpdateTest = React.createClass({
-
+class PropertiesUpdateTest extends React.Component {
   render() {
     if (this.props.markTestPassed) {
       TestModule.markTestPassed(true);
@@ -26,7 +25,7 @@ var PropertiesUpdateTest = React.createClass({
       <View/>
     );
   }
-});
+}
 
 PropertiesUpdateTest.displayName = 'PropertiesUpdateTest';
 

IntegrationTests/RCTRootViewIntegrationTestApp.js

@@ -35,13 +35,12 @@ TESTS.forEach(
   (test) => AppRegistry.registerComponent(test.displayName, () => test)
 );
 
-var RCTRootViewIntegrationTestsApp = React.createClass({
-  getInitialState: function() {
-    return {
-      test: null,
-    };
-  },
-  render: function() {
+class RCTRootViewIntegrationTestsApp extends React.Component {
+  state = {
+    test: null,
+  };
+
+  render() {
     if (this.state.test) {
       return (
         <ScrollView>
@@ -72,7 +71,7 @@ var RCTRootViewIntegrationTestsApp = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   container: {