Ran PropTypes -> prop-types codemod against Libraries/FBReactKit/js/react-native-github

Reviewed By: acdlite

Differential Revision: D4876709

fbshipit-source-id: 3a5e92bfc74287b7a9054546c438580bed0147af

Examples/UIExplorer/js/CameraRollView.js

@@ -24,6 +24,7 @@
 'use strict';
 
 var React = require('react');
+const PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   ActivityIndicator,
@@ -46,7 +47,7 @@ var propTypes = {
    * values are 'Album', 'All', 'Event', 'Faces', 'Library', 'PhotoStream'
    * and SavedPhotos.
    */
-  groupTypes: React.PropTypes.oneOf([
+  groupTypes: PropTypes.oneOf([
     'Album',
     'All',
     'Event',
@@ -59,22 +60,22 @@ var propTypes = {
   /**
    * Number of images that will be fetched in one page.
    */
-  batchSize: React.PropTypes.number,
+  batchSize: PropTypes.number,
 
   /**
    * A function that takes a single image as a parameter and renders it.
    */
-  renderImage: React.PropTypes.func,
+  renderImage: PropTypes.func,
 
   /**
    * imagesPerRow: Number of images to be shown in each row.
    */
-  imagesPerRow: React.PropTypes.number,
+  imagesPerRow: PropTypes.number,
 
    /**
    * The asset type, one of 'Photos', 'Videos' or 'All'
    */
-  assetType: React.PropTypes.oneOf([
+  assetType: PropTypes.oneOf([
     'Photos',
     'Videos',
     'All',

Examples/UIExplorer/js/LinkingExample.js

@@ -22,6 +22,7 @@
 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   Linking,
@@ -34,7 +35,7 @@ var UIExplorerBlock = require('./UIExplorerBlock');
 
 class OpenURLButton extends React.Component {
   static propTypes = {
-    url: React.PropTypes.string,
+    url: PropTypes.string,
   };
 
   handleClick = () => {

Examples/UIExplorer/js/UIExplorerBlock.js

@@ -24,6 +24,7 @@
 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   StyleSheet,
@@ -38,8 +39,8 @@ class UIExplorerBlock extends React.Component {
   };
 
   static propTypes = {
-    title: React.PropTypes.string,
+    title: PropTypes.string,
-    description: React.PropTypes.string,
+    description: PropTypes.string,
   };
 
   state = {description: (null: ?string)};

Examples/UIExplorer/js/UIExplorerButton.js

@@ -24,6 +24,7 @@
 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   StyleSheet,
@@ -35,7 +36,7 @@ class UIExplorerButton extends React.Component {
   props: {onPress?: Function};
 
   static propTypes = {
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
   };
 
   render() {

Examples/UIExplorer/js/UIExplorerPage.js

@@ -24,6 +24,7 @@
 'use strict';
 
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   ScrollView,
@@ -40,8 +41,8 @@ class UIExplorerPage extends React.Component {
   };
 
   static propTypes = {
-    noScroll: React.PropTypes.bool,
+    noScroll: PropTypes.bool,
-    noSpacer: React.PropTypes.bool,
+    noSpacer: PropTypes.bool,
   };
 
   render() {

IntegrationTests/IntegrationTestHarnessTest.js

@@ -13,6 +13,7 @@
 
 var requestAnimationFrame = require('fbjs/lib/requestAnimationFrame');
 var React = require('react');
+var PropTypes = require('prop-types');
 var ReactNative = require('react-native');
 var {
   Text,
@@ -27,8 +28,8 @@ class IntegrationTestHarnessTest extends React.Component {
   };
 
   static propTypes = {
-    shouldThrow: React.PropTypes.bool,
+    shouldThrow: PropTypes.bool,
-    waitOneFrame: React.PropTypes.bool,
+    waitOneFrame: PropTypes.bool,
   };
 
   state = {

Libraries/ART/ReactNativeART.js

@@ -15,6 +15,7 @@ var Path = require('ARTSerializablePath');
 var Transform = require('art/core/transform');
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
@@ -139,7 +140,7 @@ function childrenAsString(children) {
 
 class Surface extends React.Component {
   static childContextTypes = {
-    isInSurface: React.PropTypes.bool,
+    isInSurface: PropTypes.bool,
   };
 
   getChildContext() {
@@ -213,7 +214,7 @@ function extractOpacity(props) {
 
 class Group extends React.Component {
   static contextTypes = {
-    isInSurface: React.PropTypes.bool.isRequired,
+    isInSurface: PropTypes.bool.isRequired,
   };
 
   render() {

Libraries/Components/ActivityIndicator/ActivityIndicator.js

@@ -15,15 +15,13 @@ const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-const PropTypes = React.PropTypes;
-
 const GRAY = '#999999';
 
 type IndicatorSize = number | 'small' | 'large';

Libraries/Components/Button.js

@@ -14,6 +14,7 @@
 const ColorPropType = require('ColorPropType');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TouchableNativeFeedback = require('TouchableNativeFeedback');
@@ -62,11 +63,11 @@ class Button extends React.Component {
     /**
      * Text to display inside the button
      */
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
     /**
      * Text to display for blindness accessibility features
      */
-    accessibilityLabel: React.PropTypes.string,
+    accessibilityLabel: PropTypes.string,
     /**
      * Color of the text (iOS), or background color of the button (Android)
      */
@@ -74,15 +75,15 @@ class Button extends React.Component {
     /**
      * If true, disable all interactions for this component.
      */
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
      * Handler to be called when the user taps the button
      */
-    onPress: React.PropTypes.func.isRequired,
+    onPress: PropTypes.func.isRequired,
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: React.PropTypes.string,
+    testID: PropTypes.string,
   };
 
   render() {

Libraries/Components/DatePicker/DatePickerIOS.ios.js

@@ -15,15 +15,13 @@
 
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
 
-const PropTypes = React.PropTypes;
-
 type DefaultProps = {
   mode: 'date' | 'time' | 'datetime',
 };

Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -14,21 +14,19 @@ var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StatusBar = require('StatusBar');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
-
+var ViewPropTypes = require('ViewPropTypes');
-const ViewPropTypes = require('ViewPropTypes');
 
 var DrawerConsts = UIManager.AndroidDrawerLayout.Constants;
 
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var RK_DRAWER_REF = 'drawerlayout';
 var INNERVIEW_REF = 'innerView';
 
@@ -81,7 +79,7 @@ var DrawerLayoutAndroid = React.createClass({
      *   - 'none' (the default), drags do not dismiss the keyboard.
      *   - 'on-drag', the keyboard is dismissed when a drag begins.
      */
-    keyboardDismissMode: ReactPropTypes.oneOf([
+    keyboardDismissMode: PropTypes.oneOf([
       'none', // default
       'on-drag',
     ]),
@@ -100,7 +98,7 @@ var DrawerLayoutAndroid = React.createClass({
     /**
      * Specifies the side of the screen from which the drawer will slide in.
      */
-    drawerPosition: ReactPropTypes.oneOf([
+    drawerPosition: PropTypes.oneOf([
       DrawerConsts.DrawerPosition.Left,
       DrawerConsts.DrawerPosition.Right
     ]),
@@ -108,7 +106,7 @@ var DrawerLayoutAndroid = React.createClass({
      * Specifies the width of the drawer, more precisely the width of the view that be pulled in
      * from the edge of the window.
      */
-    drawerWidth: ReactPropTypes.number,
+    drawerWidth: PropTypes.number,
     /**
      * Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
      * - unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
@@ -116,7 +114,7 @@ var DrawerLayoutAndroid = React.createClass({
      * - locked-open, meaning that the drawer will stay opened and not respond to gestures.
      * The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`).
      */
-    drawerLockMode: ReactPropTypes.oneOf([
+    drawerLockMode: PropTypes.oneOf([
       'unlocked',
       'locked-closed',
       'locked-open'
@@ -124,7 +122,7 @@ var DrawerLayoutAndroid = React.createClass({
     /**
      * Function called whenever there is an interaction with the navigation view.
      */
-    onDrawerSlide: ReactPropTypes.func,
+    onDrawerSlide: PropTypes.func,
     /**
      * Function called when the drawer state has changed. The drawer can be in 3 states:
      * - idle, meaning there is no interaction with the navigation view happening at the time
@@ -132,19 +130,19 @@ var DrawerLayoutAndroid = React.createClass({
      * - settling, meaning that there was an interaction with the navigation view, and the
      * navigation view is now finishing its closing or opening animation
      */
-    onDrawerStateChanged: ReactPropTypes.func,
+    onDrawerStateChanged: PropTypes.func,
     /**
      * Function called whenever the navigation view has been opened.
      */
-    onDrawerOpen: ReactPropTypes.func,
+    onDrawerOpen: PropTypes.func,
     /**
      * Function called whenever the navigation view has been closed.
      */
-    onDrawerClose: ReactPropTypes.func,
+    onDrawerClose: PropTypes.func,
     /**
      * The navigation view that will be rendered to the side of the screen and can be pulled in.
      */
-    renderNavigationView: ReactPropTypes.func.isRequired,
+    renderNavigationView: PropTypes.func.isRequired,
 
     /**
      * Make the drawer take the entire screen and draw the background of the

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -15,13 +15,11 @@ const Keyboard = require('Keyboard');
 const LayoutAnimation = require('LayoutAnimation');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
-
 const ViewPropTypes = require('ViewPropTypes');
 
-const PropTypes = React.PropTypes;
-
 import type EmitterSubscription from 'EmitterSubscription';
 
 type Rect = {

Libraries/Components/LazyRenderer.js

@@ -11,13 +11,14 @@
 'use strict';
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 
 var LazyRenderer = React.createClass({
   mixin: [TimerMixin],
 
   propTypes: {
-    render: React.PropTypes.func.isRequired,
+    render: PropTypes.func.isRequired,
   },
 
   componentWillMount: function(): void {

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -15,13 +15,13 @@ var EventEmitter = require('EventEmitter');
 var Image = require('Image');
 var RCTNavigatorManager = require('NativeModules').NavigatorManager;
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var TVEventHandler = require('TVEventHandler');
 var View = require('View');
-
+var ViewPropTypes = require('ViewPropTypes');
-const ViewPropTypes = require('ViewPropTypes');
 
 var invariant = require('fbjs/lib/invariant');
 var logError = require('logError');
@@ -31,8 +31,6 @@ const keyMirror = require('fbjs/lib/keyMirror');
 
 var TRANSITIONER_REF = 'transitionerRef';
 
-var PropTypes = React.PropTypes;
-
 var __uid = 0;
 function getuid() {
   return __uid++;
@@ -134,7 +132,7 @@ type Event = Object;
  * animations and behavior from UIKIt.
  *
  * As the name implies, it is only available on iOS. Take a look at
- * [`React Navigation`](https://reactnavigation.org/) for a cross-platform 
+ * [`React Navigation`](https://reactnavigation.org/) for a cross-platform
  * solution in JavaScript, or check out either of these components for native
  * solutions: [native-navigation](http://airbnb.io/native-navigation/),
  * [react-native-navigation](https://github.com/wix/react-native-navigation).
@@ -589,8 +587,8 @@ var NavigatorIOS = React.createClass({
   },
 
   childContextTypes: {
-    onFocusRequested: React.PropTypes.func,
+    onFocusRequested: PropTypes.func,
-    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
+    focusEmitter: PropTypes.instanceOf(EventEmitter),
   },
 
   _tryLockNavigator: function(cb: () => void) {

Libraries/Components/Picker/Picker.js

@@ -17,6 +17,7 @@ var PickerIOS = require('PickerIOS');
 var PickerAndroid = require('PickerAndroid');
 var Platform = require('Platform');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
 var UnimplementedView = require('UnimplementedView');
@@ -48,12 +49,12 @@ class PickerItem extends React.Component {
    /**
     * Text to display for this item.
     */
-   label: React.PropTypes.string.isRequired,
+   label: 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,
+   value: PropTypes.any,
    /**
     * Color of this item's text.
     * @platform android
@@ -62,7 +63,7 @@ class PickerItem extends React.Component {
    /**
     * Used to locate the item in end-to-end tests.
     */
-   testID: React.PropTypes.string,
+   testID: PropTypes.string,
  };
 
  render() {
@@ -116,19 +117,19 @@ class Picker extends React.Component {
    /**
     * Value matching value of one of the items. Can be a string or an integer.
     */
-   selectedValue: React.PropTypes.any,
+   selectedValue: 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,
+   onValueChange: 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,
+   enabled: PropTypes.bool,
    /**
     * On Android, specifies how to display the selection items when the user taps on the picker:
     *
@@ -137,7 +138,7 @@ class Picker extends React.Component {
     *
     * @platform android
     */
-   mode: React.PropTypes.oneOf(['dialog', 'dropdown']),
+   mode: PropTypes.oneOf(['dialog', 'dropdown']),
    /**
     * Style to apply to each of the item labels.
     * @platform ios
@@ -147,11 +148,11 @@ class Picker extends React.Component {
     * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
     * @platform android
     */
-   prompt: React.PropTypes.string,
+   prompt: PropTypes.string,
    /**
     * Used to locate this view in end-to-end tests.
     */
-   testID: React.PropTypes.string,
+   testID: PropTypes.string,
  };
 
  render() {

Libraries/Components/Picker/PickerIOS.ios.js

@@ -14,6 +14,7 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var TextStylePropTypes = require('TextStylePropTypes');
@@ -30,8 +31,8 @@ var PickerIOS = React.createClass({
   propTypes: {
     ...ViewPropTypes,
     itemStyle: itemStylePropType,
-    onValueChange: React.PropTypes.func,
+    onValueChange: PropTypes.func,
-    selectedValue: React.PropTypes.any, // string or integer basically
+    selectedValue: PropTypes.any, // string or integer basically
   },
 
   getInitialState: function() {
@@ -99,9 +100,9 @@ var PickerIOS = React.createClass({
 
 PickerIOS.Item = class extends React.Component {
   static propTypes = {
-    value: React.PropTypes.any, // string or integer basically
+    value: PropTypes.any, // string or integer basically
-    label: React.PropTypes.string,
+    label: PropTypes.string,
-    color: React.PropTypes.string,
+    color: PropTypes.string,
   };
 
   render() {

Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js

@@ -12,13 +12,12 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
-const ViewPropTypes = require('ViewPropTypes');
+var PropTypes = require('prop-types');
+var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var STYLE_ATTRIBUTES = [
   'Horizontal',
   'Normal',
@@ -38,7 +37,7 @@ var indeterminateType = function(props, propName, componentName) {
     }
   };
 
-  return ReactPropTypes.bool(props, propName, componentName) || checker();
+  return PropTypes.bool(props, propName, componentName) || checker();
 };
 
 /**
@@ -78,7 +77,7 @@ var ProgressBarAndroid = React.createClass({
      * - SmallInverse
      * - LargeInverse
      */
-    styleAttr: ReactPropTypes.oneOf(STYLE_ATTRIBUTES),
+    styleAttr: PropTypes.oneOf(STYLE_ATTRIBUTES),
     /**
      * If the progress bar will show indeterminate progress. Note that this
      * can only be false if styleAttr is Horizontal.
@@ -87,7 +86,7 @@ var ProgressBarAndroid = React.createClass({
     /**
      * The progress value (between 0 and 1).
      */
-    progress: ReactPropTypes.number,
+    progress: PropTypes.number,
     /**
      * Color of the progress bar.
      */
@@ -95,7 +94,7 @@ var ProgressBarAndroid = React.createClass({
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: ReactPropTypes.string,
+    testID: PropTypes.string,
   },
 
   getDefaultProps: function() {

Libraries/Components/ProgressViewIOS/ProgressViewIOS.ios.js

@@ -14,13 +14,12 @@
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 /**
  * Use `ProgressViewIOS` to render a UIProgressView on iOS.
  */

Libraries/Components/RefreshControl/RefreshControl.js

@@ -15,6 +15,7 @@ const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ViewPropTypes = require('ViewPropTypes');
 
 const requireNativeComponent = require('requireNativeComponent');
@@ -83,11 +84,11 @@ const RefreshControl = React.createClass({
     /**
      * Called when the view starts refreshing.
      */
-    onRefresh: React.PropTypes.func,
+    onRefresh: PropTypes.func,
     /**
      * Whether the view should be indicating an active refresh.
      */
-    refreshing: React.PropTypes.bool.isRequired,
+    refreshing: PropTypes.bool.isRequired,
     /**
      * The color of the refresh indicator.
      * @platform ios
@@ -102,17 +103,17 @@ const RefreshControl = React.createClass({
      * The title displayed under the refresh indicator.
      * @platform ios
      */
-    title: React.PropTypes.string,
+    title: PropTypes.string,
     /**
      * Whether the pull to refresh functionality is enabled.
      * @platform android
      */
-    enabled: React.PropTypes.bool,
+    enabled: PropTypes.bool,
     /**
      * The colors (at least one) that will be used to draw the refresh indicator.
      * @platform android
      */
-    colors: React.PropTypes.arrayOf(ColorPropType),
+    colors: PropTypes.arrayOf(ColorPropType),
     /**
      * The background color of the refresh indicator.
      * @platform android
@@ -122,12 +123,12 @@ const RefreshControl = React.createClass({
      * Size of the refresh indicator, see RefreshControl.SIZE.
      * @platform android
      */
-    size: React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
+    size: PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE]),
     /**
      * Progress view top offset
      * @platform android
      */
-    progressViewOffset: React.PropTypes.number,
+    progressViewOffset: PropTypes.number,
   },
 
   _nativeRef: (null: any),

Libraries/Components/SegmentedControlIOS/SegmentedControlIOS.ios.js

@@ -13,13 +13,12 @@
 
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 type DefaultProps = {
   values: Array<string>,
   enabled: boolean,

Libraries/Components/Slider/Slider.js

@@ -17,13 +17,12 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var PropTypes = React.PropTypes;
-
 type Event = Object;
 
 /**

Libraries/Components/StaticRenderer.js

@@ -13,6 +13,8 @@
 
 var React = require('React');
 
+var PropTypes = require('prop-types');
+
 class StaticRenderer extends React.Component {
   props: {
     shouldUpdate: boolean,
@@ -20,8 +22,8 @@ class StaticRenderer extends React.Component {
   };
 
   static propTypes = {
-    shouldUpdate: React.PropTypes.bool.isRequired,
+    shouldUpdate: PropTypes.bool.isRequired,
-    render: React.PropTypes.func.isRequired,
+    render: PropTypes.func.isRequired,
   };
 
   shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {

Libraries/Components/StatusBar/StatusBar.js

@@ -12,6 +12,7 @@
 'use strict';
 
 const React = require('React');
+const PropTypes = require('prop-types');
 const ColorPropType = require('ColorPropType');
 const Platform = require('Platform');
 
@@ -253,12 +254,12 @@ class StatusBar extends React.Component {
     /**
      * If the status bar is hidden.
      */
-    hidden: React.PropTypes.bool,
+    hidden: PropTypes.bool,
     /**
      * If the transition between status bar property changes should be animated.
      * Supported for backgroundColor, barStyle and hidden.
      */
-    animated: React.PropTypes.bool,
+    animated: PropTypes.bool,
     /**
      * The background color of the status bar.
      * @platform android
@@ -271,11 +272,11 @@ class StatusBar extends React.Component {
      *
      * @platform android
      */
-    translucent: React.PropTypes.bool,
+    translucent: PropTypes.bool,
     /**
      * Sets the color of the status bar text.
      */
-    barStyle: React.PropTypes.oneOf([
+    barStyle: PropTypes.oneOf([
       'default',
       'light-content',
       'dark-content',
@@ -285,14 +286,14 @@ class StatusBar extends React.Component {
      *
      * @platform ios
      */
-    networkActivityIndicatorVisible: React.PropTypes.bool,
+    networkActivityIndicatorVisible: PropTypes.bool,
     /**
      * The transition effect when showing and hiding the status bar using the `hidden`
      * prop. Defaults to 'fade'.
      *
      * @platform ios
      */
-    showHideTransition: React.PropTypes.oneOf([
+    showHideTransition: PropTypes.oneOf([
       'fade',
       'slide',
     ]),

Libraries/Components/Switch/Switch.js

@@ -15,13 +15,12 @@ var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var Platform = require('Platform');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 const ViewPropTypes = require('ViewPropTypes');
 
 var requireNativeComponent = require('requireNativeComponent');
 
-var { PropTypes } = React;
-
 type DefaultProps = {
   value: boolean,
   disabled: boolean,

Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -13,6 +13,7 @@
 
 var ColorPropType = require('ColorPropType');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var TabBarItemIOS = require('TabBarItemIOS');
 const ViewPropTypes = require('ViewPropTypes');
@@ -55,7 +56,7 @@ class TabBarIOS extends React.Component {
     /**
      * A Boolean value that indicates whether the tab bar is translucent
      */
-    translucent: React.PropTypes.bool,
+    translucent: PropTypes.bool,
     /**
      * Specifies tab bar item positioning. Available values are:
      * - fill - distributes items across the entire width of the tab bar
@@ -65,7 +66,7 @@ class TabBarIOS extends React.Component {
      * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
      * it defaults to center.
      */
-    itemPositioning: React.PropTypes.oneOf(['fill', 'center', 'auto']),
+    itemPositioning: PropTypes.oneOf(['fill', 'center', 'auto']),
   };
 
   render() {

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -14,6 +14,7 @@
 var ColorPropType = require('ColorPropType');
 var Image = require('Image');
 var React = require('React');
+const PropTypes = require('prop-types');
 var StaticContainer = require('StaticContainer.react');
 var StyleSheet = require('StyleSheet');
 var View = require('View');
@@ -28,9 +29,9 @@ class TabBarItemIOS extends React.Component {
     /**
      * Little red bubble that sits at the top right of the icon.
      */
-    badge: React.PropTypes.oneOfType([
+    badge: PropTypes.oneOfType([
-      React.PropTypes.string,
+      PropTypes.string,
-      React.PropTypes.number,
+      PropTypes.number,
     ]),
     /**
      * Background color for the badge. Available since iOS 10.
@@ -41,7 +42,7 @@ class TabBarItemIOS extends React.Component {
      * using them, the title and selectedIcon will be overridden with the
      * system ones.
      */
-    systemIcon: React.PropTypes.oneOf([
+    systemIcon: PropTypes.oneOf([
       'bookmarks',
       'contacts',
       'downloads',
@@ -68,17 +69,17 @@ class TabBarItemIOS extends React.Component {
      * Callback when this tab is being selected, you should change the state of your
      * component to set selected={true}.
      */
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
     /**
      * If set to true it renders the image as original,
      * it defaults to being displayed as a template
      */
-    renderAsOriginal: React.PropTypes.bool,
+    renderAsOriginal: PropTypes.bool,
     /**
      * It specifies whether the children are visible or not. If you see a
      * blank content, you probably forgot to add a selected one.
      */
-    selected: React.PropTypes.bool,
+    selected: PropTypes.bool,
     /**
      * React style object.
      */
@@ -87,14 +88,14 @@ class TabBarItemIOS extends React.Component {
      * Text that appears under the icon. It is ignored when a system icon
      * is defined.
      */
-    title: React.PropTypes.string,
+    title: PropTypes.string,
     /**
      *(Apple TV only)* When set to true, this view will be focusable
      * and navigable using the Apple TV remote.
      *
      * @platform ios
      */
-    isTVSelectable: React.PropTypes.bool,
+    isTVSelectable: PropTypes.bool,
   };
 
   state = {

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 PropTypes = require('prop-types');
 const ReactNative = require('ReactNative');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
@@ -31,8 +32,6 @@ const invariant = require('fbjs/lib/invariant');
 const requireNativeComponent = require('requireNativeComponent');
 const warning = require('fbjs/lib/warning');
 
-const PropTypes = React.PropTypes;
-
 const onlyMultiline = {
   onTextInput: true,
   children: true,
@@ -336,7 +335,7 @@ const TextInput = React.createClass({
      * The default value is `simple`.
      * @platform android
      */
-    textBreakStrategy: React.PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
+    textBreakStrategy: PropTypes.oneOf(['simple', 'highQuality', 'balanced']),
     /**
      * Callback that is called when the text input is blurred.
      */
@@ -549,8 +548,8 @@ const TextInput = React.createClass({
   },
 
   contextTypes: {
-    onFocusRequested: React.PropTypes.func,
+    onFocusRequested: PropTypes.func,
-    focusEmitter: React.PropTypes.instanceOf(EventEmitter),
+    focusEmitter: PropTypes.instanceOf(EventEmitter),
   },
 
   _inputRef: (undefined: any),
@@ -593,7 +592,7 @@ const TextInput = React.createClass({
   },
 
   childContextTypes: {
-    isInAParentText: React.PropTypes.bool
+    isInAParentText: PropTypes.bool
   },
 
   /**

Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js

@@ -14,21 +14,20 @@
 var Image = require('Image');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var UIManager = require('UIManager');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ColorPropType = require('ColorPropType');
 
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var ReactPropTypes = React.PropTypes;
+var optionalImageSource = PropTypes.oneOfType([
-
-var optionalImageSource = ReactPropTypes.oneOfType([
   Image.propTypes.source,
   // Image.propTypes.source is required but we want it to be optional, so we OR
   // it with a nullable propType.
-  ReactPropTypes.oneOf([]),
+  PropTypes.oneOf([]),
 ]);
 
 /**
@@ -84,11 +83,11 @@ var ToolbarAndroid = React.createClass({
      * `ifRoom` or `never`
      * * `showWithText`: boolean, whether to show text alongside the icon or not
      */
-    actions: ReactPropTypes.arrayOf(ReactPropTypes.shape({
+    actions: PropTypes.arrayOf(PropTypes.shape({
-      title: ReactPropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
       icon: optionalImageSource,
-      show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']),
+      show: PropTypes.oneOf(['always', 'ifRoom', 'never']),
-      showWithText: ReactPropTypes.bool
+      showWithText: PropTypes.bool
     })),
     /**
      * Sets the toolbar logo.
@@ -102,11 +101,11 @@ var ToolbarAndroid = React.createClass({
      * Callback that is called when an action is selected. The only argument that is passed to the
      * callback is the position of the action in the actions array.
      */
-    onActionSelected: ReactPropTypes.func,
+    onActionSelected: PropTypes.func,
     /**
      * Callback called when the icon is selected.
      */
-    onIconClicked: ReactPropTypes.func,
+    onIconClicked: PropTypes.func,
     /**
      * Sets the overflow icon.
      */
@@ -114,7 +113,7 @@ var ToolbarAndroid = React.createClass({
     /**
      * Sets the toolbar subtitle.
      */
-    subtitle: ReactPropTypes.string,
+    subtitle: PropTypes.string,
     /**
      * Sets the toolbar subtitle color.
      */
@@ -122,7 +121,7 @@ var ToolbarAndroid = React.createClass({
     /**
      * Sets the toolbar title.
      */
-    title: ReactPropTypes.string,
+    title: PropTypes.string,
     /**
      * Sets the toolbar title color.
      */
@@ -135,7 +134,7 @@ var ToolbarAndroid = React.createClass({
      * these components and can be used to effectively align Toolbar content
      * along well-known gridlines.
      */
-    contentInsetStart: ReactPropTypes.number,
+    contentInsetStart: PropTypes.number,
     /**
      * Sets the content inset for the toolbar ending edge.
      *
@@ -144,7 +143,7 @@ var ToolbarAndroid = React.createClass({
      * these components and can be used to effectively align Toolbar content
      * along well-known gridlines.
      */
-    contentInsetEnd: ReactPropTypes.number,
+    contentInsetEnd: PropTypes.number,
     /**
      * Used to set the toolbar direction to RTL.
      * In addition to this property you need to add
@@ -155,11 +154,11 @@ var ToolbarAndroid = React.createClass({
      * `setLayoutDirection(LayoutDirection.RTL)` in your MainActivity
      * `onCreate` method.
      */
-    rtl: ReactPropTypes.bool,
+    rtl: PropTypes.bool,
     /**
      * Used to locate this view in end-to-end tests.
      */
-    testID: ReactPropTypes.string,
+    testID: PropTypes.string,
   },
 
   render: function() {

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 PropTypes = require('prop-types');
 var Touchable = require('Touchable');
 
 type Event = Object;
@@ -42,17 +43,17 @@ var TouchableBounce = React.createClass({
      * When true, indicates that the view is an accessibility element. By default,
      * all the touchable elements are accessible.
      */
-    accessible: React.PropTypes.bool,
+    accessible: PropTypes.bool,
 
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
-    onPressIn: React.PropTypes.func,
+    onPressIn: PropTypes.func,
-    onPressOut: React.PropTypes.func,
+    onPressOut: PropTypes.func,
     // The function passed takes a callback to start the animation which should
     // be run after this onPress handler is done. You can use this (for example)
     // to update UI before starting the animation.
-    onPressWithCompletion: React.PropTypes.func,
+    onPressWithCompletion: PropTypes.func,
     // the function passed is called after the animation is complete
-    onPressAnimationComplete: React.PropTypes.func,
+    onPressAnimationComplete: PropTypes.func,
     /**
      * When the scroll view is disabled, this defines how far your touch may
      * move off of the button, before deactivating the button. Once deactivated,

Libraries/Components/Touchable/TouchableHighlight.js

@@ -16,6 +16,7 @@
 var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+const PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var StyleSheet = require('StyleSheet');
 var TimerMixin = require('react-timer-mixin');
@@ -74,7 +75,7 @@ var TouchableHighlight = React.createClass({
      * Determines what the opacity of the wrapped view should be when touch is
      * active.
      */
-    activeOpacity: React.PropTypes.number,
+    activeOpacity: PropTypes.number,
     /**
      * The color of the underlay that will show through when the touch is
      * active.
@@ -84,17 +85,17 @@ var TouchableHighlight = React.createClass({
     /**
      * Called immediately after the underlay is shown
      */
-    onShowUnderlay: React.PropTypes.func,
+    onShowUnderlay: PropTypes.func,
     /**
      * Called immediately after the underlay is hidden
      */
-    onHideUnderlay: React.PropTypes.func,
+    onHideUnderlay: PropTypes.func,
     /**
      * *(Apple TV only)* TV preferred focus (see documentation for the View component).
      *
      * @platform ios
      */
-    hasTVPreferredFocus: React.PropTypes.bool,
+    hasTVPreferredFocus: PropTypes.bool,
     /**
      * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
      *
@@ -106,7 +107,7 @@ var TouchableHighlight = React.createClass({
      *
      * @platform ios
      */
-    tvParallaxProperties: React.PropTypes.object,
+    tvParallaxProperties: PropTypes.object,
 
   },
 

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -12,6 +12,7 @@
 
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
@@ -20,16 +21,14 @@ var UIManager = require('UIManager');
 var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
 var processColor = require('processColor');
 
-var PropTypes = React.PropTypes;
-
 var rippleBackgroundPropType = PropTypes.shape({
-  type: React.PropTypes.oneOf(['RippleAndroid']),
+  type: PropTypes.oneOf(['RippleAndroid']),
   color: PropTypes.number,
   borderless: PropTypes.bool,
 });
 
 var themeAttributeBackgroundPropType = PropTypes.shape({
-  type: React.PropTypes.oneOf(['ThemeAttrAndroid']),
+  type: PropTypes.oneOf(['ThemeAttrAndroid']),
   attribute: PropTypes.string.isRequired,
 });
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -17,6 +17,7 @@ var Animated = require('Animated');
 var Easing = require('Easing');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
+var PropTypes = require('prop-types');
 var TimerMixin = require('react-timer-mixin');
 var Touchable = require('Touchable');
 var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
@@ -59,12 +60,12 @@ var TouchableOpacity = React.createClass({
      * Determines what the opacity of the wrapped view should be when touch is
      * active. Defaults to 0.2.
      */
-    activeOpacity: React.PropTypes.number,
+    activeOpacity: PropTypes.number,
-    focusedOpacity: React.PropTypes.number,
+    focusedOpacity: PropTypes.number,
     /**
      * Apple TV parallax effects
      */
-    tvParallaxProperties: React.PropTypes.object,
+    tvParallaxProperties: PropTypes.object,
   },
 
   getDefaultProps: function() {

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,6 +13,7 @@
 
 const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const React = require('React');
+const PropTypes = require('prop-types');
 const TimerMixin = require('react-timer-mixin');
 const Touchable = require('Touchable');
 
@@ -40,46 +41,46 @@ const TouchableWithoutFeedback = React.createClass({
   mixins: [TimerMixin, Touchable.Mixin],
 
   propTypes: {
-    accessible: React.PropTypes.bool,
+    accessible: PropTypes.bool,
-    accessibilityComponentType: React.PropTypes.oneOf(
+    accessibilityComponentType: PropTypes.oneOf(
       AccessibilityComponentTypes
     ),
-    accessibilityTraits: React.PropTypes.oneOfType([
+    accessibilityTraits: PropTypes.oneOfType([
-      React.PropTypes.oneOf(AccessibilityTraits),
+      PropTypes.oneOf(AccessibilityTraits),
-      React.PropTypes.arrayOf(React.PropTypes.oneOf(AccessibilityTraits)),
+      PropTypes.arrayOf(PropTypes.oneOf(AccessibilityTraits)),
     ]),
     /**
      * If true, disable all interactions for this component.
      */
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
      * Called when the touch is released, but not if cancelled (e.g. by a scroll
      * that steals the responder lock).
      */
-    onPress: React.PropTypes.func,
+    onPress: PropTypes.func,
-    onPressIn: React.PropTypes.func,
+    onPressIn: PropTypes.func,
-    onPressOut: React.PropTypes.func,
+    onPressOut: PropTypes.func,
     /**
      * Invoked on mount and layout changes with
      *
      *   `{nativeEvent: {layout: {x, y, width, height}}}`
      */
-    onLayout: React.PropTypes.func,
+    onLayout: PropTypes.func,
 
-    onLongPress: React.PropTypes.func,
+    onLongPress: PropTypes.func,
 
     /**
      * Delay in ms, from the start of the touch, before onPressIn is called.
      */
-    delayPressIn: React.PropTypes.number,
+    delayPressIn: PropTypes.number,
     /**
      * Delay in ms, from the release of the touch, before onPressOut is called.
      */
-    delayPressOut: React.PropTypes.number,
+    delayPressOut: PropTypes.number,
     /**
      * Delay in ms, from onPressIn, before onLongPress is called.
      */
-    delayLongPress: React.PropTypes.number,
+    delayLongPress: PropTypes.number,
     /**
      * When the scroll view is disabled, this defines how far your touch may
      * move off of the button, before deactivating the button. Once deactivated,

Libraries/Components/View/View.js

@@ -15,6 +15,7 @@ const NativeMethodsMixin = require('NativeMethodsMixin');
 const NativeModules = require('NativeModules');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNativeFeatureFlags = require('ReactNativeFeatureFlags');
 const ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
@@ -112,7 +113,7 @@ const View = React.createClass({
   },
 
   contextTypes: {
-    isInAParentText: React.PropTypes.bool,
+    isInAParentText: PropTypes.bool,
   },
 
   render: function() {

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -12,15 +12,14 @@
 'use strict';
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var UIManager = require('UIManager');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 
 var dismissKeyboard = require('dismissKeyboard');
 var requireNativeComponent = require('requireNativeComponent');
 
-var ReactPropTypes = React.PropTypes;
-
 var VIEWPAGER_REF = 'viewPager';
 
 type Event = Object;

Libraries/Components/WebView/WebView.android.js

@@ -13,20 +13,18 @@
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var ActivityIndicator = require('ActivityIndicator');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
-
+var ViewPropTypes = require('ViewPropTypes');
-const ViewPropTypes = require('ViewPropTypes');
 
 var deprecatedPropType = require('deprecatedPropType');
 var keyMirror = require('fbjs/lib/keyMirror');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
-
 var RCT_WEBVIEW_REF = 'webview';
 
 var WebViewState = keyMirror({

Libraries/Components/WebView/WebView.ios.js

@@ -14,12 +14,13 @@
 var ActivityIndicator = require('ActivityIndicator');
 var EdgeInsetsPropType = require('EdgeInsetsPropType');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var UIManager = require('UIManager');
 var View = require('View');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ScrollView = require('ScrollView');
 
 var deprecatedPropType = require('deprecatedPropType');
@@ -29,7 +30,6 @@ var processDecelerationRate = require('processDecelerationRate');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
 var RCTWebViewManager = require('NativeModules').WebViewManager;
 
 var BGWASH = 'rgba(255,255,255,0.8)';

Libraries/Experimental/Incremental.js

@@ -14,6 +14,8 @@
 const InteractionManager = require('InteractionManager');
 const React = require('React');
 
+const PropTypes = require('prop-types');
+
 const infoLog = require('infoLog');
 
 const DEBUG = false;
@@ -110,8 +112,8 @@ class Incremental extends React.Component<DefaultProps, Props, State> {
   };
 
   static contextTypes = {
-    incrementalGroup: React.PropTypes.object,
+    incrementalGroup: PropTypes.object,
-    incrementalGroupEnabled: React.PropTypes.bool,
+    incrementalGroupEnabled: PropTypes.bool,
   };
 
   constructor(props: Props, context: Context) {

Libraries/Experimental/IncrementalGroup.js

@@ -14,6 +14,8 @@
 const Incremental = require('Incremental');
 const React = require('React');
 
+const PropTypes = require('prop-types');
+
 const infoLog = require('infoLog');
 
 let _groupCounter = -1;
@@ -75,8 +77,8 @@ class IncrementalGroup extends React.Component {
   }
 }
 IncrementalGroup.contextTypes = {
-  incrementalGroup: React.PropTypes.object,
+  incrementalGroup: PropTypes.object,
-  incrementalGroupEnabled: React.PropTypes.bool,
+  incrementalGroupEnabled: PropTypes.bool,
 };
 IncrementalGroup.childContextTypes = IncrementalGroup.contextTypes;
 

Libraries/Experimental/IncrementalPresenter.js

@@ -13,6 +13,7 @@
 
 const IncrementalGroup = require('IncrementalGroup');
 const React = require('React');
+const PropTypes = require('prop-types');
 const View = require('View');
 
 const ViewPropTypes = require('ViewPropTypes');
@@ -45,15 +46,15 @@ class IncrementalPresenter extends React.Component {
   _isDone: boolean;
 
   static propTypes = {
-    name: React.PropTypes.string,
+    name: PropTypes.string,
-    disabled: React.PropTypes.bool,
+    disabled: PropTypes.bool,
-    onDone: React.PropTypes.func,
+    onDone: PropTypes.func,
-    onLayout: React.PropTypes.func,
+    onLayout: PropTypes.func,
     style: ViewPropTypes.style,
   };
   static contextTypes = {
-    incrementalGroup: React.PropTypes.object,
+    incrementalGroup: PropTypes.object,
-    incrementalGroupEnabled: React.PropTypes.bool,
+    incrementalGroupEnabled: PropTypes.bool,
   };
 
   constructor(props: Props, context: Context) {

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -13,14 +13,13 @@
 
 const Image = require('Image');
 const React = require('React');
+const PropTypes = require('prop-types');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 
 const ViewPropTypes = require('ViewPropTypes');
 
-const {PropTypes} = React;
-
 import type {ImageSource} from 'ImageSource';
 
 /**

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -15,12 +15,11 @@ const Animated = require('Animated');
 const I18nManager = require('I18nManager');
 const PanResponder = require('PanResponder');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const TimerMixin = require('react-timer-mixin');
 const View = require('View');
 
-const {PropTypes} = React;
-
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
 const IS_RTL = I18nManager.isRTL;

Libraries/Image/Image.android.js

@@ -17,12 +17,13 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
 var NativeModules = require('NativeModules');
 var PropTypes = require('react/lib/ReactPropTypes');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Set = require('Set');
 var StyleSheet = require('StyleSheet');
 var StyleSheetPropType = require('StyleSheetPropType');
 var View = require('View');
-const ViewPropTypes = require('ViewPropTypes');
+var ViewPropTypes = require('ViewPropTypes');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
 var filterObject = require('fbjs/lib/filterObject');
@@ -31,7 +32,6 @@ var merge = require('merge');
 var requireNativeComponent = require('requireNativeComponent');
 var resolveAssetSource = require('resolveAssetSource');
 
-var PropTypes = React.PropTypes;
 var {
   ImageLoader,
 } = NativeModules;
@@ -276,7 +276,7 @@ var Image = React.createClass({
   },
 
   contextTypes: {
-    isInAParentText: React.PropTypes.bool
+    isInAParentText: PropTypes.bool
   },
 
   render: function() {

Libraries/Image/Image.ios.js

@@ -18,6 +18,7 @@ const ImageStylePropTypes = require('ImageStylePropTypes');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const NativeModules = require('NativeModules');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheet = require('StyleSheet');
 const StyleSheetPropType = require('StyleSheetPropType');
@@ -26,8 +27,6 @@ const flattenStyle = require('flattenStyle');
 const requireNativeComponent = require('requireNativeComponent');
 const resolveAssetSource = require('resolveAssetSource');
 
-const PropTypes = React.PropTypes;
-
 const ImageViewManager = NativeModules.ImageViewManager;
 
 /**

Libraries/Inspector/ElementProperties.js

@@ -13,6 +13,7 @@
 
 const BoxInspector = require('BoxInspector');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleInspector = require('StyleInspector');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
@@ -24,8 +25,6 @@ const flattenStyle = require('flattenStyle');
 const mapWithSeparator = require('mapWithSeparator');
 const openFileInEditor = require('openFileInEditor');
 
-const PropTypes = React.PropTypes;
-
 class ElementProperties extends React.Component {
   props: {
     hierarchy: Array<$FlowFixMe>,

Libraries/Inspector/InspectorOverlay.js

@@ -14,13 +14,12 @@
 var Dimensions = require('Dimensions');
 var InspectorUtils = require('InspectorUtils');
 var React = require('React');
+var PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var UIManager = require('UIManager');
 var View = require('View');
 var ElementBox = require('ElementBox');
 
-var PropTypes = React.PropTypes;
-
 type EventLike = {
   nativeEvent: Object,
 };

Libraries/Inspector/InspectorPanel.js

@@ -15,14 +15,13 @@ const ElementProperties = require('ElementProperties');
 const NetworkOverlay = require('NetworkOverlay');
 const PerformanceOverlay = require('PerformanceOverlay');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ScrollView = require('ScrollView');
 const StyleSheet = require('StyleSheet');
 const Text = require('Text');
 const TouchableHighlight = require('TouchableHighlight');
 const View = require('View');
 
-const PropTypes = React.PropTypes;
-
 class InspectorPanel extends React.Component {
   renderWaiting() {
     if (this.props.inspecting) {

Libraries/Lists/ListView/ListView.js

@@ -14,6 +14,7 @@
 var ListViewDataSource = require('ListViewDataSource');
 var Platform = require('Platform');
 var React = require('React');
+var PropTypes = require('prop-types');
 var ReactNative = require('ReactNative');
 var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
 var ScrollView = require('ScrollView');
@@ -26,8 +27,6 @@ var cloneReferencedElement = require('react-clone-referenced-element');
 var isEmpty = require('isEmpty');
 var merge = require('merge');
 
-var PropTypes = React.PropTypes;
-
 var DEFAULT_PAGE_SIZE = 1;
 var DEFAULT_INITIAL_ROWS = 10;
 var DEFAULT_SCROLL_RENDER_AHEAD = 1000;
@@ -181,12 +180,12 @@ var 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.isRequired,
+    scrollRenderAheadDistance: PropTypes.number.isRequired,
     /**
      * (visibleRows, changedRows) => void
      *
@@ -196,13 +195,13 @@ var 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,
     /**
      * Makes the sections headers sticky. The sticky behavior means that it
      * will scroll with the content at the top of the section until it reaches
@@ -211,7 +210,7 @@ var ListView = React.createClass({
      * not supported in conjunction with `horizontal={true}`. Only enabled by
      * default on iOS because of typical platform standards.
      */
-    stickySectionHeadersEnabled: React.PropTypes.bool,
+    stickySectionHeadersEnabled: PropTypes.bool,
     /**
      * An array of child indices determining which children get docked to the
      * top of the screen when scrolling. For example, passing

Libraries/Modal/Modal.js

@@ -15,6 +15,7 @@ const AppContainer = require('AppContainer');
 const I18nManager = require('I18nManager');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
 
@@ -22,8 +23,6 @@ const deprecatedPropType = require('deprecatedPropType');
 const requireNativeComponent = require('requireNativeComponent');
 const RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
 
-const PropTypes = React.PropTypes;
-
 /**
  * The Modal component is a simple way to present content above an enclosing view.
  *
@@ -137,7 +136,7 @@ class Modal extends React.Component {
   };
 
   static contextTypes = {
-    rootTag: React.PropTypes.number,
+    rootTag: PropTypes.number,
   };
 
   render(): ?React.Element<any> {

Libraries/RCTTest/SnapshotViewIOS.ios.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var React = require('React');
+const PropTypes = require('prop-types');
 var StyleSheet = require('StyleSheet');
 var { TestModule } = require('NativeModules');
 var UIManager = require('UIManager');
@@ -31,9 +32,9 @@ class SnapshotViewIOS extends React.Component {
   static propTypes = {
     ...ViewPropTypes,
     // A callback when the Snapshot view is ready to be compared
-    onSnapshotReady : React.PropTypes.func,
+    onSnapshotReady : PropTypes.func,
     // A name to identify the individual instance to the SnapshotView
-    testIdentifier : React.PropTypes.string,
+    testIdentifier : PropTypes.string,
   };
 
   onDefaultAction = (event: Object) => {

Libraries/Renderer/src/renderers/native/__tests__/ReactNativeEvents-test.js

@@ -97,7 +97,7 @@ it('handles events on text nodes', () => {
   });
 
   class ContextHack extends React.Component {
-    static childContextTypes = {isInAParentText: React.PropTypes.bool};
+    static childContextTypes = {isInAParentText: PropTypes.bool};
     getChildContext() {
       return {isInAParentText: true};
     }

Libraries/Renderer/src/renderers/shared/fiber/__tests__/ReactIncrementalErrorHandling-test.js

@@ -679,8 +679,8 @@ describe('ReactIncrementalErrorHandling', () => {
 
   it('unwinds the context stack correctly on error', () => {
     class Provider extends React.Component {
-      static childContextTypes = {message: React.PropTypes.string};
+      static childContextTypes = {message: PropTypes.string};
-      static contextTypes = {message: React.PropTypes.string};
+      static contextTypes = {message: PropTypes.string};
       getChildContext() {
         return {
           message: (this.context.message || '') + this.props.message,
@@ -696,7 +696,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     Connector.contextTypes = {
-      message: React.PropTypes.string,
+      message: PropTypes.string,
     };
 
     function BadRender() {

Libraries/Text/Text.js

@@ -16,6 +16,7 @@ const EdgeInsetsPropType = require('EdgeInsetsPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const Platform = require('Platform');
 const React = require('React');
+const PropTypes = require('prop-types');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheetPropType = require('StyleSheetPropType');
 const TextStylePropTypes = require('TextStylePropTypes');
@@ -25,8 +26,6 @@ const createReactNativeComponentClass = require('createReactNativeComponentClass
 const mergeFast = require('mergeFast');
 const processColor = require('processColor');
 
-const { PropTypes } = React;
-
 const stylePropType = StyleSheetPropType(TextStylePropTypes);
 
 const viewConfig = {

local-cli/templates/HelloNavigation/components/KeyboardSpacer.js

@@ -2,7 +2,8 @@
 
 /* @flow */
 
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
   Platform,
   View,

website/core/Header.js

@@ -12,11 +12,13 @@
 
 var React = require('React');
 
+var PropTypes = require('prop-types');
+
 var slugify = require('slugify');
 
 var Header = React.createClass({
   contextTypes: {
-    permalink: React.PropTypes.string
+    permalink: PropTypes.string
   },
 
   render: function() {

website/core/HeaderWithGithub.js

@@ -13,6 +13,8 @@
 var H = require('Header');
 var React = require('React');
 
+var PropTypes = require('prop-types');
+
 function getGitHubPath(path) {
   return  'https://github.com/facebook/react-native/blob/master/' + path;
 }
@@ -20,7 +22,7 @@ function getGitHubPath(path) {
 var HeaderWithGithub = React.createClass({
 
   contextTypes: {
-    version: React.PropTypes.string
+    version: PropTypes.string
   },
 
   render: function() {

website/core/SnackPlayer.js

@@ -13,6 +13,8 @@
 var Prism = require('Prism');
 var React = require('React');
 
+const PropTypes = require('prop-types');
+
 const LatestSDKVersion = '15.0.0';
 var ReactNativeToExpoSDKVersionMap = {
   '0.42': '15.0.0',
@@ -39,7 +41,7 @@ var ReactNativeToExpoSDKVersionMap = {
  */
 var SnackPlayer = React.createClass({
   contextTypes: {
-    version: React.PropTypes.number.isRequired,
+    version: PropTypes.number.isRequired,
   },
 
   componentDidMount() {

website/layout/AutodocsLayout.js

@@ -19,6 +19,7 @@ var Marked = require('Marked');
 var Metadata = require('Metadata');
 var Prism = require('Prism');
 var React = require('React');
+const PropTypes = require('prop-types');
 var Site = require('Site');
 
 var slugify = require('slugify');
@@ -836,8 +837,8 @@ var Modal = React.createClass({
 
 var Autodocs = React.createClass({
   childContextTypes: {
-    permalink: React.PropTypes.string,
+    permalink: PropTypes.string,
-    version: React.PropTypes.string
+    version: PropTypes.string
   },
 
   getChildContext: function() {

website/layout/DocsLayout.js

@@ -16,12 +16,13 @@ var Header = require('Header');
 var Marked = require('Marked');
 var Metadata = require('Metadata');
 var React = require('React');
+var PropTypes = require('prop-types');
 var Site = require('Site');
 
 var DocsLayout = React.createClass({
   childContextTypes: {
-    permalink: React.PropTypes.string,
+    permalink: PropTypes.string,
-    version: React.PropTypes.string
+    version: PropTypes.string
   },
 
   getChildContext: function() {

website/layout/PageLayout.js

@@ -12,11 +12,12 @@
 
 var Marked = require('Marked');
 var React = require('React');
+var PropTypes = require('prop-types');
 var Site = require('Site');
 
 var support = React.createClass({
   childContextTypes: {
-    permalink: React.PropTypes.string
+    permalink: PropTypes.string
   },
 
   getChildContext: function() {

website/src/react-native/support.js

@@ -9,11 +9,12 @@
 'use strict';
 
 var React = require('React');
+var PropTypes = require('prop-types');
 var Site = require('Site');
 
 var support = React.createClass({
   childContextTypes: {
-    permalink: React.PropTypes.string
+    permalink: PropTypes.string
   },
 
   getChildContext: function() {