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;