From 1b52c2a7abd0dbed1c616bdfcbdccba253cd0218 Mon Sep 17 00:00:00 2001
From: Spencer Ahrens <sahrens@fb.com>
Date: Fri, 7 Apr 2017 00:48:52 -0700
Subject: [PATCH] Support elements for header/footer

Summary: It can be much more convenient instead of binding and setting `extraData` or what-not.

Reviewed By: blairvanderhoof

Differential Revision: D4829165

fbshipit-source-id: bb781fedc831059e7b5065ea4357955aed79beda
---
 Examples/UIExplorer/js/FlatListExample.js |  2 +-
 Libraries/Lists/FlatList.js               | 10 ++++++----
 Libraries/Lists/SectionList.js            |  4 ++--
 Libraries/Lists/VirtualizedList.js        | 10 ++++++++--
 Libraries/Lists/VirtualizedSectionList.js |  4 ++--
 5 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/Examples/UIExplorer/js/FlatListExample.js b/Examples/UIExplorer/js/FlatListExample.js
index 2dac3dd14..83e754a56 100644
--- a/Examples/UIExplorer/js/FlatListExample.js
+++ b/Examples/UIExplorer/js/FlatListExample.js
@@ -127,7 +127,7 @@ class FlatListExample extends React.PureComponent {
         <SeparatorComponent />
         <AnimatedFlatList
           ItemSeparatorComponent={SeparatorComponent}
-          ListHeaderComponent={HeaderComponent}
+          ListHeaderComponent={<HeaderComponent />}
           ListFooterComponent={FooterComponent}
           data={filteredData}
           debug={this.state.debug}
diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index d5d785e14..17ccf2ce8 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -49,13 +49,15 @@ type OptionalProps<ItemT> = {
    */
   ItemSeparatorComponent?: ?ReactClass<any>,
   /**
-   * Rendered at the bottom of all the items.
+   * Rendered at the bottom of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
    */
-  ListFooterComponent?: ?ReactClass<any>,
+  ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
-   * Rendered at the top of all the items.
+   * Rendered at the top of all the items. Can be a React Component Class, a render function, or
+   * a rendered element.
    */
-  ListHeaderComponent?: ?ReactClass<any>,
+  ListHeaderComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
    * Optional custom style for multi-item rows generated when numColumns > 1.
    */
diff --git a/Libraries/Lists/SectionList.js b/Libraries/Lists/SectionList.js
index d4f9934f9..8b7409d9b 100644
--- a/Libraries/Lists/SectionList.js
+++ b/Libraries/Lists/SectionList.js
@@ -51,11 +51,11 @@ type OptionalProps<SectionT: SectionBase<any>> = {
   /**
    * Rendered at the very beginning of the list.
    */
-  ListHeaderComponent?: ?ReactClass<any>,
+  ListHeaderComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
    * Rendered at the very end of the list.
    */
-  ListFooterComponent?: ?ReactClass<any>,
+  ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
   /**
    * Rendered in between each section.
    */
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 93205d220..5b85a54ac 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -377,9 +377,12 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
     const stickyIndicesFromProps = new Set(this.props.stickyHeaderIndices);
     const stickyHeaderIndices = [];
     if (ListHeaderComponent) {
+      const element = React.isValidElement(ListHeaderComponent)
+        ? ListHeaderComponent
+        : <ListHeaderComponent />;
       cells.push(
         <View key="$header" onLayout={this._onLayoutHeader}>
-          <ListHeaderComponent />
+          {element}
         </View>
       );
     }
@@ -450,9 +453,12 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
       }
     }
     if (ListFooterComponent) {
+      const element = React.isValidElement(ListFooterComponent)
+        ? ListFooterComponent
+        : <ListFooterComponent />;
       cells.push(
         <View key="$footer" onLayout={this._onLayoutFooter}>
-          <ListFooterComponent />
+          {element}
         </View>
       );
     }
diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index d35eb2bcd..d6de9f38d 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -48,11 +48,11 @@ type OptionalProps<SectionT: SectionBase> = {
   /**
    * Rendered after the last item in the last section.
    */
-  ListFooterComponent?: ?ReactClass<*>,
+  ListFooterComponent?: ?(ReactClass<*> | React.Element<*>),
   /**
    * Rendered at the very beginning of the list.
    */
-  ListHeaderComponent?: ?ReactClass<*>,
+  ListHeaderComponent?: ?(ReactClass<*> | React.Element<*>),
   /**
    * Default renderer for every item in every section.
    */