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

@@ -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}

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.
    */

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.
    */

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>
       );
     }

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.
    */