diff --git a/Examples/UIExplorer/UIExplorerList.js b/Examples/UIExplorer/UIExplorerList.js
index 08558971f25b62..26aded614debe3 100644
--- a/Examples/UIExplorer/UIExplorerList.js
+++ b/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 (
-
-
-
- {EXAMPLES.map(this._renderRow)}
-
-
-
+
+ );
+ },
+
+ _renderSectionHeader: function(data, section) {
+ return (
+
+
+ {section.toUpperCase()}
+
+
);
},
_renderRow: function(example, i) {
- invariant(example.title, 'Example must provide a title.');
return (
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',