Dates and months not visible

  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 found a solution (see my SO article)

Add this to your Info.plist

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

[spyshower]

Any solution for Expo?