Datepicker in IOS is not working in dark mode

[Mohammad-Khalid23]

Issue

I am using react-native-picker , on android its working fine but on IOS ( iphone XS ,iphone XS max, iphone 11, iphone 11 pro , iphone 11 pro max) is not showing the calendar properly in the below image , in datepicker date is not showing and sometime month scroll is also not working.

I also used react-native DatepickerIOS it's showing same behavior like the attached image

Code

                        <DatePicker
                            style={{ height: 30, marginTop: -10 }}
                            date={this.state.noteData.date ? this.state.noteData.date : new Date()}
                            mode="date"
                            format="YYYY-MM-DD"
                            confirmBtnText="Confirm"
                            cancelBtnText="Cancel"
                            maxDate={new Date()}
                            customStyles={{
                                dateInput: {
                                    borderColor: 'transparent',
                                    backgroundColor: 'transparent',
                                    height: 20,
                                    alignItems: 'flex-start',
                                    paddingLeft: 7
                                },
                                dateText: styles.inputBox,
                                placeholderText: styles.inputBox
                            }}
                            showIcon={false}
                            onDateChange={(date) => this.handleChange(date, 'date')}
                        />

Environment

1. react: 16.8.3
2. react-native: 0.59.8
3. react-native-datepicker: 1.7.2
4. target platform: IOS
5. operating system: ubunto

If someone faced this issue kindly help how can I fixed this , this is happening only iphone series after iphone X like I mentioned above

[manojalwisnz]

@Mohammad-Khalid23 , Hi There, i have same issue with new iOS version and calendar doesn't appear properly . Please, somebody give a quick solution for this.

[juanpaie]

Same issue with iOS 13.

[mieszko4]

It is problem with dark mode

[Mohammad-Khalid23]

I found this to resolve the issue, Add this to your info.plist file:

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

hope it will work for you

[gisderdube]

yup, @Mohammad-Khalid23 's solution works!

[tlaine1441]

Has anyone had luck adding this info.plist change to app.json in expo?

Or fixed it using expo for that matter?

[manojalwisnz]

Thank you so much, it works

[Mohammad-Khalid23]

@tlaine1441 check this may be it will solve your issue

https://stackoverflow.com/questions/48157185/info-plist-file-for-react-native-ios-app-using-expo-sdk

[jdhorner]

This comment & code does not solve the issue. It simply forces Light mode all the time. The actual picker needs to respect light and dark modes.

[Mohammad-Khalid23]

@jdhorner yes you are right , but for now this code can solve your issue untill react native fix this issue on it's DatePickerIOS because react-native-datepicker use react-native DatePickerIOS , so when react-native fix it or may be they fixed it on it's new version e.g 0.60 so you will use datepicker on light and dark mode.

[Beissner]

I found this to resolve the issue, Add this to your info.plist file:

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

hope it will work for you

Using expo here and this did not fix the issue. Appears to only be happening on select devices.

[ctur]

For Expo Users;

EDIT Adding "UIUserInterfaceStyle": "Light", to app.json(info.plist) also worked on Standalone Build, but it didn't work on development.

Not a solution but workaround. https://github.com/xgfe/react-native-datepicker/issues/365#issuecomment-538816095

[PelagicDev]

@ctur Did you have to do re-submit a new Standalone build of your app to the App Store or will it work by doing an expo publish? Thanks!

[ctur]

@PelagicDev I have re-submited a new Standalone build to the App Store, but i think it should work with expo publish as well not sure what is difference though.

EDIT: I was wrong As described in here, https://docs.expo.io/versions/latest/workflow/publishing/#limitations, some native configurations can't be updated on publish, e.g. app.json on Expo Publish.

[PelagicDev]

@PelagicDev I have re-submited a new Standalone build to the App Store, but i think it should work with expo publish as well not sure what is difference though.

Okay, I'll give it a try and report back. Thanks!

[PelagicDev]

For Expo users: You will need to do a new build of the app and re-submit to the App Store. The app.json file is what configures the Xcode project, so doing a simple expo publish won't respect any changes to that file.

[yilakt]

Has anyone had luck adding this info.plist change to app.json in expo?

Or fixed it using expo for that matter?

I'm currently trying w/o any luck. When directly editing info.plist then running, it seems to remove my edit. Tried adding to app.json file directly and that didn't do the trick either. (expo-bare)

[Beissner]

@yilakt Did you re-submit your app to the App Store? I'm using Expo, it worked for me after making the change to app.json and generating a new build to submit.

[ctur]

What do you mean by 'it seems to remove my edit' ? @yilakt As, @Beissner mentioned you need to re-build to changes take effect.

[denisburik]

Nesse caso, como posso corrigir esse selecionador de data?

I have the same problem

[ahtisham09]

I finally discovered a workaround that works in IOS 14

Light Mode issue solved by add this lines in AppDelegate.m

if (@available(iOS 14, *)) { UIDatePicker *picker = [UIDatePicker appearance]; picker.preferredDatePickerStyle = UIDatePickerStyleWheels; }

Dark Mode issue solved by Add this to your plist file:

`UIUserInterfaceStyle

Light` Before Implementation  After Implementation