Install AsyncStorage

You need to install the @react-native-async-storage/async-storage package. Run the following command in your project directory:

bashCopy codenpm install @react-native-async-storage/async-storage

Step 2: Update App.js

Replace the existing code in App.js with the following code:

javascriptCopy codeimport React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, Button, TouchableOpacity, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  const [items, setItems] = useState([]);
  const [textInput, setTextInput] = useState('');

  // Load items from AsyncStorage on app start
  useEffect(() => {
    const loadItems = async () => {
      try {
        const storedItems = await AsyncStorage.getItem('items');
        if (storedItems) {
          setItems(JSON.parse(storedItems));
        }
      } catch (error) {
        console.error(error);
      }
    };
    loadItems();
  }, []);

  // Save items to AsyncStorage whenever they change
  useEffect(() => {
    const saveItems = async () => {
      try {
        await AsyncStorage.setItem('items', JSON.stringify(items));
      } catch (error) {
        console.error(error);
      }
    };
    saveItems();
  }, [items]);

  const addItem = () => {
    if (textInput.trim()) {
      setItems([...items, { key: textInput }]);
      setTextInput('');
    }
  };

  const deleteItem = (itemToDelete) => {
    setItems(items.filter(item => item.key !== itemToDelete));
  };

  const confirmDelete = (item) => {
    Alert.alert(
      'Delete Item',
      `Are you sure you want to delete "${item.key}"?`,
      [
        { text: 'Cancel', style: 'cancel' },
        { text: 'OK', onPress: () => deleteItem(item.key) },
      ],
      { cancelable: true }
    );
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Item List</Text>
      <TextInput
        style={styles.input}
        placeholder="Add a new item"
        value={textInput}
        onChangeText={setTextInput}
      />
      <Button title="Add Item" onPress={addItem} />
      <FlatList
        data={items}
        renderItem={({ item }) => (
          <TouchableOpacity onLongPress={() => confirmDelete(item)}>
            <Text style={styles.item}>{item.key}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.key}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  item: {
    padding: 10,
    fontSize: 18,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
});

export default App;