Add SectionSeparatorComponent support

Summary: Makes it easy to render separators between sections, as opposed to between items.

Reviewed By: yungsters

Differential Revision: D4555707

fbshipit-source-id: 34572ab4b2c5b47db640543149fe2551c34ccf7b

Examples/UIExplorer/js/SectionListExample.js

@@ -46,11 +46,20 @@ const {
   renderSmallSwitchOption,
 } = require('./ListExampleShared');
 
-const SectionHeaderComponent = ({section}) =>
+const SectionHeaderComponent = ({section}) => (
   <View>
     <Text style={styles.headerText}>SECTION HEADER: {section.key}</Text>
     <SeparatorComponent />
-  </View>;
+  </View>
+);
+
+const SectionSeparatorComponent = () => (
+  <View>
+    <SeparatorComponent />
+    <Text style={styles.sectionSeparatorText}>SECTION SEPARATOR</Text>
+    <SeparatorComponent />
+  </View>
+);
 
 class SectionListExample extends React.PureComponent {
   static title = '<SectionList>';
@@ -88,12 +97,12 @@ class SectionListExample extends React.PureComponent {
           FooterComponent={FooterComponent}
           ItemComponent={this._renderItemComponent}
           SectionHeaderComponent={SectionHeaderComponent}
+          SectionSeparatorComponent={SectionSeparatorComponent}
           SeparatorComponent={SeparatorComponent}
           enableVirtualization={this.state.virtualized}
           onRefresh={() => alert('onRefresh: nothing to refresh :P')}
           onViewableItemsChanged={this._onViewableItemsChanged}
           refreshing={false}
-          shouldItemUpdate={(prev, next) => prev.item !== next.item}
           sections={[
             {ItemComponent: StackedItemComponent, key: 's1', data: [
               {title: 'Item In Header Section', text: 's1', key: '0'}
@@ -134,6 +143,12 @@ const styles = StyleSheet.create({
   searchRow: {
     paddingHorizontal: 10,
   },
+  sectionSeparatorText: {
+    color: 'gray',
+    alignSelf: 'center',
+    padding: 4,
+    fontWeight: 'bold',
+  },
 });
 
 module.exports = SectionListExample;