Datetimepicker: add debounce prop

Created on 14 Dec 2019 · 7Comments · Source: react-native-datetimepicker/datetimepicker

I am using the date picker with expo. It works fine except, that the user almost has no time to really adjust the date.
As soon as you lift your finger from either day, month or year the component refreshes. The problem is with that handling that you can't really change 1 or more numbers of a date.

I debounce the date change function in order to give the user time to really adjust the date. As often you want to change the day and month...
thanks!

bug

Source

Manubi

👍2

Most helpful comment

I ran into the same problem. In my case, I am implementing a custom DateTime picker based on this datetimepicker. Among other props I have value and onChange. And the value is updated every time onChange is called. I found out that the current problem is caused by the re-rendering of the datetimepicker while it was rotated due to the new value.
So this is how I solved it. Since the datetimepicker has an internal state, I implemented some kind of defaultValue and memoized the entire component:

import React, { useRef } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const DateTimePickerMemoized = React.memo(props => <DateTimePicker {...props} />);

const CustomDateTimePicker = ({ value, ...props }) => {
    const initial = useRef(value);

    return <DateTimePickerMemoized
        value={initial.current}
        {...props}
    />;
};

export default CustomDateTimePicker;

azrael on 5 Jun 2020

👍2

All 7 comments

hello, I'm not quite sure what you mean here. Can you please post a code snippet that manifests the problem? Thanks!

vonovak on 25 May 2020

@vonovak I might be having the same issue here but I don't think that including a debounce to the onChange function will help. Basically, when a user changes one part of the date picker then moves a different part while the component is still updating/refreshing, it will move back to the first date. See gif here:

RPReplay_Final1591142316

I know it's probably hard to tell when I'm taping, but here I change the month and then immediately the date and it keeps going back to the original date because the component's value is still stuck on the old date or maybe just rerendered.

It would be nice if the value of the date picker wasn't controlled by the state and instead gave us the value instead, sort of like an input. Is there a way to make that happen? This issue is especially bad on slower phones.

merissaacosta on 3 Jun 2020

👍1

import React, { useRef } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';

const DateTimePickerMemoized = React.memo(props => <DateTimePicker {...props} />);

const CustomDateTimePicker = ({ value, ...props }) => {
    const initial = useRef(value);

    return <DateTimePickerMemoized
        value={initial.current}
        {...props}
    />;
};

export default CustomDateTimePicker;

azrael on 5 Jun 2020

👍2

I can confirm this is a real issue and @merissaacosta explained well.
I am going to this library to see if the problem persists and post it here the results.

Update

No success. In the end both libraries use the native date picker so the result was the same, unfortunately.

lnmunhoz on 26 Jul 2020

😕1

@vonovak this would only affect the wheels setting on iOS 14, wouldn't it? 🤔

Based on the discussion on https://github.com/react-native-community/datetimepicker/pull/211

castrolem on 27 Jul 2020

It's hard to help without a source code and steps to reproduce the problem, I understand the problem but I can't reproduce. I suggest test with the DatePickerIOS from react-native if the problem persist, please add a reproducible demo to maintainers can help you