Replace React.createClass with create-react-class

Summary:
This replaces all uses of `React.createClass` with `createReactClass` from the `create-react-class` package, attempting to match use of `var` and `const` according to local style.

Fixes #14620
Refs #14712
Closes #14729

Differential Revision: D5321810

Pulled By: hramos

fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585

Author: mojodna

IntegrationTests/LayoutEventsTest.js

@@ -60,6 +60,7 @@ type State = {
 };
 
 var LayoutEventsTest = createReactClass({
+  displayName: 'LayoutEventsTest',
   getInitialState(): State {
     return {
       didAnimation: false,

IntegrationTests/ReactContentSizeUpdateTest.js

@@ -26,6 +26,7 @@ var newReactViewWidth = 201;
 var newReactViewHeight = 202;
 
 var ReactContentSizeUpdateTest = createReactClass({
+  displayName: 'ReactContentSizeUpdateTest',
   mixins: [Subscribable.Mixin,
            TimerMixin],
 

IntegrationTests/SizeFlexibilityUpdateTest.js

@@ -24,6 +24,7 @@ var reactViewHeight = 222;
 var finalState = false;
 
 var SizeFlexibilityUpdateTest = createReactClass({
+  displayName: 'SizeFlexibilityUpdateTest',
   mixins: [Subscribable.Mixin],
 
   componentWillMount: function() {

IntegrationTests/TimersTest.js

@@ -24,6 +24,7 @@ var {
 var { TestModule  } = ReactNative.NativeModules;
 
 var TimersTest = createReactClass({
+  displayName: 'TimersTest',
   mixins: [TimerMixin],
 
   _nextTest: () => {},

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -38,6 +38,7 @@ type DefaultProps = {
  * Displays a circular loading indicator.
  */
 const ActivityIndicator = createReactClass({
+  displayName: 'ActivityIndicator',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -38,6 +38,7 @@ type Event = Object;
  */
 // $FlowFixMe(>=0.41.0)
 const DatePickerIOS = createReactClass({
+  displayName: 'DatePickerIOS',
   // TOOD: Put a better type for _picker
   _picker: (undefined: ?$FlowFixMe),
 

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -69,6 +69,7 @@ var DRAWER_STATES = [
  * ```
  */
 var DrawerLayoutAndroid = createReactClass({
+  displayName: 'DrawerLayoutAndroid',
   statics: {
     positions: DrawerConsts.DrawerPosition,
   },

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -55,6 +55,7 @@ const viewRef = 'VIEW';
  */
 // $FlowFixMe(>=0.41.0)
 const KeyboardAvoidingView = createReactClass({
+  displayName: 'KeyboardAvoidingView',
   mixins: [TimerMixin],
 
   propTypes: {

Libraries/Components/LazyRenderer.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 
 var LazyRenderer = createReactClass({
+  displayName: 'LazyRenderer',
   mixin: [TimerMixin],
 
   propTypes: {

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -306,6 +306,7 @@ type Event = Object;
  *
  */
 var NavigatorIOS = createReactClass({
+  displayName: 'NavigatorIOS',
 
   propTypes: {
 

Libraries/Components/Picker/PickerIOS.ios.js

@@ -27,6 +27,7 @@ var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
 var requireNativeComponent = require('requireNativeComponent');
 
 var PickerIOS = createReactClass({
+  displayName: 'PickerIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -65,6 +65,7 @@ var indeterminateType = function(props, propName, componentName, ...rest) {
  * ```
  */
 var ProgressBarAndroid = createReactClass({
+  displayName: 'ProgressBarAndroid',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -26,6 +26,7 @@ var requireNativeComponent = require('requireNativeComponent');
  */
 // $FlowFixMe(>=0.41.0)
 var ProgressViewIOS = createReactClass({
+  displayName: 'ProgressViewIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/RefreshControl/RefreshControl.js

@@ -74,6 +74,7 @@ if (Platform.OS === 'android') {
  */
 // $FlowFixMe(>=0.41.0)
 const RefreshControl = createReactClass({
+  displayName: 'RefreshControl',
   statics: {
     SIZE: RefreshLayoutConsts.SIZE,
   },

Libraries/Components/ScrollView/ScrollView.js

@@ -71,6 +71,7 @@ const requireNativeComponent = require('requireNativeComponent');
  */
 // $FlowFixMe(>=0.41.0)
 const ScrollView = createReactClass({
+  displayName: 'ScrollView',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -51,6 +51,7 @@ type Event = Object;
  */
 // $FlowFixMe(>=0.41.0)
 var SegmentedControlIOS = createReactClass({
+  displayName: 'SegmentedControlIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Slider/Slider.js

@@ -31,6 +31,7 @@ type Event = Object;
  */
 // $FlowFixMe(>=0.41.0)
 var Slider = createReactClass({
+  displayName: 'Slider',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Switch/Switch.js

@@ -40,6 +40,7 @@ type DefaultProps = {
  */
 // $FlowFixMe(>=0.41.0)
 var Switch = createReactClass({
+  displayName: 'Switch',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/TextInput/TextInput.js

@@ -170,6 +170,7 @@ const DataDetectorTypes = [
  */
 // $FlowFixMe(>=0.41.0)
 const TextInput = createReactClass({
+  displayName: 'TextInput',
   statics: {
     /* TODO(brentvatne) docs are needed for this */
     State: TextInputState,

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -67,6 +67,7 @@ var optionalImageSource = PropTypes.oneOfType([
  * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
  */
 var ToolbarAndroid = createReactClass({
+  displayName: 'ToolbarAndroid',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableBounce.js

@@ -37,6 +37,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  */
 // $FlowFixMe(>=0.41.0)
 var TouchableBounce = createReactClass({
+  displayName: 'TouchableBounce',
   mixins: [Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableHighlight.js

@@ -70,6 +70,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  */
 
 var TouchableHighlight = createReactClass({
+  displayName: 'TouchableHighlight',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
     /**

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -72,6 +72,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  */
 
 var TouchableNativeFeedback = createReactClass({
+  displayName: 'TouchableNativeFeedback',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -53,6 +53,7 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * ```
  */
 var TouchableOpacity = createReactClass({
+  displayName: 'TouchableOpacity',
   mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -39,6 +39,7 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  */
 // $FlowFixMe(>=0.41.0)
 const TouchableWithoutFeedback = createReactClass({
+  displayName: 'TouchableWithoutFeedback',
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {

Libraries/Components/View/View.js

@@ -86,6 +86,7 @@ export type Props = ViewProps;
  */
 // $FlowFixMe(>=0.41.0)
 const View = createReactClass({
+  displayName: 'View',
   // TODO: We should probably expose the mixins, viewConfig, and statics publicly. For example,
   // one of the props is of type AccessibilityComponentType. That is defined as a const[] above,
   // but it is not rendered by the docs, since `statics` below is not rendered. So its Possible

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -63,6 +63,7 @@ const RIGHT_SWIPE_THRESHOLD = 30 * SLOW_SPEED_SWIPE_FACTOR;
  * to use this component separately.
  */
 const SwipeableRow = createReactClass({
+  displayName: 'SwipeableRow',
   _panResponder: {},
   _previousLeft: CLOSED_LEFT_POSITION,
 

Libraries/Image/Image.android.js

@@ -78,6 +78,7 @@ var ViewStyleKeys = new Set(Object.keys(ViewStylePropTypes));
 var ImageSpecificStyleKeys = new Set(Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x)));
 
 var Image = createReactClass({
+  displayName: 'Image',
   propTypes: {
     ...ViewPropTypes,
     style: StyleSheetPropType(ImageStylePropTypes),

Libraries/Image/Image.ios.js

@@ -128,6 +128,7 @@ const ImageViewManager = NativeModules.ImageViewManager;
  */
 // $FlowFixMe(>=0.41.0)
 const Image = createReactClass({
+  displayName: 'Image',
   propTypes: {
     /**
      * > `ImageResizeMode` is an `Enum` for different image resizing modes, set via the

Libraries/Lists/ListView/ListView.js

@@ -87,6 +87,7 @@ var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
  */
 
 var ListView = createReactClass({
+  displayName: 'ListView',
   _childFrames: ([]: Array<Object>),
   _sentEndForContentLength: (null: ?number),
   _scrollComponent: (null: any),

Libraries/Text/Text.js

@@ -98,6 +98,7 @@ const viewConfig = {
 
 // $FlowFixMe(>=0.41.0)
 const Text = createReactClass({
+  displayName: 'Text',
   propTypes: {
     /**
      * When `numberOfLines` is set, this prop defines how text will be truncated.

Libraries/Text/TextUpdateTest.js

@@ -24,6 +24,7 @@ var {
 var TestManager = NativeModules.TestManager || NativeModules.SnapshotTestManager;
 
 var TextUpdateTest = createReactClass({
+  displayName: 'TextUpdateTest',
   mixins: [TimerMixin],
   getInitialState: function() {
     return {seeMore: true};

RNTester/js/CameraRollView.js

@@ -73,6 +73,7 @@ var propTypes = {
 };
 
 var CameraRollView = createReactClass({
+  displayName: 'CameraRollView',
   // $FlowFixMe(>=0.41.0)
   propTypes: propTypes,
 

RNTester/js/ImageExample.js

@@ -31,6 +31,7 @@ const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=
 var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
 var NetworkImageCallbackExample = createReactClass({
+  displayName: 'NetworkImageCallbackExample',
   getInitialState: function() {
     return {
       events: [],

RNTester/js/ListViewExample.js

@@ -26,6 +26,7 @@ var {
 var RNTesterPage = require('./RNTesterPage');
 
 var ListViewSimpleExample = createReactClass({
+  displayName: 'ListViewSimpleExample',
   statics: {
     title: '<ListView>',
     description: 'Performant, scrollable list of data.'

RNTester/js/ListViewGridLayoutExample.js

@@ -39,6 +39,7 @@ var THUMB_URLS = [
 ];
 
 var ListViewGridLayoutExample = createReactClass({
+  displayName: 'ListViewGridLayoutExample',
 
   statics: {
     title: '<ListView> - Grid Layout',

RNTester/js/PanResponderExample.js

@@ -23,6 +23,7 @@ var {
 var CIRCLE_SIZE = 80;
 
 var PanResponderExample = createReactClass({
+  displayName: 'PanResponderExample',
 
   statics: {
     title: 'PanResponder Sample',

RNTester/js/ProgressBarAndroidExample.android.js

@@ -20,6 +20,7 @@ var RNTesterPage = require('RNTesterPage');
 var TimerMixin = require('react-timer-mixin');
 
 var MovingBar = createReactClass({
+  displayName: 'MovingBar',
   mixins: [TimerMixin],
 
   getInitialState: function() {

RNTester/js/ProgressViewIOSExample.js

@@ -22,6 +22,7 @@ var {
 var TimerMixin = require('react-timer-mixin');
 
 var ProgressViewExample = createReactClass({
+  displayName: 'ProgressViewExample',
   mixins: [TimerMixin],
 
   getInitialState() {

RNTester/js/SwipeableListViewExample.js

@@ -27,6 +27,7 @@ var {
 var RNTesterPage = require('./RNTesterPage');
 
 var SwipeableListViewSimpleExample = createReactClass({
+  displayName: 'SwipeableListViewSimpleExample',
   statics: {
     title: '<SwipeableListView>',
     description: 'Performant, scrollable, swipeable list of data.'

RNTester/js/TextExample.ios.js

@@ -74,6 +74,7 @@ class AttributeToggler extends React.Component {
 }
 
 var AdjustingFontSize = createReactClass({
+  displayName: 'AdjustingFontSize',
   getInitialState: function() {
     return {dynamicText:'', shouldRender: true,};
   },

RNTester/js/TimerExample.js

@@ -113,6 +113,7 @@ class RequestIdleCallbackTester extends React.Component {
 }
 
 var TimerTester = createReactClass({
+  displayName: 'TimerTester',
   mixins: [TimerMixin],
 
   _ii: 0,

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -66,6 +66,7 @@ var onItemPress = function(itemNumber) {
 };
 
 var ScrollViewTestApp = createReactClass({
+  displayName: 'ScrollViewTestApp',
   getInitialState: getInitialState,
   onScroll: onScroll,
   onItemPress: onItemPress,
@@ -92,6 +93,7 @@ var ScrollViewTestApp = createReactClass({
 });
 
 var HorizontalScrollViewTestApp = createReactClass({
+  displayName: 'HorizontalScrollViewTestApp',
   getInitialState: getInitialState,
   onScroll: onScroll,
   onItemPress: onItemPress,

ReactAndroid/src/androidTest/js/UIManagerTestModule.js

@@ -21,6 +21,7 @@ var createReactClass = require('create-react-class');
 var renderApplication = require('renderApplication');
 
 var FlexTestApp = createReactClass({
+  displayName: 'FlexTestApp',
   _styles: StyleSheet.create({
     container: {
       width: 200,
@@ -49,6 +50,7 @@ var FlexTestApp = createReactClass({
 });
 
 var FlexWithText = createReactClass({
+  displayName: 'FlexWithText',
   _styles: StyleSheet.create({
     container: {
       flexDirection: 'column',
@@ -77,6 +79,7 @@ var FlexWithText = createReactClass({
 });
 
 var AbsolutePositionTestApp = createReactClass({
+  displayName: 'AbsolutePositionTestApp',
   _styles: StyleSheet.create({
     absolute: {
       position: 'absolute',
@@ -92,6 +95,7 @@ var AbsolutePositionTestApp = createReactClass({
 });
 
 var AbsolutePositionBottomRightTestApp = createReactClass({
+  displayName: 'AbsolutePositionBottomRightTestApp',
   _styles: StyleSheet.create({
     container: {
       width: 100,
@@ -115,6 +119,7 @@ var AbsolutePositionBottomRightTestApp = createReactClass({
 });
 
 var CenteredTextView = createReactClass({
+  displayName: 'CenteredTextView',
   _styles: StyleSheet.create({
     parent: {
       width: 200,
@@ -141,6 +146,7 @@ var CenteredTextView = createReactClass({
 
 var flushUpdatePositionInList = null;
 var UpdatePositionInListTestApp = createReactClass({
+  displayName: 'UpdatePositionInListTestApp',
   _styles: StyleSheet.create({
     element: {
       height: 10,