Dates and months not visible

[alexstoyanov]

  react: 16.8.6 => 16.8.6 
  react-native: ^0.59.3 => 0.59.10 

iOS 13.1.2

• iOS:
• react-native-modal-datetime-picker:

Description

I have been using react-native-modal-datetime-picker for a long time without any problem. But now I got a problem with the date picker. The dates and months are not visible. I am attaching a screenshot of the issue.

Reproducible Demo

`
import React, {Component} from "react";
import {StyleSheet, TouchableOpacity, View} from "react-native";
import {connect} from "react-redux";
import {Text} from "native-base";
import * as Strings from "../../utils/Strings";
import DateTimePicker from 'react-native-modal-datetime-picker';

class DatePickerField extends Component {
constructor(props) {
super(props);
this.state = {
isDateTimePickerVisible: false,
};
}

showDateTimePicker = () => {
    this.setState({isDateTimePickerVisible: true})
};
hideDateTimePicker = () => this.setState({isDateTimePickerVisible: false});


handleDatePicked = (date) => {
    this.hideDateTimePicker(date);
    this.props.onDateChange(date);

};

render() {
    return (
        <View style={styles.containerStyle}>
            {
                    <Text
                        style={[styles.labelStyle, {color: this.props.textLabelColor}]}>{this.props.textLabel}</Text>
            }
            <TouchableOpacity onPress={this.showDateTimePicker.bind(this)}
                              style={[styles.dateContainerStyle, this.props.backgroundContainerStyle]}>
                <Text style={[styles.dateTextStyle, this.props.placeholderTextStyle]}>
                    {convertDate(this.props.date)}
                </Text>
            </TouchableOpacity>
            <DateTimePicker
                titleIOS={Strings.DATE}
                isVisible={this.state.isDateTimePickerVisible}
                date={this.props.date}
                onConfirm={this.handleDatePicked}
                onCancel={this.hideDateTimePicker}
            />
        </View>
    );
}

}

const styles = StyleSheet.create({
containerStyle: {
flex: 1,
flexDirection: 'column',
},
labelStyle: {
fontSize: 12,
alignSelf: 'flex-start',
},
dateContainerStyle: {
borderRadius: 12,
backgroundColor: '#FFFFFF29',
height: 38,
alignItems: 'center',
paddingLeft: 8,
paddingRight: 8,
flexDirection: 'row',
alignSelf: 'flex-start',
marginTop: 4
},
dropDownIconStyle: {
justifyContent: 'flex-end'
},
dateTextStyle: {
color: '#FFFFFF70',
flex: 1
}
});

function convertDate(inputFormat) {
function pad(s) {
return (s < 10) ? '0' + s : s;
}

let date = new Date(inputFormat);
return [pad(date.getDate()), pad(date.getMonth() + 1), date.getFullYear()].join('/');

}

const mapStateToProps = state => ({});

export default connect(mapStateToProps, {})(DatePickerField);

`

[schumannd]

I am pretty sure that this is caused by the new ios 13 update and the dark mode. Have you found a workaround for it yet?

[alexstoyanov]

@schumannd Yes, you are right it is a problem with the new "Dark" mode in iOS. I changed to "Light" mode and the picker is looking fine. The problem is that some of the users(as I was) could be using "Dark" mode. I don't have a workaround for now. Hope that the guys from this repo could help us.

[duja]

This happens for me as well when testing on iPhone Xs Max with iOS 13 and Dark mode.

Any solution / workaround for it yet?

[schumannd]

I found a solution (see my SO article)

Add this to your Info.plist

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

[alexstoyanov]

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

This works for me also! This is a dirty workaround but at least for now - it is something.

[mmazzarolo]

@alexstoyanov @schumannd hi! 👋

This is related to the iOS dark mode support.
Please see the README for a fix/workaround and the other related issues:

• Dates are not showing on iOS #293
• iOS 13.0 dark mode support #283
• Can't see dates in iOS #294

[spyshower]

Any solution for Expo?

[schumannd]

@spyshower I would strongly suggest ejecting

[spyshower]

@spyshower I would strongly suggest ejecting

I get your point but I am literally one step before my app's official release :(

[mmazzarolo]

@spyshower can’t you detect if the dark mode is enabled from Expo and update the UI accordingly (like is suggested in the README)?

[spyshower]

@spyshower can’t you detect if the dark mode is enabled from Expo and update the UI accordingly (like is suggested in the README)?

Yep.. yep.. you right. Fixed. Thank you 🍡

[mtsmachado8]

Is it currently explained in Readme? couldn't find it

[abdulmuksith3]

Fix:

1. import { Appearance} from 'react-native';

2. Add the below prop

<DateTimePickerModal
{...}
isDarkModeEnabled={Appearance.getColorScheme() === 'dark' ? true : false}
/>