React Native ListView

ListView.jsx

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

const rows = [
  { id: 1, text: "row1" },
  { id: 2, text: "row2" },
  { id: 3, text: "row3" },
  { id: 4, text: "row4" },
  { id: 5, text: "row5" },
  { id: 6, text: "row6" }
];

class Main extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.state = {
      list: ds.cloneWithRows(rows)
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.list}
          renderRow={rowData => <Item><Text>{rowData.text}</Text></Item>}
        />
      </View>
    );
  }
}

const Item = props => {
  return <View style={styles.item}>{props.children}</View>;
};

// define your styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#2c3e50",
    marginTop: 30
  },
  item: {
    height: 50,
    width: "100%",
    backgroundColor: "white",
    borderBottomWidth: 1,
    borderBottomColor: "black"
  }
});

//make this component available to the app
export default Main;