From c46ca60e3fa1c199b9691099483dca2d7ed95fcc Mon Sep 17 00:00:00 2001
From: Logan Daniels <logand@fb.com>
Date: Mon, 8 Apr 2019 12:49:52 -0700
Subject: [PATCH] Make FlatList's renderItem return React.Node

Summary:
Flow typing can be annoying because the `renderItem` prop for FlatList always has to specifically be of type `React.Element`.

Since really we just want to return something renderable, it should be fine to type this as `React.Node` instead.

I'm not sure if this is valid, but it seems like since we just need to implant the `key` property, we should be able to accomplish this with a `React.Fragment` wrapper instead of needing to call `cloneElement`. Looking for feedback on if this is a sensible fix.

Changelog:
[General][Changed] Updated FlatList's renderItem Flow type from React.Element<any> to React.Node

Reviewed By: sahrens

Differential Revision: D14814805

fbshipit-source-id: ce6793dea5a92619babe048dcfddee0e4519979c
---
 Libraries/Lists/FlatList.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index c00c0cef4c1..2c7280694dd 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -63,7 +63,7 @@ type RequiredProps<ItemT> = {
     item: ItemT,
     index: number,
     separators: SeparatorsObj,
-  }) => ?React.Element<any>,
+  }) => ?React.Node,
   /**
    * For simplicity, data is just a plain array. If you want to use something else, like an
    * immutable list, use the underlying `VirtualizedList` directly.
@@ -598,7 +598,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     };
   }
 
-  _renderItem = (info: Object) => {
+  _renderItem = (info: Object): ?React.Node => {
     const {renderItem, numColumns, columnWrapperStyle} = this.props;
     if (numColumns > 1) {
       const {item, index} = info;
@@ -618,7 +618,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
               index: index * numColumns + kk,
               separators: info.separators,
             });
-            return element && React.cloneElement(element, {key: kk});
+            return element != null ? (
+              <React.Fragment key={kk}>{element}</React.Fragment>
+            ) : null;
           })}
         </View>
       );