CODEWITHSUNDEEP
react-nativedatepicker
Olivia
Olivia

Reputation: 2161

React Native react-native-datepicker is not displaying some of the dates

I am working with react-native-datepicker and there seems to be some dates that have the font color of transparent and others not. I am not sure what is going wrong, I have the most up to date version of the datepicker. When I select a date that is not visible, I am able to print out the correct value which means it is working... it is just not displaying. I attached a picture of what is happening. 

import React from 'react';
import DatePickerModal from 'react-native-datepicker';
import moment from 'moment';
import {Platform} from 'react-native';
import Colors from 'utils/Colors';

type DatePickerProps = {
  value: String,
  onDateChange: Function,
  datePickerRef: Object
};

const DatePicker = ({ value, onDateChange, datePickerRef }: DatePickerProps) => {
  if( Platform.OS === 'ios'){
    return (
      <DatePickerModal
        ref={datePickerRef}
        date={value}
        mode="date"
        placeholder="Select date"
        format="YYYY-MM-DD"
        maxDate={moment().subtract(18, "years")}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        customStyles={dateInputStyles}
        onDateChange={onDateChange}
      />
    )} else {
      <DatePickerModal
        ref={datePickerRef}
        androidMode
        date={value}
        mode="date"
        placeholder="Select date"
        format="YYYY-MM-DD"
        maxDate={moment().subtract(18, "years")}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        customStyles={dateInputStyles}
        onDateChange={onDateChange}
      />
  }}

const dateInputStyles = {
  dateTouchBody: {
    height: 28,
  },
  dateInput: {
    borderColor: Colors.Red,
    height: 28,
    alignItems: 'flex-end',
  },
  dateText: { color: Colors.Gray },
  placeholderText: { color: Colors.Gray  },
  btnTextCancel: { color: Colors.Gray },
  btnTextConfirm: { color: 'green' }
};
export default DatePicker;

dates not displaying

Upvotes: 1

Views: 5962

Answers (2)

user23792052
user23792052

Reputation: 1

For anyone who is still experiencing the issue, you just need to add the attribute 'theme='light'' to the DatePicker.

Picture1

Upvotes: 0

user7554295
user7554295

Reputation: 430

This might be a dark-mode issue related to this: https://github.com/xgfe/react-native-datepicker/issues/365.

Either you have to custom the color based on the mode (need to install react-native-dark-mode[https://www.npmjs.com/package/react-native-dark-mode]) or you can set UIUserInterfaceStyle key to Light in Info.plist

Upvotes: 3

Related Questions