React Native is an open-source framework that is primarily designed to build natively rendering mobile applications for iOS and Android using JavaScript and React.
It comes with different types of components to present the list of items in our applications. The two primary components we’ll likely use for list views are the following:
FlatList
SectionList
FlatList componentThe FlatList component in React Native offers a powerful tool for efficiently rendering long lists of similarly structured data.
Note: The
FlatListcomponent does not render the complete list at once but only renders the data that is currently displayed on the screen.
Some of the essential FlatList component include:
data: It contains the complete list of data to be rendered.
renderItem(): It is a function that takes an item from the data and returns the React element to render it.
keyExtractor(): It is a function used to extract a unique key for each item from the data.
ListHeaderComponent(): It accepts a function that returns a React element, which is rendered as the header of the list.
ListFooterComponent(): It accepts a function that returns a React element, which is rendered as the footer of the list.
Let’s look at an example where we implement the FlatList component.
import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';
const styles = StyleSheet.create({
container: {
padding: 10
},
text: {
fontSize: 15,
},
listItem: {
padding: 10,
fontSize: 15,
},
headerFooter: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
margin: 10,
backgroundColor: '#f2f2f2',
},
});
const renderHeader = () => (
<Text style={styles.headerFooter}>Programming languages</Text>
);
const renderFooter = () => (
<Text style={styles.headerFooter}>The end</Text>
);
const keyExtractor = (item) => item.id;
const languages = [
{ id: '1', language: 'C'},
{ id: '2', language: 'C++'},
{ id: '3', language: 'C#'},
{ id: '4', language: 'Go'},
{ id: '5', language: 'Java'},
{ id: '6', language: 'JavaScript'},
{ id: '7', language: 'Kotlin'},
{ id: '8', language: 'Python'},
{ id: '9', language: 'PHP'},
{ id: '10', language: 'Perl'},
{ id: '11', language: 'R'},
{ id: '12', language: 'React'},
{ id: '13', language: 'Ruby'},
{ id: '14', language: 'SQL'},
{ id: '15', language: 'Swift'},
{ id: '16', language: 'TypeScript'},
];
const FlatListDemo = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>The list of some of the common programming languages is given as: </Text>
<FlatList
data={languages}
renderItem={({item}) => <Text style={styles.listItem}>{item.language}</Text>}
keyExtractor={keyExtractor}
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
/>
</View>
);
}
export default FlatListDemo;Line 2: We import the FlatList, StyleSheet, Text, and View component from the react-native library.
Lines 4–23: We add styling to the list for enhancing the UI experience using the StyleSheet component.
Lines 25–27: We create a renderHeader() function and set “Programming languages” as the header text of the list.
Lines 29–31: We create a renderFooter() function and set “The end” as the footer text of the list.
Line 33: We define a keyExtractor() function to extract a unique key for each item in a list.
Lines 35–52: We create a list of programming languages named languages to render.
Lines 56–69: We display the languages list using the data, renderItem, keyExtractor, ListHeaderComponent, and the ListFooterComponent properties of the <FlatList> component.
SectionList componentThe SectionList component in React Native is a fundamental tool to organize and present data in a structured manner. It is a fast and efficient way to show organized lists. The SectionList enhances the development experience, particularly when dealing with complex data structures and categorization requirements.
Some of the essential props provided by the SectionList component include:
sections: It is the array of sections to be rendered in the list. Each section is an object containing data and, optionally, a header.
renderItem(): It is a function that renders each item within a section. It receives an object containing the item data and should return a React element.
keyExtractor(): It is a function used to extract a unique key for each item from the data.
renderSectionHeader: It is a function that renders the header for each section. It receives an object containing the section data and should return a React element representing the section header.
ItemSeparatorComponent: It is an optional component to render between items within a section. It adds visual separation, such as a line or space.
SectionSeparatorComponent: It is an optional component to render between sections. Similar to ItemSeparatorComponent but rendered between sections instead of items.
ListHeaderComponent(): It accepts a function that returns a React element, which is rendered as the header of the list.
ListFooterComponent(): It accepts a function that returns a React element, which is rendered as the footer of the list.
Now, let’s implement the SectionList component.
import React from 'react';
import { SectionList, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
sectionText: {
backgroundColor: "#fbfaf8",
padding: 10,
fontSize: 18,
},
sectionTitle:{
backgroundColor: "#ee7600",
padding: 10,
fontSize: 22,
fontWeight: "bold",
},
sectionSeparator:{
height: 2,
backgroundColor: 'black',
},
itemSeparator:{
height: 1,
backgroundColor: 'grey',
},
headerFooter: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 10,
margin: 10,
backgroundColor: '#f2f2f2',
},
});
const SectionSeparator = () => {
return (
<View style={styles.sectionSeparator}/>
);
};
const ItemSeparator = () => {
return (
<View style={styles.itemSeparator}/>
);
};
const renderHeader = () => (
<Text style={styles.headerFooter}>Programming languages</Text>
);
const renderFooter = () => (
<Text style={styles.headerFooter}>The end</Text>
);
const keyExtractor = (item, index) => item + index.toString();
const languages = [
{ title: 'C', data: ['C', 'C++', 'C#'],},
{ title: 'G', data: ['Go'],},
{ title: 'J', data: ['Java', 'JavaScript'],},
{ title: 'K', data: ['Kotlin'],},
{ title: 'P', data: ['Python', 'PHP', 'Perl'],},
{ title: 'R', data: ['R', 'React', 'Ruby'],},
{ title: 'S', data: ['SQL', 'Swift'],},
{ title: 'T', data: ['TypeScript'],},
];
const SectionListDemo = () => {
return (
<SectionList
sections={languages}
renderItem={({item}) => <Text style={styles.sectionText}>{item}</Text>}
renderSectionHeader={({section})=>(<Text style={styles.sectionTitle}>{section.title}</Text>)}
keyExtractor={keyExtractor}
SectionSeparatorComponent= {SectionSeparator}
ItemSeparatorComponent= {ItemSeparator}
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
/>
);
}
export default SectionListDemo;Line 2: We import the SectionList, StyleSheet, Text, and View component from the react-native library.
Lines 4–32: We add styling to the SectionList for enhancing the UI experience using the StyleSheet component.
Lines 34–38: We create a SectionSeparator component to separate sections using a black horizontal line.
Lines 40–44: We create an ItemSeparator component to separate items in each section using a grey horizontal line.
Lines 46–48: We create a renderHeader() function and set “Programming languages” as the header text of the list.
Lines 50–52: We create a renderFooter() function and set “The end” as the footer text of the list.
Line 54: We define a keyExtractor() function to generate a unique key for each item in a list by combining the item and the index.
Lines 56–65: We create a list of programming languages named languages , which is separated into sections.
Lines 62–82: We display the languages list in sections using the sections, renderItem, renderSectionHeader, keyExtractor, SectionSeparatorComponent, ItemSeparatorComponent, ListHeaderComponent and the ListFooterComponent properties of the <SectionList> component.
The list view components in React Native are very useful for displaying a list of data. However, we must choose the component carefully based on our use case. We only use the SectionList component if we want to display the data in sections and the FlatList component otherwise. We can use different props to customize headers, items, and separators. This enhances the overall user experience of the applications.
Free Resources