From a90d0e3614c467c33cf85bcbe65be71903d5aecc Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Fri, 25 May 2018 14:59:34 -0700
Subject: [PATCH] fixup FlatList

Summary:
StrictMode compliance is important for Async Rendering and other Future Tech(tm).

Also clean up some lint.

== Test Plan ==
* No more StrictMode warnings for `FlatList` (`VirtualizedList` is another story....).
* props warnings still show up when appropriate.

Reviewed By: sophiebits

Differential Revision: D8026333

fbshipit-source-id: e6fa2f02d546b883df6f3cff8776c26c6ef91bc9
---
 Libraries/Lists/FlatList.js                   | 66 ++++++++++---------
 .../__snapshots__/FlatList-test.js.snap       | 27 +++-----
 2 files changed, 44 insertions(+), 49 deletions(-)

diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index cb909bbe7..c9b1b94c9 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -14,6 +14,7 @@ const React = require('React');
 const View = require('View');
 const VirtualizedList = require('VirtualizedList');
 const ListView = require('ListView');
+const StyleSheet = require('StyleSheet');
 
 const invariant = require('fbjs/lib/invariant');
 
@@ -421,41 +422,15 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
-  setNativeProps(props: Object) {
+  setNativeProps(props: {[string]: mixed}) {
     if (this._listRef) {
       this._listRef.setNativeProps(props);
     }
   }
 
-  UNSAFE_componentWillMount() {
-    this._checkProps(this.props);
-  }
-
-  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 ' +
-        'changing the number of columns to force a fresh render of the component.',
-    );
-    invariant(
-      nextProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
-      'Changing onViewableItemsChanged on the fly is not supported',
-    );
-    invariant(
-      nextProps.viewabilityConfig === this.props.viewabilityConfig,
-      'Changing viewabilityConfig on the fly is not supported',
-    );
-    invariant(
-      nextProps.viewabilityConfigCallbackPairs ===
-        this.props.viewabilityConfigCallbackPairs,
-      'Changing viewabilityConfigCallbackPairs on the fly is not supported',
-    );
-
-    this._checkProps(nextProps);
-  }
-
-  constructor(props: Props<*>) {
+  constructor(props: Props<ItemT>) {
     super(props);
+    this._checkProps(this.props);
     if (this.props.viewabilityConfigCallbackPairs) {
       this._virtualizedListPairs = this.props.viewabilityConfigCallbackPairs.map(
         pair => ({
@@ -478,6 +453,29 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  componentDidUpdate(prevProps: Props<ItemT>) {
+    invariant(
+      prevProps.numColumns === this.props.numColumns,
+      'Changing numColumns on the fly is not supported. Change the key prop on FlatList when ' +
+        'changing the number of columns to force a fresh render of the component.',
+    );
+    invariant(
+      prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
+      'Changing onViewableItemsChanged on the fly is not supported',
+    );
+    invariant(
+      prevProps.viewabilityConfig === this.props.viewabilityConfig,
+      'Changing viewabilityConfig on the fly is not supported',
+    );
+    invariant(
+      prevProps.viewabilityConfigCallbackPairs ===
+        this.props.viewabilityConfigCallbackPairs,
+      'Changing viewabilityConfigCallbackPairs on the fly is not supported',
+    );
+
+    this._checkProps(this.props);
+  }
+
   _hasWarnedLegacy = false;
   _listRef: null | VirtualizedList | ListView | MetroListView;
   _virtualizedListPairs: Array<ViewabilityConfigCallbackPair> = [];
@@ -537,7 +535,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
         const item = data[index * numColumns + kk];
-        item && ret.push(item);
+        if (item != null) {
+          ret.push(item);
+        }
       }
       return ret;
     } else {
@@ -614,7 +614,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         'Expected array of items with numColumns > 1',
       );
       return (
-        <View style={[{flexDirection: 'row'}, columnWrapperStyle]}>
+        <View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
           {item.map((it, kk) => {
             const element = renderItem({
               item: it,
@@ -661,4 +661,8 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 }
 
+const styles = StyleSheet.create({
+  row: {flexDirection: 'row'},
+});
+
 module.exports = FlatList;
diff --git a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
index 837ef99b1..525ad54ee 100644
--- a/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap
@@ -72,12 +72,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            undefined,
-          ]
+          Object {
+            "flexDirection": "row",
+          }
         }
       >
         <item
@@ -95,12 +92,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            undefined,
-          ]
+          Object {
+            "flexDirection": "row",
+          }
         }
       >
         <item
@@ -118,12 +112,9 @@ exports[`FlatList renders all the bells and whistles 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
-              "flexDirection": "row",
-            },
-            undefined,
-          ]
+          Object {
+            "flexDirection": "row",
+          }
         }
       >
         <item