DatePicker in IOS shows blank view

[Luckygirlllll]

Issue

DatePicker in IOS shows blank view

Expected Behavior

Users can see date picker

Code

  <DatePicker
                        style={styles.birthdayInput}
                        date={this.state.birthday}
                        ref={dateRef => this.dateRef = dateRef}
                        mode="date"
                        placeholder="Birthday"
                        format="MM-DD-YYYY"
                        androidMode="spinner"
                        onCloseModal={this.onBirthdaySubmitted}
                       // maxDate={moment().format('MM-DD-YYYY')}
                        confirmBtnText="Next"
                        cancelBtnText="Cancel"
                        customStyles={{
                        dateIcon: {
                                width: 0,
                                height: 0,
                            },
                        dateInput: {
                        color: 'grey',
                        alignItems: 'center',
                        },
                        placeholderText: {
                            color: '#AAAAAA',
                            fontSize: Platform.OS === 'android'? 23 : 22,
                            textAlign: 'left',
                            zIndex: 101,
                            fontWeight: Platform.OS === 'android' ? '200' : '200',
                            fontFamily: 'JosefinSans-Regular',
                            paddingLeft: 5,
                            marginTop: 12,
                        },
                        dateInput: {
                            borderWidth: 0,
                            alignItems: 'flex-start',
                        },
                        dateTouchBody: {
                            alignItems: 'flex-start',
                        },
                        dateText: {
                            fontSize: 22,
                            fontFamily: 'JosefinSans-Regular',
                            zIndex: 101,
                            color: 'black',
                            marginTop: 10,
                            paddingLeft: 5,
                        }
                        }}
                        onDateChange={(date) => this.onChangeBirthday(date)}
                        allowFontScaling={false}
                    />

Environment

1. react-native -v:0.59.10
2. node -v: 10.15.0
3. npm -v: 6.4.1
4. yarn --version:
5. target platform: IOS

Here is a screenshot:

[Luckygirlllll]

My issue relates to this issue: https://github.com/xgfe/react-native-datepicker/issues/375

The solution is:

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

[jacobjohn90]

FOR EXPO USERS: Is your phone in dark mode? If it is, then the text color is actually white but the background didn't change. I had to use their customstyles prop named datePickerCon with a background-color that changes depending on if the device is iOS and is in darkmode using Appearance API https://docs.expo.io/versions/latest/sdk/appearance/

<DatePicker ... customStyles={{ ... datePickerCon: { backgroundColor: 'black', }, }} />

[rdewolff]

My issue relates to this issue: #375

The solution is:

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

This did not the trick for me. Anyone having the same issue ?

[rdewolff]

Is there a way to force the text color to black with the style prop ?

[csumrell]

My issue relates to this issue: #375

The solution is:

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

This fixed it for me, thank you! I was going crazy trying to replicate the bug

[AliakseiPaseishvili]

it is problem with dark mode....

[punithrbadiger]

add customStyles for ios select panel datePickerCon: { backgroundColor: '#5360df' }, you can add any color. give color such that it should be matched with dark mode as well as light mode such as grey, blue so white and black text has to be visible. IOS Software Version having above 13.0 are facing this issue. react-native-datepicker has to solve this since one year there is no update.

[xgenem]

The proposed solution also didn't work for me. Anyone else figured it out?

[anandchakru]

My issue relates to this issue: #375

The solution is:

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

The above mentioned solution didn't work for me, however following worked for me:

import { useColorScheme } from 'react-native';
const isDarkMode = useColorScheme() === 'dark'; // default is 'light'
..
<DateTimePicker
      style={{ backgroundColor: isDarkMode ? '#000' : '#fff' }}
      ..
</DateTimePicker>

[AlexTLeo]

For those who are using react-native-date-picker, the issue is indeed dark vs. light mode but the above solutions are not quite appropriate. I dug around the source code and the solution is to instead use the "theme" attribute they have, but that is not mentioned in the documentation. "theme" can be set to either "light", "dark" or the default "auto"

For example:

<DatePicker theme="light" />