henninghall / react-native-date-picker

React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.
MIT License
2.25k stars 346 forks source link

Current date in date mode has wrong color [iOS] #707

Closed NikolakoG closed 7 months ago

NikolakoG commented 1 year ago

When passing a color using textColor prop, in iOS implementation of the the library the current date has wrong color. The Component is in 'date' mode.

The code below is the one from my project:

<DatePicker mode="date" date={date} onDateChange={datePicker} locale={locale} maximumDate={maximumDate} minimumDate={minimumDate} textColor={theme.colors.BLACK} androidVariant="nativeAndroid" />

where theme.colors.BLACK is an object passing 2 colors depending on the apps theme.

I checked library's code which is responsible for rendering the component in iOS and found out that if we add the code {color: props.textColor} in style of _toIosProps function in DatePickerIOS.js file that bug is fixed. (The alteration of the code is shown below)

_toIosProps = (props) => { return { ...props, style: [styles.datePickerIOS, {color: props.textColor}, props.style], date: props.date ? props.date.getTime() : undefined, locale: props.locale ? props.locale : undefined, maximumDate: props.maximumDate ? props.maximumDate.getTime() : undefined, minimumDate: props.minimumDate ? props.minimumDate.getTime() : undefined, theme: props.theme ? props.theme : 'auto', } }

Smartphone :

henninghall commented 1 year ago

Please add the code you're running when the error occurs + a screenshot of the unexpected behaviour

NikolakoG commented 1 year ago

I'm sorry, I accidently deleted the code I'm using. Here it is:

<DatePicker mode="date" date={date} onDateChange={datePicker}locale={locale} maximumDate={maximumDate} minimumDate={minimumDate} textColor={theme.colors.BLACK} androidVariant="nativeAndroid" />

and the unexpected behavior is shown in the screenshot Screenshot 2023-10-02 at 11 00 27 AM

henninghall commented 1 year ago

Thanks, does it work if you are using #ffffff instead?

NikolakoG commented 1 year ago

If I set textColor as a hex color it works fine, if I use my variable which switches between two hex colors, the current date keeps rendering with the initial color. (In this case, black color)

MatijaNovosel commented 1 year ago

@henninghall

I'm getting a similar issue here, when I force the phone to use Dark mode on everything it changes the style of the date picker to this:

image

Usually it's like this with forced light mode:

image

Is there any way I can override this style? Text color AND the theme prop does not work at all, I've no clue what to do.

Lucifer24a commented 1 year ago

@henninghall

I'm getting a similar issue here, when I force the phone to use Dark mode on everything it changes the style of the date picker to this:

image

Usually it's like this with forced light mode:

image

Is there any way I can override this style? Text color AND the theme prop does not work at all, I've no clue what to do.

textColor="#000000" is working for me

finnbayer commented 9 months ago

I came across this today on iOS 16. I cannot reproduce this behaviour on iOS 17 (Tested on iPhone12 Simulator iOS v.16.0 vs v17.0 as well as iPhone 12 on v16 and iPhone 12 mini on v17.4)

henninghall commented 7 months ago

textColor prop is no longer supported.