IOS 13 current date not there/visible - urgent help please

[vvusts]

Describe the bug NOW I saw it is only when ios13 dark mode is set!

Current date is not visible - or it is white not sure on IOS 13 the same code was working fine on IOS 12. On image you can see it's only current date I moved year down and even not in focus it's still white/not there.

Expected behavior That current date is visible.

To Reproduce

<DatePicker
                maximumDate={this.props.maximumDate}
                textColor={this.props.pickerColor}
                style={{width: this.props.screenWidth}}
                date={this.state.date}
                mode={this.props.mode}
                locale={this.state.locale}
                onDateChange={this.dateChanged}
              />

Smartphone (please complete the following information):

• OS: IOS 13, android work fine
• React Native version [e.g. 0.59.10]
• react-native-date-picker version 2.7.0

[henninghall]

Hi, thanks for reporting this. You can always remove the textcolor prop to get the default colors, it will solve it before we fix this properly. PR's are always welcome!

[felixchan]

+1 I don't have any style or textColor props. Still not visible. @henninghall

Seems to be a problem with Dark Mode. When Dark Mode is turned off, the text appears.

[samslow]

+1 this is only can't see on dark mode on iOS

[henninghall]

The issue seems to exist in DatePickerIOS which this picker is based on. Does anyone have the possibility to test this solution? https://github.com/facebook/react-native/issues/26299

[samslow]

@henninghall i tried to that solution

( above testing image is DarkMode ) i'm testing on new RN project, and result is excellent according to facebook/react-native#26299

But, i don't know how to add below solution code inner react-native-date-picker

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

Where can i add that solution code ?

[abakhtiar]

@henninghall i tried to that solution

( above testing image is DarkMode ) i'm testing on new RN project, and result is excellent according to facebook/react-native#26299

But, i don't know how to add below solution code inner react-native-date-picker

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

Where can i add that solution code ?

This is what worked for me: I added this code in the AppDelegate.m of the PROJECT before return YES; (for me was in didFinishLaunchingWithOptions block!).

    if #available(iOS 13.0, *) {
        // Always adopt a light interface style.
        overrideUserInterfaceStyle = .light
    }

Then I needed to rebuild the project (cmd+R) Try to add it in the AppDelegate.m of the project not in the node-module. I think keyboard behaviour is affecting from app wide setting so this configuration cannot override the main setting.

[samslow]

What keyboard behaviour ?

Do you mean that this is a problem that cannot be solved at the library level?

[abakhtiar]

What keyboard behaviour ?

Do you mean that this is a problem that cannot be solved at the library level?

by behaviour I mean colour.. As I mentioned, this is my assumption so I'm not sure if it can be done also in lib level. Please let me know if you could set it up in lib. Thanks!

[hiren0412]

I tried this code in appDelegate.m file, but still Date is not visible in IOS 13 in Dark mode. AnyOne having solution. plzzz post here

[samslow]

@hiren0412 please show me your code ? this solution is work for me on iOS13

[abakhtiar]

@hiren0412 please try this also: if (@available(iOS 13, *)) { self.window.overrideUserInterfaceStyle = UIUserInterfaceStyleLight; } just before return YES; in appDelegate.m let me know.

[Theng]

For me I don't need anything to do with dark mode so I set this in info.plist

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

[peterboyer]

Suppose that #119 has some relation?

[fmchan]

anyone can provide solution for Expo which cannot modify the .h file or plist. thank you

[mikemalpass]

I got this to work limiting the UIUserInterfaceStyleLight to just the ViewController with datapicker:

define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v) ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"13.0")) { self.datePicker.overrideUserInterfaceStyle = UIUserInterfaceStyleLight; }

Credit for MACRO to: https://github.com/carlj/CJAMacros/blob/master/CJAMacros/CJAMacros.h

[ryanbourneuk]

I've also got this to work, by changing:

- (UIView *)view
{
    return [DatePicker new];
}

in RNDatePickerManager.m to:

- (UIView *)view
{
    DatePicker *datePicker = [DatePicker new];

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

    return datePicker;
}

For a quick fix (accepting that you'll disable dark mode for the component) that'll work - I'll revisit this when I have more time to see if there's a fix that also allows for dark mode support!

[peterboyer]

@henninghall How are we looking with cutting a release for this issue soon? :)

[henninghall]

Released a fix for this in 2.7.3

[Biplovkumar]

@henninghall

Released a fix for this in 2.7.3

Not available this version.

[henninghall]

@henninghall

Released a fix for this in 2.7.3

Not available this version.

This is "react-native-date-picker" library, not "react-native-datepicker", I understand that the names can be confusing 😅