Update SectionList to accept React elements for separators (#53599)

Summary:
Pull Request resolved: #53599

Runtime and types fix for the `ItemSeparatorComponent` prop on `virtualized-list` components (`FlatList`, `SectionList`, `VirtualizedList`).

- Docs source, where this prop (adjacent to other `*Component` props) is documented as accepting elements: https://reactnative.dev/docs/virtualizedlist#itemseparatorcomponent.
- Existing runtime behaviour matching this definition: https://github.com/facebook/react-native/blob/8d33e1c205b12fe27f4319e6566bb0c088197810/packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js#L197-L203

**Changes**

- Update Flow, manual TS type defs.
- Align runtime behaviour in `VirtualizedSectionList` to add matching `React.isValidElement()` behaviour.

Resolves #53531.

Changelog:
[General][Fixed] - The `ItemSeparatorComponent` prop on list components now accepts a React element as well as a component function.

Reviewed By: cortinico

Differential Revision: D81675423

fbshipit-source-id: 3eed93b1bea89554988d6e20fa61b72e17be55df

Author: huntie

packages/react-native/Libraries/Lists/SectionList.d.ts

@@ -35,7 +35,11 @@ export interface SectionBase<ItemT, SectionT = DefaultSectionT> {
 
   renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
 
-  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+  ItemSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
 
   keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
 }

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0a0286ba0bc29af2abd2e8fd836077fb>>
+ * @generated SignedSource<<4ccde3daef50fa7522f10bc7146c0cc6>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -3498,7 +3498,7 @@ declare type OptionalVirtualizedListProps = {
   initialNumToRender?: number
   initialScrollIndex?: number
   inverted?: boolean
-  ItemSeparatorComponent?: React.ComponentType<any>
+  ItemSeparatorComponent?: React.ComponentType<any> | React.JSX.Element
   keyExtractor?: (item: Item, index: number) => string
   ListEmptyComponent?: React.ComponentType<any> | React.JSX.Element
   ListFooterComponent?: React.ComponentType<any> | React.JSX.Element
@@ -4578,7 +4578,7 @@ declare type SectionBase<
   SectionT = DefaultVirtualizedSectionT,
 > = {
   data: ReadonlyArray<SectionItemT>
-  ItemSeparatorComponent?: React.ComponentType<any>
+  ItemSeparatorComponent?: React.ComponentType<any> | React.JSX.Element
   key?: string
   renderItem?: (info: {
     index: number
@@ -6013,8 +6013,8 @@ export {
   EventSubscription, // b8d084aa
   ExtendedExceptionData, // 5a6ccf5a
   FilterFunction, // bf24c0e3
-  FlatList, // 4f1b407e
-  FlatListProps, // b225fb7a
+  FlatList, // cbb48cbe
+  FlatListProps, // 451be810
   FocusEvent, // 529b43eb
   FontVariant, // 7c7558bb
   GestureResponderEvent, // b466f6d6
@@ -6151,12 +6151,12 @@ export {
   ScrollViewPropsAndroid, // 84e2134b
   ScrollViewPropsIOS, // d83c9733
   ScrollViewScrollToOptions, // 3313411e
-  SectionBase, // 0ccaedac
-  SectionList, // a1a4786b
-  SectionListData, // 1c80bb2e
-  SectionListProps, // 7fb5371e
-  SectionListRenderItem, // cffebb53
-  SectionListRenderItemInfo, // 946c2128
+  SectionBase, // b376bddc
+  SectionList, // ff1193b2
+  SectionListData, // 119baf83
+  SectionListProps, // c9ac8e07
+  SectionListRenderItem, // 1fad0435
+  SectionListRenderItemInfo, // 745e1992
   Separators, // 6a45f7e3
   Settings, // 4282b0da
   Share, // e4591b32
@@ -6219,9 +6219,9 @@ export {
   ViewStyle, // c2db0e6e
   VirtualViewMode, // 85a69ef6
   VirtualizedList, // 4d513939
-  VirtualizedListProps, // be716140
+  VirtualizedListProps, // a99d36db
   VirtualizedSectionList, // 446ba0df
-  VirtualizedSectionListProps, // a6899dfb
+  VirtualizedSectionListProps, // 6cd4b378
   WrapperComponentProvider, // 9cf3844c
   codegenNativeCommands, // e16d62f7
   codegenNativeComponent, // ed4c8103

packages/virtualized-lists/Lists/VirtualizedList.d.ts

@@ -152,7 +152,11 @@ export interface VirtualizedListWithoutRenderItemProps<ItemT>
   /**
    * Rendered in between each item, but not at the top or bottom
    */
-  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+  ItemSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
 
   /**
    * Rendered when the list is empty. Can be a React Component Class, a render function, or

packages/virtualized-lists/Lists/VirtualizedListCellRenderer.js

@@ -24,9 +24,10 @@ import {StyleSheet, View} from 'react-native';
 
 export type Props<ItemT> = {
   CellRendererComponent?: ?React.ComponentType<CellRendererProps<ItemT>>,
-  ItemSeparatorComponent: ?React.ComponentType<
-    any | {highlighted: boolean, leadingItem: ?ItemT},
-  >,
+  ItemSeparatorComponent?: ?(
+    | React.ComponentType<any | {highlighted: boolean, leadingItem: ?ItemT}>
+    | React.MixedElement
+  ),
   ListItemComponent?: ?(React.ComponentType<any> | React.MixedElement),
   cellKey: string,
   horizontal: ?boolean,
@@ -199,6 +200,8 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
         ItemSeparatorComponent
       : // $FlowFixMe[incompatible-type]
         ItemSeparatorComponent && (
+          // $FlowFixMe[incompatible-type]
+          // $FlowFixMe[not-a-component]
           <ItemSeparatorComponent {...this.state.separatorProps} />
         );
     const cellStyle = inversionStyle

packages/virtualized-lists/Lists/VirtualizedListProps.js

@@ -129,7 +129,7 @@ type OptionalVirtualizedListProps = {
    * which will update the `highlighted` prop, but you can also add custom props with
    * `separators.updateProps`.
    */
-  ItemSeparatorComponent?: ?React.ComponentType<any>,
+  ItemSeparatorComponent?: ?(React.ComponentType<any> | React.MixedElement),
   /**
    * Takes an item from `data` and renders it into the list. Example usage:
    *

packages/virtualized-lists/Lists/VirtualizedSectionList.js

@@ -50,7 +50,7 @@ export type SectionBase<SectionItemT, SectionT = DefaultVirtualizedSectionT> = {
     },
     ...
   }) => null | React.MixedElement,
-  ItemSeparatorComponent?: ?React.ComponentType<any>,
+  ItemSeparatorComponent?: ?(React.ComponentType<any> | React.MixedElement),
   keyExtractor?: (item: ?SectionItemT, index?: ?number) => string,
   ...
 };
@@ -450,7 +450,7 @@ class VirtualizedSectionList<
     index: number,
     info?: ?Object,
     listItemCount: number,
-  ): ?React.ComponentType<any> {
+  ): ?(React.ComponentType<any> | React.MixedElement) {
     info = info || this._subExtractor(index);
     if (!info) {
       return null;
@@ -488,8 +488,8 @@ type ItemWithSeparatorCommonProps<ItemT> = $ReadOnly<{
 
 type ItemWithSeparatorProps<ItemT> = $ReadOnly<{
   ...ItemWithSeparatorCommonProps<ItemT>,
-  LeadingSeparatorComponent: ?React.ComponentType<any>,
-  SeparatorComponent: ?React.ComponentType<any>,
+  LeadingSeparatorComponent: ?(React.ComponentType<any> | React.MixedElement),
+  SeparatorComponent: ?(React.ComponentType<any> | React.MixedElement),
   cellKey: string,
   index: number,
   item: ItemT,
@@ -604,18 +604,30 @@ function ItemWithSeparator<ItemT>(
     section,
     separators,
   });
-  const leadingSeparator = LeadingSeparatorComponent != null && (
-    <LeadingSeparatorComponent
-      highlighted={leadingSeparatorHiglighted}
-      {...leadingSeparatorProps}
-    />
-  );
-  const separator = SeparatorComponent != null && (
-    <SeparatorComponent
-      highlighted={separatorHighlighted}
-      {...separatorProps}
-    />
-  );
+  const leadingSeparator =
+    LeadingSeparatorComponent != null &&
+    ((React.isValidElement(LeadingSeparatorComponent) ? (
+      LeadingSeparatorComponent
+    ) : (
+      // $FlowFixMe[not-a-component]
+      // $FlowFixMe[incompatible-type]
+      <LeadingSeparatorComponent
+        highlighted={leadingSeparatorHiglighted}
+        {...leadingSeparatorProps}
+      />
+    )): any);
+  const separator =
+    SeparatorComponent != null &&
+    ((React.isValidElement(SeparatorComponent) ? (
+      SeparatorComponent
+    ) : (
+      // $FlowFixMe[not-a-component]
+      // $FlowFixMe[incompatible-type]
+      <SeparatorComponent
+        highlighted={separatorHighlighted}
+        {...separatorProps}
+      />
+    )): any);
   const RenderSeparator = leadingSeparator || separator;
   const firstSeparator = inverted === false ? leadingSeparator : separator;
   const secondSeparator = inverted === false ? separator : leadingSeparator;