React Native – Grid Layout

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

export default class Dialphone extends Component {
  

  constructor(props) {
    super(props);

    this.state = {
      GridListItems: [
        { key: "1" },
        { key: "2" },
        { key: "3" },
        { key: "4" },
        { key: "5" },
        { key: "6" },
        { key: "7" },
        { key: "8" },
        { key: "9" },
        { key: "+" },
        { key: "0" },
        { key: "x" },

      ]
    };
  }

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

  render() {
    return (
      <View style={styles.container}>
        <FlatList
           data={ this.state.GridListItems }
           renderItem={ ({item}) =>
             <View style={styles.GridContainer}>
              <Text style={styles.GridTextLayout} onPress={this.GetItem.bind(this, item.key)} > {item.key} </Text>
             </View> }
           numColumns={3}
        />
      </View>
   );
 }

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e5e5e5",
    margin:1
  },
 
  GridContainer: {
   flex:1,
   justifyContent: 'center',
   alignItems: 'center',
   height: 50,
   margin: 5,
   backgroundColor: '#0066ff'
},
GridTextLayout: {
   fontSize: 20,
   fontWeight: 'bold',
   justifyContent: 'center',
   color: '#fff',
   padding: 10,
 }
});