microsoft · berickson1 · Aug 22, 2019 · Aug 9, 2019 · Aug 9, 2019 · Aug 9, 2019
diff --git a/extensions/navigation/src/web/Navigator.tsx b/extensions/navigation/src/web/Navigator.tsx
@@ -155,7 +155,7 @@ export class NavigatorImpl extends NavigatorBase<NavigatorState> {
         };
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this.springSystem = new rebound.SpringSystem();
         this.spring = this.springSystem.createSpring();
         this.spring.setRestSpeedThreshold(0.05);

diff --git a/extensions/virtuallistview/src/VirtualListCell.tsx b/extensions/virtuallistview/src/VirtualListCell.tsx
@@ -171,7 +171,7 @@ export class VirtualListCell<ItemInfo extends VirtualListCellInfo> extends RX.Co
         });
     }
 
-    componentWillReceiveProps(nextProps: VirtualListCellProps<ItemInfo>) {
+    UNSAFE_componentWillReceiveProps(nextProps: VirtualListCellProps<ItemInfo>) {
         // If it's inactive, it had better be invisible.
         assert(nextProps.isActive || !nextProps.isVisible);
 

diff --git a/extensions/virtuallistview/src/VirtualListView.tsx b/extensions/virtuallistview/src/VirtualListView.tsx
@@ -284,13 +284,13 @@ export class VirtualListView<ItemInfo extends VirtualListViewItemInfo>
         };
     }
 
