Convert UIExplorer to ListView

Summary:
Using <ListView> is not that much more work but gives us section headers for free :) Now there are two groups: Components and APIs. It mirrors the documentation.

Closes facebook#163
Github Author: Christopher Chedeau <vjeux@fb.com>

Test Plan: ![ios simulator screen shot mar 17 2015 9 09 07 pm](https://cloud.githubusercontent.com/assets/197597/6702577/d40c00ae-ccea-11e4-8035-cfb46367ea1d.png)

Examples/UIExplorer/UIExplorerList.js

@@ -5,66 +5,91 @@
 
 var React = require('react-native/addons');
 var {
+  ListView,
   PixelRatio,
   ScrollView,
   StyleSheet,
   Text,
   TouchableHighlight,
   View,
-  invariant,
 } = React;
 
 var createExamplePage = require('./createExamplePage');
 
-var EXAMPLES = [
-  require('./ViewExample'),
-  require('./LayoutExample'),
-  require('./TextExample.ios'),
-  require('./TimerExample'),
-  require('./TextInputExample'),
+var COMPONENTS = [
+  require('./ActivityIndicatorExample'),
+  require('./DatePickerExample'),
   require('./ImageExample'),
-  require('./ListViewSimpleExample'),
   require('./ListViewPagingExample'),
+  require('./ListViewSimpleExample'),
+  require('./MapViewExample'),
   require('./NavigatorIOSExample'),
-  require('./StatusBarIOSExample'),
-  require('./PointerEventsExample'),
-  require('./TouchableExample'),
-  require('./ActivityIndicatorExample'),
-  require('./ScrollViewExample'),
   require('./PickerExample'),
-  require('./DatePickerExample'),
-  require('./GeolocationExample'),
-  require('./TabBarExample'),
-  require('./SwitchExample'),
+  require('./ScrollViewExample'),
   require('./SliderIOSExample'),
-  require('./AsyncStorageExample'),
-  require('./CameraRollExample.ios'),
-  require('./MapViewExample'),
+  require('./SwitchExample'),
+  require('./TabBarExample'),
+  require('./TextExample.ios'),
+  require('./TextInputExample'),
+  require('./TouchableExample'),
+  require('./ViewExample'),
   require('./WebViewExample'),
-  require('./AppStateIOSExample'),
-  require('./NetInfoExample'),
-  require('./AlertIOSExample'),
+];
+
+var APIS = [
+  require('./ActionSheetIOSExample'),
   require('./AdSupportIOSExample'),
+  require('./AlertIOSExample'),
   require('./AppStateExample'),
-  require('./ActionSheetIOSExample'),
+  require('./AppStateIOSExample'),
+  require('./AsyncStorageExample'),
+  require('./CameraRollExample.ios'),
+  require('./GeolocationExample'),
+  require('./LayoutExample'),
+  require('./NetInfoExample'),
+  require('./PointerEventsExample'),
+  require('./StatusBarIOSExample'),
+  require('./TimerExample'),
   require('./VibrationIOSExample'),
 ];
 
 var UIExplorerList = React.createClass({
+
+  getInitialState: function() {
+    var ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !== r2,
+      sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
+    });
+    return {
+      dataSource: ds.cloneWithRowsAndSections({
+        components: COMPONENTS,
+        apis: APIS,
+      }),
+    };
+  },
+
   render: function() {
     return (
-      <ScrollView style={styles.list}>
-        <View style={styles.group}>
-          <View style={styles.line} />
-          {EXAMPLES.map(this._renderRow)}
-          <View style={styles.line} />
-        </View>
-      </ScrollView>
+      <ListView
+        style={styles.list}
+        dataSource={this.state.dataSource}
+        renderRow={this._renderRow}
+        renderSectionHeader={this._renderSectionHeader}
+      />
+    );
+  },
+
+  _renderSectionHeader: function(data, section) {
+    return (
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionHeaderTitle}>
+          {section.toUpperCase()}
+        </Text>
+      </View>
     );
   },
 
   _renderRow: function(example, i) {
-    invariant(example.title, 'Example must provide a title.');
     return (
       <View key={i}>
         <TouchableHighlight onPress={() => this._onPressRow(example)}>
@@ -97,13 +122,12 @@ var styles = StyleSheet.create({
   list: {
     backgroundColor: '#eeeeee',
   },
-  group: {
-    backgroundColor: 'white',
-    marginVertical: 25,
+  sectionHeader: {
+    padding: 5,
   },
-  line: {
-    backgroundColor: '#bbbbbb',
-    height: 1 / PixelRatio.get(),
+  sectionHeaderTitle: {
+    fontWeight: 'bold',
+    fontSize: 11,
   },
   row: {
     backgroundColor: 'white',