[0.29.2] Bump version numbers

This reverts commit 07936faa39.

.eslintrc

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

.flowconfig

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:
 
-> **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?
 

.travis.yml

@@ -7,15 +7,15 @@ install:
   - export NVM_DIR="/Users/travis/build/facebook/.nvm"
   - brew install nvm
   - source $(brew --prefix nvm)/nvm.sh
-  # TODO npm 2 started stalling on Travis, t11852928
-  - nvm install 5
+  # testing with npm@2 for diversity, Circle tests with npm@3
+  - nvm install 4.4.3
   - rm -Rf "${TMPDIR}/jest_preprocess_cache"
   - npm config set spin=false
   - npm config set progress=false
-  - travis_wait npm install
+  - npm install
 
 script:
-  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry travis_wait ./scripts/objc-test.sh; fi
+  - if [[ "$TEST_TYPE" = objc ]]; then travis_retry ./scripts/objc-test.sh; fi
   - if [[ "$TEST_TYPE" = e2e-objc ]]; then node ./scripts/run-ci-e2e-tests.js --ios --js --retries 3; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm run flow check; fi
   - if [[ "$TEST_TYPE" = js ]]; then npm test -- --maxWorkers=1; fi

CONTRIBUTING.md

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

Examples/2048/2048.xcodeproj/project.pbxproj

@@ -14,8 +14,6 @@
 		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 */
@@ -40,20 +38,6 @@
 			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 */
@@ -67,8 +51,6 @@
 		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 */
@@ -76,8 +58,6 @@
 			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 */,
@@ -119,8 +99,6 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7511D4EE534000B7DA8 /* RCTImage.xcodeproj */,
-				E730D7471D4EE4D0000B7DA8 /* RCTNetwork.xcodeproj */,
 				5F82F1721B85784500FAE87E /* RCTWebSocket.xcodeproj */,
 				146163271AC3E22900C2F5AD /* React.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
@@ -155,22 +133,6 @@
 			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 */
@@ -181,7 +143,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				68ACCCD51D2BE2D2008E368A /* Run Script */,
 			);
 			buildRules = (
 			);
@@ -213,14 +174,6 @@
 			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 */;
@@ -263,20 +216,6 @@
 			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 */
@@ -291,23 +230,6 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
-/* Begin PBXShellScriptBuildPhase section */
-		68ACCCD51D2BE2D2008E368A /* Run Script */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Run Script";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/2048/Game2048.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

Examples/2048/2048/AppDelegate.m

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

Examples/Movies/MovieCell.js

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

Examples/Movies/Movies.xcodeproj/project.pbxproj

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

Examples/Movies/Movies/AppDelegate.m

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

Examples/Movies/MoviesApp.android.js

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

Examples/Movies/MoviesApp.ios.js

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

Examples/Movies/SearchBar.android.js

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

Examples/Movies/SearchBar.ios.js

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

Examples/Movies/SearchScreen.js

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

Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj

@@ -16,7 +16,6 @@
 		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 */
@@ -55,13 +54,6 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTSettings;
 		};
-		E730D76D1D4EE5FC000B7DA8 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-			proxyType = 2;
-			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
-			remoteInfo = RCTNetwork;
-		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -77,7 +69,6 @@
 		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 */
@@ -85,7 +76,6 @@
 			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 */,
@@ -129,7 +119,6 @@
 		58C572071AA6126D00CDF9C8 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */,
 				5FF894281B8556F8007731BE /* RCTWebSocket.xcodeproj */,
 				144C5F631AC3E5D800B004E7 /* React.xcodeproj */,
 				134180381AA917ED003F314A /* RCTImage.xcodeproj */,
@@ -182,14 +171,6 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		E730D7691D4EE5FC000B7DA8 /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				E730D76E1D4EE5FC000B7DA8 /* libRCTNetwork.a */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -200,7 +181,6 @@
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
-				681C70ED1D2BE73C00E71791 /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -236,10 +216,6 @@
 					ProductGroup = 134180391AA917ED003F314A /* Products */;
 					ProjectRef = 134180381AA917ED003F314A /* RCTImage.xcodeproj */;
 				},
-				{
-					ProductGroup = E730D7691D4EE5FC000B7DA8 /* Products */;
-					ProjectRef = E730D7681D4EE5FC000B7DA8 /* RCTNetwork.xcodeproj */;
-				},
 				{
 					ProductGroup = 832044901B492C1E00E297FC /* Products */;
 					ProjectRef = 8320448F1B492C1E00E297FC /* RCTSettings.xcodeproj */;
@@ -300,13 +276,6 @@
 			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 */
@@ -321,22 +290,6 @@
 		};
 /* End PBXResourcesBuildPhase section */
 
