react-native-datepicker: Datepicker in IOS is not working in dark mode

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

daepicker

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

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 22

Most upvoted comments

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

@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. IMG_0487

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:

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

Before Implementation Screenshot 2021-03-03 at 3 13 34 PM

After Implementation Screenshot 2021-03-03 at 3 40 35 PM

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

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

Or fixed it using expo for that matter?

It is problem with dark mode

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.

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

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.