React Native ListView Component - GeeksforGeeks

30 Jun, 2021
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 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 2: Now create a project by the following command.
expo init listview-demo
Step 3: Now go into your project folder i.e. listview-democd 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 stylesconst 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";
Reference: https://reactnative.dev/docs/0.62/listview
Picked
React-Native
React-Native Component
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to apply style to parent if it has child with CSS?
How to execute PHP code using command line ?
Difference Between PUT and PATCH Request
REST API (Introduction)
How to redirect to another page in ReactJS ?