react-native-date-picker
react-native-date-picker copied to clipboard
henninghall
Current date in date mode has wrong color [iOS]
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 :
- OS: iOS
- iOS version 16.0
- react-native-date-picker version 4.3.3
Please add the code you're running when the error occurs + a screenshot of the unexpected behaviour
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
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)
@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:
Usually it's like this with forced light mode:
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.
@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:
Usually it's like this with forced light mode:
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
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)
