Fix the way separator components are inserted into the React DOM

Signed-off-by: François Billioud <fbillioud@cutii.io>
facebook · Feb 28, 2019 · 65454fb · 65454fb
1 parent 6137528
commit 65454fb
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -677,7 +677,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       cells.push(
         <CellRenderer
           CellRendererComponent={CellRendererComponent}
-          ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
           cellKey={key}
           fillRateHelper={this._fillRateHelper}
           horizontal={horizontal}
@@ -694,6 +693,13 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           }}
         />,
       );
+      const itemSeparator = ItemSeparatorComponent && (
+        <ItemSeparatorComponent key={key + '_separator'} />
+      );
+      if (ii < end) {
+        cells.push(itemSeparator);
+      }
+
       prevCellKey = key;
     }
   }
@@ -1607,7 +1613,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
 class CellRenderer extends React.Component<
   {
     CellRendererComponent?: ?React.ComponentType<any>,
-    ItemSeparatorComponent: ?React.ComponentType<*>,
     cellKey: string,
     fillRateHelper: FillRateHelper,
     horizontal: ?boolean,
@@ -1682,7 +1687,6 @@ class CellRenderer extends React.Component<
   render() {
     const {
       CellRendererComponent,
-      ItemSeparatorComponent,
       fillRateHelper,
       horizontal,
       item,
@@ -1705,9 +1709,6 @@ class CellRenderer extends React.Component<
         : this.props.onLayout;
     // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
     // called explicitly by `ScrollViewStickyHeader`.
-    const itemSeparator = ItemSeparatorComponent && (
-      <ItemSeparatorComponent {...this.state.separatorProps} />
-    );
     const cellStyle = horizontal
       ? {flexDirection: 'row'}
       : {flexDirection: 'column'};
@@ -1718,7 +1719,6 @@ class CellRenderer extends React.Component<
          * this comment and run Flow. */
         <View style={cellStyle} onLayout={onLayout}>
           {element}
-          {itemSeparator}
         </View>
       );
     }
@@ -1728,7 +1728,6 @@ class CellRenderer extends React.Component<
         style={cellStyle}
         onLayout={onLayout}>
         {element}
-        {itemSeparator}
       </CellRendererComponent>
     );
   }