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.
Syntax:
<ListView
dataSource={}
renderRow={}
/>
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
Code
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
