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](#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 #15865

Differential Revision: D5797266

Pulled By: hramos

fbshipit-source-id: 7d44fa797dbd9e83eb2bdd7833e9dd9707d9d822

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}

Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap

@@ -124,15 +124,29 @@ exports[`VirtualizedList handles nested lists 1`] = `
         <View>
           <View
             onLayout={[Function]}
-            style={null}
+            style={
+              Array [
+                Object {
+                  "flexDirection": "row",
+                },
+                null,
+              ]
+            }
           >
             <item
               title="outer1:inner0"
             />
           </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