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;