Ran rename-unsafe-lifecycles codemod on xplat/js

Reviewed By: trueadm

Differential Revision: D6889214

fbshipit-source-id: e815cda4b09f3650ae3b0b9a44ae6f5fcb48fe25

IntegrationTests/ReactContentSizeUpdateTest.js

@@ -30,7 +30,7 @@ var ReactContentSizeUpdateTest = createReactClass({
   mixins: [Subscribable.Mixin,
            TimerMixin],
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this.addListenerOn(
       RCTNativeAppEventEmitter,
       'rootViewDidChangeIntrinsicSize',

IntegrationTests/SizeFlexibilityUpdateTest.js

@@ -27,7 +27,7 @@ var SizeFlexibilityUpdateTest = createReactClass({
   displayName: 'SizeFlexibilityUpdateTest',
   mixins: [Subscribable.Mixin],
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this.addListenerOn(
       RCTNativeAppEventEmitter,
       'rootViewDidChangeIntrinsicSize',

Libraries/Animated/src/__tests__/Animated-test.js

@@ -94,11 +94,11 @@ describe('Animated tests', () => {
           opacity: anim,
         },
       };
-      c.componentWillMount();
+      c.UNSAFE_componentWillMount();
 
       expect(anim.__detach).not.toBeCalled();
       c._component = {};
-      c.componentWillReceiveProps({
+      c.UNSAFE_componentWillReceiveProps({
         style: {
           opacity: anim,
         },
@@ -120,7 +120,7 @@ describe('Animated tests', () => {
           opacity: anim,
         },
       };
-      c.componentWillMount();
+      c.UNSAFE_componentWillMount();
 
       Animated.timing(anim, {toValue: 10, duration: 1000}).start(callback);
       c._component = {};

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -29,7 +29,7 @@ const NativeAnimatedHelper = require('NativeAnimatedHelper');
 function createAndMountComponent(ComponentClass, props) {
   const component = new ComponentClass();
   component.props = props;
-  component.componentWillMount();
+  component.UNSAFE_componentWillMount();
   // Simulate that refs were set.
   component._component = {};
   component.componentDidMount();

Libraries/Animated/src/createAnimatedComponent.js

@@ -42,7 +42,7 @@ function createAnimatedComponent(Component: any): any {
       this._component.setNativeProps(props);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
       this._attachProps(this.props);
     }
 
@@ -127,7 +127,7 @@ function createAnimatedComponent(Component: any): any {
       oldPropsAnimated && oldPropsAnimated.__detach();
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
       this._attachProps(newProps);
     }
 

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -133,7 +133,7 @@ const KeyboardAvoidingView = createReactClass({
     this.frame = event.nativeEvent.layout;
   },
 
-  componentWillUpdate(nextProps: Object, nextState: Object, nextContext?: Object): void {
+  UNSAFE_componentWillUpdate(nextProps: Object, nextState: Object, nextContext?: Object): void {
     if (nextState.bottom === this.state.bottom &&
         this.props.behavior === 'height' &&
         nextProps.behavior === 'height') {
@@ -143,7 +143,7 @@ const KeyboardAvoidingView = createReactClass({
     }
   },
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (Platform.OS === 'ios') {
       this.subscriptions = [
         Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange),

Libraries/Components/LazyRenderer.js

@@ -23,7 +23,7 @@ var LazyRenderer = createReactClass({
     render: PropTypes.func.isRequired,
   },
 
-  componentWillMount: function(): void {
+  UNSAFE_componentWillMount: function(): void {
     this.setState({
       _lazyRender : true,
     });

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -515,7 +515,7 @@ var NavigatorIOS = createReactClass({
 
   navigator: (undefined: ?Object),
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     // Precompute a pack of callbacks that's frequently generated and passed to
     // instances.
     this.navigator = {

Libraries/Components/Picker/PickerAndroid.android.js

@@ -66,7 +66,7 @@ class PickerAndroid extends React.Component<{
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setState(this._stateFromProps(nextProps));
   }
 

Libraries/Components/Picker/PickerIOS.ios.js

@@ -41,7 +41,7 @@ var PickerIOS = createReactClass({
     return this._stateFromProps(this.props);
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  UNSAFE_componentWillReceiveProps: function(nextProps) {
     this.setState(this._stateFromProps(nextProps));
   },
 

Libraries/Components/ScrollResponder.js

@@ -548,7 +548,7 @@ const ScrollResponderMixin = {
    *
    * The `keyboardWillShow` is called before input focus.
    */
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     const {keyboardShouldPersistTaps} = this.props;
     warning(
       typeof keyboardShouldPersistTaps !== 'boolean',

Libraries/Components/ScrollView/ScrollView.js

@@ -510,7 +510,7 @@ const ScrollView = createReactClass({
     };
   },
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._scrollAnimatedValue = new Animated.Value(this.props.contentOffset ? this.props.contentOffset.y : 0);
     this._scrollAnimatedValue.setOffset(this.props.contentInset ? this.props.contentInset.top : 0);
     this._stickyHeaderRefs = new Map();

Libraries/Components/Subscribable.js

@@ -25,7 +25,7 @@ var Subscribable = {};
 
 Subscribable.Mixin = {
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._subscribableSubscriptions = [];
   },
 

Libraries/Components/TabBarIOS/TabBarItemIOS.ios.js

@@ -102,13 +102,13 @@ class TabBarItemIOS extends React.Component {
     hasBeenSelected: false,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.selected) {
       this.setState({hasBeenSelected: true});
     }
   }
 
-  componentWillReceiveProps(nextProps: { selected?: boolean }) {
+  UNSAFE_componentWillReceiveProps(nextProps: { selected?: boolean }) {
     if (this.state.hasBeenSelected || nextProps.selected) {
       this.setState({hasBeenSelected: true});
     }

Libraries/Components/Touchable/TouchableHighlight.js

@@ -203,7 +203,7 @@ const TouchableHighlight = createReactClass({
     clearTimeout(this._hideTimeout);
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  UNSAFE_componentWillReceiveProps: function(nextProps) {
     ensurePositiveDelayProps(nextProps);
   },
 

Libraries/Components/Touchable/TouchableNativeFeedback.android.js

@@ -147,7 +147,7 @@ var TouchableNativeFeedback = createReactClass({
     ensurePositiveDelayProps(this.props);
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  UNSAFE_componentWillReceiveProps: function(nextProps) {
     ensurePositiveDelayProps(nextProps);
   },
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -158,7 +158,7 @@ var TouchableOpacity = createReactClass({
     ensurePositiveDelayProps(this.props);
   },
 
-  componentWillReceiveProps: function(nextProps) {
+  UNSAFE_componentWillReceiveProps: function(nextProps) {
     ensurePositiveDelayProps(nextProps);
   },
 

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -122,7 +122,7 @@ const TouchableWithoutFeedback = createReactClass({
     ensurePositiveDelayProps(this.props);
   },
 
-  componentWillReceiveProps: function(nextProps: Object) {
+  UNSAFE_componentWillReceiveProps: function(nextProps: Object) {
     ensurePositiveDelayProps(nextProps);
   },
 

Libraries/Components/WebView/WebView.android.js

@@ -247,7 +247,7 @@ class WebView extends React.Component {
     startInLoadingState: true,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.startInLoadingState) {
       this.setState({viewState: WebViewState.LOADING});
     }

Libraries/Components/WebView/WebView.ios.js

@@ -410,7 +410,7 @@ class WebView extends React.Component {
     startInLoadingState: true,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.startInLoadingState) {
       this.setState({viewState: WebViewState.LOADING});
     }

Libraries/Experimental/Incremental.js

@@ -129,7 +129,7 @@ class Incremental extends React.Component<Props, State> {
     return ctx.groupId + ':' + this._incrementId + '-' + this.props.name;
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const ctx = this.context.incrementalGroup;
     if (!ctx) {
       return;

Libraries/Experimental/IncrementalGroup.js

@@ -37,7 +37,7 @@ import type {Props, Context} from 'Incremental';
 class IncrementalGroup extends React.Component<Props & {disabled?: boolean}> {
   context: Context;
   _groupInc: string;
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._groupInc = `g${++_groupCounter}-`;
     DEBUG && infoLog(
       'create IncrementalGroup with id ' + this.getGroupId()

Libraries/Experimental/SwipeableRow/SwipeableListView.js

@@ -105,7 +105,7 @@ class SwipeableListView extends React.Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props): void {
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void {
     if (this.state.dataSource.getDataSource() !== nextProps.dataSource.getDataSource()) {
       this.setState({
         dataSource: nextProps.dataSource,

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -125,7 +125,7 @@ const SwipeableRow = createReactClass({
     };
   },
 
-  componentWillMount(): void {
+  UNSAFE_componentWillMount(): void {
     this._panResponder = PanResponder.create({
       onMoveShouldSetPanResponderCapture: this._handleMoveShouldSetPanResponderCapture,
       onPanResponderGrant: this._handlePanResponderGrant,
@@ -149,7 +149,7 @@ const SwipeableRow = createReactClass({
     }
   },
 
-  componentWillReceiveProps(nextProps: Object): void {
+  UNSAFE_componentWillReceiveProps(nextProps: Object): void {
     /**
      * We do not need an "animateOpen(noCallback)" because this animation is
      * handled internally by this component.

Libraries/Experimental/WindowedListView.js

@@ -243,7 +243,7 @@ class WindowedListView extends React.Component<Props, State> {
     DEBUG && infoLog('  knope');
     return false;
   }
-  componentWillReceiveProps() {
+  UNSAFE_componentWillReceiveProps() {
     this._computeRowsToRenderBatcher.schedule();
   }
   _onMomentumScrollEnd = (e: Object) => {
@@ -624,7 +624,7 @@ class CellRenderer extends React.Component<CellProps> {
   _perfUpdateID: number = 0;
   _asyncCookie: any;
   _includeInLayoutLatch: boolean = false;
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (this.props.asyncRowPerfEventName) {
       this._perfUpdateID = g_perf_update_id++;
       this._asyncCookie = Systrace.beginAsyncEvent(
@@ -694,7 +694,7 @@ class CellRenderer extends React.Component<CellProps> {
     this.props.onProgressChange({rowKey: this.props.rowKey, inProgress: false});
     this.props.onWillUnmount(this.props.rowKey);
   }
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.includeInLayout && !this.props.includeInLayout) {
       invariant(this._offscreenRenderDone, 'Should never try to add to layout before render done');
       this._includeInLayoutLatch = true; // Once we render in layout, make sure it sticks.

Libraries/Inspector/Inspector.js

@@ -92,7 +92,7 @@ class Inspector extends React.Component<{
     hook.off('react-devtools', this.attachToDevtools);
   }
 
-  componentWillReceiveProps(newProps: Object) {
+  UNSAFE_componentWillReceiveProps(newProps: Object) {
     this.setState({inspectedViewTag: newProps.inspectedViewTag});
   }
 

Libraries/Lists/FlatList.js

@@ -423,11 +423,11 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._checkProps(this.props);
   }
 
-  componentWillReceiveProps(nextProps: Props<ItemT>) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props<ItemT>) {
     invariant(
       nextProps.numColumns === this.props.numColumns,
       'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +

Libraries/Lists/ListView/ListView.js

@@ -354,7 +354,7 @@ var ListView = createReactClass({
     return this._scrollComponent.getInnerViewNode();
   },
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     // this data should never trigger a render pass, so don't put in state
     this.scrollProperties = {
       visibleLength: null,
@@ -375,7 +375,7 @@ var ListView = createReactClass({
     });
   },
 
-  componentWillReceiveProps: function(nextProps: Object) {
+  UNSAFE_componentWillReceiveProps: function(nextProps: Object) {
     if (
       this.props.dataSource !== nextProps.dataSource ||
       this.props.initialListSize !== nextProps.initialListSize

Libraries/Lists/MetroListView.js

@@ -135,7 +135,7 @@ class MetroListView extends React.Component<Props, $FlowFixMeState> {
     }),
     sectionHeaderData: {},
   });
-  componentWillReceiveProps(newProps: Props) {
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     this.setState(state => this._computeState(newProps, state));
   }
   render() {

Libraries/Lists/VirtualizedList.js

@@ -611,7 +611,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
     this._fillRateHelper.deactivateAndFlush();
   }
 
-  componentWillReceiveProps(newProps: Props) {
+  UNSAFE_componentWillReceiveProps(newProps: Props) {
     const {data, extraData, getItemCount, maxToRenderPerBatch} = newProps;
     // first and last could be stale (e.g. if a new, shorter items props is passed in), so we make
     // sure we're rendering a reasonable range here.

Libraries/Lists/VirtualizedSectionList.js

@@ -361,7 +361,7 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
     this.state = this._computeState(props);
   }
 
-  componentWillReceiveProps(nextProps: Props<SectionT>) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props<SectionT>) {
     this.setState(this._computeState(nextProps));
   }
 
@@ -446,7 +446,7 @@ class ItemWithSeparator extends React.Component<
     },
   };
 
-  componentWillReceiveProps(props: ItemWithSeparatorProps) {
+  UNSAFE_componentWillReceiveProps(props: ItemWithSeparatorProps) {
     this.setState(state => ({
       separatorProps: {
         ...this.state.separatorProps,

Libraries/Modal/Modal.js

@@ -151,7 +151,7 @@ class Modal extends React.Component<Object> {
     }
   }
 
-  componentWillReceiveProps(nextProps: Object) {
+  UNSAFE_componentWillReceiveProps(nextProps: Object) {
     Modal._confirmProps(nextProps);
   }
 

RNTester/js/AnimatedGratuitousApp/AnExSet.js

@@ -75,7 +75,7 @@ class AnExSet extends React.Component<Object, any> {
     );
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.state.dismissY = new Animated.Value(0);
     this.state.dismissResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => this.props.isActive,

RNTester/js/AnimatedGratuitousApp/AnExTilt.js

@@ -77,7 +77,7 @@ class AnExTilt extends React.Component<Object, any> {
     }).start();
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._startBurnsZoom();
   }
 

RNTester/js/CameraRollView.js

@@ -126,7 +126,7 @@ var CameraRollView = createReactClass({
     this.fetch();
   },
 
-  componentWillReceiveProps: function(nextProps: {groupTypes?: string}) {
+  UNSAFE_componentWillReceiveProps: function(nextProps: {groupTypes?: string}) {
     if (this.props.groupTypes !== nextProps.groupTypes) {
       this.fetch(true);
     }

RNTester/js/ImageExample.js

@@ -43,7 +43,7 @@ var NetworkImageCallbackExample = createReactClass({
     };
   },
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.setState({mountTime: new Date()});
   },
 

RNTester/js/LayoutAnimationExample.js

@@ -26,7 +26,7 @@ class AddRemoveExample extends React.Component<{}, $FlowFixMeState> {
     views: [],
   };
 
-  componentWillUpdate() {
+  UNSAFE_componentWillUpdate() {
     LayoutAnimation.easeInEaseOut();
   }
 

RNTester/js/ListViewExample.js

@@ -41,7 +41,7 @@ var ListViewSimpleExample = createReactClass({
 
   _pressData: ({}: {[key: number]: boolean}),
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._pressData = {};
   },
 

RNTester/js/ListViewGridLayoutExample.js

@@ -55,7 +55,7 @@ var ListViewGridLayoutExample = createReactClass({
 
   _pressData: ({}: {[key: number]: boolean}),
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._pressData = {};
   },
 

RNTester/js/ListViewPagingExample.js

@@ -46,7 +46,7 @@ var NUM_SECTIONS = 100;
 var NUM_ROWS_PER_SECTION = 10;
 
 class Thumb extends React.Component<{}, $FlowFixMeState> {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     UIManager.setLayoutAnimationEnabledExperimental &&
       UIManager.setLayoutAnimationEnabledExperimental(true);
   }

RNTester/js/PanResponderExample.js

@@ -36,7 +36,7 @@ var PanResponderExample = createReactClass({
   _circleStyles: {},
   circle: (null : ?{ setNativeProps(props: Object): void }),
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._panResponder = PanResponder.create({
       onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder,
       onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,

RNTester/js/PushNotificationIOSExample.js

@@ -38,7 +38,7 @@ class Button extends React.Component<$FlowFixMeProps> {
 }
 
 class NotificationExample extends React.Component<{}> {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     PushNotificationIOS.addEventListener('register', this._onRegistered);
     PushNotificationIOS.addEventListener('registrationError', this._onRegistrationError);
     PushNotificationIOS.addEventListener('notification', this._onRemoteNotification);

RNTester/js/RNTesterApp.android.js

@@ -57,7 +57,7 @@ const HEADER_NAV_ICON = nativeImageSource({
 });
 
 class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     BackHandler.addEventListener('hardwareBackPress', this._handleBackButtonPress);
   }
 

RNTester/js/RNTesterApp.ios.js

@@ -57,7 +57,7 @@ const Header = ({ onBack, title }: { onBack?: () => mixed, title: string }) => (
 );
 
 class RNTesterApp extends React.Component<Props, RNTesterNavigationState> {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     BackHandler.addEventListener('hardwareBackPress', this._handleBack);
   }
 

RNTester/js/RNTesterSettingSwitchRow.js

@@ -19,7 +19,7 @@ const RNTesterStatePersister = require('./RNTesterStatePersister');
 const View = require('View');
 
 class RNTesterSettingSwitchRow extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     const {onEnable, onDisable, persister} = this.props;
     if (newProps.persister.state !== persister.state) {
       newProps.persister.state ? onEnable() : onDisable();

RNTester/js/SwipeableListViewExample.js

@@ -42,7 +42,7 @@ var SwipeableListViewSimpleExample = createReactClass({
 
   _pressData: ({}: {[key: number]: boolean}),
 
-  componentWillMount: function() {
+  UNSAFE_componentWillMount: function() {
     this._pressData = {};
   },
 

RNTester/js/TextInputExample.android.js

@@ -334,7 +334,7 @@ class AutogrowingTextInputExample extends React.Component<{}> {
     };
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState({
       multiline: props.multiline,
     });

RNTester/js/TextInputExample.ios.js

@@ -352,7 +352,7 @@ class AutogrowingTextInputExample extends React.Component<$FlowFixMeProps, $Flow
     };
   }
 
-  componentWillReceiveProps(props) {
+  UNSAFE_componentWillReceiveProps(props) {
     this.setState({
       multiline: props.multiline,
     });

ReactAndroid/src/androidTest/js/JSResponderTestApp.js

@@ -22,7 +22,7 @@ class JSResponderTestApp extends React.Component {
     return Math.abs(gestureState.dx) > 30;
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.panGesture = PanResponder.create({
       onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder,
     });

ReactAndroid/src/androidTest/js/PickerAndroidTestModule.js

@@ -28,7 +28,7 @@ class PickerAndroidTestApp extends React.Component {
     style: {},
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     appInstance = this;
   }
 

ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js

@@ -267,7 +267,7 @@ var appInstance = null;
 class SubviewsClippingTestApp extends React.Component {
   state = {};
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     appInstance = this;
   }
 

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

@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
 'use strict';
 
 /* @flow */
@@ -58,7 +67,7 @@ class KeyboardSpacerIOS extends Component<Props, State> {
     keyboardHeight: 0,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._registerEvents();
   }
 

package.json

@@ -143,7 +143,7 @@
     "react-native": "local-cli/wrong-react-native.js"
   },
   "peerDependencies": {
-    "react": "16.2.0"
+    "react": "^16.3.0-alpha.0"
   },
   "dependencies": {
     "absolute-path": "^0.0.0",
@@ -219,8 +219,8 @@
     "jest": "22.2.1",
     "jest-junit": "3.5.0",
     "prettier": "1.9.1",
-    "react": "16.2.0",
-    "react-test-renderer": "16.2.0",
+    "react": "^16.3.0-alpha.0",
+    "react-test-renderer": "^16.3.0-alpha.0",
     "shelljs": "^0.7.8",
     "sinon": "^2.2.0"
   }