Update deprecated RN lifecycle methods. (#216)

Also fixed typo: `oneOf` —> `oneOfType`.

Author: jarod-legault

examples/Basic/App.js

@@ -120,12 +120,12 @@ class Row extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.active !== nextProps.active) {
+  componentDidUpdate(prevProps) {
+    if (this.props.active !== prevProps.active) {
       Animated.timing(this._active, {
         duration: 300,
         easing: Easing.bounce,
-        toValue: Number(nextProps.active),
+        toValue: Number(this.props.active),
       }).start();
     }
   }

examples/Horizontal/App.js

@@ -121,12 +121,12 @@ class Row extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.active !== nextProps.active) {
+  componentDidUpdate(prevProps) {
+    if (this.props.active !== prevProps.active) {
       Animated.timing(this._active, {
         duration: 300,
         easing: Easing.bounce,
-        toValue: Number(nextProps.active),
+        toValue: Number(this.props.active),
       }).start();
     }
   }

src/Row.js

@@ -142,10 +142,10 @@ export default class Row extends Component {
     },
   });
 
-  componentWillReceiveProps(nextProps) {
-    if (!this._active && !shallowEqual(this._location, nextProps.location)) {
-      const animated = !this._active && nextProps.animated;
-      this._relocate(nextProps.location, animated);
+  componentDidUpdate() {
+    if (!this._active && !shallowEqual(this._location, this.props.location)) {
+      const animated = !this._active && this.props.animated;
+      this._relocate(this.props.location, animated);
     }
   }
 

src/SortableList.js

@@ -81,14 +81,15 @@ export default class SortableList extends Component {
     rowsLayouts: null,
     containerLayout: null,
     data: this.props.data,
+    isMounting: true,
     activeRowKey: null,
     activeRowIndex: null,
     releasedRowKey: null,
     sortingEnabled: this.props.sortingEnabled,
     scrollEnabled: this.props.scrollEnabled
   };
 
-  componentWillMount() {
+  componentDidMount() {
     this.state.order.forEach((key) => {
       this._rowsLayouts[key] = new Promise((resolve) => {
         this._resolveRowLayout[key] = resolve;
@@ -105,17 +106,18 @@ export default class SortableList extends Component {
         this._resolveFooterLayout = resolve;
       });
     }
-  }
 
-  componentDidMount() {
     this._onUpdateLayouts();
+
+    this.setState({ isMounting: false });
   }
 
-  componentWillReceiveProps(nextProps) {
-    const {data, order} = this.state;
-    let {data: nextData, order: nextOrder} = nextProps;
+  componentDidUpdate(prevProps, prevState) {
+    const {data: currentData, order: currentOrder, scrollEnabled} = this.state;
+    const {data: prevData} = prevState;
+    let {data: nextData, order: nextOrder} = this.props;
 
-    if (data && nextData && !shallowEqual(data, nextData)) {
+    if (currentData && nextData && !shallowEqual(currentData, nextData)) {
       nextOrder = nextOrder || Object.keys(nextData)
       uniqueRowKey.id++;
       this._rowsLayouts = {};
@@ -125,7 +127,7 @@ export default class SortableList extends Component {
         });
       });
 
-      if (Object.keys(nextData).length > Object.keys(data).length) {
+      if (Object.keys(nextData).length > Object.keys(currentData).length) {
         this.setState({
           animated: false,
           data: nextData,
@@ -140,21 +142,13 @@ export default class SortableList extends Component {
         });
       }
 
-    } else if (order && nextOrder && !shallowEqual(order, nextOrder)) {
+    } else if (currentOrder && nextOrder && !shallowEqual(currentOrder, nextOrder)) {
       this.setState({order: nextOrder});
     }
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {data, scrollEnabled} = this.state;
-    const {data: prevData} = prevState;
 
-    if (data && prevData && !shallowEqual(data, prevData)) {
+    if (currentData && prevData && !shallowEqual(currentData, prevData)) {
       this._onUpdateLayouts();
     }
-    if (prevProps.scrollEnabled !== scrollEnabled) {
-      this.setState({scrollEnabled: prevProps.scrollEnabled})
-    }
   }
 
   scrollBy({dx = 0, dy = 0, animated = false}) {
@@ -209,13 +203,15 @@ export default class SortableList extends Component {
   }
 
   render() {
+    if (this.state.isMounting ) return null;
+
     let {
-      contentContainerStyle, 
-      innerContainerStyle, 
-      horizontal, 
-      style, 
-      showsVerticalScrollIndicator, 
-      showsHorizontalScrollIndicator, 
+      contentContainerStyle,
+      innerContainerStyle,
+      horizontal,
+      style,
+      showsVerticalScrollIndicator,
+      showsHorizontalScrollIndicator,
       snapToAlignment,
       scrollEventThrottle,
       decelerationRate,