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 https://github.com/facebook/react-native/pull/14729

Differential Revision: D5321810

Pulled By: hramos

fbshipit-source-id: ae7b40640b2773fd89c3fb727ec87f688bebf585

IntegrationTests/LayoutEventsTest.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -58,7 +59,8 @@ type State = {
   containerStyle?: Style,
 };
 
-var LayoutEventsTest = React.createClass({
+var LayoutEventsTest = createReactClass({
+  displayName: 'LayoutEventsTest',
   getInitialState(): State {
     return {
       didAnimation: false,

IntegrationTests/ReactContentSizeUpdateTest.js

@@ -10,6 +10,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var RCTNativeAppEventEmitter = require('RCTNativeAppEventEmitter');
 var Subscribable = require('Subscribable');
@@ -24,7 +25,8 @@ var reactViewHeight = 102;
 var newReactViewWidth = 201;
 var newReactViewHeight = 202;
 
-var ReactContentSizeUpdateTest = React.createClass({
+var ReactContentSizeUpdateTest = createReactClass({
+  displayName: 'ReactContentSizeUpdateTest',
   mixins: [Subscribable.Mixin,
            TimerMixin],
 

IntegrationTests/SizeFlexibilityUpdateTest.js

@@ -10,6 +10,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var RCTNativeAppEventEmitter = require('RCTNativeAppEventEmitter');
 var Subscribable = require('Subscribable');
@@ -22,7 +23,8 @@ var reactViewHeight = 222;
 
 var finalState = false;
 
-var SizeFlexibilityUpdateTest = React.createClass({
+var SizeFlexibilityUpdateTest = createReactClass({
+  displayName: 'SizeFlexibilityUpdateTest',
   mixins: [Subscribable.Mixin],
 
   componentWillMount: function() {

IntegrationTests/TimersTest.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var TimerMixin = require('react-timer-mixin');
 
@@ -22,7 +23,8 @@ var {
 } = ReactNative;
 var { TestModule  } = ReactNative.NativeModules;
 
-var TimersTest = React.createClass({
+var TimersTest = createReactClass({
+  displayName: 'TimersTest',
   mixins: [TimerMixin],
 
   _nextTest: () => {},

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 const GRAY = '#999999';
@@ -36,7 +37,8 @@ type DefaultProps = {
 /**
  * Displays a circular loading indicator.
  */
-const ActivityIndicator = React.createClass({
+const ActivityIndicator = createReactClass({
+  displayName: 'ActivityIndicator',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet');
 const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -36,7 +37,8 @@ type Event = Object;
  * source of truth.
  */
 // $FlowFixMe(>=0.41.0)
-const DatePickerIOS = React.createClass({
+const DatePickerIOS = createReactClass({
+  displayName: 'DatePickerIOS',
   // TOOD: Put a better type for _picker
   _picker: (undefined: ?$FlowFixMe),
 

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -24,6 +24,7 @@ var ViewPropTypes = require('ViewPropTypes');
 
 var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 
+var createReactClass = require('create-react-class');
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
@@ -67,7 +68,8 @@ var DRAWER_STATES = [
  * },
  * ```
  */
-var DrawerLayoutAndroid = React.createClass({
+var DrawerLayoutAndroid = createReactClass({
+  displayName: 'DrawerLayoutAndroid',
   statics: {
     positions: DrawerConsts.DrawerPosition,
   },

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -11,6 +11,7 @@
  */
 'use strict';
 
+const createReactClass = require('create-react-class');
 const Keyboard = require('Keyboard');
 const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
@@ -43,7 +44,8 @@ const viewRef = 'VIEW';
  * It can automatically adjust either its position or bottom padding based on the position of the keyboard.
  */
 // $FlowFixMe(>=0.41.0)
-const KeyboardAvoidingView = React.createClass({
+const KeyboardAvoidingView = createReactClass({
+  displayName: 'KeyboardAvoidingView',
   mixins: [TimerMixin],
 
   propTypes: {

Libraries/Components/LazyRenderer.js

@@ -11,10 +11,12 @@
 'use strict';
 
 var React = require('React');
+var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 
-var LazyRenderer = React.createClass({
+var LazyRenderer = createReactClass({
+  displayName: 'LazyRenderer',
   mixin: [TimerMixin],
 
   propTypes: {

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -23,6 +23,7 @@ var TVEventHandler = require('TVEventHandler');
 var View = require('View');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var invariant = require('fbjs/lib/invariant');
 var logError = require('logError');
 var requireNativeComponent = require('requireNativeComponent');
@@ -304,7 +305,8 @@ type Event = Object;
  * is pushed.
  *
  */
-var NavigatorIOS = React.createClass({
+var NavigatorIOS = createReactClass({
+  displayName: 'NavigatorIOS',
 
   propTypes: {
 

Libraries/Components/Picker/PickerIOS.ios.js

@@ -22,10 +22,12 @@ var View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 var processColor = require('processColor');
 
+var createReactClass = require('create-react-class');
 var itemStylePropType = StyleSheetPropType(TextStylePropTypes);
 var requireNativeComponent = require('requireNativeComponent');
 
-var PickerIOS = React.createClass({
+var PickerIOS = createReactClass({
+  displayName: 'PickerIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -16,6 +16,7 @@ var PropTypes = require('prop-types');
 var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 var STYLE_ATTRIBUTES = [
@@ -63,7 +64,8 @@ var indeterminateType = function(props, propName, componentName, ...rest) {
  * },
  * ```
  */
-var ProgressBarAndroid = React.createClass({
+var ProgressBarAndroid = createReactClass({
+  displayName: 'ProgressBarAndroid',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -18,13 +18,15 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */
 // $FlowFixMe(>=0.41.0)
-var ProgressViewIOS = React.createClass({
+var ProgressViewIOS = createReactClass({
+  displayName: 'ProgressViewIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/RefreshControl/RefreshControl.js

@@ -18,6 +18,7 @@ const React = require('React');
 const PropTypes = require('prop-types');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const requireNativeComponent = require('requireNativeComponent');
 
 if (Platform.OS === 'android') {
@@ -72,7 +73,8 @@ if (Platform.OS === 'android') {
  * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
  */
 // $FlowFixMe(>=0.41.0)
-const RefreshControl = React.createClass({
+const RefreshControl = createReactClass({
+  displayName: 'RefreshControl',
   statics: {
     SIZE: RefreshLayoutConsts.SIZE,
   },

Libraries/Components/ScrollView/ScrollView.js

@@ -27,6 +27,7 @@ const View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 const ViewStylePropTypes = require('ViewStylePropTypes');
 
+const createReactClass = require('create-react-class');
 const dismissKeyboard = require('dismissKeyboard');
 const flattenStyle = require('flattenStyle');
 const invariant = require('fbjs/lib/invariant');
@@ -72,7 +73,8 @@ import type {NativeMethodsMixinType} from 'ReactNativeTypes';
  * supports out of the box.
  */
 // $FlowFixMe(>=0.41.0)
-const ScrollView = React.createClass({
+const ScrollView = createReactClass({
+  displayName: 'ScrollView',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -17,6 +17,7 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -49,7 +50,8 @@ type Event = Object;
  * ````
  */
 // $FlowFixMe(>=0.41.0)
-var SegmentedControlIOS = React.createClass({
+var SegmentedControlIOS = createReactClass({
+  displayName: 'SegmentedControlIOS',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Slider/Slider.js

@@ -21,6 +21,7 @@ var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type Event = Object;
@@ -29,7 +30,8 @@ type Event = Object;
  * A component used to select a single value from a range of values.
  */
 // $FlowFixMe(>=0.41.0)
-var Slider = React.createClass({
+var Slider = createReactClass({
+  displayName: 'Slider',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Switch/Switch.js

@@ -19,6 +19,7 @@ const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 const ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 
 type DefaultProps = {
@@ -38,7 +39,8 @@ type DefaultProps = {
  * @keyword toggle
  */
 // $FlowFixMe(>=0.41.0)
-var Switch = React.createClass({
+var Switch = createReactClass({
+  displayName: 'Switch',
   propTypes: {
     ...ViewPropTypes,
     /**

Libraries/Components/TextInput/TextInput.js

@@ -17,6 +17,7 @@ const EventEmitter = require('EventEmitter');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const createReactClass = require('create-react-class');
 const PropTypes = require('prop-types');
 const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
@@ -168,7 +169,8 @@ const DataDetectorTypes = [
  *
  */
 // $FlowFixMe(>=0.41.0)
-const TextInput = React.createClass({
+const TextInput = createReactClass({
+  displayName: 'TextInput',
   statics: {
     /* TODO(brentvatne) docs are needed for this */
     State: TextInputState,

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -20,6 +20,7 @@ var UIManager = require('UIManager');
 var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
+var createReactClass = require('create-react-class');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
@@ -65,7 +66,8 @@ var optionalImageSource = PropTypes.oneOfType([
  *
  * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
  */
-var ToolbarAndroid = React.createClass({
+var ToolbarAndroid = createReactClass({
+  displayName: 'ToolbarAndroid',
   mixins: [NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableBounce.js

@@ -15,6 +15,7 @@ var Animated = require('Animated');
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var createReactClass = require('create-react-class');
 var PropTypes = require('prop-types');
 var Touchable = require('Touchable');
 
@@ -35,7 +36,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * interesting interactions such as `handleTouchablePress`.
  */
 // $FlowFixMe(>=0.41.0)
-var TouchableBounce = React.createClass({
+var TouchableBounce = createReactClass({
+  displayName: 'TouchableBounce',
   mixins: [Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableHighlight.js

@@ -25,6 +25,7 @@ var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 var View = require('View');
 const ViewPropTypes = require('ViewPropTypes');
 
+var createReactClass = require('create-react-class');
 var ensureComponentIsNative = require('ensureComponentIsNative');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var keyOf = require('fbjs/lib/keyOf');
@@ -68,7 +69,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * ```
  */
 
-var TouchableHighlight = React.createClass({
+var TouchableHighlight = createReactClass({
+  displayName: 'TouchableHighlight',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
     /**

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -18,6 +18,7 @@ var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 var UIManager = require('UIManager');
 
+var createReactClass = require('create-react-class');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var processColor = require('processColor');
 
@@ -70,7 +71,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * ```
  */
 
-var TouchableNativeFeedback = React.createClass({
+var TouchableNativeFeedback = createReactClass({
+  displayName: 'TouchableNativeFeedback',
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -22,6 +22,7 @@ var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
 
+var createReactClass = require('create-react-class');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var flattenStyle = require('flattenStyle');
 
@@ -51,7 +52,8 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * },
  * ```
  */
-var TouchableOpacity = React.createClass({
+var TouchableOpacity = createReactClass({
+  displayName: 'TouchableOpacity',
   mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
 
   propTypes: {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -17,6 +17,7 @@ const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');
 
+const createReactClass = require('create-react-class');
 const ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 const warning = require('fbjs/lib/warning');
 
@@ -37,7 +38,8 @@ const PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
  * If you wish to have several child components, wrap them in a View.
  */
 // $FlowFixMe(>=0.41.0)
-const TouchableWithoutFeedback = React.createClass({
+const TouchableWithoutFeedback = createReactClass({
+  displayName: 'TouchableWithoutFeedback',
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {

Libraries/Components/View/View.js

@@ -19,6 +19,7 @@ const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const ViewPropTypes = require('ViewPropTypes');
 
+const createReactClass = require('create-react-class');
 const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
 
@@ -73,7 +74,8 @@ export type Props = ViewProps;
  *   - `touches` - Array of all current touches on the screen.
  */
 // $FlowFixMe(>=0.41.0)
-const View = React.createClass({
+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

@@ -20,6 +20,7 @@ const StyleSheet = require('StyleSheet');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
 
+const createReactClass = require('create-react-class');
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
 const IS_RTL = I18nManager.isRTL;
@@ -61,7 +62,8 @@ const RIGHT_SWIPE_THRESHOLD = 30 * SLOW_SPEED_SWIPE_FACTOR;
  * used in a normal ListView. See the renderRow for SwipeableListView to see how
  * to use this component separately.
  */
-const SwipeableRow = React.createClass({
+const SwipeableRow = createReactClass({
+  displayName: 'SwipeableRow',
   _panResponder: {},
   _previousLeft: CLOSED_LEFT_POSITION,
 

Libraries/Image/Image.android.js

@@ -25,6 +25,7 @@ var View = require('View');
 var ViewPropTypes = require('ViewPropTypes');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
+var createReactClass = require('create-react-class');
 var filterObject = require('fbjs/lib/filterObject');
 var flattenStyle = require('flattenStyle');
 var merge = require('merge');
@@ -76,7 +77,8 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, {
 var ViewStyleKeys = new Set(Object.keys(ViewStylePropTypes));
 var ImageSpecificStyleKeys = new Set(Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x)));
 
-var Image = React.createClass({
+var Image = createReactClass({
+  displayName: 'Image',
   propTypes: {
     ...ViewPropTypes,
     style: StyleSheetPropType(ImageStylePropTypes),

Libraries/Image/Image.ios.js

@@ -23,6 +23,7 @@ const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheet = require('StyleSheet');
 const StyleSheetPropType = require('StyleSheetPropType');
 
+const createReactClass = require('create-react-class');
 const flattenStyle = require('flattenStyle');
 const requireNativeComponent = require('requireNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
@@ -126,7 +127,8 @@ const ImageViewManager = NativeModules.ImageViewManager;
  *
  */
 // $FlowFixMe(>=0.41.0)
-const Image = React.createClass({
+const Image = createReactClass({
+  displayName: 'Image',
   propTypes: {
     /**
      * > `ImageResizeMode` is an `Enum` for different image resizing modes, set via the

Libraries/Lists/ListView/ListView.js

@@ -25,6 +25,7 @@ var TimerMixin = require('react-timer-mixin');
 var View = require('View');
 
 var cloneReferencedElement = require('react-clone-referenced-element');
+var createReactClass = require('create-react-class');
 var isEmpty = require('isEmpty');
 var merge = require('merge');
 
@@ -91,7 +92,8 @@ var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
  *    rendering rows.
  */
 
-var ListView = React.createClass({
+var ListView = createReactClass({
+  displayName: 'ListView',
   _childFrames: ([]: Array<Object>),
   _sentEndForContentLength: (null: ?number),
   _scrollComponent: (null: any),

Libraries/Text/Text.js

@@ -22,6 +22,7 @@ const StyleSheetPropType = require('StyleSheetPropType');
 const TextStylePropTypes = require('TextStylePropTypes');
 const Touchable = require('Touchable');
 
+const createReactClass = require('create-react-class');
 const createReactNativeComponentClass = require('createReactNativeComponentClass');
 const mergeFast = require('mergeFast');
 const processColor = require('processColor');
@@ -96,7 +97,8 @@ const viewConfig = {
  */
 
 // $FlowFixMe(>=0.41.0)
-const Text = React.createClass({
+const Text = createReactClass({
+  displayName: 'Text',
   propTypes: {
     /**
      * When `numberOfLines` is set, this prop defines how text will be truncated.

Libraries/Text/TextUpdateTest.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var TimerMixin = require('react-timer-mixin');
 var {
@@ -22,7 +23,8 @@ var {
 
 var TestManager = NativeModules.TestManager || NativeModules.SnapshotTestManager;
 
-var TextUpdateTest = React.createClass({
+var TextUpdateTest = createReactClass({
+  displayName: 'TextUpdateTest',
   mixins: [TimerMixin],
   getInitialState: function() {
     return {seeMore: true};

RNTester/js/CameraRollView.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 const PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
@@ -71,7 +72,8 @@ var propTypes = {
 
 };
 
-var CameraRollView = React.createClass({
+var CameraRollView = createReactClass({
+  displayName: 'CameraRollView',
   // $FlowFixMe(>=0.41.0)
   propTypes: propTypes,
 

RNTester/js/ImageExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   ActivityIndicator,
@@ -29,7 +30,8 @@ var ImageCapInsetsExample = require('./ImageCapInsetsExample');
 const IMAGE_PREFETCH_URL = 'http://origami.design/public/images/bird-logo.png?r=1&t=' + Date.now();
 var prefetchTask = Image.prefetch(IMAGE_PREFETCH_URL);
 
-var NetworkImageCallbackExample = React.createClass({
+var NetworkImageCallbackExample = createReactClass({
+  displayName: 'NetworkImageCallbackExample',
   getInitialState: function() {
     return {
       events: [],
@@ -102,7 +104,7 @@ var NetworkImageCallbackExample = React.createClass({
   }
 });
 
-var NetworkImageExample = React.createClass({
+var NetworkImageExample = createReactClass({
   getInitialState: function() {
     return {
       error: false,
@@ -130,7 +132,7 @@ var NetworkImageExample = React.createClass({
   }
 });
 
-var ImageSizeExample = React.createClass({
+var ImageSizeExample = createReactClass({
   getInitialState: function() {
     return {
       width: 0,
@@ -162,7 +164,7 @@ var ImageSizeExample = React.createClass({
   },
 });
 
-var MultipleSourcesExample = React.createClass({
+var MultipleSourcesExample = createReactClass({
   getInitialState: function() {
     return {
       width: 30,

RNTester/js/ListViewExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -24,7 +25,8 @@ var {
 
 var RNTesterPage = require('./RNTesterPage');
 
-var ListViewSimpleExample = React.createClass({
+var ListViewSimpleExample = createReactClass({
+  displayName: 'ListViewSimpleExample',
   statics: {
     title: '<ListView>',
     description: 'Performant, scrollable list of data.'

RNTester/js/ListViewGridLayoutExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -37,7 +38,8 @@ var THUMB_URLS = [
   require('./Thumbnails/victory.png'),
 ];
 
-var ListViewGridLayoutExample = React.createClass({
+var ListViewGridLayoutExample = createReactClass({
+  displayName: 'ListViewGridLayoutExample',
 
   statics: {
     title: '<ListView> - Grid Layout',

RNTester/js/PanResponderExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   PanResponder,
@@ -21,7 +22,8 @@ var {
 
 var CIRCLE_SIZE = 80;
 
-var PanResponderExample = React.createClass({
+var PanResponderExample = createReactClass({
+  displayName: 'PanResponderExample',
 
   statics: {
     title: 'PanResponder Sample',

RNTester/js/ProgressBarAndroidExample.android.js

@@ -13,12 +13,14 @@
 
 var ProgressBar = require('ProgressBarAndroid');
 var React = require('React');
+var createReactClass = require('create-react-class');
 var RNTesterBlock = require('RNTesterBlock');
 var RNTesterPage = require('RNTesterPage');
 
 var TimerMixin = require('react-timer-mixin');
 
-var MovingBar = React.createClass({
+var MovingBar = createReactClass({
+  displayName: 'MovingBar',
   mixins: [TimerMixin],
 
   getInitialState: function() {

RNTester/js/ProgressViewIOSExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   ProgressViewIOS,
@@ -20,7 +21,8 @@ var {
 } = ReactNative;
 var TimerMixin = require('react-timer-mixin');
 
-var ProgressViewExample = React.createClass({
+var ProgressViewExample = createReactClass({
+  displayName: 'ProgressViewExample',
   mixins: [TimerMixin],
 
   getInitialState() {

RNTester/js/SwipeableListViewExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -25,7 +26,8 @@ var {
 
 var RNTesterPage = require('./RNTesterPage');
 
-var SwipeableListViewSimpleExample = React.createClass({
+var SwipeableListViewSimpleExample = createReactClass({
+  displayName: 'SwipeableListViewSimpleExample',
   statics: {
     title: '<SwipeableListView>',
     description: 'Performant, scrollable, swipeable list of data.'

RNTester/js/TextExample.ios.js

@@ -13,6 +13,7 @@
 
 const Platform = require('Platform');
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   Image,
@@ -72,7 +73,8 @@ class AttributeToggler extends React.Component {
   }
 }
 
-var AdjustingFontSize = React.createClass({
+var AdjustingFontSize = createReactClass({
+  displayName: 'AdjustingFontSize',
   getInitialState: function() {
     return {dynamicText:'', shouldRender: true,};
   },

RNTester/js/TimerExample.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('react');
+var createReactClass = require('create-react-class');
 var ReactNative = require('react-native');
 var {
   AlertIOS,
@@ -111,7 +112,8 @@ class RequestIdleCallbackTester extends React.Component {
   };
 }
 
-var TimerTester = React.createClass({
+var TimerTester = createReactClass({
+  displayName: 'TimerTester',
   mixins: [TimerMixin],
 
   _ii: 0,

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -13,6 +13,7 @@
 
 var BatchedBridge = require('BatchedBridge');
 var React = require('React');
+var createReactClass = require('create-react-class');
 var View = require('View');
 var ScrollView = require('ScrollView');
 var Text = require('Text');
@@ -64,7 +65,8 @@ var onItemPress = function(itemNumber) {
   ScrollListener.onItemPress(itemNumber);
 };
 
-var ScrollViewTestApp = React.createClass({
+var ScrollViewTestApp = createReactClass({
+  displayName: 'ScrollViewTestApp',
   getInitialState: getInitialState,
   onScroll: onScroll,
   onItemPress: onItemPress,
@@ -90,7 +92,8 @@ var ScrollViewTestApp = React.createClass({
   },
 });
 
-var HorizontalScrollViewTestApp = React.createClass({
+var HorizontalScrollViewTestApp = createReactClass({
+  displayName: 'HorizontalScrollViewTestApp',
   getInitialState: getInitialState,
   onScroll: onScroll,
   onItemPress: onItemPress,

ReactAndroid/src/androidTest/js/UIManagerTestModule.js

@@ -17,9 +17,11 @@ var StyleSheet = require('StyleSheet');
 var View = require('View');
 var Text = require('Text');
 
+var createReactClass = require('create-react-class');
 var renderApplication = require('renderApplication');
 
-var FlexTestApp = React.createClass({
+var FlexTestApp = createReactClass({
+  displayName: 'FlexTestApp',
   _styles: StyleSheet.create({
     container: {
       width: 200,
@@ -47,7 +49,8 @@ var FlexTestApp = React.createClass({
   }
 });
 
-var FlexWithText = React.createClass({
+var FlexWithText = createReactClass({
+  displayName: 'FlexWithText',
   _styles: StyleSheet.create({
     container: {
       flexDirection: 'column',
@@ -75,7 +78,8 @@ var FlexWithText = React.createClass({
   }
 });
 
-var AbsolutePositionTestApp = React.createClass({
+var AbsolutePositionTestApp = createReactClass({
+  displayName: 'AbsolutePositionTestApp',
   _styles: StyleSheet.create({
     absolute: {
       position: 'absolute',
@@ -90,7 +94,8 @@ var AbsolutePositionTestApp = React.createClass({
   }
 });
 
-var AbsolutePositionBottomRightTestApp = React.createClass({
+var AbsolutePositionBottomRightTestApp = createReactClass({
+  displayName: 'AbsolutePositionBottomRightTestApp',
   _styles: StyleSheet.create({
     container: {
       width: 100,
@@ -113,7 +118,8 @@ var AbsolutePositionBottomRightTestApp = React.createClass({
   }
 });
 
-var CenteredTextView = React.createClass({
+var CenteredTextView = createReactClass({
+  displayName: 'CenteredTextView',
   _styles: StyleSheet.create({
     parent: {
       width: 200,
@@ -139,7 +145,8 @@ var CenteredTextView = React.createClass({
 });
 
 var flushUpdatePositionInList = null;
-var UpdatePositionInListTestApp = React.createClass({
+var UpdatePositionInListTestApp = createReactClass({
+  displayName: 'UpdatePositionInListTestApp',
   _styles: StyleSheet.create({
     element: {
       height: 10,

docs/DirectManipulation.md

@@ -123,7 +123,7 @@ If you run this you will immediately see this error: `Touchable child
 must either be native or forward setNativeProps to a native component`.
 This occurs because `MyButton` isn't directly backed by a native view
 whose opacity should be set. You can think about it like this: if you
-define a component with `React.createClass` you would not expect to be
+define a component with `createReactClass` you would not expect to be
 able to set a style prop on it and have that work - you would need to
 pass the style prop down to a child, unless you are wrapping a native
 component. Similarly, we are going to forward `setNativeProps` to a

docs/Timers.md

@@ -64,7 +64,7 @@ This library does not ship with React Native - in order to use it on your projec
 ```javascript
 import TimerMixin from 'react-timer-mixin';
 
-var Component = React.createClass({
+var Component = createReactClass({
   mixins: [TimerMixin],
   componentDidMount: function() {
     this.setTimeout(

website/package.json

@@ -25,7 +25,7 @@
     "optimist": "0.6.0",
     "prop-types": "^15.5.8",
     "react": "~0.13.0",
-    "react-docgen": "3.0.0-beta2",
+    "react-docgen": "3.0.0-beta5",
     "react-page-middleware": "0.4.1",
     "remove-markdown": "^0.1.0",
     "request": "^2.69.0",