React Native – FlastList

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

export default class MainActivity extends Component {
  constructor(props) {
    super(props);

    this.state = {
      FlatListItems: [
        { key: "1" },
        { key: "2" },
        { key: "3" },
        { key: "4" },
        { key: "5" },
        { key: "6" },
        { key: "7" },
        { key: "8" },
        { key: "9" },
        { key: "10" },
        { key: "11" },
        { key: "12" },
        { key: "13" },
        { key: "14" },
        { key: "15" },
        { key: "16" },
        { key: "17" },
        { key: "18" },
        { key: "19" },
        { key: "20" },
      ]
    };
  }

  FlatListItemSeparator = () => {
    return (
      <View style={{ height: 2, width: "100%", backgroundColor: "#000000" }} />
    );
  };

  DisplayItem(item) {
    Alert.alert(item);
  }

  render() {
     return (
       <View style={styles.container}>
         <FlatList
            data={ this.state.FlatListItems }
            ItemSeparatorComponent = {this.FlatListItemSeparator}
            renderItem={({item}) => <Text style={styles.item} onPress={this.DisplayItem.bind(this, item.key)} > {item.key} </Text>}
         />
       </View>
    );
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#f2f2f2"
  },

  item: {
    padding: 8,
    fontSize: 25,
    height: 50,
  }
});