-    componentWillReceiveProps(nextProps: VirtualListViewProps<ItemInfo>): void {
+    UNSAFE_componentWillReceiveProps(nextProps: VirtualListViewProps<ItemInfo>): void {
         if (!_.isEqual(this.props, nextProps)) {
             this._updateStateFromProps(nextProps, false);
         }
     }
 
-    componentWillUpdate(nextProps: VirtualListViewProps<ItemInfo>, nextState: VirtualListViewState) {
+    UNSAFE_componentWillUpdate(nextProps: VirtualListViewProps<ItemInfo>, nextState: VirtualListViewState) {
         const updatedState: Partial<VirtualListViewState> = {};
         let updateState = false;
         if (nextState.lastFocusedItemKey && !_.some(nextProps.itemList, item => item.key === nextState.lastFocusedItemKey)) {

diff --git a/samples/RXPTest/src/App.tsx b/samples/RXPTest/src/App.tsx
@@ -52,6 +52,7 @@ class App extends RX.Component<RX.CommonProps, AppState> {
 
             // If there are more tests to run, move on to the next one.
             if (curTestIndex + 1 < testPaths.length) {
+                console.log('state selectedTest moving to: ', testPaths[curTestIndex + 1]);
                 this.setState({ selectedTest: testPaths[curTestIndex + 1] });
                 return;
             }

diff --git a/samples/RXPTest/src/Tests/AlertTest.tsx b/samples/RXPTest/src/Tests/AlertTest.tsx
@@ -40,7 +40,7 @@ const _styles = {
         color: 'black'
     }),
     buttonPanel: RX.Styles.createViewStyle({
-        flexDirection: 'row'
+        flexDirection: 'column'
     }),
     alertBody: RX.Styles.createViewStyle({
         backgroundColor: '#333',

diff --git a/samples/RXPTest/src/Tests/ViewMouseTest.tsx b/samples/RXPTest/src/Tests/ViewMouseTest.tsx
@@ -187,15 +187,19 @@ class MouseView extends RX.Component<RX.CommonProps, MouseViewState> {
                         { 'blockPointerEvents:' + (this.state.blockPointerEvents ? 'true' : 'false') }
                     </RX.Text>
                     <RX.Button onPress={this.toggleBlockPointerEvents}>
-                        { this.state.blockPointerEvents ? 'Enable' : 'Disable' }
+                        <RX.Text style={ _styles.labelText }>
+                            { this.state.blockPointerEvents ? 'Enable' : 'Disable' }
+                        </RX.Text>
                     </RX.Button>
                 </RX.View>
                 <RX.View style={_styles.row}>
                     <RX.Text style={ _styles.labelText }>
                         ignorePointerEvents: {this.state.ignorePointerEvents ? 'true' : 'false' }
                     </RX.Text>
                     <RX.Button onPress={this.toggleIgnorePointerEvents}>
-                    {    this.state.ignorePointerEvents ? 'Enable' : 'Disable' }
+                        <RX.Text style={ _styles.labelText }>
+                            {    this.state.ignorePointerEvents ? 'Enable' : 'Disable' }
+                        </RX.Text>
                     </RX.Button>
                 </RX.View>
             </RX.View>

diff --git a/samples/TodoList/src/ts/controls/Modal.tsx b/samples/TodoList/src/ts/controls/Modal.tsx
@@ -83,11 +83,11 @@ export default class Modal extends ComponentBase<ModalProps, ModalState> {
         return newState;
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         // To give children a chance to cancel the ESC handler,
         // subscribing in componentWillMount so that the children
         // could subscribe after.
-        super.componentWillMount();
+        super.UNSAFE_componentWillMount();
 
         RX.Input.keyUpEvent.subscribe(this._onKeyUp);
     }
@@ -113,8 +113,8 @@ export default class Modal extends ComponentBase<ModalProps, ModalState> {
         RX.Input.keyUpEvent.unsubscribe(this._onKeyUp);
     }
 
-    componentWillUpdate(newProps: ModalProps, newState: ModalState, newContext: any) {
-        super.componentWillUpdate(newProps, newState, newContext);
+    UNSAFE_componentWillUpdate(newProps: ModalProps, newState: ModalState, newContext: any) {
+        super.UNSAFE_componentWillUpdate(newProps, newState, newContext);
 
         // We assume the modalId doesn't change.
         assert.ok(newProps.modalId === this.props.modalId);

diff --git a/src/native-common/Button.tsx b/src/native-common/Button.tsx
@@ -197,7 +197,7 @@ export class Button extends ButtonBase {
         this._isMounted = false;
     }
 
-    componentWillReceiveProps(nextProps: Types.ButtonProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Types.ButtonProps) {
         // If opacity styles were updated as a part of props update, we need to reflect that in the opacity animation value
         this._setOpacityStyles(nextProps, this.props);
     }

diff --git a/src/native-common/Image.tsx b/src/native-common/Image.tsx
@@ -119,7 +119,7 @@ export class Image extends React.Component<Types.ImageProps, ImageState> impleme
         );
     }
 
-    componentWillReceiveProps(nextProps: Types.ImageProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Types.ImageProps) {
         const sourceOrHeaderChanged = (nextProps.source !== this.props.source ||
             !_.isEqual(nextProps.headers || {}, this.props.headers || {}));
         if (sourceOrHeaderChanged) {

diff --git a/src/native-common/PopupContainerView.tsx b/src/native-common/PopupContainerView.tsx
@@ -62,7 +62,7 @@ export class PopupContainerView extends PopupContainerViewBase<PopupContainerVie
         };
     }
 
-    componentWillReceiveProps(prevProps: PopupContainerViewProps) {
+    UNSAFE_componentWillReceiveProps(prevProps: PopupContainerViewProps) {
         if (this.props.popupOptions !== prevProps.popupOptions) {
             // If the popup changes, reset our state.
             this.setState(this._getInitialState());

diff --git a/src/native-common/RootView.tsx b/src/native-common/RootView.tsx
@@ -71,7 +71,7 @@ abstract class BaseRootView<P extends BaseRootViewProps> extends React.Component
         this._mainViewProps = this._getPropsForMainView();
     }
 
-    componentWillMount(): void {
+    UNSAFE_componentWillMount(): void {
         this._frontLayerViewChangedSubscription = FrontLayerViewManager.event_changed.subscribe(() => {
             // Setting empty state will trigger a render.
             this.setState({});
@@ -175,8 +175,8 @@ class RootViewUsingStore extends BaseRootView<BaseRootViewProps> {
         };
     }
 
-    componentWillMount(): void {
-        super.componentWillMount();
+    UNSAFE_componentWillMount(): void {
+        super.UNSAFE_componentWillMount();
 
         MainViewStore.subscribe(this._changeListener);
         this.setState(this._getStateFromStore());

diff --git a/src/native-common/TextInput.tsx b/src/native-common/TextInput.tsx
@@ -58,7 +58,7 @@ export class TextInput extends React.Component<Types.TextInputProps, TextInputSt
         };
     }
 
-    componentWillReceiveProps(nextProps: Types.TextInputProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Types.TextInputProps) {
         if (nextProps.value !== undefined && nextProps.value !== this.state.inputValue) {
             this.setState({
                 inputValue: nextProps.value || ''

diff --git a/src/native-common/View.tsx b/src/native-common/View.tsx
@@ -175,7 +175,7 @@ export class View extends ViewBase<RX.Types.ViewProps, RX.Types.Stateless, RN.Vi
         }
     }
 
-    componentWillReceiveProps(nextProps: RX.Types.ViewProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: RX.Types.ViewProps) {
         this._updateMixin(nextProps, false);
         this._buildInternalProps(nextProps);
 
@@ -184,7 +184,7 @@ export class View extends ViewBase<RX.Types.ViewProps, RX.Types.Stateless, RN.Vi
         }
     }
 
-    componentWillUpdate(nextProps: RX.Types.ViewProps, nextState: {}) {
+    UNSAFE_componentWillUpdate(nextProps: RX.Types.ViewProps, nextState: {}) {
         //
         // Exit fast if not an "animated children" case
         if (!(nextProps.animateChildEnter || nextProps.animateChildMove || nextProps.animateChildLeave)) {

diff --git a/src/web/Animated.tsx b/src/web/Animated.tsx
@@ -485,7 +485,7 @@ function createAnimatedComponent<PropsType extends RX.Types.CommonProps<C>, C>(C
             }
         }
 
-        componentWillReceiveProps(props: RX.Types.CommonStyledProps<RX.Types.StyleRuleSet<Object>, C>) {
+        UNSAFE_componentWillReceiveProps(props: RX.Types.CommonStyledProps<RX.Types.StyleRuleSet<Object>, C>) {
             this._updateStyles(props);
         }
 

diff --git a/src/web/Image.tsx b/src/web/Image.tsx
@@ -195,7 +195,7 @@ export class Image extends React.Component<Types.ImageProps, ImageState> {
         }
     }
 
-    componentWillReceiveProps(nextProps: Types.ImageProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Types.ImageProps) {
         const sourceOrHeaderChanged = (nextProps.source !== this.props.source ||
             !_.isEqual(nextProps.headers || {}, this.props.headers || {}));
 

diff --git a/src/web/RootView.tsx b/src/web/RootView.tsx
@@ -146,7 +146,7 @@ export class RootView extends React.Component<RootViewProps, RootViewState> {
         };
     }
 
-    componentWillReceiveProps(prevProps: RootViewProps) {
+    UNSAFE_componentWillReceiveProps(prevProps: RootViewProps) {
         if (this.props.activePopup !== prevProps.activePopup) {
             this._stopHidePopupTimer();
 

diff --git a/src/web/ScrollView.tsx b/src/web/ScrollView.tsx
@@ -144,7 +144,7 @@ export class ScrollView extends ViewBase<RX.Types.ScrollViewProps, RX.Types.Stat
         return this._customScrollbarEnabled ? this._renderWithCustomScrollbar() : this._renderNormal();
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this._onPropsChange(this.props);
     }
 
@@ -155,8 +155,8 @@ export class ScrollView extends ViewBase<RX.Types.ScrollViewProps, RX.Types.Stat
         this._createCustomScrollbarsIfNeeded(this.props);
     }
 
-    componentWillReceiveProps(newProps: RX.Types.ScrollViewProps) {
-        super.componentWillReceiveProps(newProps);
+    UNSAFE_componentWillReceiveProps(newProps: RX.Types.ScrollViewProps) {
+        super.UNSAFE_componentWillReceiveProps(newProps);
         this._onPropsChange(newProps);
     }
 

diff --git a/src/web/TextInput.tsx b/src/web/TextInput.tsx
@@ -151,7 +151,7 @@ export class TextInput extends React.Component<Types.TextInputProps, TextInputSt
         };
     }
 
-    componentWillReceiveProps(nextProps: Types.TextInputProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Types.TextInputProps) {
         const nextState: Partial<TextInputState> = {};
 
         if (nextProps.value !== undefined && nextProps.value !== this.state.inputValue) {

diff --git a/src/web/View.tsx b/src/web/View.tsx
@@ -419,8 +419,8 @@ export class View extends ViewBase<RX.Types.ViewProps, RX.Types.Stateless, RX.Vi
             reactElement;
     }
 
-    componentWillReceiveProps(nextProps: RX.Types.ViewProps) {
-        super.componentWillReceiveProps(nextProps);
+    UNSAFE_componentWillReceiveProps(nextProps: RX.Types.ViewProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         if (AppConfig.isDevelopmentMode()) {
             if (this.props.restrictFocusWithin !== nextProps.restrictFocusWithin) {

diff --git a/src/web/ViewBase.tsx b/src/web/ViewBase.tsx
@@ -58,7 +58,7 @@ export abstract class ViewBase<P extends RX.Types.ViewPropsShared<C>, S, C exten
         }
     }
 
-    componentWillReceiveProps(nextProps: RX.Types.ViewPropsShared<C>) {
+    UNSAFE_componentWillReceiveProps(nextProps: RX.Types.ViewPropsShared<C>) {
         if (!!this.props.onLayout !== !!nextProps.onLayout) {
             if (this.props.onLayout) {
                 this._checkViewCheckerUnbuild();

diff --git a/src/web/listAnimations/MonitorListEdits.tsx b/src/web/listAnimations/MonitorListEdits.tsx
@@ -157,7 +157,7 @@ export class MonitorListEdits extends React.Component<MonitorListEditsProps, Typ
     private _phase: ComponentPhaseEnum = ComponentPhaseEnum.rest;
     private _willAnimatePhaseInfo: WillAnimatePhaseInfo | undefined;
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this._childrenKeys = extractChildrenKeys(this.props.children);
         this._childrenMap = createChildrenMap(this.props.children);
     }
@@ -174,7 +174,7 @@ export class MonitorListEdits extends React.Component<MonitorListEditsProps, Typ
         return this._phase !== ComponentPhaseEnum.animating;
     }
 
-    componentWillUpdate(nextProps: MonitorListEditsProps) {
+    UNSAFE_componentWillUpdate(nextProps: MonitorListEditsProps) {
         assert(
             this._phase !== ComponentPhaseEnum.animating,
             'componentWillUpdate should never run while the component is animating due to the implementation of shouldComponentUpdate'

diff --git a/src/windows/View.tsx b/src/windows/View.tsx
@@ -105,8 +105,8 @@ export class View extends ViewCommon implements React.ChildContextProvider<ViewC
         this._popupContainer = context && context.popupContainer;
     }
 
-    componentWillReceiveProps(nextProps: Types.ViewProps) {
-        super.componentWillReceiveProps(nextProps);
+    UNSAFE_componentWillReceiveProps(nextProps: Types.ViewProps) {
+        super.UNSAFE_componentWillReceiveProps(nextProps);
 
         if (AppConfig.isDevelopmentMode()) {
             if (this.props.restrictFocusWithin !== nextProps.restrictFocusWithin) {

diff --git a/tslint.json b/tslint.json
@@ -6,7 +6,7 @@
     "rules": {
         // Rules from tslint-microsoft-contrib
         "function-name": [true, {
-            "method-regex": "^[a-z]\\w+$",
+            "method-regex": "^(UNSAFE_)?[a-z]\\w+$",
             "private-method-regex": "^_[a-z]\\w+$",
             "protected-method-regex": "^[a-z_]\\w+$",
             "static-method-regex": "^[a-z]\\w+$",
-Original file line number
+Diff line change
@@ Expand Up @@
                 }
             }
-            componentWillReceiveProps(props: RX.Types.CommonStyledProps<RX.Types.StyleRuleSet<Object>, C>) {
+            UNSAFE_componentWillReceiveProps(props: RX.Types.CommonStyledProps<RX.Types.StyleRuleSet<Object>, C>) {
                 this._updateStyles(props);
             }
@@ Expand Down @@