diff --git a/packages/examples/pages/section-list/index.js b/packages/examples/pages/section-list/index.js
new file mode 100644
index 00000000..e04e9d06
--- /dev/null
+++ b/packages/examples/pages/section-list/index.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Example from '../../shared/example';
+import { SectionList, Text, View } from 'react-native-web';
+
+function makeItems(length) {
+ return Array(length)
+ .fill(0)
+ .map((value, index) => ({
+ key: `item_${index}`,
+ title: `Item ${index}`
+ }));
+}
+
+const sectionsData = [
+ { data: makeItems(9), title: 'Section A', color: 'red', key: 'a' },
+ { data: makeItems(6), title: 'Section B', color: 'green', key: 'b' },
+ { data: makeItems(3), title: 'Section C', color: 'yellow', key: 'c' }
+];
+
+function renderItem({ item }) {
+ return (
+
+ {item.title}
+
+ );
+}
+
+function renderSectionHeader({ section }) {
+ const extraStyle = { backgroundColor: section.color };
+ return (
+
+ {section.title}
+
+ );
+}
+
+function renderSectionFooter({ section }) {
+ const footerStyle = { height: 10, backgroundColor: section.color, marginBottom: 10 };
+ return ;
+}
+
+export default function SectionListPage() {
+ return (
+
+ (Example ListFooterComponent Here)
+ }
+ ListHeaderComponent={
+ (Example ListHeaderComponent Here)
+ }
+ renderItem={renderItem}
+ renderSectionFooter={renderSectionFooter}
+ renderSectionHeader={renderSectionHeader}
+ sections={sectionsData}
+ />
+
+ );
+}
+
+const styles = StyleSheet.create({
+ examplesFooter: { fontSize: 22 },
+ examplesHeader: { fontSize: 22, marginBottom: 20 },
+ itemTitleText: { fontSize: 16 },
+ sectionHeaderText: { fontSize: 20, fontWeight: 'bold' }
+});