React Native ListView Component

The ListView component in React Native displays data in a vertically scrollable list using a DataSource, offering better performance than ScrollView by rendering items efficiently.

• Inbuilt React Native component for displaying lists.
• Uses ListView.DataSource to manage and populate data.
• Requires a renderRow callback to render each item.

import React from 'react';
import { View, Text, ListView } from 'react-native';

export default class MyList extends React.Component {
  constructor() {
    super();

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

    this.state = {
      dataSource: ds.cloneWithRows(['Item 1', 'Item 2', 'Item 3'])
    };
  }

  render() {
    return (
      <View style={{ marginTop: 40 }}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => (
            <Text style={{ padding: 10, fontSize: 18 }}>
              {rowData}
            </Text>
          )}
        />
      </View>
    );
  }
}

• Creates a DataSource.
• Loads 3 simple items.
• Uses renderRow to display each item.
• Shows items in a vertically scrollable list.

Syntax:

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

Props for ListView Component

The ListView component in React Native provides several props to control how list data is rendered and managed efficiently. These props help handle data sources, item rendering, scrolling behavior, and performance optimization.

• dataSource – Provides an instance of ListView.DataSource used to supply data to the list.
• renderRow – Takes a data item (blob) and returns a renderable component for each row.
• initialListSize – Specifies the number of rows rendered when the component first mounts.
• onEndReachedThreshold – Defines the pixel threshold to trigger onEndReached.
• pageSize – Sets the number of rows rendered per event loop.
• renderScrollComponent – Returns the scrollable component that wraps the list rows.
• scrollRenderAheadDistance – Determines how early rows are rendered before appearing on screen.
• stickyHeaderIndices – An array of indices for children that stick to the top while scrolling.
• enableEmptySections – Indicates whether empty section headers should be rendered.
• onEndReached – Called when the list scrolls within the onEndReachedThreshold of the end.
• stickySectionHeadersEnabled – Enables sticky behavior for section headers.
• renderSectionHeader – Renders a header for each section when provided.
• renderSeparator – Adds a separator component below each row except the last.
• onChangeVisibleRows – Invoked when the set of visible rows changes.
• removeClippedSubviews – Improves performance by removing off-screen views (used with overflow: 'hidden').
• renderFooter – Renders a footer component that appears on every render pass.

Methods for ListView Component

The ListView component in React Native provides several methods to control scrolling behavior and interact with the list programmatically. These methods help manage list position and refresh the displayed data.

• scrollTo(options) – Scrolls the list to a specific x/y position.
• scrollToEnd() – Scrolls to the end of the list.
• setNativeProps(props) – Updates native properties directly.
• getScrollResponder() – Returns the scroll responder instance.
• getScrollableNode() – Returns the native scrollable node.
• getInnerViewNode() – Returns the inner view node of the list.

The ListView component, though now deprecated, was once used to render lists of items efficiently in React Native. Its successor, FlatList, provides improved performance and features.

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.

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",
    ]),
  };

  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.