Updating master to support react > 16 + native > 0.52

package.json

@@ -41,10 +41,11 @@
     "eslint-plugin-react": "5.1.1",
     "eslint-plugin-react-native": "1.0.2",
     "mocha": "2.5.3",
-    "react": "^15.4.0",
-    "react-native": "^0.38.0"
+    "react": "^16.2.0",
+    "react-native": "^0.53.2"
   },
   "dependencies": {
+    "create-react-class": "^15.6.3",
     "cubic-bezier": "^0.1.2",
     "invariant": "^2.2.1",
     "keymirror": "^0.1.1",
@@ -54,12 +55,17 @@
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-addons-test-utils": "^15.4.0",
     "react-addons-update": "^15.4.0",
-    "react-dom": "^15.4.0",
+    "react-dom": "^16.2.0",
     "react-timer-mixin": "^0.13.3",
     "warning": "^2.1.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": "*"
+  },
+  "babel": {
+    "presets": [
+      "airbnb",
+      "react-native"
+    ]
   }
 }

src/Libraries/NavigationExperimental/NavigationPropTypes.js

@@ -1,8 +1,6 @@
 class Animated {}
 
-import React from 'react';
-
-const { PropTypes } = React;
+import PropTypes from 'prop-types';
 
 /* NavigationAction */
 const action = PropTypes.shape({

src/api/CameraRoll.js

@@ -1,9 +1,7 @@
 import invariant from 'invariant';
-import React from 'react';
+import PropTypes from 'prop-types';
 import CameraRollManager from '../NativeModules/CameraRollManager';
 
-const { PropTypes } = React;
-
 const GROUP_TYPES_OPTIONS = [
   'Album',
   'All',

src/api/LayoutAnimation.js

@@ -1,9 +1,7 @@
-import React from 'react';
+import PropTypes from 'prop-types';
 import UIManager from '../NativeModules/UIManager';
 import keyMirror from 'keymirror';
 
-const { PropTypes } = React;
-
 const TypesEnum = {
   spring: true,
   linear: true,

src/components/ActivityIndicator.js

@@ -1,14 +1,14 @@
 /**
  * https://github.com/facebook/react-native/blob/master/Libraries/Components/ActivityIndicator/ActivityIndicator.js
  */
-import React from 'react';
+import PropTypes from 'prop-types';
+
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
 import View from './View';
 import ColorPropType from '../propTypes/ColorPropType';
+import createReactClass from 'create-react-class';
 
-const { PropTypes } = React;
-
-const ActivityIndicator = React.createClass({
+const ActivityIndicator = createReactClass({
   propTypes: {
     ...View.propTypes,
     /**

src/components/ActivityIndicatorIOS.js

@@ -1,13 +1,13 @@
 /**
  * https://github.com/facebook/react-native/blob/master/Libraries/Components/ActivityIndicator/ActivityIndicatorIOS.ios.js
  */
-import React from 'react';
+import PropTypes from 'prop-types';
+
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
 import View from './View';
+import createReactClass from 'create-react-class';
 
-const { PropTypes } = React;
-
-const ActivityIndicatorIOS = React.createClass({
+const ActivityIndicatorIOS = createReactClass({
   propTypes: {
     ...View.propTypes,
     /**

src/components/DrawerLayoutAndroid.js

@@ -1,16 +1,18 @@
 /**
  *https://github.com/facebook/react-native/blob/master/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js
  */
-import React from 'react';
+import PropTypes from 'prop-types';
+
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
 import View from './View';
 import UIManager from '../NativeModules/UIManager';
 import ColorPropType from '../propTypes/ColorPropType';
+import createReactClass from 'create-react-class';
 
-const ReactPropTypes = React.PropTypes;
+const ReactPropTypes = PropTypes;
 const DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 
-const DrawerLayoutAndroid = React.createClass({
+const DrawerLayoutAndroid = createReactClass({
 
   propTypes: {
     ...View.propTypes,

src/components/Image.js

@@ -1,16 +1,16 @@
 /**
  * https://github.com/facebook/react-native/blob/master/Libraries/Image/Image.ios.js
  */
-import React from 'react';
+import PropTypes from 'prop-types';
+
 import styleSheetPropType from '../propTypes/StyleSheetPropType';
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
 import EdgeInsetsPropType from '../propTypes/EdgeInsetsPropType';
 import ImageStylePropTypes from '../propTypes/ImageStylePropTypes';
 import ImageResizeMode from '../propTypes/ImageResizeMode';
+import createReactClass from 'create-react-class';
 
-const { PropTypes } = React;
-
-const Image = React.createClass({
+const Image = createReactClass({
   propTypes: {
     style: styleSheetPropType(ImageStylePropTypes),
     /**

src/components/ListView.js

@@ -1,14 +1,15 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ScrollResponder from '../mixins/ScrollResponder';
 import TimerMixin from 'react-timer-mixin';
 import ScrollView from './ScrollView';
 import ListViewDataSource from '../api/ListViewDataSource';
+import createReactClass from 'create-react-class';
 
-const { PropTypes } = React;
 const SCROLLVIEW_REF = 'listviewscroll';
 
 
-const ListView = React.createClass({
+const ListView = createReactClass({
   propTypes: {
     ...ScrollView.propTypes,
 
@@ -80,12 +81,12 @@ const ListView = React.createClass({
      * A function that returns the scrollable component in which the list rows
      * are rendered. Defaults to returning a ScrollView with the given props.
      */
-    renderScrollComponent: React.PropTypes.func.isRequired,
+    renderScrollComponent: PropTypes.func.isRequired,
     /**
      * How early to start rendering rows before they come on screen, in
      * pixels.
      */
-    scrollRenderAheadDistance: React.PropTypes.number,
+    scrollRenderAheadDistance: PropTypes.number,
     /**
      * (visibleRows, changedRows) => void
      *
@@ -95,13 +96,13 @@ const ListView = React.createClass({
      * that have changed their visibility, with true indicating visible, and
      * false indicating the view has moved out of view.
      */
-    onChangeVisibleRows: React.PropTypes.func,
+    onChangeVisibleRows: PropTypes.func,
     /**
      * A performance optimization for improving scroll perf of
      * large lists, used in conjunction with overflow: 'hidden' on the row
      * containers.  This is enabled by default.
      */
-    removeClippedSubviews: React.PropTypes.bool,
+    removeClippedSubviews: PropTypes.bool,
     /**
      * An array of child indices determining which children get docked to the
      * top of the screen when scrolling. For example, passing

src/components/Navigator.js

@@ -1,13 +1,14 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 import createMockComponent from './createMockComponent';
 import View from './View';
+import createReactClass from 'create-react-class';
 
 const NavigatorSceneConfigType = PropTypes.shape({
   gestures: PropTypes.object,
   springFriction: PropTypes.number,
   springTension: PropTypes.number,
   defaultTransitionVelocity: PropTypes.number,
-  animationInterpolators: React.PropTypes.object,
+  animationInterpolators: PropTypes.object,
 });
 
 const NavigatorSceneConfigs = {
@@ -23,7 +24,7 @@ const NavigatorSceneConfigs = {
   VerticalDownSwipeJump: NavigatorSceneConfigType
 };
 
-const Navigator = React.createClass({
+const Navigator = createReactClass({
   propTypes: {
     /**
      * Optional function that allows configuration about scene animations and

src/components/Picker.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import PropTypes from 'prop-types';
 import createMockComponent from './createMockComponent';
+import createReactClass from 'create-react-class';
 
-const Picker = React.createClass({
+const Picker = createReactClass({
   propTypes: {
-    children: React.PropTypes.node
+    children: PropTypes.node
   },
   statics: {
     Item: createMockComponent('Picker.Item')

src/components/ScrollView.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import EdgeInsetsPropType from '../propTypes/EdgeInsetsPropType';
 import PointPropType from '../propTypes/PointPropType';
@@ -6,13 +7,12 @@ import View from './View';
 import ViewStylePropTypes from '../propTypes/ViewStylePropTypes';
 import ScrollViewManager from '../NativeModules/ScrollViewManager';
 import styleSheetPropType from '../propTypes/StyleSheetPropType';
-
-const { PropTypes } = React;
+import createReactClass from 'create-react-class';
 
 const SCROLLVIEW = 'ScrollView';
 const INNERVIEW = 'InnerScrollView';
 
-const ScrollView = React.createClass({
+const ScrollView = createReactClass({
   propTypes: {
     ...View.propTypes,
     /**

src/components/StatusBar.js

@@ -1,25 +1,26 @@
 /**
  * https://github.com/facebook/react-native/blob/master/Libraries/Components/StatusBar/StatusBar.js
  */
-import React from 'react';
-import ColorPropType from '../propTypes/ColorPropType';
+import PropTypes from 'prop-types';
 
+import ColorPropType from '../propTypes/ColorPropType';
+import createReactClass from 'create-react-class';
 
 let _backgroundColor = '';
 let _barStyle = {};
 let _hidden = false;
 let _networkActivityIndicatorVisible = false;
 let _translucent = false;
 
-const StatusBar = React.createClass({
+const StatusBar = createReactClass({
   propTypes: {
-    animated: React.PropTypes.bool,
-    barStyle: React.PropTypes.oneOf(['default', 'light-content']),
+    animated: PropTypes.bool,
+    barStyle: PropTypes.oneOf(['default', 'light-content']),
     backgroundColor: ColorPropType,
-    hidden: React.PropTypes.bool,
-    networkActivityIndicatorVisible: React.PropTypes.bool,
-    showHideTransition: React.PropTypes.oneOf(['fade', 'slide']),
-    translucent: React.PropTypes.bool
+    hidden: PropTypes.bool,
+    networkActivityIndicatorVisible: PropTypes.bool,
+    showHideTransition: PropTypes.oneOf(['fade', 'slide']),
+    translucent: PropTypes.bool
   },
 
   statics: {

src/components/TabBarIOS.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import PropTypes from 'prop-types';
 import createMockComponent from './createMockComponent';
+import createReactClass from 'create-react-class';
 
-const TabBarIOS = React.createClass({
+const TabBarIOS = createReactClass({
   propTypes: {
-    children: React.PropTypes.node
+    children: PropTypes.node
   },
   statics: {
     Item: createMockComponent('TabBarIOS.Item')

src/components/Text.js

@@ -1,47 +1,49 @@
 /**
  * https://github.com/facebook/react-native/blob/master/Libraries/Text/Text.js
  */
-import React from 'react';
+import PropTypes from 'prop-types';
+
 import styleSheetPropType from '../propTypes/StyleSheetPropType';
 import TextStylePropTypes from '../propTypes/TextStylePropTypes';
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
+import createReactClass from 'create-react-class';
 
 const stylePropType = styleSheetPropType(TextStylePropTypes);
 
-const Text = React.createClass({
+const Text = createReactClass({
   propTypes: {
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines
      * does not exceed this number.
      */
-    numberOfLines: React.PropTypes.number,
+    numberOfLines: PropTypes.number,
     /**
      * Invoked on mount and layout changes with
      *
      *   `{nativeEvent: {layout: {x, y, width, height}}}`
      */
-    onLayout: React.PropTypes.func,
+    onLayout: PropTypes.func,
     /**
      * This function is called on press.
      */
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
     /**
      * When true, no visual change is made when text is pressed down. By
      * default, a gray oval highlights the text on press down.
      * @platform ios
      */
-    suppressHighlighting: React.PropTypes.bool,
+    suppressHighlighting: PropTypes.bool,
     style: stylePropType,
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: React.PropTypes.string,
+    testID: PropTypes.string,
     /**
      * Specifies should fonts scale to respect Text Size accessibility setting on iOS.
      * @platform ios
      */
-    allowFontScaling: React.PropTypes.bool,
+    allowFontScaling: PropTypes.bool,
   },
   mixins: [NativeMethodsMixin],
 

src/components/TextInput.js

@@ -1,13 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TextInputState from '../api/TextInputState';
 import TimerMixin from 'react-timer-mixin';
 import NativeMethodsMixin from '../mixins/NativeMethodsMixin';
 import View from './View';
 import Text from './Text';
+import createReactClass from 'create-react-class';
 
-const { PropTypes } = React;
-
-const TextInput = React.createClass({
+const TextInput = createReactClass({
   propTypes: {
     ...View.propTypes,
     /**

src/components/TouchableNativeFeedback.js

@@ -1,13 +1,13 @@
-
-import React from 'react';
+import PropTypes from 'prop-types';
 
 import TouchableWithoutFeedback from './TouchableWithoutFeedback';
+import createReactClass from 'create-react-class';
 
-const TouchableNativeFeedback = React.createClass({
+const TouchableNativeFeedback = createReactClass({
   propTypes: {
     ...TouchableWithoutFeedback.propTypes,
 
-    background: React.PropTypes.object
+    background: PropTypes.object
   },
   statics: {
     SelectableBackground() {},