ListView in React Native

How to create a ListView in React Native?

React Native ListView is a view component that contains the list of items and displays it in a vertically scrollable list. The minimum API to create a list view is ListView. DataSource. It populates a simple array of data blobs and instantiates a ListView component with a data source and a renderRow callback.

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 significant 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.

There are a few performance operations designed to make ListView scroll smoothly while dynamically loading potentially very large (or conceptually infinite) data sets:

• Only the re-render changed rows function provided to the data source tells the ListView only re-render changed rows if it needs to re-render a row because the source data has changed.
• Rate-limited row rendering - By default, only one row is rendered per event loop (customizable with the pageSize prop). This breaks up the work into smaller chunks to reduce the chance of dropping frames while rendering rows.

ListView Props

• dataSource: It gives an instance of the ListView.DataSource to be used.
• renderRow: It takes a blob from the data array as an argument and returns a renderable component.
• initialListSize: It specifies the number of rows to be rendered when the component mounts initially.
• onEndReachedThreshold: It specifies the threshold value in pixels for calling onEndReached.
• pageSize: It specifies the number of rows to render per event loop.
• renderScrollComponent: It returns the scrollable component in which the list rows are rendered.
• scrollRenderAheadDistance: It determines 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 makes the section headers sticky.
• renderSectionHeader: A header is rendered for the particular section if this prop is provided.
• renderSeparator: A renderable component (rendered as a separator below each row except the last row) is added if this prop is provided.
• 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: The header and footer are always rendered on every render pass if these props are provided.