SectionList: fix separators position when list is inverted

packages/rn-tester/js/examples/SectionList/SectionList-withSeparators.js

@@ -10,7 +10,7 @@
 
 import SectionListBaseExample from './SectionListBaseExample';
 import * as React from 'react';
-import {useRef} from 'react';
+import {useRef, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
 const Separator =
@@ -34,22 +34,43 @@ const Separator =
   };
 
 export function SectionList_withSeparators(): React.Node {
+  const [isInverted, setInverted] = useState(false);
+
   const exampleProps = {
+    inverted: isInverted,
     ItemSeparatorComponent: Separator('lightgreen', 'green', false),
     SectionSeparatorComponent: Separator('lightblue', 'blue', true),
   };
   const ref = useRef<any>(null);
 
-  return <SectionListBaseExample ref={ref} exampleProps={exampleProps} />;
+  function onTest() {
+    setInverted(!isInverted);
+  }
+
+  return (
+    <SectionListBaseExample
+      ref={ref}
+      exampleProps={exampleProps}
+      itemStyle={styles.item}
+      onTest={onTest}
+      testOutput={`Inverted: ${isInverted.toString()}`}
+      testLabel={isInverted ? 'Toggle false' : 'Toggle true'}
+    />
+  );
 }
 
 const styles = StyleSheet.create({
   separator: {
-    height: 12,
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   separatorText: {
     fontSize: 10,
   },
+  item: {
+    marginVertical: 0,
+  },
 });
 
 export default {

packages/rn-tester/js/examples/SectionList/SectionListBaseExample.js

@@ -16,6 +16,7 @@ import {
   StyleSheet,
   Text,
   View,
+  type ViewStyle,
 } from 'react-native';
 
 const DATA = [
@@ -39,7 +40,7 @@ const DATA = [
 
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
-const Item = ({item, section, separators}) => {
+const Item = ({item, separators, style}) => {
   return (
     <Pressable
       onPressIn={() => {
@@ -54,6 +55,7 @@ const Item = ({item, section, separators}) => {
       }}
       style={({pressed}) => [
         styles.item,
+        style,
         {
           backgroundColor: pressed ? 'red' : 'pink',
         },
@@ -71,6 +73,7 @@ type Props = $ReadOnly<{
   testLabel?: ?string,
   testOutput?: ?string,
   children?: ?React.Node,
+  itemStyle?: ViewStyle,
 }>;
 
 const SectionListBaseExample: component(
@@ -109,7 +112,9 @@ const SectionListBaseExample: component(
         sections={DATA}
         keyExtractor={(item, index) => item + index}
         style={styles.list}
-        renderItem={Item}
+        renderItem={({item, separators}) => (
+          <Item style={props.itemStyle} item={item} separators={separators} />
+        )}
         /* $FlowFixMe[prop-missing] Error revealed after improved builtin React
          * utility types */
         renderSectionHeader={({section: {title}}) => (

packages/virtualized-lists/Lists/VirtualizedSectionList.js

@@ -378,8 +378,12 @@ class VirtualizedSectionList<
         }
       } else {
         const renderItem = info.section.renderItem || this.props.renderItem;
+        const displayIndex =
+          !!this.props.inverted && info.section.data.length
+            ? info.section.data.length - 1 - infoIndex
+            : infoIndex;
         const SeparatorComponent = this._getSeparatorComponent(
-          index,
+          displayIndex,
           info,
           listItemCount,
         );
@@ -388,7 +392,9 @@ class VirtualizedSectionList<
           <ItemWithSeparator
             SeparatorComponent={SeparatorComponent}
             LeadingSeparatorComponent={
-              infoIndex === 0 ? this.props.SectionSeparatorComponent : undefined
+              displayIndex === 0
+                ? this.props.SectionSeparatorComponent
+                : undefined
             }
             cellKey={info.key}
             index={infoIndex}
@@ -460,7 +466,7 @@ class VirtualizedSectionList<
     const {SectionSeparatorComponent} = this.props;
     const isLastItemInList = index === listItemCount - 1;
     const isLastItemInSection =
-      info.index === this.props.getItemCount(info.section.data) - 1;
+      index === this.props.getItemCount(info.section.data) - 1;
     if (SectionSeparatorComponent && isLastItemInSection) {
       return SectionSeparatorComponent;
     }

packages/virtualized-lists/Lists/__tests__/VirtualizedSectionList-test.js

@@ -94,6 +94,7 @@ describe('VirtualizedSectionList', () => {
       component = ReactTestRenderer.create(
         <VirtualizedSectionList
           ItemSeparatorComponent={() => <separator />}
+          SectionSeparatorComponent={() => <sectionSeparator />}
           ListEmptyComponent={() => <empty />}
           ListFooterComponent={() => <footer />}
           ListHeaderComponent={() => <header />}

packages/virtualized-lists/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap

@@ -863,7 +863,7 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
         ]
       }
     >
-      <separator />
+      <sectionSeparator />
       <item
         value="0"
       />
@@ -951,9 +951,11 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
         ]
       }
     >
+      <separator />
       <item
         value="4"
       />
+      <sectionSeparator />
     </View>
     <View
       onFocusCapture={[Function]}