React Native ListView Component

The ListView Component is an inbuilt React Native view component that displays a list of items in a vertically scrollable list. It requires a ListView.DataSource API to populate a simple array of data blobs and instantiate the ListView component with a data source and a renderRow callback.

The major advantage of using the ListView Component over the ScrollView Component is that it overcomes the performance shortcomings of the ScrollView Component. Behind the scenes, however, the ListView Component uses a ScrollView as its scrollable component. Thus, the ListView Component is an abstraction that optimizes the ScrollView Component.

Syntax:

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

ListView Props:

• 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.
• stickyHeaderIndices: It is an array of child indices that specify the children to be docked to the top of the screen when scrolling.
• enableEmptySections: It is a flag that indicates if an empty section header needs to be rendered or not.
• onEndReached: It is invoked when all rows have been rendered on screen and the list has been scrolled to within the onEndReachedThreshold.
• stickySectionHeadersEnabled: As the name suggests, it is used to make the section headers sticky.
• renderSectionHeader: If this prop is provided, a header is rendered for the particular section.
• renderSeparator: If this prop is provided, a renderable component (rendered as a separator below each row except the last row) is added.
• onChangeVisibleRows: It is invoked only when some visible rows change.
• removeClippedSubviews: It is used for performance optimization and mainly used in conjunction with overflow: ‘hidden’ on the row containers.
• renderFooter: If these props are provided, the header and footer are always rendered on every render pass.

ListView Methods:

• 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

Project Structure: It will look like this.

Example: Basic Use of ListView Component

App.js

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: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Note: It is important to note that ListView Component is now deprecated. Instead, newer components are used, such as FlatList or SectionList. To use the ListView Component, use the deprecated-react-native-listview package.

import ListView from "deprecated-react-native-listview";