From ae60ae40746a05bf411f204f5e8afde3d6fa8d97 Mon Sep 17 00:00:00 2001
From: m30do <m30do@yahoo.com>
Date: Fri, 8 Sep 2017 14:57:42 -0700
Subject: [PATCH] fix ItemSeparatorComponent position in horizontal and
 inverted mode

Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

There's a positioning bug in `VirtualizedList` when `ItemSeparatorComponent` is defined for a list in horizontal or inverted mode. And also we face this bug in `FlatList`, because it is using `VirtualizedList` to render lists.
This commit will fix the [#15777](https://github.com/facebook/react-native/issues/15777).

Before fix:
```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```

![image](https://user-images.githubusercontent.com/15084663/30205251-95f14c70-949d-11e7-85e9-7a3304a52818.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205411-f01d27b4-949d-11e7-991e-00aeae0c01e0.png)

I ran this code with all possible values of `horizontal` and `inverted` props in `FlatList` and `VirtualizedList` and the results of each run was as below:
After fix bug:

```
<FlatList
  ...
  horizontal={true}
  inverted={false}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205498-323bcf60-949e-11e7-8ba0-465614ea5cf2.png)

```
<FlatList
  ...
  horizontal={true}
  inverted={true}
  ...
/>
```
![image](https://user-images.githubusercontent.com/15084663/30205543-5274f612-949e-11e7-9660-bbdf8194cd27.png)
Closes https://github.com/facebook/react-native/pull/15865

Differential Revision: D5797266

Pulled By: hramos

fbshipit-source-id: 7d44fa797dbd9e83eb2bdd7833e9dd9707d9d822
---
 Libraries/Lists/VirtualizedList.js            |  13 +-
 .../VirtualizedList-test.js.snap              | 113 ++++++++++++------
 2 files changed, 87 insertions(+), 39 deletions(-)

diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
index 31dd01b59..d2ae8b86b 100644
--- a/Libraries/Lists/VirtualizedList.js
+++ b/Libraries/Lists/VirtualizedList.js
@@ -518,6 +518,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       data,
       getItem,
       getItemCount,
+      horizontal,
       keyExtractor,
     } = this.props;
     const stickyOffset = this.props.ListHeaderComponent ? 1 : 0;
@@ -537,6 +538,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           ItemSeparatorComponent={ii < end ? ItemSeparatorComponent : undefined}
           cellKey={key}
           fillRateHelper={this._fillRateHelper}
+          horizontal={horizontal}
           index={ii}
           inversionStyle={inversionStyle}
           item={item}
@@ -1255,6 +1257,7 @@ class CellRenderer extends React.Component<
     ItemSeparatorComponent: ?React.ComponentType<*>,
     cellKey: string,
     fillRateHelper: FillRateHelper,
+    horizontal: ?boolean,
     index: number,
     inversionStyle: ?StyleObj,
     item: Item,
@@ -1315,6 +1318,7 @@ class CellRenderer extends React.Component<
       CellRendererComponent,
       ItemSeparatorComponent,
       fillRateHelper,
+      horizontal,
       item,
       index,
       inversionStyle,
@@ -1336,9 +1340,14 @@ class CellRenderer extends React.Component<
     const itemSeparator =
       ItemSeparatorComponent &&
       <ItemSeparatorComponent {...this.state.separatorProps} />;
+    const cellStyle = inversionStyle
+      ? horizontal
+        ? [{flexDirection: 'row-reverse'}, inversionStyle]
+        : [{flexDirection: 'column-reverse'}, inversionStyle]
+      : horizontal ? [{flexDirection: 'row'}, inversionStyle] : inversionStyle;
     if (!CellRendererComponent) {
       return (
-        <View style={inversionStyle} onLayout={onLayout}>
+        <View style={cellStyle} onLayout={onLayout}>
           {element}
           {itemSeparator}
         </View>
@@ -1347,7 +1356,7 @@ class CellRenderer extends React.Component<
     return (
       <CellRendererComponent
         {...this.props}
-        style={inversionStyle}
+        style={cellStyle}
         onLayout={onLayout}>
         {element}
         {itemSeparator}
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
index 191e7f77c..3c683de77 100644
--- a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
+++ b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -124,7 +124,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
         <View>
           <View
             onLayout={[Function]}
-            style={null}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
           >
             <item
               title="outer1:inner0"
@@ -132,7 +139,14 @@ exports[`VirtualizedList handles nested lists 1`] = `
           </View>
           <View
             onLayout={[Function]}
-            style={null}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
           >
             <item
               title="outer1:inner1"
@@ -476,13 +490,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
     <View
       onLayout={undefined}
       style={
-        Object {
-          "transform": Array [
-            Object {
-              "scaleY": -1,
-            },
-          ],
-        }
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
       }
     >
       <item
@@ -493,13 +512,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
     <View
       onLayout={undefined}
       style={
-        Object {
-          "transform": Array [
-            Object {
-              "scaleY": -1,
-            },
-          ],
-        }
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
       }
     >
       <item
@@ -510,13 +534,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
     <View
       onLayout={undefined}
       style={
-        Object {
-          "transform": Array [
-            Object {
-              "scaleY": -1,
-            },
-          ],
-        }
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
       }
     >
       <item
@@ -527,13 +556,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
     <View
       onLayout={undefined}
       style={
-        Object {
-          "transform": Array [
-            Object {
-              "scaleY": -1,
-            },
-          ],
-        }
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
       }
     >
       <item
@@ -544,13 +578,18 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
     <View
       onLayout={undefined}
       style={
-        Object {
-          "transform": Array [
-            Object {
-              "scaleY": -1,
-            },
-          ],
-        }
+        Array [
+          Object {
+            "flexDirection": "column-reverse",
+          },
+          Object {
+            "transform": Array [
+              Object {
+                "scaleY": -1,
+              },
+            ],
+          },
+        ]
       }
     >
       <item