DateTimePicker Error

[eypcnmrtOPT]

Question

When using the time and date picker in react native, the date is selected but the time cannot be selected. When date is selected “Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Error message:

%s%s, TypeError: Cannot read property 'dismiss' of undefined, in RNDateTimePickerAndroid” this error appears. Neither the time picker opens nor the date picker closes.

[Icheka]

I have this problem too.

[brandon-austin-lark]

same issue here. any updates?

[azizmobarak]

confirmed

[MuhammetFurkanOzenn]

any updates?

[brandon-austin-lark]

Also getting this error logged

[CarlosX4vier]

I have this problem too. Any solution?

[butterfly-valley]

I have this problem too

[ianemv]

Confirmed! Also having same issue

[fimbres]

Same here

[srs1234peng]

Same here

[SimantaRajSarma]

same here :)

[vishwa-rn]

type IOSMode = 'date' | 'time' | 'datetime' | 'countdown';
type AndroidMode = 'date' | 'time';

The above code in the following file client/node_modules/@react-native-community/datetimepicker/src/index.d.ts

The following will work only in ios.

<DateTimePicker
            value={paymentDate || new Date()}
            mode="datetime"
            display={Platform.OS === "ios" ? "spinner" : "default"}
            onChange={handlePaymentDateChange}
            style={{ width: "100%" }}
          />

For android, you need to create two pickers - one for date and other for time and handle the date time separately.

<DateTimePicker
            value={paymentDate || new Date()}
            mode="date"
            display="default"
            onChange={handlePaymentDateChange}
            style={{ width: "100%" }}
          />

<DateTimePicker
            value={paymentDate || new Date()}
            mode="time"
            display="default"
            onChange={handlePaymentTimeChange}
            style={{ width: "100%" }}
          />

[perryfaro]

We have multiple date fields in our app on the same screen. When we have only one date picker on a screen, everything seems to work fine. After some debugging, I came across the following:

https://github.com/react-native-datetimepicker/datetimepicker/blob/master/src/DateTimePickerAndroid.android.js#L121

return pickers[mode].dismiss();

When we modify the line to the following:

return pickers[mode]?.dismiss();

The error disappears. The date is still successfully updated as well.

[jonatasfernandespimenta]

Having the same error here. Any udpates?

[uliBo]

have the same error. Proposal given by perryfaro also solved it in my application. Thanks to perryfaro!

[treasure-praise]

We have multiple date fields in our app on the same screen. When we have only one date picker on a screen, everything seems to work fine. After some debugging, I came across the following:

https://github.com/react-native-datetimepicker/datetimepicker/blob/master/src/DateTimePickerAndroid.android.js#L121

return pickers[mode].dismiss();

When we modify the line to the following:

return pickers[mode]?.dismiss();

The error disappears. The date is still successfully updated as well.

thank you @perryfaro this works

[herberthk]

We have multiple date fields in our app on the same screen. When we have only one date picker on a screen, everything seems to work fine. After some debugging, I came across the following:

https://github.com/react-native-datetimepicker/datetimepicker/blob/master/src/DateTimePickerAndroid.android.js#L121

return pickers[mode].dismiss();

When we modify the line to the following:

return pickers[mode]?.dismiss();

The error disappears. The date is still successfully updated as well.

Thanks @perryfaro this has worked for me however this is just a temporary solution so I'm opening a PR now

[github-actions[bot]]

:wave: @eypcnmrtOPT, sorry you're having an issue. This issue is being closed because it does not provide all information required by the issue template. As the issue template explains, we require that you provide a runnable example that reproduces your issue and your environment information. This means you need to provide a code snippet that we can copy-paste into an empty project and see the error ourselves, or provide a git repository with the issue. The reason is that maintainers do not have time to try reproduce bugs themselves. Please try to minimize the superfluous code and focus only on reproducing the bug. Please create a new issue with this and we'll be happy to review it!