I am building a form and this 2 things are behaving bad, when i press on either of the button and select any date or time, it shoes the above mentioned error from the header as

'Invariant Violation: value prop must be an instance of Date object'

Moreover it also crashes the app builded up on the device emulator

import RNDateTimePicker from '@react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {

  const [datePicker,setDatePicker] = useState(false)
    const [datei, setDatei] = useState(new Date())
    const [timePicker,setTimePicker] = useState(false)
    const [time,setTime] = useState(new Date(Date.now()))

  function showDatePicker(){
    setDatePicker(true)
  }
  function showTimePicker(){
    setTimePicker(true)
  }
  function OnDateSelected(datei){
    setDatei(datei);
    setDatePicker(false)
  }
  function onTimeSelected(time){
    setTime(time);
    setTimePicker(false)
  }
    
  return (
    <View style={styles.container}>
 {datePicker && (
      <RNDateTimePicker
        value={datei}
        mode={'date'}
        // display={Platform.0S === 'ios' ? 'spinner' : 'default'}
        is24Hour={true}
        onChange={OnDateSelected}
        style={styles.datePicker}
      />
    )}

    {timePicker && (
      <RNDateTimePicker
        value={time}
        mode={'time'}
        // display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
        is24Hour={false}
        onChange={onTimeSelected}
        style={styles.datePicker}
      />
    )}

    {!datePicker && (
      <View>
        <TouchableOpacity
        onPress={showDatePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>D A T E</Text>
        </TouchableOpacity>
      </View>
    )}
    {!timePicker && (
      <View>
        <TouchableOpacity
        onPress={showTimePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>T I M E</Text>
        </TouchableOpacity>
      </View>
    )}

CodePudding user response：

Basically

 function OnDateSelected(event,datei){
    console.log(datei,"date")
    setDatei(datei);
    setDatePicker(false)
  }
  function onTimeSelected(event,time){
    console.log(time,"time")
    setTime(time);
    setTimePicker(false)
  }

The above functions had problem ,since first param was event and you were setting event as value, you need to set Date or time.

Its working now .

Check this example

https://snack.expo.dev/@gaurav1995/fascinated-donut

import RNDateTimePicker from '@react-native-community/datetimepicker';
import React,{ useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

export default function App() {

  const [datePicker,setDatePicker] = useState(false)
    const [datei, setDatei] = useState(new Date())
    const [timePicker,setTimePicker] = useState(false)
    const [time,setTime] = useState(new Date(Date.now()))

  function showDatePicker(){
    setDatePicker(true)
  }
  function showTimePicker(){
    setTimePicker(true)
  }
  function OnDateSelected(event,datei){
    console.log(datei,"date")
    setDatei(datei);
    setDatePicker(false)
  }
  function onTimeSelected(event,time){
    console.log(time,"time")
    setTime(time);
    setTimePicker(false)
  }
    
  return (
    <View style={styles.container}>
 {datePicker && (
      <RNDateTimePicker
        value={datei}
        mode={'date'}
        // display={Platform.0S === 'ios' ? 'spinner' : 'default'}
        is24Hour={true}
        onChange={OnDateSelected}
        style={styles.datePicker}
      />
    )}

    {timePicker && (
      <RNDateTimePicker
        value={time}
        mode={'time'}
        // display={Platform.0S === ‘ios' ? 'spinner' : ‘default'}
        is24Hour={false}
        onChange={onTimeSelected}
        style={styles.datePicker}
      />
    )}

    {!datePicker && (
      <View>
        <TouchableOpacity
        onPress={showDatePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>D A T E</Text>
        </TouchableOpacity>
      </View>
    )}
    {!timePicker && (
      <View>
        <TouchableOpacity
        onPress={showTimePicker}
        style={[styles.button, styles.buttonOutline]}
      >
        <Text style={styles.buttonOutlineText}>T I M E</Text>
        </TouchableOpacity>
      </View>
    )}
    </View>
    )

}

const styles = StyleSheet.create({
  container:{
    flex:1,
    padding:40
  }
})

Hope it helps. Feel free for doubts