An inherent React Native view component called the ListView Component shows a list of items in a scrollable, vertical list. It calls for a ListView. The ListView component is instantiated with a data source and a renderRow callback using the DataSource API to fill a straightforward array of data blobs.

Utilizing the ListView Component instead of the ScrollView Component has the primary benefit of addressing the ScrollView Component’s performance issues. However, a ScrollView is really used by the ListView Component as its scrollable component. As a result, the ScrollView Component is optimised by the ListView Component, which is an abstraction.

Syntax:

<ListView
    dataSource={}
    renderRow={}
/>

Properties of ListView

• dataSource: It gives an instance of the ListView.DataSource to be used.
• renderRow: It is used to take a blob from the data array as an argument and returns a renderable component.
• initialListSize: It is used to specify the number of rows to be rendered when the component mounts initially.
• onEndReachedThreshold: It is used to specify the threshold value in pixels for calling onEndReached.
• pageSize: It is used to specify the number of rows to render per event loop.
• renderScrollComponent: It is used to return the scrollable component in which the list rows are rendered.
• scrollRenderAheadDistance: It specifies how early to start rendering list rows before they appear on the screen.

ListView Techniques

• getMetrics(): Function used to export data, primarily for analytics purposes.
• scrollTo(): Function used to scroll to a given x-y offset.
• scrollToEnd(): Function used to scroll the list. In the case of a vertical ListView, it is used to scroll to the bottom of the list. In the case of a horizontal ListView, it is used to scroll to the right.
• flashScrollIndicators(): Function used to briefly show the scroll indicators.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init listview-demo

Step 3: Now go into your project folder i.e. listview-demo

cd listview-demo

Code

import React, { Component } from "react";
import { Text, View, StyleSheet, ListView } from "react-native";
import { Icon } from "react-native-elements";

const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});

class App extends Component {
state = {
	dataSource: ds.cloneWithRows([
	"Data Structures",
	"STL",
	"C++",
	"Java",
	"Python",
	"ReactJS",
	"Angular",
	"NodeJs",
	"PHP",
	"MongoDb",
	"MySql",
	"Android",
	"iOS",
	"Hadoop",
	"Ajax",
	"Ruby",
	"Rails",
	".Net",
	"Perl",
	]),
};

render() {
	return (
	<View style={styles.screen}>
		<ListView
		dataSource={this.state.dataSource}
		renderRow={(rowData) => (
			<View style={styles.row}>
			<Text style={styles.rowText}>{rowData}</Text>
			<Icon name="ios-eye" type="ionicon" color="#C2185B" />
			</View>
		)}
		/>
	</View>
	);
}
}

// Screen styles
const styles = StyleSheet.create({
screen: {
	marginTop: 30,
},
row: {
	margin: 15,
	flexDirection: "row",
	justifyContent: "space-between",
	alignItems: "center",
	paddingHorizontal: 2,
},
rowText: {
	fontSize: 18,
},
});

export default App;

Start the server by using the following command.

npm run android

Output