Simple ToDo list in React Native

App.js

import {StatusBar} from 'expo-status-bar';
import {Button, FlatList, StyleSheet, Text, View, TextInput, SafeAreaView} from 'react-native';
import React, {Component} from 'react';

class ListComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (<View style={styles.container}>
            <FlatList
                data={this.props.items}
                renderItem={({item}) => <Text style={styles.item} onClick={() => {
                    const items = this.props.items;
                    items.remove(items.indexOf(item))
                }}>{item}</Text>}
            />
        </View>)
    }

}

class AddItemComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentData: ""
        }
    }

    render() {
        return (
            <View style={{flexDirection: 'row', flexWrap: 'wrap', justifyContent: "center"}}>
                <TextInput style={{width: '90%'}}
                           placeholder={"Enter new item"}
                           value={this.state.currentData}
                           onChangeText={(text) => {
                               this.setState({currentData: text})
                           }}/>
                <Button style={{marginLeft: 'auto', marginRight: 0}}
                        title="Add item"
                        onPress={() => {
                            this.props.onNewItem(this.state.currentData)
                            this.setState({currentData: ""})
                        }}/>
            </View>
        )
    }
}

export class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: []
        }
    }

    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <ListComponent items={this.state.items} style={{flex: 1}}/>
                <AddItemComponent
                    style={{bottom: 0, position: 'absolute', height: 100}}
                    onNewItem={(item) => {
                        console.log(item)
                        const itemsCopied = this.state.items;
                        itemsCopied.push(item)
                        this.setState({items: itemsCopied})
                }}/>
                <StatusBar style="auto"/>
            </SafeAreaView>
        )
    }
}

export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',

    },
    item: {
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },

});