-/* Begin PBXShellScriptBuildPhase section */
-		681C70ED1D2BE73C00E71791 /* ShellScript */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n$SRCROOT/../../packager/react-native-xcode.sh Examples/TicTacToe/TicTacToeApp.js\n";
-		};
-/* End PBXShellScriptBuildPhase section */
-
 /* Begin PBXSourcesBuildPhase section */
 		13B07F871A680F5B00A75B9A /* Sources */ = {
 			isa = PBXSourcesBuildPhase;

Examples/TicTacToe/TicTacToe/AppDelegate.m

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

Examples/TicTacToe/TicTacToeApp.js

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

Examples/TicTacToe/android/app/BUCK

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

Examples/TicTacToe/android/app/build.gradle

@@ -1,31 +0,0 @@
-apply plugin: 'com.android.application'
-
-android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
-
-    defaultConfig {
-        applicationId "com.facebook.react.tictactoe"
-        minSdkVersion 16
-        targetSdkVersion 22
-        versionCode 1
-        versionName "1.0"
-        ndk {
-            abiFilters "armeabi-v7a", "x86"
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-    compile 'com.android.support:appcompat-v7:23.0.1'
-
-    // Build React Native from source
-    compile project(':ReactAndroid')
-}

Examples/TicTacToe/android/app/gradle.properties

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

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

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

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

@@ -1,30 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.facebook.react.tictactoe"
-    android:versionCode="1"
-    android:versionName="1.0">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <uses-sdk
-      android:minSdkVersion="16"
-      android:targetSdkVersion="22" />
-
-    <application
-      android:name=".TicTacToeApplication"
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:icon="@drawable/launcher_icon"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".TicTacToeActivity">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
-</manifest>

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

@@ -1,23 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-package com.facebook.react.tictactoe;
-
-import com.facebook.react.ReactActivity;
-
-public class TicTacToeActivity extends ReactActivity {
-  @Override
-  protected String getMainComponentName() {
-    return "TicTacToeApp";
-  }
-}

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

@@ -1,58 +0,0 @@
-/**
- * The examples provided by Facebook are for non-commercial testing and
- * evaluation purposes only.
- *
- * Facebook reserves all rights not expressly granted.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
- * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
- * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
- * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-package com.facebook.react.tictactoe;
-
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-import javax.annotation.Nullable;
-
-public class TicTacToeApplication extends Application implements ReactApplication {
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    public String getJSMainModuleName() {
-      return "Examples/TicTacToe/TicTacToeApp";
-    }
-
-    @Override
-    public @Nullable String getBundleAssetName() {
-      return "TicTacToeApp.bundle";
-    }
-
-    @Override
-    protected boolean getUseDeveloperSupport() {
-      return true;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-        new MainReactPackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-}

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

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

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

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

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

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

Examples/UIExplorer/AccessibilityAndroidExample.android.js

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

Examples/UIExplorer/AccessibilityIOSExample.js

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

Examples/UIExplorer/ActionSheetIOSExample.js

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

Examples/UIExplorer/ActivityIndicatorExample.js

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

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

Examples/UIExplorer/AlertExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -41,8 +34,9 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after
 /**
  * Simple alert examples.
  */
-class SimpleAlertExampleBlock extends React.Component {
-  render() {
+var SimpleAlertExampleBlock = React.createClass({
+
+  render: function() {
     return (
       <View>
         <TouchableHighlight style={styles.wrapper}
@@ -106,40 +100,25 @@ class SimpleAlertExampleBlock extends React.Component {
             <Text>Alert with too many buttons</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.wrapper}
-          onPress={() => Alert.alert(
-            'Alert Title',
-            null,
-            [
-              {text: 'OK', onPress: () => console.log('OK Pressed!')},
-            ],
-            {
-              cancelable: false
-            }
-          )}>
-          <View style={styles.button}>
-            <Text>Alert that cannot be dismissed</Text>
-          </View>
-        </TouchableHighlight>
       </View>
     );
-  }
-}
+  },
+});
 
-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() {
+var AlertExample = React.createClass({
+  statics: {
+    title: 'Alert',
+    description: 'Alerts display a concise and informative message ' +
+    'and prompt the user to make a decision.',
+  },
+  render: function() {
     return (
       <UIExplorerBlock title={'Alert'}>
         <SimpleAlertExampleBlock />
       </UIExplorerBlock>
     );
   }
-}
+});
 
 var styles = StyleSheet.create({
   wrapper: {

Examples/UIExplorer/AlertIOSExample.js

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

Examples/UIExplorer/AnimatedExample.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExApp.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExBobble.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExChained.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExScroll.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExSet.js

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

Examples/UIExplorer/AnimatedGratuitousApp/AnExTilt.js

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

Examples/UIExplorer/AppStateExample.js

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

Examples/UIExplorer/AssetScaledImageExample.js

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

Examples/UIExplorer/AsyncStorageExample.js

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

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

Examples/UIExplorer/BoxShadowExample.js

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

Examples/UIExplorer/CameraRollExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -41,12 +34,15 @@ const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
 const CAMERA_ROLL_VIEW = 'camera_roll_view';
 
-class CameraRollExample extends React.Component {
-  state = {
-    groupTypes: 'SavedPhotos',
-    sliderValue: 1,
-    bigImages: true,
-  };
+const CameraRollExample = React.createClass({
+
+  getInitialState() {
+    return {
+      groupTypes: 'SavedPhotos',
+      sliderValue: 1,
+      bigImages: true,
+    };
+  },
 
   render() {
     return (
@@ -68,9 +64,9 @@ class CameraRollExample extends React.Component {
         />
       </View>
     );
-  }
+  },
 
-  loadAsset = (asset) => {
+  loadAsset(asset){
     if (this.props.navigator) {
       this.props.navigator.push({
         title: 'Camera Roll Image',
@@ -79,9 +75,9 @@ class CameraRollExample extends React.Component {
         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 ?
@@ -102,22 +98,22 @@ class CameraRollExample extends React.Component {
         </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/CameraRollView.js

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

Examples/UIExplorer/ClipboardExample.js

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

Examples/UIExplorer/DatePickerAndroidExample.js

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

Examples/UIExplorer/DatePickerIOSExample.js

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

Examples/UIExplorer/ExampleTypes.js

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

Examples/UIExplorer/GeolocationExample.js

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

Examples/UIExplorer/ImageCapInsetsExample.js

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

Examples/UIExplorer/ImageEditingExample.js

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

Examples/UIExplorer/ImageExample.js

@@ -165,7 +165,7 @@ var MultipleSourcesExample = React.createClass({
   },
   render: function() {
     return (
-      <View>
+      <View style={styles.container}>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
           <Text
             style={styles.touchableText}
@@ -180,7 +180,7 @@ var MultipleSourcesExample = React.createClass({
         </View>
         <Text>Container image size: {this.state.width}x{this.state.height} </Text>
         <View
-          style={{height: this.state.height, width: this.state.width}} >
+          style={[styles.imageContainer, {height: this.state.height, width: this.state.width}]} >
           <Image
             style={{flex: 1}}
             source={[
@@ -505,18 +505,6 @@ exports.examples = [
                     source={image}
                   />
                 </View>
-                { Platform.OS === 'ios' ?
-                  <View style={styles.leftMargin}>
-                    <Text style={[styles.resizeModeText]}>
-                      Repeat
-                    </Text>
-                    <Image
-                      style={styles.resizeMode}
-                      resizeMode={Image.resizeMode.repeat}
-                      source={image}
-                    />
-                  </View>
-                : null }
                 { Platform.OS === 'android' ?
                   <View style={styles.leftMargin}>
                     <Text style={[styles.resizeModeText]}>
@@ -587,20 +575,7 @@ exports.examples = [
     render: function() {
       return <MultipleSourcesExample />;
     },
-  },
-  {
-    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!LegacyImage')}
-          style={styles.base}
-        />
-      );
-    },
+    platform: 'android',
   },
 ];
 

Examples/UIExplorer/KeyboardAvoidingViewExample.js

@@ -26,20 +26,24 @@ const {
 const UIExplorerBlock = require('./UIExplorerBlock');
 const UIExplorerPage = require('./UIExplorerPage');
 
-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.';
+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.',
+  },
 
-  state = {
-    behavior: 'padding',
-    modalOpen: false,
-  };
+  getInitialState() {
+    return {
+      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}>
@@ -65,7 +69,7 @@ class KeyboardAvoidingViewExample extends React.Component {
         </TouchableHighlight>
       </View>
     );
-  };
+  },
 
   render() {
     return (
@@ -75,8 +79,8 @@ class KeyboardAvoidingViewExample extends React.Component {
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  }
-}
+  },
+});
 
 const styles = StyleSheet.create({
   outerContainer: {

Examples/UIExplorer/LayoutAnimationExample.js

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

Examples/UIExplorer/LayoutEventsExample.js

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

Examples/UIExplorer/LayoutExample.js

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

Examples/UIExplorer/LinkingExample.js

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

Examples/UIExplorer/ListViewExample.js

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

Examples/UIExplorer/ListViewGridLayoutExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -130,8 +123,7 @@ var styles = StyleSheet.create({
   list: {
     justifyContent: 'space-around',
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'flex-start'
+    flexWrap: 'wrap'
   },
   row: {
     justifyContent: 'center',

Examples/UIExplorer/ListViewPagingExample.js

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

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

Examples/UIExplorer/ModalExample.js

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

Examples/UIExplorer/NativeAnimationsExample.js

@@ -22,38 +22,40 @@
  */
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {
+var React = require('react');
+var ReactNative = require('react-native');
+var {
   View,
   Text,
   Animated,
   StyleSheet,
   TouchableWithoutFeedback,
 } = ReactNative;
+var UIExplorerButton = require('./UIExplorerButton');
 
-class Tester extends React.Component {
-  state = {
-    native: new Animated.Value(0),
-    js: new Animated.Value(0),
-  };
+var Tester = React.createClass({
+  current: 0,
+  getInitialState() {
+    return {
+      native: new Animated.Value(0),
+      js: new Animated.Value(0),
+    };
+  },
 
-  current = 0;
-
-  onPress = () => {
-    const animConfig = (
-      this.current && this.props.reverseConfig ? this.props.reverseConfig : this.props.config
-    );
+  onPress() {
     this.current = this.current ? 0 : 1;
     const config = {
-      ...animConfig,
+      ...this.props.config,
       toValue: this.current,
     };
-
-    // $FlowIssue #0000000
-    Animated[this.props.type](this.state.native, { ...config, useNativeDriver: true }).start();
+    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.js, { ...config, useNativeDriver: false }).start();
-  };
+  },
 
   render() {
     return (
@@ -74,54 +76,8 @@ class Tester extends React.Component {
         </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: {
@@ -339,7 +295,7 @@ exports.examples = [
                         inputRange: [0, 1],
                         outputRange: [0, 100],
                       })
-                    },
+                    }
                   ],
                 }
               ]}
@@ -348,39 +304,5 @@ exports.examples = [
         </Tester>
       );
     },
-  },{
-    title: 'translateX => Animated.decay',
-    render: function() {
-      return (
-        <Tester
-          type="decay"
-          config={{ velocity: 0.5 }}
-          reverseConfig={{ velocity: -0.5 }}
-        >
-          {anim => (
-            <Animated.View
-              style={[
-                styles.block,
-                {
-                  transform: [
-                    {
-                      translateX: anim
-                    },
-                  ],
-                }
-              ]}
-            />
-          )}
-        </Tester>
-      );
-    },
-  },
-  {
-    title: 'Animated value listener',
-    render: function() {
-      return (
-        <ValueListenerExample />
-      );
-    },
   },
 ];

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

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

Examples/UIExplorer/NavigationExperimental/NavigationCardStack-example.js

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

Examples/UIExplorer/NavigationExperimental/NavigationExampleRow.js

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

Examples/UIExplorer/NavigationExperimental/NavigationExperimentalExample.js

@@ -35,20 +35,22 @@ const View = require('View');
 const EXAMPLES = {
   'CardStack + Header + Tabs Example': require('./NavigationCardStack-NavigationHeader-Tabs-example'),
   'CardStack Example': require('./NavigationCardStack-example'),
-  'Transitioner + Animated View Example': require('./NavigationTransitioner-AnimatedView-example'),
-  'Transitioner + Animated View Pager Example': require('./NavigationTransitioner-AnimatedView-pager-example'),
 };
 
 const EXAMPLE_STORAGE_KEY = 'NavigationExperimentalExample';
 
-class NavigationExperimentalExample extends React.Component {
-  static title = 'Navigation (Experimental)';
-  static description = 'Upcoming navigation APIs and animated navigation views';
-  static external = true;
+const NavigationExperimentalExample = React.createClass({
+  statics: {
+    title: 'Navigation (Experimental)',
+    description: 'Upcoming navigation APIs and animated navigation views',
+    external: true,
+  },
 
-  state = {
-    example: null,
-  };
+  getInitialState: function() {
+    return {
+      example: null,
+    };
+  },
 
   componentDidMount() {
     AsyncStorage.getItem(EXAMPLE_STORAGE_KEY, (err, example) => {
@@ -62,16 +64,16 @@ class NavigationExperimentalExample extends React.Component {
         example,
       });
     });
-  }
+  },
 
-  setExample = (example) => {
+  setExample: function(example) {
     this.setState({
       example,
     });
     AsyncStorage.setItem(EXAMPLE_STORAGE_KEY, example);
-  };
+  },
 
-  _renderMenu = () => {
+  _renderMenu: function() {
     let exitRow = null;
     if (this.props.onExampleExit) {
       exitRow = (
@@ -89,9 +91,9 @@ class NavigationExperimentalExample extends React.Component {
         </ScrollView>
       </View>
     );
-  };
+  },
 
-  _renderExampleList = () => {
+  _renderExampleList: function() {
     return Object.keys(EXAMPLES).map(exampleName => (
       <NavigationExampleRow
         key={exampleName}
@@ -101,13 +103,13 @@ class NavigationExperimentalExample extends React.Component {
         }}
       />
     ));
-  };
+  },
 
-  _exitInnerExample = () => {
+  _exitInnerExample: function() {
     this.setExample('menu');
-  };
+  },
 
-  handleBackAction = () => {
+  handleBackAction: function() {
     const wasHandledByExample = (
       this.exampleRef &&
       this.exampleRef.handleBackAction &&
@@ -121,9 +123,9 @@ class NavigationExperimentalExample extends React.Component {
       return true;
     }
     return false;
-  };
+  },
 
-  render() {
+  render: function() {
     if (this.state.example === 'menu') {
       return this._renderMenu();
     }
@@ -137,8 +139,8 @@ class NavigationExperimentalExample extends React.Component {
       );
     }
     return null;
-  }
-}
+  },
+});
 
 const styles = StyleSheet.create({
   menu: {

Examples/UIExplorer/Navigator/BreadcrumbNavSample.js

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

Examples/UIExplorer/Navigator/JumpingNavSample.js

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

Examples/UIExplorer/Navigator/NavigationBarSample.js

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

Examples/UIExplorer/Navigator/NavigatorExample.js

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

Examples/UIExplorer/NavigatorIOSColorsExample.js

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

Examples/UIExplorer/NavigatorIOSExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -36,8 +29,8 @@ const {
   View,
 } = ReactNative;
 
-class EmptyPage extends React.Component {
-  render() {
+const EmptyPage = React.createClass({
+  render: function() {
     return (
       <View style={styles.emptyPage}>
         <Text style={styles.emptyPageText}>
@@ -45,11 +38,11 @@ class EmptyPage extends React.Component {
         </Text>
       </View>
     );
-  }
-}
+  },
+});
 
-class NavigatorIOSExamplePage extends React.Component {
-  render() {
+const NavigatorIOSExamplePage = React.createClass({
+  render: function() {
     var recurseTitle = 'Recurse Navigation';
     if (!this.props.depth || this.props.depth === 1) {
       recurseTitle += ' - more examples here';
@@ -72,13 +65,6 @@ class NavigatorIOSExamplePage extends React.Component {
               component: createExamplePage(null, ViewExample),
             });
           })}
-          {this._renderRow('Custom title image Example', () => {
-            this.props.navigator.push({
-              title: 'Custom title image Example',
-              titleImage: require('./relay.png'),
-              component: createExamplePage(null, ViewExample),
-            });
-          })}
           {this._renderRow('Custom Right Button', () => {
             this.props.navigator.push({
               title: NavigatorIOSExample.title,
@@ -128,9 +114,9 @@ class NavigatorIOSExamplePage extends React.Component {
         <View style={styles.line}/>
       </ScrollView>
     );
-  }
+  },
 
-  _renderReplace = () => {
+  _renderReplace: function() {
     if (!this.props.depth) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -148,9 +134,9 @@ class NavigatorIOSExamplePage extends React.Component {
         }
       });
     });
-  };
+  },
 
-  _renderReplacePrevious = () => {
+  _renderReplacePrevious: function() {
     if (!this.props.depth || this.props.depth < 2) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -165,9 +151,9 @@ class NavigatorIOSExamplePage extends React.Component {
         wrapperStyle: styles.customWrapperStyle,
       });
     });
-  };
+  },
 
-  _renderReplacePreviousAndPop = () => {
+  _renderReplacePreviousAndPop: function() {
     if (!this.props.depth || this.props.depth < 2) {
       // this is to avoid replacing the top of the stack
       return null;
@@ -182,9 +168,9 @@ class NavigatorIOSExamplePage extends React.Component {
         wrapperStyle: styles.customWrapperStyle,
       });
     });
-  };
+  },
 
-  _renderRow = (title: string, onPress: Function) => {
+  _renderRow: function(title: string, onPress: Function) {
     return (
       <View>
         <TouchableHighlight onPress={onPress}>
@@ -197,15 +183,17 @@ class NavigatorIOSExamplePage extends React.Component {
         <View style={styles.separator} />
       </View>
     );
-  };
-}
+  },
+});
 
-class NavigatorIOSExample extends React.Component {
-  static title = '<NavigatorIOS>';
-  static description = 'iOS navigation capabilities';
-  static external = true;
+const NavigatorIOSExample = React.createClass({
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+    external: true,
+  },
 
-  render() {
+  render: function() {
     const {onExampleExit} = this.props;
     return (
       <NavigatorIOS
@@ -215,11 +203,12 @@ class NavigatorIOSExample extends React.Component {
           component: NavigatorIOSExamplePage,
           passProps: {onExampleExit},
         }}
+        itemWrapperStyle={styles.itemWrapper}
         tintColor="#008888"
       />
     );
-  }
-}
+  },
+});
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/NetInfoExample.js

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

Examples/UIExplorer/PermissionsExampleAndroid.android.js

@@ -26,26 +26,29 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const {
-  PermissionsAndroid,
   StyleSheet,
   Text,
   TextInput,
   TouchableWithoutFeedback,
   View,
 } = ReactNative;
+const DialogManager = require('NativeModules').DialogManagerAndroid;
+const Permissions = require('NativeModules').AndroidPermissions;
 
 exports.displayName = (undefined: ?string);
 exports.framework = 'React';
-exports.title = 'PermissionsAndroid';
+exports.title = '<Permissions>';
 exports.description = 'Permissions example for API 23+.';
 
-class PermissionsExample extends React.Component {
-  state = {
-    permission: PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
-    hasPermission: 'Not Checked',
-  };
+const PermissionsExample = React.createClass({
+  getInitialState: function() {
+    return {
+      permission: 'android.permission.WRITE_EXTERNAL_STORAGE',
+      hasPermission: 'Not Checked',
+    };
+  },
 
-  render() {
+  render: function() {
     return (
       <View style={styles.container}>
         <Text style={styles.text}>Permission Name:</Text>
@@ -62,45 +65,68 @@ class PermissionsExample extends React.Component {
           </View>
         </TouchableWithoutFeedback>
         <Text style={styles.text}>Permission Status: {this.state.hasPermission}</Text>
-        <TouchableWithoutFeedback onPress={this._requestPermission}>
+        <TouchableWithoutFeedback onPress={this._shouldExplainPermission}>
           <View>
             <Text style={[styles.touchable, styles.text]}>Request Permission</Text>
           </View>
         </TouchableWithoutFeedback>
       </View>
     );
-  }
+  },
 
-  _updateText = (event: Object) => {
+  _updateText: function(event: Object) {
     this.setState({
       permission: event.nativeEvent.text,
     });
-  };
+  },
 
-  _checkPermission = async () => {
-    let result = await PermissionsAndroid.checkPermission(this.state.permission);
-    this.setState({
-      hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' +
-        this.state.permission,
-    });
-  };
-
-  _requestPermission = async () => {
-    let result = await PermissionsAndroid.requestPermission(
+  _checkPermission: function() {
+    Permissions.checkPermission(
       this.state.permission,
-      {
-        title: 'Permission Explanation',
-        message:
-          'The app needs the following permission ' + this.state.permission +
-          ' because of reasons. Please approve.'
+      (permission: string, result: boolean) => {
+        this.setState({
+          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
+        });
       },
-    );
-    this.setState({
-      hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' +
-        this.state.permission,
-    });
-  };
-}
+      this._showError);
+  },
+
+  _shouldExplainPermission: function() {
+    Permissions.shouldShowRequestPermissionRationale(
+      this.state.permission,
+      (permission: string, shouldShow: boolean) => {
+        if (shouldShow) {
+          DialogManager.showAlert(
+            {
+              title: 'Permission Explanation',
+              message:
+                'The app needs the following permission ' + this.state.permission +
+                ' because of reasons. Please approve.'
+            },
+            this._showError,
+            this._requestPermission);
+        } else {
+          this._requestPermission();
+        }
+      },
+      this._showError);
+  },
+
+  _requestPermission: function() {
+    Permissions.requestPermission(
+      this.state.permission,
+      (permission: string, result: boolean) => {
+        this.setState({
+          hasPermission: (result ? 'Granted' : 'Revoked') + ' for ' + permission,
+        });
+      },
+      this._showError);
+  },
+
+  _showError: function() {
+    DialogManager.showAlert({message: 'Error'}, {}, {});
+  }
+});
 
 exports.examples = [
   {
@@ -126,3 +152,4 @@ var styles = StyleSheet.create({
     color: '#007AFF',
   },
 });
+

Examples/UIExplorer/PickerExample.js

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

Examples/UIExplorer/PickerIOSExample.js

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

Examples/UIExplorer/PointerEventsExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -30,28 +23,26 @@ var {
   View,
 } = ReactNative;
 
-class ExampleBox extends React.Component {
-  state = {
-    log: [],
-  };
-
-  handleLog = (msg) => {
+var ExampleBox = React.createClass({
+  getInitialState: function() {
+    return {
+      log: [],
+    };
+  },
+  handleLog: function(msg) {
     this.state.log = this.state.log.concat([msg]);
-  };
-
-  flushReactChanges = () => {
+  },
+  flushReactChanges: function() {
     this.forceUpdate();
-  };
-
+  },
   /**
    * Capture phase of bubbling to append separator before any of the bubbling
    * happens.
    */
-  handleTouchCapture = () => {
+  handleTouchCapture: function() {
     this.state.log = this.state.log.concat(['---']);
-  };
-
-  render() {
+  },
+  render: function() {
     return (
       <View>
         <View
@@ -68,10 +59,11 @@ class ExampleBox extends React.Component {
       </View>
     );
   }
-}
+});
 
-class NoneExample extends React.Component {
-  render() {
+
+var NoneExample = React.createClass({
+  render: function() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -97,14 +89,14 @@ class NoneExample extends React.Component {
       </View>
     );
   }
-}
+});
 
 /**
  * Special demo text that makes itself untouchable so that it doesn't destroy
  * the experiment and confuse the output.
  */
-class DemoText extends React.Component {
-  render() {
+var DemoText = React.createClass({
+  render: function() {
     return (
       <View pointerEvents="none">
         <Text
@@ -114,10 +106,10 @@ class DemoText extends React.Component {
       </View>
     );
   }
-}
+});
 
-class BoxNoneExample extends React.Component {
-  render() {
+var BoxNoneExample = React.createClass({
+  render: function() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -151,10 +143,10 @@ class BoxNoneExample extends React.Component {
       </View>
     );
   }
-}
+});
 
-class BoxOnlyExample extends React.Component {
-  render() {
+var BoxOnlyExample = React.createClass({
+  render: function() {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -188,7 +180,7 @@ class BoxOnlyExample extends React.Component {
       </View>
     );
   }
-}
+});
 
 type ExampleClass = {
   Component: ReactClass<any>,

Examples/UIExplorer/ProgressBarAndroidExample.android.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -52,11 +45,14 @@ var MovingBar = React.createClass({
   },
 });
 
-class ProgressBarAndroidExample extends React.Component {
-  static title = '<ProgressBarAndroid>';
-  static description = 'Horizontal bar to show the progress of some operation.';
+var ProgressBarAndroidExample = React.createClass({
 
-  render() {
+  statics: {
+    title: '<ProgressBarAndroid>',
+    description: 'Horizontal bar to show the progress of some operation.',
+  },
+
+  render: function() {
     return (
       <UIExplorerPage title="ProgressBar Examples">
         <UIExplorerBlock title="Horizontal Indeterminate ProgressBar">
@@ -76,7 +72,7 @@ class ProgressBarAndroidExample extends React.Component {
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  }
-}
+  },
+});
 
 module.exports = ProgressBarAndroidExample;

Examples/UIExplorer/ProgressViewIOSExample.js

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

Examples/UIExplorer/PushNotificationIOSExample.js

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

Examples/UIExplorer/RCTRootViewIOSExample.js

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

Examples/UIExplorer/RefreshControlExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
@@ -49,12 +42,11 @@ const styles = StyleSheet.create({
   },
 });
 
-class Row extends React.Component {
-  _onClick = () => {
+const Row = React.createClass({
+  _onClick: function() {
     this.props.onClick(this.props.data);
-  };
-
-  render() {
+  },
+  render: function() {
     return (
      <TouchableWithoutFeedback onPress={this._onClick} >
         <View style={styles.row}>
@@ -64,26 +56,30 @@ class Row extends React.Component {
         </View>
       </TouchableWithoutFeedback>
     );
-  }
-}
+  },
+});
 
-class RefreshControlExample extends React.Component {
-  static title = '<RefreshControl>';
-  static description = 'Adds pull-to-refresh support to a scrollview.';
+const RefreshControlExample = React.createClass({
+  statics: {
+    title: '<RefreshControl>',
+    description: 'Adds pull-to-refresh support to a scrollview.'
+  },
 
-  state = {
-    isRefreshing: false,
-    loaded: 0,
-    rowData: Array.from(new Array(20)).map(
-      (val, i) => ({text: 'Initial row ' + i, clicks: 0})),
-  };
+  getInitialState() {
+    return {
+      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) => {
@@ -106,9 +102,9 @@ class RefreshControlExample extends React.Component {
         {rows}
       </ScrollView>
     );
-  }
+  },
 
-  _onRefresh = () => {
+  _onRefresh() {
     this.setState({isRefreshing: true});
     setTimeout(() => {
       // prepend 10 items
@@ -125,7 +121,7 @@ class RefreshControlExample extends React.Component {
         rowData: rowData,
       });
     }, 5000);
-  };
-}
+  },
+});
 
 module.exports = RefreshControlExample;

Examples/UIExplorer/RootViewSizeFlexibilityExampleApp.js

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

Examples/UIExplorer/ScrollViewExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -84,19 +77,18 @@ exports.examples = [
   }
 }];
 
-class Thumb extends React.Component {
-  shouldComponentUpdate(nextProps, nextState) {
+var Thumb = React.createClass({
+  shouldComponentUpdate: function(nextProps, nextState) {
     return false;
-  }
-
-  render() {
+  },
+  render: function() {
     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/ScrollViewSimpleExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -33,11 +26,12 @@ var {
 
 var NUM_ITEMS = 20;
 
-class ScrollViewSimpleExample extends React.Component {
-  static title = '<ScrollView>';
-  static description = 'Component that enables scrolling through child components.';
-
-  makeItems = (nItems: number, styles): Array<any> => {
+var ScrollViewSimpleExample = React.createClass({
+  statics: {
+    title: '<ScrollView>',
+    description: 'Component that enables scrolling through child components.'
+  },
+  makeItems: function(nItems: number, styles): Array<any> {
     var items = [];
     for (var i = 0; i < nItems; i++) {
        items[i] = (
@@ -47,9 +41,9 @@ class ScrollViewSimpleExample extends React.Component {
        );
     }
     return items;
-  };
+  },
 
-  render() {
+  render: function() {
     // One of the items is a horizontal scroll view
     var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
     items[4] = (
@@ -66,7 +60,7 @@ class ScrollViewSimpleExample extends React.Component {
 
     return verticalScrollView;
   }
-}
+});
 
 var styles = StyleSheet.create({
   verticalScrollView: {

Examples/UIExplorer/SegmentedControlIOSExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -31,7 +24,7 @@ var {
   StyleSheet
 } = ReactNative;
 
-class BasicSegmentedControlExample extends React.Component {
+var BasicSegmentedControlExample = React.createClass({
   render() {
     return (
       <View>
@@ -44,9 +37,9 @@ class BasicSegmentedControlExample extends React.Component {
       </View>
     );
   }
-}
+});
 
-class PreSelectedSegmentedControlExample extends React.Component {
+var PreSelectedSegmentedControlExample = React.createClass({
   render() {
     return (
       <View>
@@ -56,9 +49,9 @@ class PreSelectedSegmentedControlExample extends React.Component {
       </View>
     );
   }
-}
+});
 
-class MomentarySegmentedControlExample extends React.Component {
+var MomentarySegmentedControlExample = React.createClass({
   render() {
     return (
       <View>
@@ -68,9 +61,9 @@ class MomentarySegmentedControlExample extends React.Component {
       </View>
     );
   }
-}
+});
 
-class DisabledSegmentedControlExample extends React.Component {
+var DisabledSegmentedControlExample = React.createClass({
   render() {
     return (
       <View>
@@ -79,10 +72,10 @@ class DisabledSegmentedControlExample extends React.Component {
         </View>
       </View>
     );
-  }
-}
+  },
+});
 
-class ColorSegmentedControlExample extends React.Component {
+var ColorSegmentedControlExample = React.createClass({
   render() {
     return (
       <View>
@@ -94,15 +87,17 @@ class ColorSegmentedControlExample extends React.Component {
         </View>
       </View>
     );
-  }
-}
+  },
+});
 
-class EventSegmentedControlExample extends React.Component {
-  state = {
-    values: ['One', 'Two', 'Three'],
-    value: 'Not selected',
-    selectedIndex: undefined
-  };
+var EventSegmentedControlExample = React.createClass({
+  getInitialState() {
+    return {
+      values: ['One', 'Two', 'Three'],
+      value: 'Not selected',
+      selectedIndex: undefined
+    };
+  },
 
   render() {
     return (
@@ -120,20 +115,20 @@ class EventSegmentedControlExample extends React.Component {
           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/SetPropertiesExampleApp.js

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

Examples/UIExplorer/SliderExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -31,14 +24,18 @@ var {
   View,
 } = ReactNative;
 
-class SliderExample extends React.Component {
-  static defaultProps = {
-    value: 0,
-  };
+var SliderExample = React.createClass({
+  getDefaultProps() {
+    return {
+      value: 0,
+    }
+  },
 
-  state = {
-    value: this.props.value,
-  };
+  getInitialState() {
+    return {
+      value: this.props.value,
+    };
+  },
 
   render() {
     return (
@@ -52,13 +49,15 @@ class SliderExample extends React.Component {
       </View>
     );
   }
-}
+});
 
-class SlidingCompleteExample extends React.Component {
-  state = {
-    slideCompletionValue: 0,
-    slideCompletionCount: 0,
-  };
+var SlidingCompleteExample = React.createClass({
+  getInitialState() {
+    return {
+      slideCompletionValue: 0,
+      slideCompletionCount: 0,
+    };
+  },
 
   render() {
     return (
@@ -74,7 +73,7 @@ class SlidingCompleteExample extends React.Component {
       </View>
     );
   }
-}
+});
 
 var styles = StyleSheet.create({
   slider: {

Examples/UIExplorer/SliderIOSExample.js

@@ -0,0 +1,122 @@
+/**
+ * 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 {
+  SliderIOS,
+  Text,
+  StyleSheet,
+  View,
+} = ReactNative;
+
+var SliderExample = React.createClass({
+  getInitialState() {
+    return {
+      value: 0,
+    };
+  },
+
+  render() {
+    return (
+      <View>
+        <Text style={styles.text} >
+          {this.state.value}
+        </Text>
+        <SliderIOS
+          {...this.props}
+          onValueChange={(value) => this.setState({value: value})} />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  slider: {
+    height: 10,
+    margin: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 10,
+  },
+});
+
+exports.title = '<SliderIOS>';
+exports.displayName = 'SliderExample';
+exports.description = 'Slider input for numeric values';
+exports.examples = [
+  {
+    title: 'Default settings',
+    render(): ReactElement<any> {
+      return <SliderExample />;
+    }
+  },
+  {
+    title: 'minimumValue: -1, maximumValue: 2',
+    render(): ReactElement<any> {
+      return (
+        <SliderExample
+          minimumValue={-1}
+          maximumValue={2}
+        />
+      );
+    }
+  },
+  {
+    title: 'step: 0.25',
+    render(): ReactElement<any> {
+      return <SliderExample step={0.25} />;
+    }
+  },
+  {
+    title: 'Custom min/max track tint color',
+    render(): ReactElement<any> {
+      return (
+        <SliderExample
+          minimumTrackTintColor={'red'}
+          maximumTrackTintColor={'green'}
+        />
+      );
+    }
+  },
+  {
+    title: 'Custom thumb image',
+    render(): ReactElement<any> {
+      return <SliderExample thumbImage={require('./uie_thumb_big.png')} />;
+    }
+  },
+  {
+    title: 'Custom track image',
+    render(): ReactElement<any> {
+      return <SliderExample trackImage={require('./slider.png')} />;
+    }
+  },
+  {
+    title: 'Custom min/max track image',
+    render(): ReactElement<any> {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./slider-left.png')}
+          maximumTrackImage={require('./slider-right.png')}
+        />
+      );
+    }
+  },
+];

Examples/UIExplorer/SnapshotExample.js

@@ -1,11 +1,4 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -32,10 +25,12 @@ var {
   View,
 } = ReactNative;
 
-class ScreenshotExample extends React.Component {
-  state = {
-    uri: undefined,
-  };
+var ScreenshotExample = React.createClass({
+  getInitialState() {
+    return {
+      uri: undefined,
+    };
+  },
 
   render() {
     return (
@@ -46,15 +41,15 @@ class ScreenshotExample extends React.Component {
         <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: {