Datetimepicker: Date picker disappear

[qwwwpp]

Question

Platform: iOS 13.1.2, iPhone 6s, Xcode 11.1
Version: "@react-native-community/datetimepicker": "^2.1.0",
"react-native": "0.61.2",
The date picker is not visible

but it works on simulator with iOS 13.1

[Sixzero]

It is because the "night" mode in the new iOS13.0+, with "daylight" mode turned on things are good, letters of the spinners are black and not white.
This is what we also experience.
Anyone with a solution, how to force the spinner so stay in "daylight" theme?

[sourenamimik]

For now you can force light mode by adding:
`
// force light theme to avoid white text in white background TextInput

if (@available(iOS 13.0, *)) {
rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}
`

in your AppDelegate.m

Original source: https://github.com/facebook/react-native/issues/26299#issuecomment-533990557

[Beissner]

Do we have a fix for this in expo apps?

[rdewolff]

Experienced the same issue.

[schumannd]

@Beissner @rdewolff

You can disable iOS darkmode by following steps This package should handle darkmode better though.

@Sixzero. I would prefer a solution, where darkmode is implemented correctly, i.e. the background of the spinner turns black. The lettering turning white is the correct response to darkmode

[najmehna]

It's not a dark mode issue for me. It doesn't show anything neither on my iphone 7 ios 11.0 nor on simulator ios 13.2.2(although it opens up the space). But it is working fine in android.

[jstacoder]

100% dark mode issue here, works fine on light mode, cant see text on dark mode.

[jstacoder]

Fixed by updating to expo sdk v35 and adding the app.json setting for UIUserInterfaceStyle set to Light

[okwast]

For us the problem seemed to be that the date picker was using a text color aligned to the system theme. So if the device/simulator was in dark mode the text was light.
However the background was not adjusted.
We then workarouned the issue by explicitly adding a background view with a color that fits the current system theme so the text is always visible.

[schumannd]

@okwast that sounds exactly how the issue should be fixed. Ideally this background view should be included in the package. Would you mind sharing your code, or maybe even opening a Pull Request that would introduce this?

[barrylachapelle]

Having a prop to bypass the coloring would be nice. As much as @okwast comment makes sense - having a UI to match OS prefs isn't always possible and a pattern that cannot be enforced.. @sourenamimik 's solution worked perfectly.

[schumannd]

@barrylachapelle

I would not call disabling an OS feature a solution. It is at most a workaround and would prohibit anyone using this package from using the iOS dark mode.

having a UI to match OS prefs isn't always possible and a pattern that cannot be enforced

I don't understand what you are trying to say here. Dark/light mode is a boolean supplied by the OS. It is already used correctly for the font, but not for the background. So that just needs to be fixed in the package.

[littlefinger42]

Another way to force lightMode in the app is to add the following to your plist file.

<key>UIUserInterfaceStyle</key>
<string>Light</string>

https://github.com/facebook/react-native/issues/26299#issuecomment-540261084

[daybreaker]

@schumannd is right. Forcing light mode is not an option if someone has styled the rest of their app to accept both. This is a bug in the code where the text changes with Dark Mode, but the background does not, and should be fixed.

[luancurti]

@schumannd is right. Forcing light mode is not an option if someone has styled the rest of their app to accept both. This is a bug in the code where the text changes with Dark Mode, but the background does not, and should be fixed.

There isn't a bug because it is a feature that is never implemented, I'm working to support dark mode

[luancurti]

Closed by #204