Datetimepicker: Support Dark Mode

[wamry]

Could you support dark mode, since ios 13 is going to be released soon ?

[Swaagie]

I'm all for supporting the various native OS modes that exist. Do you have any details (docs, blogpost) wrt to that mode? Since we wrap the native modules I suspect it is just a single flag we can set?

[wamry]

Ok, I can't see it in any third party ios app, but i saw it in the clock app.
https://i.imgur.com/kkhMoya.jpg
I'm using iOS 13

[hawkrives]

I expect that it will "just work" if the host app supports dark mode?

[RobTS]

As the Appearance module is not released yet and there is no best practice approach on how to deal with it, I understand it is hard to decide on what to do.

Until then, here are my thoughts on what is necessary to use this library in an app with switchable dark mode pre-RN0.61 (Android Dark mode integration has no ETA yet):

Android:

• New style is required as well as a toggle in RNDatePickerDialogFragment.java to select the appropriate style (light or dark) at runtime.

iOS:

• As the background is transparent, only font-colors need to be adapted depending on light or dark theming.

I hope this helps!

[josh-wiley]

The lack of support for this feature is causing issues with the datetime picker when dark mode is enabled.

For those who are looking for a temporary solution, see this comment.

[llamaluvr]

For anyone perplexed as to why the suggested temporary isn't working... or why it isn't working in Expo...

We have date pickers inside of Modal components in a few cases (actually the only place we use a date picker). Despite following the workaround, the text would still be white in dark mode. It turns out the workaround of

// force light theme to avoid white text in white background TextInput
  if (@available(iOS 13.0, *)) {
    rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
  }

does not affect Modal's, I believe because the Modal has a separate view controller.

Anyway, what does work is to override dark mode in Info.plist with the UIUserInterfaceStyle key (string) set to Light.

[Andriiklymiuk]

Well, you can also use https://github.com/expo/react-native-appearance , if app is migrated to rn 0.59 or higher.
But out of the box dark mode support, without workarounds will be much appreciated)

[mikehardy]

on iOS this works well with the react-native-appearance package (using the package here underneath the react-native-modal-datetime-picker package)

for android this won't be possible until as mentioned above the dialog fragment native Java code here is altered to load themes via props and you include different themes (due to a platform limitation you are limited to theme switching and can't drive a theme directly I don't think - or at least not easily. https://github.com/react-native-community/react-native-datetimepicker/issues/20#issuecomment-546721906

[jennmueng]

The solution posted here works for this module.

[kundansingh13]

whenever changes Theme ( DarkMode <<-to->> LightMode ), its change Date into 1 Jan 1970 for first time when app load + expo + react Native
Its happens in iOS and android ( RealMe 5 Pro, have a option to change theme to Dark mode to light mode or vice - versa ) in both devices.
anyone can give solution, urgently

your solutions are welcome

[vonovak]

I'm closing this because

• the picker itself changes its appearance based on mode, and this is controlled by iOS. if this is not what you want, workarounds are documented ^
• we now support textColor prop
• react-native-appearance can be used for more control
• https://github.com/facebook/react-native/pull/27908 brings more control for dark/light mode color props

[brandtnewww]

I just faced the issue that only parts of the DateTimePicker component would be visible in dark mode AND without the textColor prop, I wasn't able to select a date in the future. Fixed it by adding the textColor prop.

[zmnv]

There are dark lines in iOS... How to fill it to light?