Invariant Violation: A date or time must be specified as `value` prop While using DateTimePicker -expo-react-native

Issue

import {
  View,
  Text,
  Button,
  TextInput,
  ScrollView,
  StyleSheet,
} from "react-native";
import DateTimePicker from "@react-native-community/datetimepicker";

import React, { useState } from "react";

import { collection, addDoc } from "firebase/firestore";

export const CreateTaskScreen = () => {
  const [state, SetState] = useState({
    title: "",
    description: "",
    date: new Date(),
  });

  const SetData = (key, value) => {
    SetState({
      ...state,
      [key]: value,
    });
  };

  const HandlePress = async () => {
    await addDoc(collection(db, "tasks"), {
      title: state.title,
      description: state.description,
      date: state.date,
    });
  };

  return (
    <View>
      <Text>Crear tarea</Text>
      <TextInput
        placeholder="Title"
        onChangeText={(value) => SetData("title", value)}
      ></TextInput>
      <TextInput
        placeholder="Description"
        multiline
        numberOfLines={4} // Adjust the number of lines as needed
        onChangeText={(value) => SetData("description", value)}
      ></TextInput>
      <DateTimePicker
        style={{ width: 200 }}
        date={new Date()}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        display="default"
        onChange={(event, selectedDate) => {
          const currentDate = new Date(selectedDate);
          SetData("date", currentDate);
        }}
      ></DateTimePicker>
      <Button title="Save" onPress={HandlePress}></Button>
    </View>
  );
};

It seems like the issue is related to how the DateTimePicker component is handling the date value. It appears the error is coming from the DateTimePicker, the dateTimePicker component receives an invalid or missing value prop. The value prop is supposed to represent the current or selected date/time, and it must be a valid JavaScript Date object

Solution

You didn´t provide a "value" prop in the DatePicker-Component, instead you used a "date"-prop.

<DateTimePicker
        style={{ width: 200 }}
        value={state.date}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        display="default"
        onChange={(event, selectedDate) => {
          const currentDate = new Date(selectedDate);
          SetData("date", currentDate);
        }}
      ></DateTimePicker>

Answered By - Sven Hager