render() { return ( <SectionList sections={this.state.sections} renderSectionHeader={({ section }) => <Header section={section} />} /> ); }
render() { const {onPersonPress, people} = this.props if (people.loading) return <ActivityIndicator size='large'/> return <SectionList sections = {people.sections} renderSectionHeader = {({section}) => <Text style={styles.header}>{section.title}</Text>} renderItem = {({item}) => <TouchableOpacity onPress = {onPersonPress.bind(null, item.key)}> <PersonCard person = {item.person} /> </TouchableOpacity>} /> }
render() { return ( <View> <SectionList renderSectionHeader={this._sectionComp} renderItem={this._renderItem.bind(this)} ItemSeparatorComponent={this._separator} sections={this.sections}/> </View> ); }
render() { return ( <View style={styles.container}> <SectionList sections={this.data} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} keyExtractor={(item, index) => index} /> </View> ); }
render() { const grouped = groupBy(this.props.events, event => event.title.charAt(0)) const sections = Object.entries(grouped).map(([letter, list]) => ({ title: `${letter}, ${list.length} events`, data: list.map(event => ({key: event.uid, event})) })) return <SectionList sections = {sections} renderSectionHeader = {this.getSectionRenderer} renderItem = {({item}) => <TouchableOpacity onPress = {this.handleEventPress(item.event)} onLongPress = {this.handleLongPress(item.event)} > <EventCard event = {item.event} /> </TouchableOpacity> } /> }
render() { return ( <SectionList keyExtractor={item => item.name} renderSectionHeader={this.renderSectionHeader} renderItem={this.renderItem} sections={sections} /> ); }
render() { return ( <SectionList keyExtractor={this.keyExtractor} ListHeaderComponent={this.ListHeaderComponent} contentContainerStyle={styles.containerStyle} sections={sections} renderItem={this.renderItem} renderSectionHeader={this.renderSectionHeader} ItemSeparatorComponent={this.ItemSeparatorComponent} SectionSeparatorComponent={Divider} stickySectionHeadersEnabled={false} /> ); }
render() { return ( <View style={sampleStylesVar.sampleStyles.sectionListContainer}> <SectionList sections={[ { title: 'D', data: ['Devin'] }, { title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'] }, ]} renderItem={({ item }) => <Text style={sampleStylesVar.sampleStyles.item}>{item}</Text>} renderSectionHeader={({ section }) => <Text style={sampleStylesVar.sampleStyles.sectionHeader}>{section.title}</Text>} /> </View> ); }
render() { return ( <SectionList style={styles.container} sections={settingItems} keyExtractor={(item) => item.iconName} renderItem={this._renderItem} // SectionSeparatorComponent={this._sectionSeparator} renderSectionHeader={this._sectionSeparator} /> ) }
render() { return ( <View style={styles.container2}> <SectionList sections={[ {title: 'D', data: ['Devin']}, {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, ]} renderItem={({item}) => <Text style={styles.item2}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} keyExtractor={(item, index) => index} /> </View> ); }
const InfiniteList = ({ sections, renderItem, onEndReached, renderSectionFooter }: Props) => ( <SectionList contentInsetAdjustmentBehavior="always" contentContainerStyle={styles.sectionListContentContainer} renderItem={renderItem} sections={sections} SectionSeparatorComponent={renderSectionSeparator} ItemSeparatorComponent={renderItemSeparator} onEndReachedThreshold={0.2} onEndReached={onEndReached} keyExtractor={item => item.id} renderSectionFooter={renderSectionFooter} keyboardDismissMode="on-drag" /> )
render() { return ( <View style={styles.container}> <SectionList sections={[ {title: 'D', data: ['Devin', 'Dan', 'Dominic']}, {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, ]} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} keyExtractor={(item, index) => index} /> </View> ); }
render() { return ( <View style={styles.container}> <SectionList sections={[ {title: 'D', data: ['Devin']}, {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, ]} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} /> </View> ); }
render() { return ( <View style={styles.container}> <SectionList sections={[ {title: 'D', data: ['Devin']}, {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, ]} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} /> </View> ); }
render() { return ( <View style={styles.container}> <SectionList sections={[ {title: 'D', data: ['Devin']}, {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']}, ]} renderItem={({item}) => <Text style={styles.item}>{item}</Text>} renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>} keyExtractor={(item, index) => index} /> </View> ); }