React Native – SectionList
SectionList is used for rendering a scrollable list of items with section headers. It is useful for grouping data into sections.
Use Cases:
- Displaying grouped data such as a directory with alphabetized sections.
- Lists with category headers.
Example:
import React from 'react';
import { View, SectionList, Text, StyleSheet } from 'react-native';
const App = () => {
const sections = [
{ title: 'D', data: ['Cat', 'Dan', 'Apple'] },
{ title: 'J', data: ['Car', 'James', 'Joel', 'John', 'Mountain', 'Jimmy', 'Sky'] },
];
return (
<View style={styles.container}>
<SectionList
sections={sections}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({ section: { title } }) => (
<Text style={styles.header}>{title}</Text>
)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
header: {
fontSize: 24,
fontWeight: 'bold',
backgroundColor: '#fff',
},
});
export default App;