react native-tutorial

React Native ListView

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.



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


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",

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

// 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



Leave a Reply

Your email address will not be published.