Convert from React.createClass to ES6 classes

Reviewed By: cpojer

Differential Revision: D3619143

fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c

Examples/Movies/MovieCell.js

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

Examples/Movies/MovieScreen.js

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

Examples/Movies/MoviesApp.android.js

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

Examples/Movies/MoviesApp.ios.js

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

Examples/Movies/SearchBar.android.js

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

Examples/Movies/SearchBar.ios.js

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

Examples/Movies/SearchScreen.js

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

Examples/TicTacToe/TicTacToeApp.js

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

Examples/UIExplorer/js/AccessibilityAndroidExample.android.js

@@ -36,40 +36,35 @@ var UIExplorerPage = require('./UIExplorerPage');
 
 var importantForAccessibilityValues = ['auto', 'yes', 'no', 'no-hide-descendants'];
 
-var AccessibilityAndroidExample = React.createClass({
+class AccessibilityAndroidExample extends React.Component {
+  static title = 'Accessibility';
+  static description = 'Examples of using Accessibility API.';
 
-  statics: {
-    title: 'Accessibility',
-    description: 'Examples of using Accessibility API.',
-  },
+  state = {
+    count: 0,
+    backgroundImportantForAcc: 0,
+    forgroundImportantForAcc: 0,
+  };
 
-  getInitialState: function() {
-    return {
-      count: 0,
-      backgroundImportantForAcc: 0,
-      forgroundImportantForAcc: 0,
-    };
-  },
-
-  _addOne: function() {
+  _addOne = () => {
     this.setState({
       count: ++this.state.count,
     });
-  },
+  };
 
-  _changeBackgroundImportantForAcc: function() {
+  _changeBackgroundImportantForAcc = () => {
     this.setState({
       backgroundImportantForAcc: (this.state.backgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  _changeForgroundImportantForAcc: function() {
+  _changeForgroundImportantForAcc = () => {
     this.setState({
       forgroundImportantForAcc: (this.state.forgroundImportantForAcc + 1) % 4,
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title={'Accessibility'}>
 
@@ -202,8 +197,8 @@ var AccessibilityAndroidExample = React.createClass({
 
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
    embedded: {

Examples/UIExplorer/js/AccessibilityIOSExample.js

@@ -29,7 +29,7 @@ var {
   View,
 } = ReactNative;
 
-var AccessibilityIOSExample = React.createClass({
+class AccessibilityIOSExample extends React.Component {
   render() {
     return (
       <View>
@@ -60,8 +60,8 @@ var AccessibilityIOSExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 exports.title = 'AccessibilityIOS';
 exports.description = 'Interface to show iOS\' accessibility samples';

Examples/UIExplorer/js/ActionSheetIOSExample.js

@@ -42,12 +42,10 @@ var BUTTONS = [
 var DESTRUCTIVE_INDEX = 3;
 var CANCEL_INDEX = 4;
 
-var ActionSheetExample = React.createClass({
-  getInitialState() {
-    return {
-      clicked: 'none',
-    };
-  },
+class ActionSheetExample extends React.Component {
+  state = {
+    clicked: 'none',
+  };
 
   render() {
     return (
@@ -60,9 +58,9 @@ var ActionSheetExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -71,15 +69,13 @@ var ActionSheetExample = React.createClass({
     (buttonIndex) => {
       this.setState({ clicked: BUTTONS[buttonIndex] });
     });
-  }
-});
+  };
+}
 
-var ActionSheetTintExample = React.createClass({
-  getInitialState() {
-    return {
-      clicked: 'none',
-    };
-  },
+class ActionSheetTintExample extends React.Component {
+  state = {
+    clicked: 'none',
+  };
 
   render() {
     return (
@@ -92,9 +88,9 @@ var ActionSheetTintExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showActionSheet() {
+  showActionSheet = () => {
     ActionSheetIOS.showActionSheetWithOptions({
       options: BUTTONS,
       cancelButtonIndex: CANCEL_INDEX,
@@ -104,15 +100,13 @@ var ActionSheetTintExample = React.createClass({
     (buttonIndex) => {
       this.setState({ clicked: BUTTONS[buttonIndex] });
     });
-  }
-});
+  };
+}
 
-var ShareActionSheetExample = React.createClass({
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
+class ShareActionSheetExample extends React.Component {
+  state = {
+    text: ''
+  };
 
   render() {
     return (
@@ -125,9 +119,9 @@ var ShareActionSheetExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showShareActionSheet() {
+  showShareActionSheet = () => {
     ActionSheetIOS.showShareActionSheetWithOptions({
       url: this.props.url,
       message: 'message to go with the shared url',
@@ -146,15 +140,13 @@ var ShareActionSheetExample = React.createClass({
       }
       this.setState({text});
     });
-  }
-});
+  };
+}
 
-var ShareScreenshotExample = React.createClass({
-  getInitialState() {
-    return {
-      text: ''
-    };
-  },
+class ShareScreenshotExample extends React.Component {
+  state = {
+    text: ''
+  };
 
   render() {
     return (
@@ -167,9 +159,9 @@ var ShareScreenshotExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
 
-  showShareActionSheet() {
+  showShareActionSheet = () => {
     // Take the snapshot (returns a temp file uri)
     UIManager.takeSnapshot('window').then((uri) => {
       // Share image data
@@ -190,8 +182,8 @@ var ShareScreenshotExample = React.createClass({
         this.setState({text});
       });
     }).catch((error) => alert(error));
-  }
-});
+  };
+}
 
 var style = StyleSheet.create({
   button: {

Examples/UIExplorer/js/AdSupportIOSExample.js

@@ -44,15 +44,13 @@ exports.examples = [
   }
 ];
 
-var AdSupportIOSExample = React.createClass({
-  getInitialState: function() {
-    return {
-      deviceID: 'No IDFA yet',
-      hasAdvertiserTracking: 'unset',
-    };
-  },
+class AdSupportIOSExample extends React.Component {
+  state = {
+    deviceID: 'No IDFA yet',
+    hasAdvertiserTracking: 'unset',
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     AdSupportIOS.getAdvertisingId(
       this._onDeviceIDSuccess,
       this._onDeviceIDFailure
@@ -62,33 +60,33 @@ var AdSupportIOSExample = React.createClass({
       this._onHasTrackingSuccess,
       this._onHasTrackingFailure
     );
-  },
+  }
 
-  _onHasTrackingSuccess: function(hasTracking) {
+  _onHasTrackingSuccess = (hasTracking) => {
     this.setState({
       'hasAdvertiserTracking': hasTracking,
     });
-  },
+  };
 
-  _onHasTrackingFailure: function(e) {
+  _onHasTrackingFailure = (e) => {
     this.setState({
       'hasAdvertiserTracking': 'Error!',
     });
-  },
+  };
 
-  _onDeviceIDSuccess: function(deviceID) {
+  _onDeviceIDSuccess = (deviceID) => {
     this.setState({
       'deviceID': deviceID,
     });
-  },
+  };
 
-  _onDeviceIDFailure: function(e) {
+  _onDeviceIDFailure = (e) => {
     this.setState({
       'deviceID': 'Error!',
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <Text>
@@ -102,7 +100,7 @@ var AdSupportIOSExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/AlertExample.js

@@ -41,9 +41,8 @@ var alertMessage = 'Credibly reintermediate next-generation potentialities after
 /**
  * Simple alert examples.
  */
-var SimpleAlertExampleBlock = React.createClass({
-
-  render: function() {
+class SimpleAlertExampleBlock extends React.Component {
+  render() {
     return (
       <View>
         <TouchableHighlight style={styles.wrapper}
@@ -109,23 +108,23 @@ var SimpleAlertExampleBlock = React.createClass({
         </TouchableHighlight>
       </View>
     );
-  },
-});
+  }
+}
 
-var AlertExample = React.createClass({
-  statics: {
-    title: 'Alert',
-    description: 'Alerts display a concise and informative message ' +
-    'and prompt the user to make a decision.',
-  },
-  render: function() {
+class AlertExample extends React.Component {
+  static title = 'Alert';
+
+  static description = 'Alerts display a concise and informative message ' +
+  'and prompt the user to make a decision.';
+
+  render() {
     return (
       <UIExplorerBlock title={'Alert'}>
         <SimpleAlertExampleBlock />
       </UIExplorerBlock>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   wrapper: {

Examples/UIExplorer/js/AppStateExample.js

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

Examples/UIExplorer/js/AssetScaledImageExample.js

@@ -31,13 +31,10 @@ var {
   ScrollView
 } = ReactNative;
 
-var AssetScaledImageExample = React.createClass({
-
-  getInitialState() {
-    return {
-      asset: this.props.asset
-    };
-  },
+class AssetScaledImageExample extends React.Component {
+  state = {
+    asset: this.props.asset
+  };
 
   render() {
     var image = this.state.asset.node.image;
@@ -57,8 +54,8 @@ var AssetScaledImageExample = React.createClass({
         </View>
       </ScrollView>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/AsyncStorageExample.js

@@ -35,12 +35,17 @@ var PickerItemIOS = PickerIOS.Item;
 var STORAGE_KEY = '@AsyncStorageExample:key';
 var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
 
-var BasicStorageExample = React.createClass({
+class BasicStorageExample extends React.Component {
+  state = {
+    selectedValue: COLORS[0],
+    messages: [],
+  };
+
   componentDidMount() {
     this._loadInitialState().done();
-  },
+  }
 
-  async _loadInitialState() {
+  _loadInitialState = async () => {
     try {
       var value = await AsyncStorage.getItem(STORAGE_KEY);
       if (value !== null){
@@ -52,14 +57,7 @@ var BasicStorageExample = React.createClass({
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
-
-  getInitialState() {
-    return {
-      selectedValue: COLORS[0],
-      messages: [],
-    };
-  },
+  };
 
   render() {
     var color = this.state.selectedValue;
@@ -91,9 +89,9 @@ var BasicStorageExample = React.createClass({
         {this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
       </View>
     );
-  },
+  }
 
-  async _onValueChange(selectedValue) {
+  _onValueChange = async (selectedValue) => {
     this.setState({selectedValue});
     try {
       await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -101,21 +99,21 @@ var BasicStorageExample = React.createClass({
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
+  };
 
-  async _removeStorage() {
+  _removeStorage = async () => {
     try {
       await AsyncStorage.removeItem(STORAGE_KEY);
       this._appendMessage('Selection removed from disk.');
     } catch (error) {
       this._appendMessage('AsyncStorage error: ' + error.message);
     }
-  },
+  };
 
-  _appendMessage(message) {
+  _appendMessage = (message) => {
     this.setState({messages: this.state.messages.concat(message)});
-  },
-});
+  };
+}
 
 exports.title = 'AsyncStorage';
 exports.description = 'Asynchronous local disk storage.';

Examples/UIExplorer/js/CameraRollExample.js

@@ -41,15 +41,12 @@ const AssetScaledImageExampleView = require('./AssetScaledImageExample');
 
 const CAMERA_ROLL_VIEW = 'camera_roll_view';
 
-const CameraRollExample = React.createClass({
-
-  getInitialState() {
-    return {
-      groupTypes: 'SavedPhotos',
-      sliderValue: 1,
-      bigImages: true,
-    };
-  },
+class CameraRollExample extends React.Component {
+  state = {
+    groupTypes: 'SavedPhotos',
+    sliderValue: 1,
+    bigImages: true,
+  };
 
   render() {
     return (
@@ -71,9 +68,9 @@ const CameraRollExample = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  loadAsset(asset){
+  loadAsset = (asset) => {
     if (this.props.navigator) {
       this.props.navigator.push({
         title: 'Camera Roll Image',
@@ -82,9 +79,9 @@ const CameraRollExample = React.createClass({
         passProps: { asset: asset },
       });
     }
-  },
+  };
 
-  _renderImage(asset) {
+  _renderImage = (asset) => {
     const imageSize = this.state.bigImages ? 150 : 75;
     const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
     const location = asset.node.location.longitude ?
@@ -105,22 +102,22 @@ const CameraRollExample = React.createClass({
         </View>
       </TouchableOpacity>
     );
-  },
+  };
 
-  _onSliderChange(value) {
+  _onSliderChange = (value) => {
     const options = CameraRoll.GroupTypesOptions;
     const index = Math.floor(value * options.length * 0.99);
     const groupTypes = options[index];
     if (groupTypes !== this.state.groupTypes) {
       this.setState({groupTypes: groupTypes});
     }
-  },
+  };
 
-  _onSwitchChange(value) {
+  _onSwitchChange = (value) => {
     this.refs[CAMERA_ROLL_VIEW].rendererChanged();
     this.setState({ bigImages: value });
-  }
-});
+  };
+}
 
 const styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/ClipboardExample.js

@@ -30,14 +30,12 @@ var {
   Text,
 } = ReactNative;
 
-var ClipboardExample = React.createClass({
-  getInitialState() {
-    return {
-      content: 'Content will appear here'
-    };
-  },
+class ClipboardExample extends React.Component {
+  state = {
+    content: 'Content will appear here'
+  };
 
-  async _setClipboardContent(){
+  _setClipboardContent = async () => {
     Clipboard.setString('Hello World');
     try {
       var content = await Clipboard.getString();
@@ -45,7 +43,7 @@ var ClipboardExample = React.createClass({
     } catch (e) {
       this.setState({content:e.message});
     }
-  },
+  };
 
   render() {
     return (
@@ -59,7 +57,7 @@ var ClipboardExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = 'Clipboard';
 exports.description = 'Show Clipboard contents.';

Examples/UIExplorer/js/DatePickerAndroidExample.js

@@ -32,26 +32,21 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var DatePickerAndroidExample = React.createClass({
+class DatePickerAndroidExample extends React.Component {
+  static title = 'DatePickerAndroid';
+  static description = 'Standard Android date picker dialog';
 
-  statics: {
-    title: 'DatePickerAndroid',
-    description: 'Standard Android date picker dialog',
-  },
+  state = {
+    presetDate: new Date(2020, 4, 5),
+    allDate: new Date(2020, 4, 5),
+    simpleText: 'pick a date',
+    minText: 'pick a date, no earlier than today',
+    maxText: 'pick a date, no later than today',
+    presetText: 'pick a date, preset to 2020/5/5',
+    allText: 'pick a date between 2020/5/1 and 2020/5/10',
+  };
 
-  getInitialState() {
-    return {
-      presetDate: new Date(2020, 4, 5),
-      allDate: new Date(2020, 4, 5),
-      simpleText: 'pick a date',
-      minText: 'pick a date, no earlier than today',
-      maxText: 'pick a date, no later than today',
-      presetText: 'pick a date, preset to 2020/5/5',
-      allText: 'pick a date between 2020/5/1 and 2020/5/10',
-    };
-  },
-
-  async showPicker(stateKey, options) {
+  showPicker = async (stateKey, options) => {
     try {
       var newState = {};
       const {action, year, month, day} = await DatePickerAndroid.open(options);
@@ -66,7 +61,7 @@ var DatePickerAndroidExample = React.createClass({
     } catch ({code, message}) {
       console.warn(`Error in example '${stateKey}': `, message);
     }
-  },
+  };
 
   render() {
     return (
@@ -113,8 +108,8 @@ var DatePickerAndroidExample = React.createClass({
           </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   text: {

Examples/UIExplorer/js/DatePickerIOSExample.js

@@ -32,34 +32,30 @@ var {
   View,
 } = ReactNative;
 
-var DatePickerExample = React.createClass({
-  getDefaultProps: function () {
-    return {
-      date: new Date(),
-      timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
-    };
-  },
+class DatePickerExample extends React.Component {
+  static defaultProps = {
+    date: new Date(),
+    timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
+  };
 
-  getInitialState: function() {
-    return {
-      date: this.props.date,
-      timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
-    };
-  },
+  state = {
+    date: this.props.date,
+    timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
+  };
 
-  onDateChange: function(date) {
+  onDateChange = (date) => {
     this.setState({date: date});
-  },
+  };
 
-  onTimezoneChange: function(event) {
+  onTimezoneChange = (event) => {
     var offset = parseInt(event.nativeEvent.text, 10);
     if (isNaN(offset)) {
       return;
     }
     this.setState({timeZoneOffsetInHours: offset});
-  },
+  };
 
-  render: function() {
+  render() {
     // Ideally, the timezone input would be a picker rather than a
     // text input, but we don't have any pickers yet :(
     return (
@@ -103,11 +99,11 @@ var DatePickerExample = React.createClass({
         />
       </View>
     );
-  },
-});
+  }
+}
 
-var WithLabel = React.createClass({
-  render: function() {
+class WithLabel extends React.Component {
+  render() {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.labelView}>
@@ -119,10 +115,10 @@ var WithLabel = React.createClass({
       </View>
     );
   }
-});
+}
 
-var Heading = React.createClass({
-  render: function() {
+class Heading extends React.Component {
+  render() {
     return (
       <View style={styles.headingContainer}>
         <Text style={styles.heading}>
@@ -131,7 +127,7 @@ var Heading = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<DatePickerIOS>';

Examples/UIExplorer/js/GeolocationExample.js

@@ -45,17 +45,15 @@ exports.examples = [
   }
 ];
 
-var GeolocationExample = React.createClass({
-  watchID: (null: ?number),
+class GeolocationExample extends React.Component {
+  state = {
+    initialPosition: 'unknown',
+    lastPosition: 'unknown',
+  };
 
-  getInitialState: function() {
-    return {
-      initialPosition: 'unknown',
-      lastPosition: 'unknown',
-    };
-  },
+  watchID: ?number = null;
 
-  componentDidMount: function() {
+  componentDidMount() {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         var initialPosition = JSON.stringify(position);
@@ -68,13 +66,13 @@ var GeolocationExample = React.createClass({
       var lastPosition = JSON.stringify(position);
       this.setState({lastPosition});
     });
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     navigator.geolocation.clearWatch(this.watchID);
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <View>
         <Text>
@@ -88,7 +86,7 @@ var GeolocationExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   title: {

Examples/UIExplorer/js/ImageCapInsetsExample.js

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

Examples/UIExplorer/js/KeyboardAvoidingViewExample.js

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

Examples/UIExplorer/js/LayoutAnimationExample.js

@@ -32,25 +32,22 @@ const {
   TouchableOpacity,
 } = ReactNative;
 
-const AddRemoveExample = React.createClass({
-
-  getInitialState() {
-    return {
-      views: [],
-    };
-  },
+class AddRemoveExample extends React.Component {
+  state = {
+    views: [],
+  };
 
   componentWillUpdate() {
     LayoutAnimation.easeInEaseOut();
-  },
+  }
 
-  _onPressAddView() {
+  _onPressAddView = () => {
     this.setState((state) => ({views: [...state.views, {}]}));
-  },
+  };
 
-  _onPressRemoveView() {
+  _onPressRemoveView = () => {
     this.setState((state) => ({views: state.views.slice(0, -1)}));
-  },
+  };
 
   render() {
     const views = this.state.views.map((view, i) =>
@@ -75,8 +72,8 @@ const AddRemoveExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const GreenSquare = () =>
   <View style={styles.greenSquare}>
@@ -88,18 +85,15 @@ const BlueSquare = () =>
     <Text>Blue square</Text>
   </View>;
 
-const CrossFadeExample = React.createClass({
+class CrossFadeExample extends React.Component {
+  state = {
+    toggled: false,
+  };
 
-  getInitialState() {
-    return {
-      toggled: false,
-    };
-  },
-
-  _onPressToggle() {
+  _onPressToggle = () => {
     LayoutAnimation.easeInEaseOut();
     this.setState((state) => ({toggled: !state.toggled}));
-  },
+  };
 
   render() {
     return (
@@ -118,8 +112,8 @@ const CrossFadeExample = React.createClass({
         </View>
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/LayoutEventsExample.js

@@ -54,15 +54,14 @@ type State = {
   viewStyle: { margin: number },
 };
 
-var LayoutEventExample = React.createClass({
-  getInitialState(): State {
-    return {
-      viewStyle: {
-        margin: 20,
-      },
-    };
-  },
-  animateViewLayout: function() {
+class LayoutEventExample extends React.Component {
+  state: State = {
+    viewStyle: {
+      margin: 20,
+    },
+  };
+
+  animateViewLayout = () => {
     LayoutAnimation.configureNext(
       LayoutAnimation.Presets.spring,
       () => {
@@ -75,29 +74,35 @@ var LayoutEventExample = React.createClass({
         margin: this.state.viewStyle.margin > 20 ? 20 : 60,
       }
     });
-  },
-  addWrapText: function() {
+  };
+
+  addWrapText = () => {
     this.setState(
       {extraText: '  And a bunch more text to wrap around a few lines.'},
       this.changeContainer
     );
-  },
-  changeContainer: function() {
+  };
+
+  changeContainer = () => {
     this.setState({containerStyle: {width: 280}});
-  },
-  onViewLayout: function(e: LayoutEvent) {
+  };
+
+  onViewLayout = (e: LayoutEvent) => {
     console.log('received view layout event\n', e.nativeEvent);
     this.setState({viewLayout: e.nativeEvent.layout});
-  },
-  onTextLayout: function(e: LayoutEvent) {
+  };
+
+  onTextLayout = (e: LayoutEvent) => {
     console.log('received text layout event\n', e.nativeEvent);
     this.setState({textLayout: e.nativeEvent.layout});
-  },
-  onImageLayout: function(e: LayoutEvent) {
+  };
+
+  onImageLayout = (e: LayoutEvent) => {
     console.log('received image layout event\n', e.nativeEvent);
     this.setState({imageLayout: e.nativeEvent.layout});
-  },
-  render: function() {
+  };
+
+  render() {
     var viewStyle = [styles.view, this.state.viewStyle];
     var textLayout = this.state.textLayout || {width: '?', height: '?'};
     var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
@@ -131,7 +136,7 @@ var LayoutEventExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   view: {

Examples/UIExplorer/js/LayoutExample.js

@@ -33,8 +33,8 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var Circle = React.createClass({
-  render: function() {
+class Circle extends React.Component {
+  render() {
     var size = this.props.size || 20;
     var backgroundColor = this.props.bgColor || '#527fe4';
     return (
@@ -49,10 +49,10 @@ var Circle = React.createClass({
       />
     );
   }
-});
+}
 
-var CircleBlock = React.createClass({
-  render: function() {
+class CircleBlock extends React.Component {
+  render() {
     var circleStyle = {
       flexDirection: 'row',
       backgroundColor: '#f6f7f8',
@@ -66,17 +66,14 @@ var CircleBlock = React.createClass({
       </View>
     );
   }
-});
+}
 
-var LayoutExample = React.createClass({
-  statics: {
-    title: 'Layout - Flexbox',
-    description: 'Examples of using the flexbox API to layout views.',
-  },
+class LayoutExample extends React.Component {
+  static title = 'Layout - Flexbox';
+  static description = 'Examples of using the flexbox API to layout views.';
+  static displayName = 'LayoutExample';
 
-  displayName: 'LayoutExample',
-
-  render: function() {
+  render() {
     var fiveColoredCircles = [
       <Circle bgColor="#527fe4" key="blue" />,
       <Circle bgColor="#D443E3" key="violet" />,
@@ -168,7 +165,7 @@ var LayoutExample = React.createClass({
       </UIExplorerPage>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   overlay: {

Examples/UIExplorer/js/LinkingExample.js

@@ -31,13 +31,12 @@ var {
 } = ReactNative;
 var UIExplorerBlock = require('./UIExplorerBlock');
 
-var OpenURLButton = React.createClass({
-
-  propTypes: {
+class OpenURLButton extends React.Component {
+  static propTypes = {
     url: React.PropTypes.string,
-  },
+  };
 
-  handleClick: function() {
+  handleClick = () => {
     Linking.canOpenURL(this.props.url).then(supported => {
       if (supported) {
         Linking.openURL(this.props.url);
@@ -45,9 +44,9 @@ var OpenURLButton = React.createClass({
         console.log('Don\'t know how to open URI: ' + this.props.url);
       }
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <TouchableOpacity
         onPress={this.handleClick}>
@@ -57,16 +56,13 @@ var OpenURLButton = React.createClass({
       </TouchableOpacity>
     );
   }
-});
+}
 
-var IntentAndroidExample = React.createClass({
+class IntentAndroidExample extends React.Component {
+  static title = 'Linking';
+  static description = 'Shows how to use Linking to open URLs.';
 
-  statics: {
-    title: 'Linking',
-    description: 'Shows how to use Linking to open URLs.',
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerBlock title="Open external URLs">
         <OpenURLButton url={'https://www.facebook.com'} />
@@ -77,8 +73,8 @@ var IntentAndroidExample = React.createClass({
         <OpenURLButton url={'tel:9876543210'} />
       </UIExplorerBlock>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/ListViewPagingExample.js

@@ -57,26 +57,28 @@ var THUMB_URLS = [
 var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;
 
-var Thumb = React.createClass({
-  getInitialState: function() {
-    return {thumbIndex: this._getThumbIdx(), dir: 'row'};
-  },
-  componentWillMount: function() {
+class Thumb extends React.Component {
+  componentWillMount() {
     UIManager.setLayoutAnimationEnabledExperimental &&
       UIManager.setLayoutAnimationEnabledExperimental(true);
-  },
-  _getThumbIdx: function() {
+  }
+
+  _getThumbIdx = () => {
     return Math.floor(Math.random() * THUMB_URLS.length);
-  },
-  _onPressThumb: function() {
+  };
+
+  _onPressThumb = () => {
     var config = layoutAnimationConfigs[this.state.thumbIndex % layoutAnimationConfigs.length];
     LayoutAnimation.configureNext(config);
     this.setState({
       thumbIndex: this._getThumbIdx(),
       dir: this.state.dir === 'row' ? 'column' : 'row',
     });
-  },
-  render: function() {
+  };
+
+  state = {thumbIndex: this._getThumbIdx(), dir: 'row'};
+
+  render() {
     return (
       <TouchableOpacity
         onPress={this._onPressThumb}
@@ -94,15 +96,16 @@ var Thumb = React.createClass({
       </TouchableOpacity>
     );
   }
-});
+}
 
-var ListViewPagingExample = React.createClass({
-  statics: {
-    title: '<ListView> - Paging',
-    description: 'Floating headers & layout animations.'
-  },
+class ListViewPagingExample extends React.Component {
+  state: *;
+  static title = '<ListView> - Paging';
+  static description = 'Floating headers & layout animations.';
 
-  getInitialState: function() {
+  // $FlowFixMe found when converting React.createClass to ES6
+  constructor(props) {
+    super(props);
     var getSectionData = (dataBlob, sectionID) => {
       return dataBlob[sectionID];
     };
@@ -132,17 +135,18 @@ var ListViewPagingExample = React.createClass({
         dataBlob[rowName] = rowName;
       }
     }
-    return {
+
+    this.state = {
       dataSource: dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
       headerPressCount: 0,
     };
-  },
+  }
 
-  renderRow: function(rowData: string, sectionID: string, rowID: string): ReactElement<any> {
+  renderRow = (rowData: string, sectionID: string, rowID: string): ReactElement<any> => {
     return (<Thumb text={rowData}/>);
-  },
+  };
 
-  renderSectionHeader: function(sectionData: string, sectionID: string) {
+  renderSectionHeader = (sectionData: string, sectionID: string) => {
     return (
       <View style={styles.section}>
         <Text style={styles.text}>
@@ -150,9 +154,9 @@ var ListViewPagingExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  };
 
-  renderHeader: function() {
+  renderHeader = () => {
     var headerLikeText = this.state.headerPressCount % 2 ?
       <View><Text style={styles.text}>1 Like</Text></View> :
       null;
@@ -166,9 +170,9 @@ var ListViewPagingExample = React.createClass({
         </View>
       </TouchableOpacity>
     );
-  },
+  };
 
-  renderFooter: function() {
+  renderFooter = () => {
     return (
       <View style={styles.header}>
         <Text onPress={() => console.log('Footer!')} style={styles.text}>
@@ -176,9 +180,9 @@ var ListViewPagingExample = React.createClass({
         </Text>
       </View>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <ListView
         style={styles.listview}
@@ -193,15 +197,14 @@ var ListViewPagingExample = React.createClass({
         scrollRenderAheadDistance={500}
       />
     );
-  },
+  }
 
-  _onPressHeader: function() {
+  _onPressHeader = () => {
     var config = layoutAnimationConfigs[Math.floor(this.state.headerPressCount / 2) % layoutAnimationConfigs.length];
     LayoutAnimation.configureNext(config);
     this.setState({headerPressCount: this.state.headerPressCount + 1});
-  },
-
-});
+  };
+}
 
 var styles = StyleSheet.create({
   listview: {

Examples/UIExplorer/js/MapViewExample.js

@@ -160,16 +160,13 @@ var MapRegionInput = React.createClass({
 
 });
 
-var MapViewExample = React.createClass({
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      mapRegion: undefined,
-      mapRegionInput: undefined,
-      annotations: [],
-    };
-  },
+class MapViewExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    mapRegion: undefined,
+    mapRegionInput: undefined,
+    annotations: [],
+  };
 
   render() {
     return (
@@ -187,23 +184,23 @@ var MapViewExample = React.createClass({
         />
       </View>
     );
-  },
+  }
 
-  _getAnnotations(region) {
+  _getAnnotations = (region) => {
     return [{
       longitude: region.longitude,
       latitude: region.latitude,
       title: 'You Are Here',
     }];
-  },
+  };
 
-  _onRegionChange(region) {
+  _onRegionChange = (region) => {
     this.setState({
       mapRegionInput: region,
     });
-  },
+  };
 
-  _onRegionChangeComplete(region) {
+  _onRegionChangeComplete = (region) => {
     if (this.state.isFirstLoad) {
       this.setState({
         mapRegionInput: region,
@@ -211,27 +208,23 @@ var MapViewExample = React.createClass({
         isFirstLoad: false,
       });
     }
-  },
+  };
 
-  _onRegionInputChanged(region) {
+  _onRegionInputChanged = (region) => {
     this.setState({
       mapRegion: region,
       mapRegionInput: region,
       annotations: this._getAnnotations(region),
     });
-  },
+  };
+}
 
-});
-
-var AnnotationExample = React.createClass({
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      annotations: [],
-      mapRegion: undefined,
-    };
-  },
+class AnnotationExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    annotations: [],
+    mapRegion: undefined,
+  };
 
   render() {
     if (this.state.isFirstLoad) {
@@ -255,13 +248,17 @@ var AnnotationExample = React.createClass({
         annotations={this.state.annotations}
       />
     );
-  },
+  }
+}
 
-});
+class DraggableAnnotationExample extends React.Component {
+  state = {
+    isFirstLoad: true,
+    annotations: [],
+    mapRegion: undefined,
+  };
 
-var DraggableAnnotationExample = React.createClass({
-
-  createAnnotation(longitude, latitude) {
+  createAnnotation = (longitude, latitude) => {
     return {
       longitude,
       latitude,
@@ -275,15 +272,7 @@ var DraggableAnnotationExample = React.createClass({
         console.log('Drag state: ' + event.state);
       },
     };
-  },
-
-  getInitialState() {
-    return {
-      isFirstLoad: true,
-      annotations: [],
-      mapRegion: undefined,
-    };
-  },
+  };
 
   render() {
     if (this.state.isFirstLoad) {
@@ -305,9 +294,8 @@ var DraggableAnnotationExample = React.createClass({
         annotations={this.state.annotations}
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   map: {

Examples/UIExplorer/js/ModalExample.js

@@ -38,20 +38,18 @@ exports.framework = 'React';
 exports.title = '<Modal>';
 exports.description = 'Component for presenting modal views.';
 
-var Button = React.createClass({
-  getInitialState() {
-    return {
-      active: false,
-    };
-  },
+class Button extends React.Component {
+  state = {
+    active: false,
+  };
 
-  _onHighlight() {
+  _onHighlight = () => {
     this.setState({active: true});
-  },
+  };
 
-  _onUnhighlight() {
+  _onUnhighlight = () => {
     this.setState({active: false});
-  },
+  };
 
   render() {
     var colorStyle = {
@@ -68,28 +66,26 @@ var Button = React.createClass({
       </TouchableHighlight>
     );
   }
-});
+}
 
-var ModalExample = React.createClass({
-  getInitialState() {
-    return {
-      animationType: 'none',
-      modalVisible: false,
-      transparent: false,
-    };
-  },
+class ModalExample extends React.Component {
+  state = {
+    animationType: 'none',
+    modalVisible: false,
+    transparent: false,
+  };
 
-  _setModalVisible(visible) {
+  _setModalVisible = (visible) => {
     this.setState({modalVisible: visible});
-  },
+  };
 
-  _setAnimationType(type) {
+  _setAnimationType = (type) => {
     this.setState({animationType: type});
-  },
+  };
 
-  _toggleTransparent() {
+  _toggleTransparent = () => {
     this.setState({transparent: !this.state.transparent});
-  },
+  };
 
   render() {
     var modalBackgroundStyle = {
@@ -144,8 +140,8 @@ var ModalExample = React.createClass({
         </Button>
       </View>
     );
-  },
-});
+  }
+}
 
 exports.examples = [
   {

Examples/UIExplorer/js/NativeAnimationsExample.js

@@ -33,16 +33,15 @@ var {
 } = ReactNative;
 var UIExplorerButton = require('./UIExplorerButton');
 
-var Tester = React.createClass({
-  current: 0,
-  getInitialState() {
-    return {
-      native: new Animated.Value(0),
-      js: new Animated.Value(0),
-    };
-  },
+class Tester extends React.Component {
+  state = {
+    native: new Animated.Value(0),
+    js: new Animated.Value(0),
+  };
 
-  onPress() {
+  current = 0;
+
+  onPress = () => {
     this.current = this.current ? 0 : 1;
     const config = {
       ...this.props.config,
@@ -55,7 +54,7 @@ var Tester = React.createClass({
       throw e;
     }
     Animated[this.props.type](this.state.js, { ...config, useNativeDriver: false }).start();
-  },
+  };
 
   render() {
     return (
@@ -76,8 +75,8 @@ var Tester = React.createClass({
         </View>
       </TouchableWithoutFeedback>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/NavigationExperimental/NavigationExampleRow.js

@@ -30,8 +30,8 @@ var {
   TouchableHighlight,
 } = ReactNative;
 
-var NavigationExampleRow = React.createClass({
-  render: function() {
+class NavigationExampleRow extends React.Component {
+  render() {
     if (this.props.onPress) {
       return (
         <TouchableHighlight
@@ -51,8 +51,8 @@ var NavigationExampleRow = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   row: {

Examples/UIExplorer/js/NavigationExperimental/NavigationExperimentalExample.js

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

Examples/UIExplorer/js/Navigator/BreadcrumbNavSample.js

@@ -50,9 +50,8 @@ class NavButton extends React.Component {
   }
 }
 
-var BreadcrumbNavSample = React.createClass({
-
-  componentWillMount: function() {
+class BreadcrumbNavSample extends React.Component {
+  componentWillMount() {
     this._navBarRouteMapper = {
       rightContentForRoute: function(route, navigator) {
         return null;
@@ -82,9 +81,9 @@ var BreadcrumbNavSample = React.createClass({
         );
       }
     };
-  },
+  }
 
-  _renderScene: function(route, navigator) {
+  _renderScene = (route, navigator) => {
     return (
       <ScrollView style={styles.scene}>
         <NavButton
@@ -109,9 +108,9 @@ var BreadcrumbNavSample = React.createClass({
         />
       </ScrollView>
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         style={styles.container}
@@ -124,11 +123,8 @@ var BreadcrumbNavSample = React.createClass({
         }
       />
     );
-  },
-
-
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   scene: {

Examples/UIExplorer/js/Navigator/JumpingNavSample.js

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

Examples/UIExplorer/js/Navigator/NavigationBarSample.js

@@ -92,9 +92,8 @@ function newRandomRoute() {
   };
 }
 
-var NavigationBarSample = React.createClass({
-
-  componentWillMount: function() {
+class NavigationBarSample extends React.Component {
+  componentWillMount() {
     var navigator = this.props.navigator;
 
     var callback = (event) => {
@@ -113,13 +112,13 @@ var NavigationBarSample = React.createClass({
       navigator.navigationContext.addListener('willfocus', callback),
       navigator.navigationContext.addListener('didfocus', callback),
     ];
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <Navigator
         debugOverlay={false}
@@ -154,9 +153,8 @@ var NavigationBarSample = React.createClass({
         }
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/Navigator/NavigatorExample.js

@@ -112,14 +112,11 @@ class NavMenu extends React.Component {
   }
 }
 
-var TabBarExample = React.createClass({
+class TabBarExample extends React.Component {
+  static title = '<Navigator>';
+  static description = 'JS-implemented navigation';
 
-  statics: {
-    title: '<Navigator>',
-    description: 'JS-implemented navigation',
-  },
-
-  renderScene: function(route, nav) {
+  renderScene = (route, nav) => {
     switch (route.id) {
       case 'navbar':
         return <NavigationBarSample navigator={nav} />;
@@ -136,9 +133,9 @@ var TabBarExample = React.createClass({
           />
         );
     }
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <Navigator
         ref={this._setNavigatorRef}
@@ -153,14 +150,13 @@ var TabBarExample = React.createClass({
         }}
       />
     );
-  },
+  }
 
-
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this._listeners && this._listeners.forEach(listener => listener.remove());
-  },
+  }
 
-  _setNavigatorRef: function(navigator) {
+  _setNavigatorRef = (navigator) => {
     if (navigator !== this._navigator) {
       this._navigator = navigator;
 
@@ -182,8 +178,8 @@ var TabBarExample = React.createClass({
         ];
       }
     }
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   messageText: {

Examples/UIExplorer/js/NavigatorIOSColorsExample.js

@@ -30,9 +30,8 @@ var {
   View
 } = ReactNative;
 
-var EmptyPage = React.createClass({
-
-  render: function() {
+class EmptyPage extends React.Component {
+  render() {
     return (
       <View style={styles.emptyPage}>
         <Text style={styles.emptyPageText}>
@@ -40,18 +39,14 @@ var EmptyPage = React.createClass({
         </Text>
       </View>
     );
-  },
+  }
+}
 
-});
+class NavigatorIOSColors extends React.Component {
+  static title = '<NavigatorIOS> - Custom';
+  static description = 'iOS navigation with custom nav bar colors';
 
-var NavigatorIOSColors = React.createClass({
-
-  statics: {
-    title: '<NavigatorIOS> - Custom',
-    description: 'iOS navigation with custom nav bar colors',
-  },
-
-  render: function() {
+  render() {
     // Set StatusBar with light contents to get better contrast
     StatusBar.setBarStyle('light-content');
 
@@ -77,9 +72,8 @@ var NavigatorIOSColors = React.createClass({
         translucent={true}
       />
     );
-  },
-
-});
+  }
+}
 
 var styles = StyleSheet.create({
   container: {

Examples/UIExplorer/js/NavigatorIOSExample.js

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

Examples/UIExplorer/js/NetInfoExample.js

@@ -31,31 +31,33 @@ const {
   TouchableWithoutFeedback,
 } = ReactNative;
 
-const ConnectionInfoSubscription = React.createClass({
-  getInitialState() {
-    return {
-      connectionInfoHistory: [],
-    };
-  },
-  componentDidMount: function() {
+class ConnectionInfoSubscription extends React.Component {
+  state = {
+    connectionInfoHistory: [],
+  };
+
+  componentDidMount() {
     NetInfo.addEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.removeEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  _handleConnectionInfoChange: function(connectionInfo) {
+  }
+
+  _handleConnectionInfoChange = (connectionInfo) => {
     const connectionInfoHistory = this.state.connectionInfoHistory.slice();
     connectionInfoHistory.push(connectionInfo);
     this.setState({
       connectionInfoHistory,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -63,15 +65,14 @@ const ConnectionInfoSubscription = React.createClass({
         </View>
     );
   }
-});
+}
 
-const ConnectionInfoCurrent = React.createClass({
-  getInitialState() {
-    return {
-      connectionInfo: null,
-    };
-  },
-  componentDidMount: function() {
+class ConnectionInfoCurrent extends React.Component {
+  state = {
+    connectionInfo: null,
+  };
+
+  componentDidMount() {
     NetInfo.addEventListener(
         'change',
         this._handleConnectionInfoChange
@@ -79,18 +80,21 @@ const ConnectionInfoCurrent = React.createClass({
     NetInfo.fetch().done(
         (connectionInfo) => { this.setState({connectionInfo}); }
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.removeEventListener(
         'change',
         this._handleConnectionInfoChange
     );
-  },
-  _handleConnectionInfoChange: function(connectionInfo) {
+  }
+
+  _handleConnectionInfoChange = (connectionInfo) => {
     this.setState({
       connectionInfo,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -98,15 +102,14 @@ const ConnectionInfoCurrent = React.createClass({
         </View>
     );
   }
-});
+}
 
-const IsConnected = React.createClass({
-  getInitialState() {
-    return {
-      isConnected: null,
-    };
-  },
-  componentDidMount: function() {
+class IsConnected extends React.Component {
+  state = {
+    isConnected: null,
+  };
+
+  componentDidMount() {
     NetInfo.isConnected.addEventListener(
         'change',
         this._handleConnectivityChange
@@ -114,18 +117,21 @@ const IsConnected = React.createClass({
     NetInfo.isConnected.fetch().done(
         (isConnected) => { this.setState({isConnected}); }
     );
-  },
-  componentWillUnmount: function() {
+  }
+
+  componentWillUnmount() {
     NetInfo.isConnected.removeEventListener(
         'change',
         this._handleConnectivityChange
     );
-  },
-  _handleConnectivityChange: function(isConnected) {
+  }
+
+  _handleConnectivityChange = (isConnected) => {
     this.setState({
       isConnected,
     });
-  },
+  };
+
   render() {
     return (
         <View>
@@ -133,19 +139,19 @@ const IsConnected = React.createClass({
         </View>
     );
   }
-});
+}
 
-const IsConnectionExpensive = React.createClass({
-  getInitialState() {
-    return {
-      isConnectionExpensive: (null : ?boolean),
-    };
-  },
-  _checkIfExpensive() {
+class IsConnectionExpensive extends React.Component {
+  state = {
+    isConnectionExpensive: (null : ?boolean),
+  };
+
+  _checkIfExpensive = () => {
     NetInfo.isConnectionExpensive().then(
         isConnectionExpensive => { this.setState({isConnectionExpensive}); }
     );
-  },
+  };
+
   render() {
     return (
         <View>
@@ -161,7 +167,7 @@ const IsConnectionExpensive = React.createClass({
         </View>
     );
   }
-});
+}
 
 exports.title = 'NetInfo';
 exports.description = 'Monitor network status';

Examples/UIExplorer/js/PermissionsExampleAndroid.android.js

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

Examples/UIExplorer/js/PickerExample.js

@@ -33,26 +33,22 @@ const {
   Text,
   TouchableWithoutFeedback,
 } = ReactNative;
+// $FlowFixMe found when converting React.createClass to ES6
 const Item = Picker.Item;
 
-const PickerExample = React.createClass({
+class PickerExample extends React.Component {
+  static title = '<Picker>';
+  static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.';
 
-  statics: {
-    title: '<Picker>',
-    description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.',
-  },
+  state = {
+    selected1: 'key1',
+    selected2: 'key1',
+    selected3: 'key1',
+    color: 'red',
+    mode: Picker.MODE_DIALOG,
+  };
 
-  getInitialState: function() {
-    return {
-      selected1: 'key1',
-      selected2: 'key1',
-      selected3: 'key1',
-      color: 'red',
-      mode: Picker.MODE_DIALOG,
-    };
-  },
-
-  render: function() {
+  render() {
     return (
       <UIExplorerPage title="<Picker>">
         <UIExplorerBlock title="Basic Picker">
@@ -121,21 +117,21 @@ const PickerExample = React.createClass({
         </UIExplorerBlock>
       </UIExplorerPage>
     );
-  },
+  }
 
-  changeMode: function() {
+  changeMode = () => {
     const newMode = this.state.mode === Picker.MODE_DIALOG
         ? Picker.MODE_DROPDOWN
         : Picker.MODE_DIALOG;
     this.setState({mode: newMode});
-  },
+  };
 
-  onValueChange: function(key: string, value: string) {
+  onValueChange = (key: string, value: string) => {
     const newState = {};
     newState[key] = value;
     this.setState(newState);
-  },
-});
+  };
+}
 
 var styles = StyleSheet.create({
   picker: {

Examples/UIExplorer/js/PickerIOSExample.js

@@ -73,15 +73,13 @@ var CAR_MAKES_AND_MODELS = {
   },
 };
 
-var PickerExample = React.createClass({
-  getInitialState: function() {
-    return {
-      carMake: 'cadillac',
-      modelIndex: 3,
-    };
-  },
+class PickerExample extends React.Component {
+  state = {
+    carMake: 'cadillac',
+    modelIndex: 3,
+  };
 
-  render: function() {
+  render() {
     var make = CAR_MAKES_AND_MODELS[this.state.carMake];
     var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
     return (
@@ -114,18 +112,16 @@ var PickerExample = React.createClass({
         <Text>You selected: {selectionString}</Text>
       </View>
     );
-  },
-});
+  }
+}
 
-var PickerStyleExample = React.createClass({
-  getInitialState: function() {
-    return {
-      carMake: 'cadillac',
-      modelIndex: 0,
-    };
-  },
+class PickerStyleExample extends React.Component {
+  state = {
+    carMake: 'cadillac',
+    modelIndex: 0,
+  };
 
-  render: function() {
+  render() {
     var make = CAR_MAKES_AND_MODELS[this.state.carMake];
     var selectionString = make.name + ' ' + make.models[this.state.modelIndex];
     return (
@@ -142,8 +138,8 @@ var PickerStyleExample = React.createClass({
         ))}
       </PickerIOS>
     );
-  },
-});
+  }
+}
 
 exports.displayName = (undefined: ?string);
 exports.title = '<PickerIOS>';

Examples/UIExplorer/js/PointerEventsExample.js

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

Examples/UIExplorer/js/ProgressBarAndroidExample.android.js

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

Examples/UIExplorer/js/PushNotificationIOSExample.js

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

Examples/UIExplorer/js/RefreshControlExample.js

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

Examples/UIExplorer/js/ScrollViewExample.js

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

Examples/UIExplorer/js/ScrollViewSimpleExample.js

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

Examples/UIExplorer/js/SegmentedControlIOSExample.js

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

Examples/UIExplorer/js/SliderExample.js

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

Examples/UIExplorer/js/SliderIOSExample.js

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

Examples/UIExplorer/js/SnapshotExample.js

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

Examples/UIExplorer/js/StatusBarExample.js

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

Examples/UIExplorer/js/SwitchExample.js

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

Examples/UIExplorer/js/TabBarIOSExample.js

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

Examples/UIExplorer/js/TextExample.android.js

@@ -33,31 +33,32 @@ var {
 var UIExplorerBlock = require('./UIExplorerBlock');
 var UIExplorerPage = require('./UIExplorerPage');
 
-var Entity = React.createClass({
-  render: function() {
+class Entity extends React.Component {
+  render() {
     return (
       <Text style={{fontWeight: 'bold', color: '#527fe4'}}>
         {this.props.children}
       </Text>
     );
   }
-});
+}
 
-var AttributeToggler = React.createClass({
-  getInitialState: function() {
-    return {fontWeight: 'bold', fontSize: 15};
-  },
-  toggleWeight: function() {
+class AttributeToggler extends React.Component {
+  state = {fontWeight: 'bold', fontSize: 15};
+
+  toggleWeight = () => {
     this.setState({
       fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
     });
-  },
-  increaseSize: function() {
+  };
+
+  increaseSize = () => {
     this.setState({
       fontSize: this.state.fontSize + 1
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
     return (
       <View>
@@ -77,14 +78,13 @@ var AttributeToggler = React.createClass({
       </View>
     );
   }
-});
+}
 
-var TextExample = React.createClass({
-  statics: {
-    title: '<Text>',
-    description: 'Base component for rendering styled text.',
-  },
-  render: function() {
+class TextExample extends React.Component {
+  static title = '<Text>';
+  static description = 'Base component for rendering styled text.';
+
+  render() {
     return (
       <UIExplorerPage title="<Text>">
         <UIExplorerBlock title="Wrap">
@@ -414,7 +414,7 @@ var TextExample = React.createClass({
       </UIExplorerPage>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   backgroundColorText: {

Examples/UIExplorer/js/TextExample.ios.js

@@ -31,31 +31,32 @@ var {
   View,
 } = ReactNative;
 
-var Entity = React.createClass({
-  render: function() {
+class Entity extends React.Component {
+  render() {
     return (
       <Text style={{fontWeight: '500', color: '#527fe4'}}>
         {this.props.children}
       </Text>
     );
   }
-});
+}
 
-var AttributeToggler = React.createClass({
-  getInitialState: function() {
-    return {fontWeight: 'bold', fontSize: 15};
-  },
-  toggleWeight: function() {
+class AttributeToggler extends React.Component {
+  state = {fontWeight: 'bold', fontSize: 15};
+
+  toggleWeight = () => {
     this.setState({
       fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
     });
-  },
-  increaseSize: function() {
+  };
+
+  increaseSize = () => {
     this.setState({
       fontSize: this.state.fontSize + 1
     });
-  },
-  render: function() {
+  };
+
+  render() {
     var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
     return (
       <View>
@@ -78,7 +79,7 @@ var AttributeToggler = React.createClass({
       </View>
     );
   }
-});
+}
 
 exports.title = '<Text>';
 exports.description = 'Base component for rendering styled text.';

Examples/UIExplorer/js/TextInputExample.android.js

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

Examples/UIExplorer/js/TextInputExample.ios.js

@@ -31,8 +31,8 @@ var {
   StyleSheet,
 } = ReactNative;
 
-var WithLabel = React.createClass({
-  render: function() {
+class WithLabel extends React.Component {
+  render() {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.label}>
@@ -41,20 +41,18 @@ var WithLabel = React.createClass({
         {this.props.children}
       </View>
     );
-  },
-});
+  }
+}
 
-var TextEventsExample = React.createClass({
-  getInitialState: function() {
-    return {
-      curText: '<No Event>',
-      prevText: '<No Event>',
-      prev2Text: '<No Event>',
-      prev3Text: '<No Event>',
-    };
-  },
+class TextEventsExample extends React.Component {
+  state = {
+    curText: '<No Event>',
+    prevText: '<No Event>',
+    prev2Text: '<No Event>',
+    prev3Text: '<No Event>',
+  };
 
-  updateText: function(text) {
+  updateText = (text) => {
     this.setState((state) => {
       return {
         curText: text,
@@ -63,9 +61,9 @@ var TextEventsExample = React.createClass({
         prev3Text: state.prev2Text,
       };
     });
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -102,7 +100,7 @@ var TextEventsExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 class AutoExpandingTextInput extends React.Component {
   state: any;
@@ -242,12 +240,12 @@ class TokenizedTextExample extends React.Component {
   }
 }
 
-var BlurOnSubmitExample = React.createClass({
-  focusNextField(nextField) {
+class BlurOnSubmitExample extends React.Component {
+  focusNextField = (nextField) => {
     this.refs[nextField].focus();
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <View>
         <TextInput
@@ -294,7 +292,7 @@ var BlurOnSubmitExample = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   page: {

Examples/UIExplorer/js/TimePickerAndroidExample.js

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

Examples/UIExplorer/js/TimerExample.js

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

Examples/UIExplorer/js/ToastAndroidExample.android.js

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

Examples/UIExplorer/js/ToolbarAndroidExample.android.js

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

Examples/UIExplorer/js/TouchableExample.js

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

Examples/UIExplorer/js/TransformExample.js

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

Examples/UIExplorer/js/TransparentHitTestExample.js

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

Examples/UIExplorer/js/UIExplorerApp.ios.js

@@ -206,16 +206,17 @@ AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);
 UIExplorerList.ComponentExamples.concat(UIExplorerList.APIExamples).forEach((Example: UIExplorerExample) => {
   const ExampleModule = Example.module;
   if (ExampleModule.displayName) {
-    const Snapshotter = React.createClass({
-      render: function() {
+    class Snapshotter extends React.Component {
+      render() {
         const Renderable = UIExplorerExampleList.makeRenderable(ExampleModule);
         return (
           <SnapshotViewIOS>
             <Renderable />
           </SnapshotViewIOS>
         );
-      },
-    });
+      }
+    }
+
     AppRegistry.registerComponent(ExampleModule.displayName, () => Snapshotter);
   }
 });

Examples/UIExplorer/js/UIExplorerBlock.js

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

Examples/UIExplorer/js/UIExplorerButton.js

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

Examples/UIExplorer/js/UIExplorerPage.js

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

Examples/UIExplorer/js/UIExplorerTitle.js

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

Examples/UIExplorer/js/ViewExample.js

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

Examples/UIExplorer/js/ViewPagerAndroidExample.android.js

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

Examples/UIExplorer/js/WebViewExample.js

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

Examples/UIExplorer/js/createExamplePage.js

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

IntegrationTests/AppEventsTest.js

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

IntegrationTests/AsyncStorageTest.js

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

IntegrationTests/ImageSnapshotTest.js

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

IntegrationTests/IntegrationTestHarnessTest.js

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

IntegrationTests/IntegrationTestsApp.js

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

IntegrationTests/PromiseTest.js

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

IntegrationTests/PropertiesUpdateTest.js

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

IntegrationTests/RCTRootViewIntegrationTestApp.js

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

IntegrationTests/SimpleSnapshotTest.js

@@ -20,17 +20,17 @@ var {
 } = ReactNative;
 var { TestModule } = ReactNative.NativeModules;
 
-var SimpleSnapshotTest = React.createClass({
+class SimpleSnapshotTest extends React.Component {
   componentDidMount() {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
     requestAnimationFrame(() => TestModule.verifySnapshot(this.done));
-  },
+  }
 
-  done(success : boolean) {
+  done = (success : boolean) => {
     TestModule.markTestPassed(success);
-  },
+  };
 
   render() {
     return (
@@ -40,7 +40,7 @@ var SimpleSnapshotTest = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   box1: {

Libraries/ART/ReactNativeART.js

@@ -136,9 +136,8 @@ function childrenAsString(children) {
 
 // Surface - Root node of all ART
 
-var Surface = React.createClass({
-
-  render: function() {
+class Surface extends React.Component {
+  render() {
     var props = this.props;
     var w = extractNumber(props.width, 0);
     var h = extractNumber(props.height, 0);
@@ -148,8 +147,7 @@ var Surface = React.createClass({
       </NativeSurfaceView>
     );
   }
-
-});
+}
 
 // Node Props
 
@@ -204,9 +202,8 @@ function extractOpacity(props) {
 // Note: ART has a notion of width and height on Group but AFAIK it's a noop in
 // ReactART.
 
-var Group = React.createClass({
-
-  render: function() {
+class Group extends React.Component {
+  render() {
     var props = this.props;
     return (
       <NativeGroup
@@ -216,12 +213,10 @@ var Group = React.createClass({
       </NativeGroup>
     );
   }
+}
 
-});
-
-var ClippingRectangle = React.createClass({
-
-  render: function() {
+class ClippingRectangle extends React.Component {
+  render() {
     var props = this.props;
     var x = extractNumber(props.x, 0);
     var y = extractNumber(props.y, 0);
@@ -241,8 +236,7 @@ var ClippingRectangle = React.createClass({
       </NativeGroup>
     );
   }
-
-});
+}
 
 // Renderables
 
@@ -376,9 +370,8 @@ function extractStrokeJoin(strokeJoin) {
 // Note: ART has a notion of width and height on Shape but AFAIK it's a noop in
 // ReactART.
 
-var Shape = React.createClass({
-
-  render: function() {
+class Shape extends React.Component {
+  render() {
     var props = this.props;
     var path = props.d || childrenAsString(props.children);
     var d = new Path(path).toJSON();
@@ -397,8 +390,7 @@ var Shape = React.createClass({
       />
     );
   }
-
-});
+}
 
 // Text
 
@@ -472,9 +464,8 @@ function extractAlignment(alignment) {
   }
 }
 
-var Text = React.createClass({
-
-  render: function() {
+class Text extends React.Component {
+  render() {
     var props = this.props;
     var textPath = props.path ? new Path(props.path).toJSON() : null;
     var textFrame = extractFontAndLines(
@@ -498,8 +489,7 @@ var Text = React.createClass({
       />
     );
   }
-
-});
+}
 
 // Declarative fill type objects - API design not finalized
 

Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.android.js

@@ -13,10 +13,10 @@
 var React = require('React');
 var View = require('View');
 
-var ActivityIndicatorIOS = React.createClass({
+class ActivityIndicatorIOS extends React.Component {
   render(): ReactElement {
     return <View {...this.props} />;
   }
-});
+}
 
 module.exports = ActivityIndicatorIOS;

Libraries/Components/DatePicker/DatePickerIOS.android.js

@@ -16,15 +16,15 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var DummyDatePickerIOS = React.createClass({
-  render: function() {
+class DummyDatePickerIOS extends React.Component {
+  render() {
     return (
       <View style={[styles.dummyDatePickerIOS, this.props.style]}>
         <Text style={styles.datePickerText}>DatePickerIOS is not supported on this platform!</Text>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   dummyDatePickerIOS: {

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -34,21 +34,21 @@ function getuid() {
   return __uid++;
 }
 
-var NavigatorTransitionerIOS = React.createClass({
-  requestSchedulingNavigation: function(cb) {
+class NavigatorTransitionerIOS extends React.Component {
+  requestSchedulingNavigation = (cb) => {
     RCTNavigatorManager.requestSchedulingJavaScriptNavigation(
       ReactNative.findNodeHandle(this),
       logError,
       cb
     );
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <RCTNavigator {...this.props}/>
     );
-  },
-});
+  }
+}
 
 type Route = {
   component: Function,

Libraries/Components/Picker/Picker.js

@@ -44,110 +44,126 @@ var MODE_DROPDOWN = 'dropdown';
  *       <Picker.Item label="JavaScript" value="js" />
  *     </Picker>
  */
-var Picker = React.createClass({
+class Picker extends React.Component {
+ props: {
+  style?: $FlowFixMe,
+  selectedValue?: any,
+  onValueChange?: Function,
+  enabled?: boolean,
+  mode?: 'dialog' | 'dropdown',
+  itemStyle?: $FlowFixMe,
+  prompt?: string,
+  testID?: string,
+ };
 
-  statics: {
-    /**
-     * On Android, display the options in a dialog.
-     */
-    MODE_DIALOG: MODE_DIALOG,
-    /**
-     * On Android, display the options in a dropdown (this is the default).
-     */
-    MODE_DROPDOWN: MODE_DROPDOWN,
-  },
+ /**
+  * On Android, display the options in a dialog.
+  */
+ static MODE_DIALOG = MODE_DIALOG;
 
-  getDefaultProps: function() {
-    return {
-      mode: MODE_DIALOG,
-    };
-  },
+ /**
+  * On Android, display the options in a dropdown (this is the default).
+  */
+ static MODE_DROPDOWN = MODE_DROPDOWN;
 
-  propTypes: {
-    ...View.propTypes,
-    style: pickerStyleType,
-    /**
-     * Value matching value of one of the items. Can be a string or an integer.
-     */
-    selectedValue: React.PropTypes.any,
-    /**
-     * Callback for when an item is selected. This is called with the following parameters:
-     *   - `itemValue`: the `value` prop of the item that was selected
-     *   - `itemPosition`: the index of the selected item in this picker
-     */
-    onValueChange: React.PropTypes.func,
-    /**
-     * If set to false, the picker will be disabled, i.e. the user will not be able to make a
-     * selection.
-     * @platform android
-     */
-    enabled: React.PropTypes.bool,
-    /**
-     * On Android, specifies how to display the selection items when the user taps on the picker:
-     *
-     *   - 'dialog': Show a modal dialog. This is the default.
-     *   - 'dropdown': Shows a dropdown anchored to the picker view
-     *
-     * @platform android
-     */
-    mode: React.PropTypes.oneOf(['dialog', 'dropdown']),
-    /**
-     * Style to apply to each of the item labels.
-     * @platform ios
-     */
-    itemStyle: itemStylePropType,
-    /**
-     * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
-     * @platform android
-     */
-    prompt: React.PropTypes.string,
-    /**
-     * Used to locate this view in end-to-end tests.
-     */
-    testID: React.PropTypes.string,
-  },
+ static defaultProps = {
+   mode: MODE_DIALOG,
+ };
 
-  render: function() {
-      if (Platform.OS === 'ios') {
-        return <PickerIOS {...this.props}>{this.props.children}</PickerIOS>;
-      } else if (Platform.OS === 'android') {
-        return <PickerAndroid {...this.props}>{this.props.children}</PickerAndroid>;
-      } else {
-        return <UnimplementedView />;
-      }
-  },
-});
+ static propTypes = {
+   ...View.propTypes,
+   style: pickerStyleType,
+   /**
+    * Value matching value of one of the items. Can be a string or an integer.
+    */
+   selectedValue: React.PropTypes.any,
+   /**
+    * Callback for when an item is selected. This is called with the following parameters:
+    *   - `itemValue`: the `value` prop of the item that was selected
+    *   - `itemPosition`: the index of the selected item in this picker
+    */
+   onValueChange: React.PropTypes.func,
+   /**
+    * If set to false, the picker will be disabled, i.e. the user will not be able to make a
+    * selection.
+    * @platform android
+    */
+   enabled: React.PropTypes.bool,
+   /**
+    * On Android, specifies how to display the selection items when the user taps on the picker:
+    *
+    *   - 'dialog': Show a modal dialog. This is the default.
+    *   - 'dropdown': Shows a dropdown anchored to the picker view
+    *
+    * @platform android
+    */
+   mode: React.PropTypes.oneOf(['dialog', 'dropdown']),
+   /**
+    * Style to apply to each of the item labels.
+    * @platform ios
+    */
+   itemStyle: itemStylePropType,
+   /**
+    * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
+    * @platform android
+    */
+   prompt: React.PropTypes.string,
+   /**
+    * Used to locate this view in end-to-end tests.
+    */
+   testID: React.PropTypes.string,
+ };
+
+ render() {
+     if (Platform.OS === 'ios') {
+       // $FlowFixMe found when converting React.createClass to ES6
+       return <PickerIOS {...this.props}>{this.props.children}</PickerIOS>;
+     } else if (Platform.OS === 'android') {
+       // $FlowFixMe found when converting React.createClass to ES6
+       return <PickerAndroid {...this.props}>{this.props.children}</PickerAndroid>;
+     } else {
+       return <UnimplementedView />;
+     }
+ }
+}
 
 /**
  * Individual selectable item in a Picker.
  */
-Picker.Item = React.createClass({
+// $FlowFixMe found when converting React.createClass to ES6
+Picker.Item = class extends React.Component {
+ props: {
+  label: string,
+  value?: any,
+  color?: $FlowFixMe,
+  testID?: string,
+ };
 
-  propTypes: {
-    /**
-     * Text to display for this item.
-     */
-    label: React.PropTypes.string.isRequired,
-    /**
-     * The value to be passed to picker's `onValueChange` callback when
-     * this item is selected. Can be a string or an integer.
-     */
-    value: React.PropTypes.any,
-    /**
-     * Color of this item's text.
-     * @platform android
-     */
-    color: ColorPropType,
-    /**
-     * Used to locate the item in end-to-end tests.
-     */
-    testID: React.PropTypes.string,
-  },
+ static propTypes = {
+   /**
+    * Text to display for this item.
+    */
+   label: React.PropTypes.string.isRequired,
+   /**
+    * The value to be passed to picker's `onValueChange` callback when
+    * this item is selected. Can be a string or an integer.
+    */
+   value: React.PropTypes.any,
+   /**
+    * Color of this item's text.
+    * @platform android
+    */
+   color: ColorPropType,
+   /**
+    * Used to locate the item in end-to-end tests.
+    */
+   testID: React.PropTypes.string,
+ };
 
-  render: function() {
-    // The items are not rendered directly
-    throw null;
-  },
-});
+ render() {
+   // The items are not rendered directly
+   throw null;
+ }
+};
 
 module.exports = Picker;

Libraries/Components/Picker/PickerAndroid.android.js

@@ -38,9 +38,20 @@ type Event = Object;
 /**
  * Not exposed as a public API - use <Picker> instead.
  */
-var PickerAndroid = React.createClass({
+class PickerAndroid extends React.Component {
+  props: {
+    style?: $FlowFixMe,
+    selectedValue?: any,
+    enabled?: boolean,
+    mode?: 'dialog' | 'dropdown',
+    onValueChange?: Function,
+    prompt?: string,
+    testID?: string,
+  };
 
-  propTypes: {
+  state: *;
+
+  static propTypes = {
     ...View.propTypes,
     style: pickerStyleType,
     selectedValue: React.PropTypes.any,
@@ -49,22 +60,24 @@ var PickerAndroid = React.createClass({
     onValueChange: ReactPropTypes.func,
     prompt: ReactPropTypes.string,
     testID: ReactPropTypes.string,
-  },
+  };
 
-  getInitialState: function() {
-    var state = this._stateFromProps(this.props);
-    return {
+  constructor(props, context) {
+    super(props, context);
+    var state = this._stateFromProps(props);
+
+    this.state = {
       ...state,
       initialSelectedIndex: state.selectedIndex,
     };
-  },
+  }
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps(nextProps) {
     this.setState(this._stateFromProps(nextProps));
-  },
+  }
 
   // Translate prop and children into stuff that the native picker understands.
-  _stateFromProps: function(props) {
+  _stateFromProps = (props) => {
     var selectedIndex = 0;
     let items = ReactChildren.map(props.children, (child, index) => {
       if (child.props.value === props.selectedValue) {
@@ -80,9 +93,9 @@ var PickerAndroid = React.createClass({
       return childProps;
     });
     return {selectedIndex, items};
-  },
+  };
 
-  render: function() {
+  render() {
     var Picker = this.props.mode === MODE_DROPDOWN ? DropdownPicker : DialogPicker;
 
     var nativeProps = {
@@ -97,9 +110,9 @@ var PickerAndroid = React.createClass({
     };
 
     return <Picker ref={REF_PICKER} {...nativeProps} />;
-  },
+  }
 
-  _onChange: function(event: Event) {
+  _onChange = (event: Event) => {
     if (this.props.onValueChange) {
       var position = event.nativeEvent.position;
       if (position >= 0) {
@@ -111,13 +124,13 @@ var PickerAndroid = React.createClass({
     }
     this._lastNativePosition = event.nativeEvent.position;
     this.forceUpdate();
-  },
+  };
 
-  componentDidMount: function() {
+  componentDidMount() {
     this._lastNativePosition = this.state.initialSelectedIndex;
-  },
+  }
 
-  componentDidUpdate: function() {
+  componentDidUpdate() {
     // The picker is a controlled component. This means we expect the
     // on*Change handlers to be in charge of updating our
     // `selectedValue` prop. That way they can also
@@ -128,8 +141,8 @@ var PickerAndroid = React.createClass({
       this.refs[REF_PICKER].setNativeProps({selected: this.state.selectedIndex});
       this._lastNativePosition = this.state.selectedIndex;
     }
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   pickerAndroid: {

Libraries/Components/Picker/PickerIOS.ios.js

@@ -90,17 +90,17 @@ var PickerIOS = React.createClass({
   },
 });
 
-PickerIOS.Item = React.createClass({
-  propTypes: {
+PickerIOS.Item = class extends React.Component {
+  static propTypes = {
     value: React.PropTypes.any, // string or integer basically
     label: React.PropTypes.string,
-  },
+  };
 
-  render: function() {
+  render() {
     // These items don't get rendered directly.
     return null;
-  },
-});
+  }
+};
 
 var styles = StyleSheet.create({
   pickerIOS: {

Libraries/Components/ProgressViewIOS/ProgressViewIOS.android.js

@@ -17,8 +17,8 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var DummyProgressViewIOS = React.createClass({
-  render: function() {
+class DummyProgressViewIOS extends React.Component {
+  render() {
     return (
       <View style={[styles.dummy, this.props.style]}>
         <Text style={styles.text}>
@@ -26,8 +26,8 @@ var DummyProgressViewIOS = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   dummy: {

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.android.js

@@ -17,8 +17,8 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var DummySegmentedControlIOS = React.createClass({
-  render: function() {
+class DummySegmentedControlIOS extends React.Component {
+  render() {
     return (
       <View style={[styles.dummy, this.props.style]}>
         <Text style={styles.text}>
@@ -26,8 +26,8 @@ var DummySegmentedControlIOS = React.createClass({
         </Text>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   dummy: {

Libraries/Components/StaticRenderer.js

@@ -13,19 +13,24 @@
 
 var React = require('React');
 
-var StaticRenderer = React.createClass({
-  propTypes: {
+class StaticRenderer extends React.Component {
+  props: {
+    shouldUpdate: boolean,
+    render: Function,
+  };
+
+  static propTypes = {
     shouldUpdate: React.PropTypes.bool.isRequired,
     render: React.PropTypes.func.isRequired,
-  },
+  };
 
-  shouldComponentUpdate: function(nextProps: { shouldUpdate: boolean }): boolean {
+  shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {
     return nextProps.shouldUpdate;
-  },
+  }
 
-  render: function(): ReactElement<any> {
+  render(): ReactElement<any> {
     return this.props.render();
-  },
-});
+  }
+}
 
 module.exports = StaticRenderer;

Libraries/Components/StatusBar/StatusBar.js

@@ -128,109 +128,120 @@ function createStackEntry(props: any): any {
  * set by the static API will get overriden by the one set by the component in
  * the next render.
  */
-const StatusBar = React.createClass({
-  statics: {
-    _propsStack: [],
-    _defaultProps: createStackEntry({
-      animated: false,
-      showHideTransition: 'fade',
-      backgroundColor: 'black',
-      barStyle: 'default',
-      translucent: false,
-      hidden: false,
-      networkActivityIndicatorVisible: false,
-    }),
-    // Timer for updating the native module values at the end of the frame.
-    _updateImmediate: null,
-    // The current merged values from the props stack.
-    _currentValues: null,
+class StatusBar extends React.Component {
+  props: {
+    hidden?: boolean,
+    animated?: boolean,
+    backgroundColor?: $FlowFixMe,
+    translucent?: boolean,
+    barStyle?: 'default' | 'light-content',
+    networkActivityIndicatorVisible?: boolean,
+    showHideTransition?: 'fade' | 'slide',
+  };
 
-    // TODO(janic): Provide a real API to deal with status bar height. See the
-    // discussion in #6195.
-    /**
-     * The current height of the status bar on the device.
-     *
-     * @platform android
-     */
-    currentHeight: StatusBarManager.HEIGHT,
+  static _propsStack = [];
 
-    // Provide an imperative API as static functions of the component.
-    // See the corresponding prop for more detail.
+  static _defaultProps = createStackEntry({
+    animated: false,
+    showHideTransition: 'fade',
+    backgroundColor: 'black',
+    barStyle: 'default',
+    translucent: false,
+    hidden: false,
+    networkActivityIndicatorVisible: false,
+  });
 
-    /**
-     * Show or hide the status bar
-     * @param hidden The dialog's title.
-     * @param animation Optional animation when
-     *    changing the status bar hidden property.
-     */
-    setHidden(hidden: boolean, animation?: StatusBarAnimation) {
-      animation = animation || 'none';
-      StatusBar._defaultProps.hidden.value = hidden;
-      if (Platform.OS === 'ios') {
-        StatusBarManager.setHidden(hidden, animation);
-      } else if (Platform.OS === 'android') {
-        StatusBarManager.setHidden(hidden);
-      }
-    },
+  // Timer for updating the native module values at the end of the frame.
+  static _updateImmediate = null;
 
-    /**
-     * Set the status bar style
-     * @param style Status bar style to set
-     * @param animated Animate the style change.
-     */
-    setBarStyle(style: StatusBarStyle, animated?: boolean) {
-      if (Platform.OS !== 'ios') {
-        console.warn('`setBarStyle` is only available on iOS');
-        return;
-      }
-      animated = animated || false;
-      StatusBar._defaultProps.barStyle.value = style;
-      StatusBarManager.setStyle(style, animated);
-    },
+  // The current merged values from the props stack.
+  static _currentValues = null;
 
-    /**
-     * Control the visibility of the network activity indicator
-     * @param visible Show the indicator.
-     */
-    setNetworkActivityIndicatorVisible(visible: boolean) {
-      if (Platform.OS !== 'ios') {
-        console.warn('`setNetworkActivityIndicatorVisible` is only available on iOS');
-        return;
-      }
-      StatusBar._defaultProps.networkActivityIndicatorVisible = visible;
-      StatusBarManager.setNetworkActivityIndicatorVisible(visible);
-    },
+  // TODO(janic): Provide a real API to deal with status bar height. See the
+  // discussion in #6195.
+  /**
+   * The current height of the status bar on the device.
+   *
+   * @platform android
+   */
+  static currentHeight = StatusBarManager.HEIGHT;
 
-    /**
-     * Set the background color for the status bar
-     * @param color Background color.
-     * @param animated Animate the style change.
-     */
-    setBackgroundColor(color: string, animated?: boolean) {
-      if (Platform.OS !== 'android') {
-        console.warn('`setBackgroundColor` is only available on Android');
-        return;
-      }
-      animated = animated || false;
-      StatusBar._defaultProps.backgroundColor.value = color;
-      StatusBarManager.setColor(processColor(color), animated);
-    },
+  // Provide an imperative API as static functions of the component.
+  // See the corresponding prop for more detail.
 
-    /**
-     * Control the translucency of the status bar
-     * @param translucent Set as translucent.
-     */
-    setTranslucent(translucent: boolean) {
-      if (Platform.OS !== 'android') {
-        console.warn('`setTranslucent` is only available on Android');
-        return;
-      }
-      StatusBar._defaultProps.translucent = translucent;
-      StatusBarManager.setTranslucent(translucent);
-    },
-  },
+  /**
+   * Show or hide the status bar
+   * @param hidden The dialog's title.
+   * @param animation Optional animation when
+   *    changing the status bar hidden property.
+   */
+  static setHidden(hidden: boolean, animation?: StatusBarAnimation) {
+    animation = animation || 'none';
+    StatusBar._defaultProps.hidden.value = hidden;
+    if (Platform.OS === 'ios') {
+      StatusBarManager.setHidden(hidden, animation);
+    } else if (Platform.OS === 'android') {
+      StatusBarManager.setHidden(hidden);
+    }
+  }
 
-  propTypes: {
+  /**
+   * Set the status bar style
+   * @param style Status bar style to set
+   * @param animated Animate the style change.
+   */
+  static setBarStyle(style: StatusBarStyle, animated?: boolean) {
+    if (Platform.OS !== 'ios') {
+      console.warn('`setBarStyle` is only available on iOS');
+      return;
+    }
+    animated = animated || false;
+    StatusBar._defaultProps.barStyle.value = style;
+    StatusBarManager.setStyle(style, animated);
+  }
+
+  /**
+   * Control the visibility of the network activity indicator
+   * @param visible Show the indicator.
+   */
+  static setNetworkActivityIndicatorVisible(visible: boolean) {
+    if (Platform.OS !== 'ios') {
+      console.warn('`setNetworkActivityIndicatorVisible` is only available on iOS');
+      return;
+    }
+    StatusBar._defaultProps.networkActivityIndicatorVisible = visible;
+    StatusBarManager.setNetworkActivityIndicatorVisible(visible);
+  }
+
+  /**
+   * Set the background color for the status bar
+   * @param color Background color.
+   * @param animated Animate the style change.
+   */
+  static setBackgroundColor(color: string, animated?: boolean) {
+    if (Platform.OS !== 'android') {
+      console.warn('`setBackgroundColor` is only available on Android');
+      return;
+    }
+    animated = animated || false;
+    StatusBar._defaultProps.backgroundColor.value = color;
+    StatusBarManager.setColor(processColor(color), animated);
+  }
+
+  /**
+   * Control the translucency of the status bar
+   * @param translucent Set as translucent.
+   */
+  static setTranslucent(translucent: boolean) {
+    if (Platform.OS !== 'android') {
+      console.warn('`setTranslucent` is only available on Android');
+      return;
+    }
+    StatusBar._defaultProps.translucent = translucent;
+    StatusBarManager.setTranslucent(translucent);
+  }
+
+  static propTypes = {
     /**
      * If the status bar is hidden.
      */
@@ -278,16 +289,14 @@ const StatusBar = React.createClass({
       'fade',
       'slide',
     ]),
-  },
+  };
 
-  getDefaultProps(): DefaultProps {
-    return {
-      animated: false,
-      showHideTransition: 'fade',
-    };
-  },
+  static defaultProps = {
+    animated: false,
+    showHideTransition: 'fade',
+  };
 
-  _stackEntry: null,
+  _stackEntry = null;
 
   componentDidMount() {
     // Every time a StatusBar component is mounted, we push it's prop to a stack
@@ -297,29 +306,31 @@ const StatusBar = React.createClass({
     this._stackEntry = createStackEntry(this.props);
     StatusBar._propsStack.push(this._stackEntry);
     this._updatePropsStack();
-  },
+  }
 
   componentWillUnmount() {
     // When a StatusBar is unmounted, remove itself from the stack and update
     // the native bar with the next props.
+    // $FlowFixMe found when converting React.createClass to ES6
     const index = StatusBar._propsStack.indexOf(this._stackEntry);
     StatusBar._propsStack.splice(index, 1);
 
     this._updatePropsStack();
-  },
+  }
 
   componentDidUpdate() {
+    // $FlowFixMe found when converting React.createClass to ES6
     const index = StatusBar._propsStack.indexOf(this._stackEntry);
     this._stackEntry = createStackEntry(this.props);
     StatusBar._propsStack[index] = this._stackEntry;
 
     this._updatePropsStack();
-  },
+  }
 
   /**
    * Updates the native status bar with the props from the stack.
    */
-  _updatePropsStack() {
+  _updatePropsStack = () => {
     // Send the update to the native module only once at the end of the frame.
     clearImmediate(StatusBar._updateImmediate);
     StatusBar._updateImmediate = setImmediate(() => {
@@ -365,11 +376,11 @@ const StatusBar = React.createClass({
       // Update the current prop values.
       StatusBar._currentValues = mergedProps;
     });
-  },
+  };
 
   render(): ?ReactElement<any> {
     return null;
-  },
-});
+  }
+}
 
 module.exports = StatusBar;

Libraries/Components/SwitchIOS/SwitchIOS.android.js

@@ -16,15 +16,15 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var DummySwitchIOS = React.createClass({
-  render: function() {
+class DummySwitchIOS extends React.Component {
+  render() {
     return (
       <View style={[styles.dummySwitchIOS, this.props.style]}>
         <Text style={styles.text}>SwitchIOS is not supported on this platform!</Text>
       </View>
     );
-  },
-});
+  }
+}
 
 var styles = StyleSheet.create({
   dummySwitchIOS: {

Libraries/Components/TabBarIOS/TabBarIOS.android.js

@@ -15,15 +15,15 @@ var React = require('React');
 var View = require('View');
 var StyleSheet = require('StyleSheet');
 
-var DummyTabBarIOS = React.createClass({
-  render: function() {
+class DummyTabBarIOS extends React.Component {
+  render() {
     return (
       <View style={[this.props.style, styles.tabGroup]}>
         {this.props.children}
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   tabGroup: {

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -19,12 +19,19 @@ var View = require('View');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var TabBarIOS = React.createClass({
-  statics: {
-    Item: TabBarItemIOS,
-  },
+class TabBarIOS extends React.Component {
+  props: {
+    style?: $FlowFixMe,
+    unselectedTintColor?: $FlowFixMe,
+    tintColor?: $FlowFixMe,
+    barTintColor?: $FlowFixMe,
+    translucent?: boolean,
+    itemPositioning?: 'fill' | 'center' | 'auto',
+  };
 
-  propTypes: {
+  static Item = TabBarItemIOS;
+
+  static propTypes = {
     ...View.propTypes,
     style: View.propTypes.style,
     /**
@@ -53,9 +60,9 @@ var TabBarIOS = React.createClass({
      * it defaults to center.
      */
     itemPositioning: React.PropTypes.oneOf(['fill', 'center', 'auto']),
-  },
+  };
 
-  render: function() {
+  render() {
     return (
       <RCTTabBar
         style={[styles.tabGroup, this.props.style]}
@@ -64,11 +71,13 @@ var TabBarIOS = React.createClass({
         barTintColor={this.props.barTintColor}
         itemPositioning={this.props.itemPositioning}
         translucent={this.props.translucent !== false}>
-        {this.props.children}
+        {
+          // $FlowFixMe found when converting React.createClass to ES6
+          this.props.children}
       </RCTTabBar>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   tabGroup: {

Libraries/Components/TabBarIOS/TabBarItemIOS.android.js

@@ -15,8 +15,8 @@ var React = require('React');
 var View = require('View');
 var StyleSheet = require('StyleSheet');
 
-var DummyTab = React.createClass({
-  render: function() {
+class DummyTab extends React.Component {
+  render() {
     if (!this.props.selected) {
       return <View />;
     }
@@ -26,7 +26,7 @@ var DummyTab = React.createClass({
       </View>
     );
   }
-});
+}
 
 var styles = StyleSheet.create({
   tab: {