Item Reminders

To implement item reminders, we can use a combination of local notifications and a date picker.

Install Dependencies

You’ll need to install @react-native-community/datetimepicker for date selection and react-native-push-notification for local notifications.

bashCopy codenpm install @react-native-community/datetimepicker react-native-push-notification

Configure Local Notifications

You need to configure notifications for your app. Here’s a basic setup:

javascriptCopy code// notificationConfig.js
import PushNotification from 'react-native-push-notification';

PushNotification.configure({
  onNotification: function(notification) {
    console.log("NOTIFICATION:", notification);
  },
  // Other configurations can be added here
});

Call this configuration in your App.js file:

javascriptCopy codeimport './notificationConfig';

Add Reminder Functionality

Update your App.js to include a date picker for setting reminders:

javascriptCopy codeimport DateTimePicker from '@react-native-community/datetimepicker';

// State to manage reminder
const [reminderDate, setReminderDate] = useState(new Date());
const [showDatePicker, setShowDatePicker] = useState(false);

// Function to handle date change
const onDateChange = (event, selectedDate) => {
  const currentDate = selectedDate || reminderDate;
  setShowDatePicker(false);
  setReminderDate(currentDate);
};

// Function to schedule the notification
const scheduleNotification = (item) => {
  PushNotification.localNotificationSchedule({
    message: item.text,
    date: reminderDate,
  });
};

// When adding an item
const addItem = async () => {
  if (textInput.trim() && user) {
    const newItem = { text: textInput, completed: false, reminder: reminderDate };
    const docRef = await addDoc(collection(db, user.uid), newItem);
    setItems([...items, { key: docRef.id, ...newItem }]);
    scheduleNotification(newItem);
    setTextInput('');
  }
};

// Render date picker
{showDatePicker && (
  <DateTimePicker
    value={reminderDate}
    mode="date"
    display="default"
    onChange={onDateChange}
  />
)}