[Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object

Question

I want to post data in firebase firestore database but I don't understand why that does'nt work I Can post prewrite title in database but not with custom title from an input

traceback: [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)] [Unhandled promise rejection: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom Class object (found in field date in document events/T58NdobxrvVchtaQjYx0)]

My addEvent function to add eventDate and a title to an firebase events collection

firebase.js

export async function addEvent(date, title) {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const newEventRef = await addDoc(eventsRef, {
    date,
    title,
  })
    .then(() => {
      // Data saved successfully!
      console.log("data submitted");
    })
    .catch((error) => {
      // The write failed...
      console.log(error);
    });
  const newEvent = await getDoc(newEventRef);
  return newEvent;
}

My calendar to add data on firebase.

I have a button that open picker date time modal and next modal with an input to add data with submit and cancel button.

CalendarScreen.js

import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";

export default function CalendarScreen({ selectedDate, onDateChange }) {
  
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
  const [isTitleModalVisible, setIsTitleModalVisible] = useState(false);
  const [eventTitle, setEventTitle] = useState("");

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const showTitleModal = () => {
    setIsTitleModalVisible(true);
  };

  const hideTitleModal = () => {
    setIsTitleModalVisible(false);
  };

  const handleAddEvent = (eventDate, eventTitle) => {
    hideDatePicker(eventDate, eventTitle);
    showTitleModal();
  };

  const handleSubmitTitle = (eventDate, eventTitle) => {
    addEvent(eventDate, eventTitle);
    hideTitleModal();
    setEventTitle("");
  };

  return (
    <View>
      <CalendarPicker
        style={styles.calendar}
        selectedDate={selectedDate}
        onDateChange={onDateChange}
      />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
      <Modal style={styles.modal} visible={isTitleModalVisible}>
        <View>
          <TextInput
            placeholder="Event Title"
            value={eventTitle}
            onChangeText={setEventTitle}
            style={styles.input}
          />
          <Button title="Submit" onPress={handleSubmitTitle} />
          <Button title="Cancel" onPress={hideTitleModal} />
        </View>
      </Modal>
    </View>
  );
}

EDIT When string is typed

export async function getEvents() {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const docSnap = await getDocs(eventsRef);
  const events = [];
  docSnap.forEach((doc) => {
    events.push({ id: doc.id, ...doc.data() });
  });
  return events;
}

CalendarScreen.js

export default function CalendarScreen({ selectedDate, onDateChange }) {
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const handleAddEvent = (eventDate) => {
    addEvent(eventDate);
    hideDatePicker();
  };

  return (
    <View>
      <CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
    </View>
  );

temporary SOLUTION: See you database even with the error

CalendarScreen.js

import React, { useState } from "react";
import { View, Button, StyleSheet, Modal, TextInput } from "react-native";
import { addEvent } from "../../firebase/firebase";
import CalendarPicker from "react-native-calendar-picker";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from "moment-timezone";

moment.tz.setDefault("Europe/Paris");

export default function CalendarScreen({ selectedDate, onDateChange }) {
  const [isDatePickerVisible, setIsDatePickerVisible] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [eventTitle, setEventTitle] = useState("");

  const showDatePicker = () => {
    setIsDatePickerVisible(true);
  };

  const hideDatePicker = () => {
    setIsDatePickerVisible(false);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
  };

  const handleAddEvent = (eventDate) => {
    addEvent(eventDate, eventTitle);
    showModal();
  };

  const handleSubmit = (eventDate) => {
    addEvent(eventDate, eventTitle);
    hideModal();
    hideDatePicker();
  };

  return (
    <View>
      <CalendarPicker selectedDate={selectedDate} onDateChange={onDateChange} />
      <Button title="Add Event" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="datetime"
        onConfirm={handleAddEvent}
        onCancel={hideDatePicker}
      />
      <Modal animationType="slide" transparent={false} visible={isModalVisible}>
        <View>
          <TextInput
            placeholder="Event Title"
            value={eventTitle}
            onChangeText={setEventTitle}
          />
          <Button
            title="Submit"
            onPress={(eventDate) => handleSubmit(eventDate)}
          />
          <Button title="Cancel" onPress={hideModal} />
        </View>
      </Modal>
    </View>
  );

CRUD

export async function addEvent(date, title) {
  const eventsRef = collection(db, EVENTS_COLLECTION);
  const newEventRef = await addDoc(eventsRef, {
    date: date,
    title: title,
  })
    .then(() => {
      // Data saved successfully!
      console.log("data submitted");
    })
    .catch((error) => {
      // The write failed...
      console.log(error);
    });

  const newEvent = await getDoc(newEventRef);
  return newEvent;
}

Answer 1

The error indicates that you try to write a document with an unsupported field value for the field date .

You will find here the list of the data types supported by Firestore. You need to transform the Object returned by your date picker to an Object that has a type supported by Firestore.