Use separators API in UIExplorer list

Summary: Clean up code and polish UI.

Reviewed By: yungsters

Differential Revision: D4872739

fbshipit-source-id: e7977c94e744cef30fad2832cf41d7a7b5ec2b2e

Examples/UIExplorer/js/UIExplorerExampleList.js

@@ -60,6 +60,8 @@ class RowComponent extends React.PureComponent {
     item: Object,
     onNavigate: Function,
     onPress?: Function,
+    onShowUnderlay?: Function,
+    onHideUnderlay?: Function,
   };
   _onPress = () => {
     if (this.props.onPress) {
@@ -71,8 +73,7 @@ class RowComponent extends React.PureComponent {
   render() {
     const {item} = this.props;
     return (
-      <View>
-        <TouchableHighlight onPress={this._onPress}>
+      <TouchableHighlight {...this.props} onPress={this._onPress}>
         <View style={styles.row}>
           <Text style={styles.rowTitleText}>
             {item.module.title}
@@ -82,8 +83,6 @@ class RowComponent extends React.PureComponent {
           </Text>
         </View>
       </TouchableHighlight>
-        <View style={styles.separator} />
-      </View>
     );
   }
 }
@@ -121,6 +120,8 @@ class UIExplorerExampleList extends React.Component {
         {this._renderTitleRow()}
         {this._renderTextInput()}
         <SectionList
+          ItemSeparatorComponent={ItemSeparator}
+          contentContainerStyle={{backgroundColor: 'white'}}
           style={styles.list}
           sections={sections}
           renderItem={this._renderItem}
@@ -140,7 +141,14 @@ class UIExplorerExampleList extends React.Component {
     return curr.item !== prev.item;
   }
 
-  _renderItem = ({item}) => <RowComponent item={item} onNavigate={this.props.onNavigate} />;
+  _renderItem = ({item, separators}) => (
+    <RowComponent
+      item={item}
+      onNavigate={this.props.onNavigate}
+      onShowUnderlay={separators.highlight}
+      onHideUnderlay={separators.unhighlight}
+    />
+  );
 
   _renderTitleRow(): ?React.Element<any> {
     if (!this.props.displayTitleRow) {
@@ -188,6 +196,10 @@ class UIExplorerExampleList extends React.Component {
   }
 }
 
+const ItemSeparator = ({highlighted}) => (
+  <View style={highlighted ? styles.separatorHighlighted : styles.separator} />
+);
+
 UIExplorerExampleList = UIExplorerStatePersister.createContainer(UIExplorerExampleList, {
   cacheKeySuffix: () => 'mainList',
   getInitialState: () => ({filter: ''}),
@@ -217,6 +229,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#bbbbbb',
     marginLeft: 15,
   },
+  separatorHighlighted: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: 'rgb(217, 217, 217)',
+  },
   rowTitleText: {
     fontSize: 17,
     fontWeight: '500',