FlatList with Delete on Click in React Native

Pandiyan Mani

·

Follow

3 min read

·

Mar 6, 2023

--

Listen

Share

Hi Lets see how to implement FlatList with delete on click ,so tapping on the list the list item will get deleted and we can add new item to the list by entering in the TextInput and click on Add Goals.

If you see the above image we have two section on is TextInput with Add Goal Button and another one is FlatList which display List Of Goals.

So first the First section i am going to create a File named AddGoalsItem.tsx. Let see the code below for the AddGoalsItem File

import React, { useState } from 'react';
import { View, StyleSheet, TextInput, TouchableOpacity, Text } from "react-native";



const AddGoalsItem = (props) => {
    const [inputGoals, setGoals] = useState('');

    const ClickedAddGoals = () => {
        props.goalsToAdd(inputGoals)
        setGoals('')
    }

    return (
    <View style={styles.viewContainerStyle}>
    <TextInput
    style={styles.textInputItemStyle}
    placeholder="Enter Goals To Add"
    multiline={true}
    onChangeText={(result) => setGoals(result)}
    value={inputGoals}>
    </TextInput>
    <TouchableOpacity
    onPress={ClickedAddGoals}
    style={{ backgroundColor: 'red', width: '90%' }}>
    <Text style={styles.addTextStyles}>ADD GOALS</Text>
    </TouchableOpacity>
    <View style={{ height: 2, width: '100%', backgroundColor: 'black' }}></View>
    </View>
    )
}

const styles = StyleSheet.create({
    viewContainerStyle: {
            gap: 10,
            alignItems: 'center'
    },
    addTextStyles: {
            textAlign: 'center',
            fontSize: 20,
            color: 'white',
            fontStyle: 'italic',
            margin: 10
    },
    textInputItemStyle: {
            fontStyle: 'italic',
            borderWidth: 2,
            margin: 10,
            padding: 10,
            borderColor: 'black',
            color: 'black',
            fontSize: 20,
            maxHeight: 100,
            width: '90%'
    }
})

export default AddGoalsItem;

Let see detail of the above code

const [inputGoals, setGoals] = useState(‘’); → is used for updating the TextInput Value

const ClickedAddGoals = () => {
    props.goalsToAdd(inputGoals)
    setGoals('')
}

ClickedAddGoals → Method add the entered Goals the the List.

<View style={styles.viewContainerStyle}>
<TextInput
style={styles.textInputItemStyle}
placeholder="Enter Goals To Add"
multiline={true}
onChangeText={(result) => setGoals(result)}
value={inputGoals}>
</TextInput>
<TouchableOpacity
onPress={ClickedAddGoals}
style={{ backgroundColor: 'red', width: '90%' }}>
<Text style={styles.addTextStyles}>ADD GOALS</Text>
</TouchableOpacity>
<View style={{ height: 2, width: '100%', backgroundColor: 'black' }}></View>
</View>

Above is the code for display the first section of the screen which has TextInput and Button in the form of TouchableOpacity since we cant style the Button we used TouchableOpacity.

Next we create a ListItemGoals.tsx file for holding the item inside the FlatList and on tapping the item it delete the Goals from the List.

import React from "react";
import { StyleSheet, Text, Dimensions, View, Pressable } from 'react-native'

const ListItemGoals = (props) => {

    const deleteGoals = () => {
        props.DeleteGoals(props.ids)
    }
    var width = Dimensions.get('window').width - 20;
    return (
    <Pressable onPress={deleteGoals} >
    <View style={styles.viewStyleSheet}>
    <Text style={[styles.textStyles, { width: width }]}>{props.name}</Text>
    </View>
    </Pressable>

    )
}

const styles = StyleSheet.create({
    textStyles: {
            fontStyle: 'italic',
            fontSize: 20,
            color: 'white',
            padding: 10
    },
    viewStyleSheet: {
            margin: 5,
            backgroundColor: 'grey',
            borderRadius: 10
    }
})
export default ListItemGoals;

Lets see the Final App.tsx file which connects the All Item to the Screen

import { useState } from 'react';
import {
FlatList,
KeyboardAvoidingView,
StyleSheet,
View,
} from 'react-native';
import ListItemGoals from './src/Component/ListItemGoals';

import AddGoalsItem from './src/Component/AddGoalsItem';

function App(): JSX.Element {

    const [listOfGoals, setListOfGoals] = useState([])

    const addGoals = (enteredGoals) => {
        var RandomNumber = Math.floor(Math.random() * 100) + 1;
        setListOfGoals((currentGoals) => [
        ...currentGoals,
        { name: enteredGoals, id: RandomNumber }
        ]);
    }

    const deleteGoals = (id) => {
        console.log('delete goals' + { id })
        setListOfGoals((currentGoals) => {
            return currentGoals.filter((goal) => goal.id !== id)
        });
    }

    return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>

    <View style={{ justifyContent: 'space-around' }}>
    <View style={{ height: 160, alignSelf: 'stretch', margin: 5 }}>
    <AddGoalsItem goalsToAdd={addGoals} />
    </View>
    </View>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 5 }}>
    <FlatList
    data={listOfGoals}
    renderItem={({ index, item }) => {
        return (
        <ListItemGoals name={item.name} DeleteGoals={deleteGoals} ids={item.id} />
        )
    }}
    keyExtractor={(item, index) => index}
    />
    </View>
    </View>
    );
}

const styles = StyleSheet.create({
    container: {
            flex: 1,
            padding: 20,
    },
});
export default App;

So once you ran the code in expo or vs code you can see the above image result. So lets meet in next Tutorial Thanks.