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' } +});