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