Invariant Violation: DatePickerAndroid has been removed from React Native. It can now be installed and imported from '@react-native-community/datetimepicker' instead of 'react-native'. See https://github.com/react-native-datetimepicker/datetimepicker

[chendalian]

Issue

Expected Behavior

Code

Environment

1. react-native -v:
2. node -v:
3. npm -v:
4. yarn --version:
5. target platform: Android | iOS
6. operating system:

[mamicrose]

I solved the problem myself. I forked. you can use. https://github.com/mamicrose/react-native-datepicker

[dan-motzer]

I solved the problem myself. I forked. you can use. https://github.com/mamicrose/react-native-datepicker

Does not work. I get :

[mamicrose]

npm i @react-native-community/datetimepicker

[PrinceNoobman]

npm i @react-native-community/datetimepicker

I get 'RNTimePicker could not be found' after applying the above solution. I even copied files from your branch but still gives the same error. Please help!

[mamicrose]

Do not use this repository anymore. I am currently using it and am satisfied. https://www.npmjs.com/package/react-native-modal-datetime-picker

[mamicrose]

and if you want date and time together, I can share my own code with you. (time screen popping up after selecting date)

[PrinceNoobman]

Do not use this repository anymore. I am currently using it and am satisfied. https://www.npmjs.com/package/react-native-modal-datetime-picker

Thanks for the response, helped solve my problem :)

[shivkumargupta]

https://www.npmjs.com/package/react-native-modal-datetime-picker

@mamicrose can you share code for date and time together.

Thanks in advance

[mamicrose]

https://www.npmjs.com/package/react-native-modal-datetime-picker

@mamicrose can you share code for date and time together.

Thanks in advance

you can use it ready-made as a component.

import { View, Text, TouchableOpacity } from "react-native";
import DateTimePickerModal from "react-native-modal-datetime-picker";
import { useCallback, useState } from "react";
import moment from "moment";
import "moment/locale/tr";
moment.locale("tr");

interface Props {
  date: Date;
  onChange(date): void;
  label: string;
  mode: "date" | "datetime";
}

export default function DatePicker({ date, onChange, label, mode }: Props) {
  const [dateShow, setDateShow] = useState<boolean>(false);
  const [timeShow, setTimeShow] = useState<boolean>(false);

  const handleChange = useCallback(
    (e: Date) => {
      setDateShow(false);
      if (mode === "datetime") {
        setTimeout(() => {
          setTimeShow(true);
        }, 700);
      }
      onChange(e);
    },
    [setDateShow, onChange, mode]
  );

  const handleSetTime = useCallback(
    (e: any) => {
      setTimeShow(false);
      onChange(e);
    },
    [setTimeShow, date]
  );

  let momentType;
  if (mode === "date") {
    momentType = "DD-MM-YYYY";
  } else if (mode === "datetime") {
    momentType = "DD-MM-YYYY LT";
  } else {
    momentType = "DD-MM-YYYY LT";
  }

  return (
    <View>
      <Text className="dark:text-white">{label}</Text>
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => setDateShow(true)}
        className="w-full bg-white border border-gray-300 rounded-lg px-3 py-2 mt-1"
      >
        <Text>{moment(date).format(momentType)}</Text>
      </TouchableOpacity>
      <DateTimePickerModal
        date={date}
        isVisible={dateShow}
        mode="date"
        onConfirm={handleChange}
        onCancel={() => setDateShow(false)}
        confirmTextIOS="Onayla"
        cancelTextIOS="İptal"
        locale="tr-TR"
        is24Hour={false}
      />

      {mode === "datetime" && timeShow && (
        <DateTimePickerModal
          date={date}
          isVisible={true}
          mode="time"
          onConfirm={handleSetTime}
          onCancel={() => setTimeShow(false)}
          confirmTextIOS="Onayla"
          cancelTextIOS="İptal"
          locale="tr-TR"
          is24Hour={true}
        />
      )}
    </View>
  );
}