Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ffraenz opened this issue Sep 2, 2019 · 25 comments

Comments

@ffraenz
Copy link

@ffraenz ffraenz commented Sep 2, 2019

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:

Screenshot

…on iOS 13 with dark mode enabled:

Screenshot

@ffraenz

This comment has been minimized.

Copy link
Author

@ffraenz ffraenz commented Sep 3, 2019

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

This comment has been minimized.

Copy link

@piotrfalba piotrfalba commented Sep 13, 2019

@ffraenz Unfortunately this solution not working :(

@MacKentoch

This comment has been minimized.

Copy link
Contributor

@MacKentoch MacKentoch commented Sep 23, 2019

@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

This comment has been minimized.

Copy link
Contributor

@radeno radeno commented Sep 24, 2019

@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

This comment has been minimized.

Copy link

@robertobrogi robertobrogi commented Sep 25, 2019

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

@jittuu

This comment has been minimized.

Copy link

@jittuu jittuu commented Sep 28, 2019

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

This comment has been minimized.

Copy link

@leelandclay leelandclay commented Oct 10, 2019

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>
@hiren0412

This comment has been minimized.

Copy link

@hiren0412 hiren0412 commented Oct 10, 2019

How to fix in EXPO.

@leelandclay

This comment has been minimized.

Copy link

@leelandclay leelandclay commented Oct 10, 2019

I don't use Expo, but one of the SO answers I found did have a reference to this section of the docs that allows you to insert items into the plist.
https://docs.expo.io/versions/latest/distribution/app-stores/#system-permissions-dialogs-on-ios

@hiren0412

This comment has been minimized.

Copy link

@hiren0412 hiren0412 commented Oct 11, 2019

Hi @leelandclay , I applied that but its not working. Still Date is not visible in IOS 13 in Dark mode -> ON

@leelandclay

This comment has been minimized.

Copy link

@leelandclay leelandclay commented Oct 11, 2019

I don't know enough about Expo to help. Did you try going to their boards/asking on Stack Overflow and such?

@HerbertLim

This comment has been minimized.

Copy link

@HerbertLim HerbertLim commented Oct 12, 2019

Dear @hiren0412 , if you are using Expo as me, as far as I know, you have to detect current theme and change the backgroundColor of the View wrapping DatePickerIos. Since you have to use Appearence module to detect current theme, you should use Expo SDK v35. I solved this issue like that.
However, if a user changes theme while using app, this issue still remains. It is likely that Appearence modules event handler doesn't run correctly yet.

@jdhorner

This comment has been minimized.

Copy link

@jdhorner jdhorner commented Oct 15, 2019

I can't get any of these options to work with Expo v35 and https://github.com/xgfe/react-native-datepicker

@eltonea

This comment has been minimized.

Copy link

@eltonea eltonea commented Oct 17, 2019

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>

Best solution ever

@danwhite-ad

This comment has been minimized.

Copy link

@danwhite-ad danwhite-ad commented Oct 24, 2019

None of these solutions are working for me.

@leelandclay

This comment has been minimized.

Copy link

@leelandclay leelandclay commented Oct 24, 2019

For those that are still having problems.

First, check to see if manually setting Light Mode on the device fixes the problem. If it doesn't, then there is a different problem than what has been worked out here and none of these fixes will work.

Next, Are you using Expo???? If you're using Expo, then these fixes will not work because they don't seem to allow the addition of the UIUserInterfaceStyle plist entry. Considering it's new, I'm guessing it will become available in a future release of Expo. I would recommend going to Expo instead of react-native...there's nothing that can be done on this side.

If you're not using Expo and still having the problems, please provide details as far as what device and OS build you're using.

@cboban

This comment has been minimized.

Copy link

@cboban cboban commented Oct 26, 2019

Fixed this one in Expo with following:

customStyles={{
    datePicker: {
        backgroundColor: 'black'
    }
}}

Although this makes the datepicker background black, at least it's functional and text fields are visible.

@Noitham

This comment has been minimized.

Copy link

@Noitham Noitham commented Oct 28, 2019

Regarding this suggested solution:

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

Has anyone faced the app being rejected due to invalid Info.plist? Or has it been fixed on 13.1.2?

There's an ongoing conversation here:

https://stackoverflow.com/questions/56537855/is-it-possible-to-opt-out-of-dark-mode-on-ios-13

@leelandclay

This comment has been minimized.

Copy link

@leelandclay leelandclay commented Oct 28, 2019

I've submitted 2 updates to my app with this in the plist, latest one was on Oct 11th. I haven't had any problems with getting it approved.

@henrymoulton

This comment has been minimized.

Copy link
Contributor

@henrymoulton henrymoulton commented Oct 28, 2019

We've got an issue with an iPhone X user which is using Dark Mode:

image

Is this the same issue?

React Native 0.59.10

@avencat

This comment has been minimized.

Copy link

@avencat avencat commented Oct 28, 2019

@henrymoulton yes this is the same issue! 😉

Thanks @jittuu for your solution, it's the one that worked for me! 🙂

However, this solution didn't work for me, @Noitham my app has been refused today because of this but accepted with @jittuu 's solution. It works locally but not when uploading on AppStore Connect… 😞

@jonassvalin

This comment has been minimized.

Copy link

@jonassvalin jonassvalin commented Nov 7, 2019

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>

I tried this solution and it worked perfectly to stop this issue but caused other side effects. On the pages in our app that are supposed to have a white status bar and dark status bar content, the content is forced to light and thus disappears.

@Kuhne1 Kuhne1 mentioned this issue Nov 8, 2019
5 of 5 tasks complete
@IgorUsoltsev

This comment has been minimized.

Copy link

@IgorUsoltsev IgorUsoltsev commented Nov 12, 2019

I have solved it without making changes to appDelegate.m

Pure React Native solution is to use https://github.com/expo/react-native-appearance and props
datePickerCon: { backgroundColor: '#000' },

So assuming your customers have both light and dark color schemes, we use the code as follows:

import { Appearance } from 'react-native-appearance'; // Import module dependency
...

// Skip code to component render function
render() {
...
// Check color scheme and set proper BG
const colorScheme = Appearance.getColorScheme();
let bgColor;
if(colorScheme === 'dark'){
  bgColor = '#000';
}else{
  bgColor = '#fff';
}
...
// Skip code till return function
return (
....
// The place where you render DatePicker
<DatePicker
   customStyles={{
    // This prop is responsible for DatePicker background
    datePickerCon: {
      backgroundColor: bgColor
     },...```
@travis-white-6

This comment has been minimized.

Copy link

@travis-white-6 travis-white-6 commented Nov 13, 2019

**** For those using Expo ****
can simply add the following to your code to fix since there is a "isDarkModeEnabled" prop in the component. Solution does not affect Android

run 'expo install react-native-appearance' in CLI

import { Appearance } from 'react-native-appearance';
import DateTimePicker from "react-native-modal-datetime-picker";

render() {
let colorScheme = Appearance.getColorScheme();
let darkMode = false
if (colorScheme === 'dark') {
// render some dark thing
darkMode = true
}

    return (
          <DateTimePicker 
             ...
             isDarkModeEnabled={darkMode}
             mode={'date'} // or can use 'time'
           />
    )

}

@outaTiME

This comment has been minimized.

Copy link

@outaTiME outaTiME commented Dec 3, 2019

This issue will be fixed on SDK36, any advice from expo guys? Probably setting from app.json (userInterfaceStyle) must be respected, thanks !!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.