React Native Simple ListView Component Android Example

Today we will see how to use ListView in react native android application and apply set onPress event on ListView to get value from selected list item. ListView is a core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource, populate it with a simple array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.

In this example we are going to create simple ListView layout, where we will display hard coded values from state and when user click on any of these list items, then it will display selected item in alert dialog box.

React Native ListView Example :

Lets follow the below steps to create Simple ListView layout Component in React Native.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Alert, ListView } from "react-native";

Step-4 : Create constructor in your HomeActivity class with props parameter. Create super method in constructor. Now create constant ds variable and assign ListView.DataSource rowHasChanged to it, After that set data source ListView item values using this.state with help of cloneWithRows function.

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

    this.state = {
      dataSource: ds.cloneWithRows([
        "One",
        "Two",
        "Three",
        "Four",
        "Five",
        "Six",
        "Seven",
        "Eight",
        "Nine",
        "Ten",
        "Eleven",
        "Twelve",
        "Thirteen",
        "Fourteen"
      ])
    };
  }

Step-5 : Create a function named as ListViewItemSeparator . Using this method we are generating the ListView each item separator – divider line.

ListViewItemSeparator = () => {
  return (
    <View style={{ height: 0.5, width: "100%", backgroundColor: "#000" }} />
  );
};

Step-6 : Create GetListViewItem  method to show the selected ListView  item name with help of alert dialog box.

GetListViewItem = (rowData) => {
  Alert.alert(rowData);
}

Step-7 : Implement render  method and return ListView component wrapped by root View  component. Specify the below parameters in ListView component as props, that helps to form list layout.

• dataSource : Calling the data source value with help of state, This will populate the items in ListView layout.
• renderSeparator : Calling the ListViewItemSeparator method to display a line -seperator between list items.
• renderRow : setting up row data using Text component.
• onPress : Calling GetListViewItem function on button click and it will display the selected item in alert popup box.

render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderSeparator={this.ListViewItemSeparator}
          renderRow={ rowData => ( <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}  >{rowData} </Text> )}
        />
      </View>
    );
  }
}

Step-8 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  rowViewContainer:{
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple List layout design with the help of ListView Component in react native application.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Alert, ListView } from "react-native";

export default class HomeActivity extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2  });

    this.state = {
      dataSource: ds.cloneWithRows([
        "One",
        "Two",
        "Three",
        "Four",
        "Five",
        "Six",
        "Seven",
        "Eight",
        "Nine",
        "Ten",
        "Eleven",
        "Twelve",
        "Thirteen",
        "Fourteen"
      ])
    };
  }

ListViewItemSeparator = () => {
  return (
    <View style={{ height: 0.5, width: "100%", backgroundColor: "#000" }} />
  );
};

GetListViewItem = (rowData) => {
  Alert.alert(rowData);
}

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderSeparator={this.ListViewItemSeparator}
          renderRow={ rowData => ( <Text style={styles.rowViewContainer} onPress={this.GetListViewItem.bind(this, rowData)}  >{rowData} </Text> )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5"
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  rowViewContainer:{
    fontSize: 18,
    paddingRight: 10,
    paddingTop: 10,
    paddingBottom: 10,
  }
});

Screenshot :

This is all about list layout design in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.