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
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
react: 16.8.3react-native: 0.59.8react-native-datepicker: 1.7.2target platform: IOSoperating 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
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.
I finally discovered a workaround that works in IOS 14
Light Mode issue solved by add this lines in
AppDelegate.mif (@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
After Implementation
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.jsonfile is what configures the Xcode project, so doing a simpleexpo publishwon’t respect any changes to that file.Okay, I’ll give it a try and report back. Thanks!
This comment & code does not solve the issue. It simply forces
Lightmode all the time. The actual picker needs to respect light and dark modes.