[iOS 13 beta] DatePickerIOS is invisible having dark mode enabled

[ffraenz]

React Native version: 0.60.5

This may be relevant to #25181 discussing Xcode 11 and iOS 13 Beta.

Steps To Reproduce

1. Run react-native init ExampleDatePicker to create a new project.
2. Add <DatePickerIOS date={new Date()} /> to the bottom of the scroll view in App.js.
3. Run app on iOS 13 (simulator or test device) having dark mode enabled.
4. The date picker is interactive (you hear the ticking noise when dragging the wheels) but it appears transparent – you can't see it.

Describe what you expected to happen:
I expected to see the date picker.

This is what it looks like on iOS 13 with dark mode disabled:

…on iOS 13 with dark mode enabled:

[ffraenz]

For future reference: You can enforce 'light mode' on the React root view by adding following line to the AppDelegate.m file. This also brings back the date picker although dark mode is enabled on the system.

rootView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;

[piotrfalba]

@ffraenz Unfortunately this solution not working :(

[MacKentoch]

@piotrfalba it works no worry.

Ensure you added in your appDelegate.m:

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

And force (not needed but anyway) restart RN server:

npm start -- --reset-cache

[radeno]

@ffraenz DatePickerIOS is deprecated. Use https://github.com/react-native-community/react-native-datetimepicker
If you will have same results, open issue there please.

[robertobrogi]

hi, i have the same problem.... i use expo 35 and with "userInterfaceStyle": "light", stay trasparent...
there is any solution?

[jittuu]

I managed to make it work by setting to selft.window instead of rootView.

I added the following code in AppDelegate.m

if (@available(iOS 13, *)) {
    self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}

return YES;

[leelandclay]

I tried both the self.window and rootView overrides and neither worked for me. I finally discovered a workaround that works in 13.1.2.
Add this to your plist file:

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