import React, { Component } from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, Image, FlatList, Dimensions} from 'react-native';



const data = [
    {id: 'a', value: 'A'},
    {id: 'b', value: 'B'},
    {id: 'c', value: 'C'},
    {id: 'd', value: 'D'},
    {id: 'e', value: 'E'},
    {id: 'f', value: 'F'},
];
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;

class App extends Component {
    constructor(props) {
        //constructor to set default state
        super(props);
        this.state = {
            keyword: '',
        };
    }
    render() {
        return (
            <View>

                <View style={styles.searchInput}>
                    <TouchableOpacity style={{padding:15,right:0,position:'absolute'}} onPress={()=>'tes'}>

                    </TouchableOpacity>
                    <TextInput
                        placeholder="Search..."
                        style={{paddingRight:50}}
                        onChangeText={keyword => this.setState({ keyword })}
                    />
                </View>
                <View style={styles.con}>
                    <Text style={styles.textC}>Test</Text>
                    <FlatList
                        data={data}
                        renderItem={({item}) => (
                            <View style={styles.itemContainer}>
                                <Text style={styles.item}>{item.value}</Text>
                            </View>
                        )}
                        keyExtractor={item => item.id}
                        numColumns={numColumns} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        width: size,
        height: size,
    },
    item: {
        flex: 1,
        margin: 3,
        backgroundColor: '#97ff49',
    },
    con: {
        flex: 1,
        //justifyContent: 'center',
        alignItems: 'center',
        marginTop: 15
    },
    searchInput: {
        borderWidth:0.8,
        borderColor: '#234q42',
        marginHorizontal:15,
        paddingHorizontal:15,
        marginTop:10,
        backgroundColor:'#fff',
        borderRadius:4,
        fontSize: 12,
        flexDirection:'row',
    },
    textC: {
        fontSize: 17,
        fontWeight: 'bold',
        marginTop: 5,
        marginBottom: 5,
        color: 'aee314'
    }
});


export default App;