Implement Filtering Functionality

Let’s start by adding a filter feature. Here’s how you can modify your App.js to include filtering options.

Updated Code for App.js

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

const App = () => {
  const [items, setItems] = useState([]);
  const [textInput, setTextInput] = useState('');
  const [editIndex, setEditIndex] = useState(null);
  const [filter, setFilter] = useState('all');

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

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

  const addItem = () => {
    if (textInput.trim()) {
      const newItem = { key: textInput, completed: false };
      if (editIndex !== null) {
        const updatedItems = items.map((item, index) =>
          index === editIndex ? newItem : item
        );
        setItems(updatedItems);
        setEditIndex(null);
      } else {
        setItems([...items, newItem]);
      }
      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 }
    );
  };

  const toggleCompletion = (item) => {
    const updatedItems = items.map(i =>
      i.key === item.key ? { ...i, completed: !i.completed } : i
    );
    setItems(updatedItems);
  };

  const startEditing = (item, index) => {
    setTextInput(item.key);
    setEditIndex(index);
  };

  // Filtering items based on the selected filter
  const filteredItems = items.filter(item => {
    if (filter === 'completed') return item.completed;
    if (filter === 'uncompleted') return !item.completed;
    return true; // 'all'
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>My Item List</Text>
      <TextInput
        style={styles.input}
        placeholder="Add or edit an item"
        value={textInput}
        onChangeText={setTextInput}
      />
      <Button title={editIndex !== null ? "Update Item" : "Add Item"} onPress={addItem} />
      
      {/* Filter Picker */}
      <Picker
        selectedValue={filter}
        style={styles.picker}
        onValueChange={(itemValue) => setFilter(itemValue)}
      >
        <Picker.Item label="All" value="all" />
        <Picker.Item label="Completed" value="completed" />
        <Picker.Item label="Uncompleted" value="uncompleted" />
      </Picker>

      <FlatList
        data={filteredItems}
        renderItem={({ item, index }) => (
          <TouchableOpacity onLongPress={() => confirmDelete(item)} onPress={() => toggleCompletion(item)}>
            <Text style={[styles.item, item.completed && styles.completedItem]}>
              {item.key}
            </Text>
            <Button title="Edit" onPress={() => startEditing(item, index)} />
          </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,
  },
  picker: {
    height: 50,
    width: 150,
    marginBottom: 10,
  },
  item: {
    padding: 10,
    fontSize: 18,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  completedItem: {
    textDecorationLine: 'line-through',
    color: 'gray',
  },
});

export default App;