clarify highlightRow usage with UIExplorer example

Summary:
Explain the **motivation** for making this change. What existing problem does the pull request solve?

> From the existing documentation, it's not clear how one would make use of the highlightRow attribute of ListView.renderRow. Special thanks to halilb for his assistance.

Example: When "Adding a function to do X", explain why it is necessary to have a way to do X.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

> Here's a screenshot of the UIExplorer with a row highlighted (using the FB Blue Color)
> <img width="466" alt="2016-03-16_1944" src="https://cloud.githubusercontent.com/assets/1640318/13835020/49b5b38c-ebb1-11e5-98fa-17201fd3db92.png">

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTIN
Closes https://github.com/facebook/react-native/pull/6495

Differential Revision: D3264092

Pulled By: nicklockwood

fb-gh-sync-id: 9608e8a66387f527b872928a3595ca4d17736b82
fbshipit-source-id: 9608e8a66387f527b872928a3595ca4d17736b82

Examples/UIExplorer/ListViewExample.js

@@ -58,17 +58,20 @@ var ListViewSimpleExample = React.createClass({
           dataSource={this.state.dataSource}
           renderRow={this._renderRow}
           renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
-          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
+          renderSeparator={this._renderSeperator}
         />
       </UIExplorerPage>
     );
   },
 
-  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
+  _renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
     return (
-      <TouchableHighlight onPress={() => this._pressRow(rowID)}>
+      <TouchableHighlight onPress={() => {
+          this._pressRow(rowID);
+          highlightRow(sectionID, rowID);
+        }}>
         <View>
           <View style={styles.row}>
             <Image style={styles.thumb} source={imgSource} />
@@ -96,6 +99,18 @@ var ListViewSimpleExample = React.createClass({
       this._genRows(this._pressData)
     )});
   },
+
+  _renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
+    return (
+      <View
+        key={`${sectionID}-${rowID}`}
+        style={{
+          height: adjacentRowHighlighted ? 4 : 1,
+          backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
+        }}
+      />
+    );
+  }
 });
 
 var THUMB_URLS = [
@@ -130,10 +145,6 @@ var styles = StyleSheet.create({
     padding: 10,
     backgroundColor: '#F6F6F6',
   },
-  separator: {
-    height: 1,
-    backgroundColor: '#CCCCCC',
-  },
   thumb: {
     width: 64,
     height: 64,