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

Issue

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)]

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>
  );

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;
}

SOLUTION updated from scra:

export async function addEvent(event) {
  try {
    const eventsRef = collection(db, EVENTS_COLLECTION);
    const docRef = await addDoc(eventsRef, event);
    console.log("Event is added, id :", docRef.id);
  } catch (error) {
    console.error(error);
  }
}

  const handleDatePicked = (date) => {
    const formattedDate = date.toLocaleDateString();
    const formattedTime = date.toLocaleTimeString();
    setDate(`${formattedDate} ${formattedTime}`);
    setDateTimePickerVisible(false);
  };

  const handleSubmit = async () => {
    try {
      await addEvent({ ...event, date });
    } catch (error) {
      console.error(error);
    }
  };

 return (
    <View>
      <TextInput
        onChangeText={(text) => setEvent({ ...event, name: text })}
        placeholder="Event name"
      />
      <Text>{date}</Text>

      <Button
        Color="red"
        title="Pick date and time"
        onPress={showDateTimePicker}
      />

      <DateTimePicker
        mode="datetime"
        isVisible={isDateTimePickerVisible}
        onConfirm={handleDatePicked}
        onCancel={() => setDateTimePickerVisible(false)}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );

Solution

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.

Answered By - Renaud Tarnec