Update the App to Use React Native Paper

First, let’s integrate React Native Paper components into our app.

Install Dependencies

If you haven’t already, ensure you have the dependencies installed:

bashCopy codenpm install react-native-paper

You’ll also need to set up react-native-vector-icons for icons used in React Native Paper:

bashCopy codenpm install react-native-vector-icons

Update App.js

Here’s an updated version of App.js that uses React Native Paper components:

javascriptCopy codeimport React, { useEffect, useState } from 'react';
import { StyleSheet, View, FlatList, Alert } from 'react-native';
import { Provider as PaperProvider, TextInput, Button, List, Picker, Appbar } from 'react-native-paper';
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');
  const [searchQuery, setSearchQuery] = useState('');

  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 => {
const matchesFilter = (filter === 'all' || (filter === 'completed' && item.completed) || (filter === 'uncompleted' && !item.completed));
const matchesSearch = item.key.toLowerCase().includes(searchQuery.toLowerCase());
return matchesFilter && matchesSearch;
  });

  return (
<PaperProvider>
  <Appbar.Header>
    <Appbar.Content title="My Item List" />
  </Appbar.Header>
  <View style={styles.container}>
    <TextInput
      label="Add or edit an item"
      value={textInput}
      onChangeText={setTextInput}
      style={styles.input}
    />
    <Button mode="contained" onPress={addItem}>
      {editIndex !== null ? "Update Item" : "Add Item"}
    </Button>
    <TextInput
      label="Search items"
      value={searchQuery}
      onChangeText={setSearchQuery}
      style={styles.input}
    />
    <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 }) => (
        <List.Item
          title={item.key}
          onPress={() => toggleCompletion(item)}
          right={props => (
            <Button onPress={() => startEditing(item)}>Edit</Button>
          )}
          onLongPress={() => confirmDelete(item)}
          style={[styles.item, item.completed && styles.completedItem]}
        />
      )}
      keyExtractor={(item) => item.key}
    />
  </View>
</PaperProvider>
  );
};

const styles = StyleSheet.create({
  container: {
flex: 1,
padding: 20,
backgroundColor: '#fff',
  },
  input: {
marginBottom: 10,
  },
  picker: {
height: 50,
width: 150,
marginBottom: 10,
  },
  item: {
padding: 10,
  },
  completedItem: {
textDecorationLine: 'line-through',
color: 'gray',
  },
});

export default App;