final project

import React from 'react';
import { StyleSheet, Text, View, Button, FlatList, TouchableOpacity } from 'react-native';
// import { FontAwesome } from '@expo/vector-icons';
import { Icon } from 'react-native-elements';

class FinalProject extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            text: '',
            data: [
                'Eat', 'Sleep', 'Teach', 'Grow fat'
            ]
        };
    }

    remove = (index) => {
        this.setState(
            prevState => {
                const data = prevState.data;
                data.splice(index, 1);
                return { data };
            }
        );
    };
    renderRow = ({ item, index }) =>
        (<View style={styles.row} key={index}>
            <Text>{item}</Text>
            <TouchableOpacity

                style={{
                    alignItems: 'flex-end',
                    justifyContent: 'center',
                    borderColor: '#32CD32'
                }}

                onPress={() => this.remove(index)}
            // onPress={() => console.log(index)}
            >
                <Icon name="minus" type='font-awesome' />

            </TouchableOpacity >
        </View>);

    render() {
        return (<FlatList
            data={this.state.data}
            renderItem={this.renderRow}
            keyExtractor={item => item.toString()}
        />);
    }
}

const styles = StyleSheet.create({
    row: {
        padding: 15,
        marginBottom: 5,
        backgroundColor: 'skyblue'
    }
});

export default FinalProject;