From 7f5795222762ae590f0a0c6822525c9c9e51b844 Mon Sep 17 00:00:00 2001
From: david <david@mediot.com.tw>
Date: Mon, 21 Oct 2019 11:01:12 +0800
Subject: [PATCH 1/2] issue #18943 - SectionSeparatorComponent and
 ItemSeparatorComponent should displays in correct place with inverted list

---
 Libraries/Lists/VirtualizedSectionList.js                | 9 ++++++---
 .../__snapshots__/VirtualizedSectionList-test.js.snap    | 8 ++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index c903663757c9..8938fc14c2f5 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -373,6 +373,7 @@ class VirtualizedSectionList<
           section={info.section}
           trailingItem={info.trailingItem}
           trailingSection={info.trailingSection}
+          inverted={!!this.props.inverted}
         />
       );
     }
@@ -434,6 +435,7 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   onUpdateSeparator: (cellKey: string, newProps: Object) => void,
   prevCellKey?: ?string,
   renderItem: Function,
+  inverted: boolean,
 |}>;
 
 type ItemWithSeparatorState = {
@@ -533,6 +535,7 @@ class ItemWithSeparator extends React.Component<
       item,
       index,
       section,
+      inverted,
     } = this.props;
     const element = this.props.renderItem({
       item,
@@ -551,9 +554,9 @@ class ItemWithSeparator extends React.Component<
        * error found when Flow v0.89 was deployed. To see the error, delete
        * this comment and run Flow. */
       <View>
-        {leadingSeparator}
-        {element}
-        {separator}
+        {!inverted
+          ? [leadingSeparator, element, separator]
+          : [separator, element, leadingSeparator]}
       </View>
     ) : (
       element
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
index faa91c2e49c8..23e1317571b8 100644
--- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedSectionList-test.js.snap
@@ -751,10 +751,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
       }
     >
       <View>
+        <separator />
         <item
           value="0"
         />
-        <separator />
       </View>
     </View>
     <View
@@ -774,10 +774,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
       }
     >
       <View>
+        <separator />
         <item
           value="1"
         />
-        <separator />
       </View>
     </View>
     <View
@@ -797,10 +797,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
       }
     >
       <View>
+        <separator />
         <item
           value="2"
         />
-        <separator />
       </View>
     </View>
     <View
@@ -820,10 +820,10 @@ exports[`VirtualizedSectionList renders all the bells and whistles 1`] = `
       }
     >
       <View>
+        <separator />
         <item
           value="3"
         />
-        <separator />
       </View>
     </View>
     <View

From db263dfaab1046c464a0d73869a64ee5e720af05 Mon Sep 17 00:00:00 2001
From: david <david@mediot.com.tw>
Date: Mon, 21 Oct 2019 13:46:23 +0800
Subject: [PATCH 2/2] issue #18943 - Fix test fail

---
 Libraries/Lists/VirtualizedSectionList.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js
index 8938fc14c2f5..49bcb7c85a97 100644
--- a/Libraries/Lists/VirtualizedSectionList.js
+++ b/Libraries/Lists/VirtualizedSectionList.js
@@ -554,9 +554,9 @@ class ItemWithSeparator extends React.Component<
        * error found when Flow v0.89 was deployed. To see the error, delete
        * this comment and run Flow. */
       <View>
-        {!inverted
-          ? [leadingSeparator, element, separator]
-          : [separator, element, leadingSeparator]}
+        {!inverted ? leadingSeparator : separator}
+        {element}
+        {!inverted ? separator : leadingSeparator}
       </View>
     ) : (
       element