onStateChange still not being called

[saleee6]

I had an issue in version 4.2.13 with the date selection when the user scrolls through the picker fast. I then found out about onStateChange prop that has been added in 4.4.0 version and then fixed more in 5.0.1. I tried with 5.0.1 and 5.0.2 (the newest version when I am writing this) and neither onStateChange prop returns anything.

I was expecting to get some kind of value (state representation or event that is being processed) but I get nothing, the function never gets called.

In my code I have

    <DatePicker
      ...
      onStateChange={(state) => console.log(state)}
    />

Screen.Recording.2024-05-02.at.00.16.52.online-video-cutter.com.mp4

• OS: Android
• React Native version: 0.71.14
• react-native-date-picker version: 5.0.2

[henninghall]

I don't manage to reproduce this, can you please provide a repo where this is reproduced and I will have a look! Did you rebuild after upgrading?

[SimplyL]

Hello, I am experiencing the same issue. You can see in attached video that the state is not being set consistently.
And here's a code snippet that I am using for datepicker.

`export interface DatePickerProps {
mode?: "datetime" | "date";
placeholder?: string;
required?: boolean;
onSelectDate: (date?: Date) => void;
selectedDate?: Date;
}

const DatePicker = ({
mode = "datetime",
placeholder = "Select date",
onSelectDate,
selectedDate,
}: DatePickerProps) => {
const [open, setOpen] = useState(false);
const [date, setDate] = useState(new Date());

const handleSetDate = (date: Date) => {
setDate(date);
onSelectDate(date);
setOpen(false);
};

const handleCancel = () => {
setOpen(false);
};

const minimumDate = mode === "datetime" ? new Date() : startOfDay(new Date());

const formatedDate =
mode === "datetime"
? formatDateTime(selectedDate || date)
: formatDate(selectedDate || date);

return (

<TouchableOpacity
style={[defaultStyles.inputField, styles.container]}
onPress={() => setOpen(true)}
activeOpacity={1}
>

{!selectedDate ? (

{placeholder}

) : (
{formatedDate}
)}


{selectedDate && (
<TouchableOpacity onPress={() => onSelectDate(undefined)}>


)}



{open && (
<DateTimePicker
open={open}
modal
mode={mode}
date={selectedDate || date}
{...(mode === "datetime" && {
minuteInterval: 30,
})}
onConfirm={handleSetDate}
onCancel={handleCancel}
minimumDate={minimumDate}
theme="light"
locale="en_GB"
is24hourSource="locale"
dividerColor={Colors.brandPrimary[700]}
buttonColor={Colors.brandPrimary[700]}
/>
)}

);
};`

6257e3aa-9762-4051-bfa2-c9b77f47aa39.mp4