react-native-date-picker
react-native-date-picker copied to clipboard
onStateChange still not being called
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)}
/>
https://github.com/henninghall/react-native-date-picker/assets/58145119/2e8de1a5-e04f-4598-82ef-ea1c3c439f6c
- OS: Android
- React Native version: 0.71.14
- react-native-date-picker version: 5.0.2
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?
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 ( <View> <TouchableOpacity style={[defaultStyles.inputField, styles.container]} onPress={() => setOpen(true)} activeOpacity={1} > <View style={styles.inputWrapper}> {!selectedDate ? ( <TextStyled style={styles.buttonPlaceholder}> {placeholder} </TextStyled> ) : ( <TextStyled style={styles.buttonText}>{formatedDate}</TextStyled> )} <View style={styles.reverseDirection}> <Feather name="calendar" size={22} color={Colors.brandBlue[900]} /> {selectedDate && ( <TouchableOpacity onPress={() => onSelectDate(undefined)}> <Feather name="x" size={scale(22)} color={Colors.brandGrey[400]} /> </TouchableOpacity> )} </View> </View> </TouchableOpacity> {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]} /> )} </View> ); };`
https://github.com/henninghall/react-native-date-picker/assets/36740929/e5eb10d5-c1fb-4817-9ab7-a4aa8dfae2b7