issue #18943 - SectionSeparatorComponent and ItemSeparatorComponent s… (

#26933)

Summary:
SectionSeparatorComponent and ItemSeparatorComponent should displays in the correct place with an inverted list

This PR fix issue #18943
Currently, when using SectionSeparatorComponent and ItemSeparatorComponent with an inverted SectionList, the separators will display at the wrong place.
Please see issue #18943 for more information.

## Changelog
[General] [Fixed] - Fix separators displays in wrong places with the inverted list
Pull Request resolved: #26933

Test Plan:
before this fix, the following code will result in following screenshots:
```
import React from 'react';
import { StyleSheet, Text, SectionList, SafeAreaView } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        style={{ width: '100%' }}
        sections={[
          {
            data: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6', 'item 7']
          }
        ]}
        renderItem={({ item }) => <Text style={{ fontSize: 18, backgroundColor: 'greenyellow', width: '100%' }}>{item}</Text>}
        inverted
        SectionSeparatorComponent={() => <Text style={{ fontSize: 28, backgroundColor: 'fuchsia', width: '100%' }}>section separator</Text>}
        ItemSeparatorComponent={() => <Text style={{ fontSize: 12, backgroundColor: 'gold', width: '100%' }}>item separator</Text>}
        renderSectionHeader={()=><Text style={{ fontSize: 38, backgroundColor: 'lightpink', width: '100%' }}>section header</Text>}
        renderSectionFooter={()=><Text style={{ fontSize: 38, backgroundColor: 'lightpink', width: '100%' }}>section footer</Text>}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```
<img width="413" alt="螢幕快照 2019-10-21 下午12 23 36" src="https://user-images.githubusercontent.com/1477985/67176763-030df580-f3fe-11e9-938f-38939339bf5c.png">

after this fix, the separators will display in the right place
<img width="414" alt="螢幕快照 2019-10-21 下午12 23 51" src="https://user-images.githubusercontent.com/1477985/67176795-2042c400-f3fe-11e9-96f3-a8ea1cfb28a2.png">

Differential Revision: D18174225

Pulled By: cpojer

fbshipit-source-id: 30901e68f38326c69715514a09a7a5130a2332a0

Libraries/Lists/VirtualizedSectionList.js

@@ -374,6 +374,7 @@ class VirtualizedSectionList<
           section={info.section}
           trailingItem={info.trailingItem}
           trailingSection={info.trailingSection}
+          inverted={!!this.props.inverted}
         />
       );
     }
@@ -435,6 +436,7 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   onUpdateSeparator: (cellKey: string, newProps: Object) => void,
   prevCellKey?: ?string,
   renderItem: Function,
+  inverted: boolean,
 |}>;
 
 type ItemWithSeparatorState = {
@@ -534,6 +536,7 @@ class ItemWithSeparator extends React.Component<
       item,
       index,
       section,
+      inverted,
     } = this.props;
     const element = this.props.renderItem({
       item,
@@ -552,9 +555,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}
+        {!inverted ? leadingSeparator : separator}
         {element}
-        {separator}
+        {!inverted ? separator : leadingSeparator}
       </View>
     ) : (
       element

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