EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native ListView

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native ListView

React Native ListView

Introduction to React Native ListView

React Native ListView library is of react-native library where we can decide the presentation of listing of the items, It has many library functions and attributes which make our component mobile-friendly, also this library component can be used for displaying a large amount of data, basically, in this component, we have to pass array of lists to the component and it will be capable to display all the data in format which you want (like listing with separator or listing without separator), with pagination(we can define number of items which can be displayed for each page ).

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

In the below syntax we can see that we are using ListView components where we are passing arrays of lists to it to display any of listing for some items of the list.

const SL = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
});
this.state = {
initialStatus: SL.cloneWithRows( Array of Data Source)
};
<ListView
dataSource={this.state.initialStatus}//it contains array of list
renderRow={rowData => (
<Text style={Object of style to design each item output here(we can write beautiful custom designs here)}>{rowData}</Text>
)}
/>

Attributes

Below are the different attributes of React Native ListView:

1. dataSource: This is a required attribute in the ListView of react-native. It takes the data array to create the list view.

2. renderRow: It creates renderable components for us. It uses the data coming from the data source and show as row with ids. This attribute provides a mechanism where we can customize every list in different ways according to our requirements, for example, suppose the list which we are displaying in which we want to mark any specific list with different colors for analysis of data than we can write all the login inside it.

3. pageSize: Here we define the size of our pages. This size means how many items can be displayed on one page. For example, many times displaying all the items at once is not feasible in an android app so we can use this attribute where we can decide the number of list items that can be displayed on the app.

Popular Course in this category
React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,487 ratings)
Course Price

View Course

Related Courses

4. Style: We can write our own style for displaying components, this style can be used for designing our listing look, it will design our listing color and listing positions, etc.

5. renderSeparator: In case we wanted to create a separator between the list of items or rows we can use it. It gives a better understanding of UI because it creates a separator between all the items which makes better analysis. It creates a component for render purpose where it renders each component as a separator.

6. onEndReached: In case we wanted to display something or if we wanted to perform some activity at the end of the listing of items we can use this attribute. For example, suppose we want to display that all items of list ended and we want to display a message to the customer that list ended then it would be useful.

7. renderFooter: Many times rendering any static attribute each time is an expansive task on React native, so to avoid such operation in react native we use renderFooter and renderheader. In renderFooter it binds the footer element in such a way that it will not render it again and again.

Examples to implement Native ListView

Given below are the examples of React Native ListView:

Example #1

You have seen many times listing some items on websites, here in case of react-native we use ListView. ListView is very popular for listing items on android and IOS.

In the below example are below tasks.

  • We created a class with name StudentList and this class is extending react native core component library.
  • Inside the component StudentList, we have created a constructor function in which we are performing things like initialization of student data source and clone it with an array of student names.
  • Inside the render function, we are returning the list view, where we are calling react native ListView component and passing it required parameters along with student data source which we defined at the time of initialization.

Along with the output screen where we are displaying a list of all students.

Code:

import React, { Component } from "react";
import { Text, ListView } from "react-native";
export default class StudentList extends Component {
constructor() {
super();
const SL = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
});
this.state = {
studentList: SL.cloneWithRows([
"Ranjan",
"Ajay",
"Vijay",
"Sujeet",
"Akash",
"Vikash",
"Puneet",
"Susmita",
"Ankeet",
"Anjali",
"Sumit",
"Naresh",
"Rekha"
])
};
}
render() {
return (
<ListView
dataSource={this.state.studentList}
renderRow={student => <Text style={{ fontSize: 18 }}>{student}</Text>}
/>
);
}
}

Output:

react native listview 1

Example #2

In this example, we are designing a component to display the list of all students and also it has features like if anyone will click on the list of any student an alert box will open with displaying the student name which we clicked.

In the below example we are performing the following tasks.

  • First, we created a class with StudentList and this class is extending the react-native core component.
  • Inside the class StudentList, we are defining the constructor function and defining initial states for the components.
  • We are returning the HTML view by calling ListView Component of react-native and we are passing data source to ListView component.
  • Inside ListView component we have written logic for onPress on inner component TouchableOpacity where we are displaying an alert if we click on any names from the list.

Code:

import React from "react";
import { ListView, View, Text, StyleSheet, Alert } from "react-native";
class StudentList extends React.Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
});
this.state = {
studentList: ds.cloneWithRows([
"Anita",
"Akash",
"Rakesh",
"Vijay",
"Manish",
"Ankit",
"Deepak",
"Kumar",
"Ajeet",
"Bheem",
"nandan",
"Naresh",
"Anup",
"Radha",
"Pankaj"
])
};
}
displayStudent = rowData => {
console.log("helloooo");
Alert.alert(rowData);
};
render() {
return (
<ListView
dataSource={this.state.studentList}
style={styles.containerStyle}
renderRow={student => (
<Text
onPress={this.displayStudent.bind(this, student)}
style={styles.rowViewContainerStyle}
{student}
</Text>
)}
renderSeparator={(sID, rId) => (
<View key={rId} style={styles.separatorStyle} />
)}
/>
);
}
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
backgroundColor: "green"
},
separatorStyle: {
height: 0.5,
width: "100%",
backgroundColor: "red"
},
rowViewContainerStyle: {
flex: 1,
paddingRight: 15,
alignItems: "center",
paddingTop: 14,
paddingBottom: 14,
borderBottomWidth: 0.5,
borderColor: "'#c9c9c9",
flexDirection: "row",
fontSize: 20,
marginLeft: 10
}
});
export default StudentList;

Output:

react native listview 2

Conclusion

From this tutorial, we came to learn that we can manage the listing of items on the android and IOS apps without writing too many HTML codes with specifying the predefined attributes.

Recommended Articles

This is a guide to the React Native ListView. Here we discuss the basic concept, attributes, and examples of React Native ListView with code and output. You may also have a look at the following articles to learn more –

  1. React Native State
  2. React Native StatusBar
  3. React Native ScrollView
  4. React Native Table

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More