Datetimepicker: Changing text color of iOS picker

[markwindsorr]

I need to change the color of this text.

Edit: eventually this issue evolved to report that textColor prop does not work when display="spinner" which is a bug. textColor will not work for other display modes

[williamhaley]

I was struggling through that myself. The textColor prop should work to set the picker color, as far as I understand it - https://github.com/react-native-datetimepicker/datetimepicker#textColor-optional-ios-only

However, I think that this prop ~(in iOS 14)~ only works if you're using spinner for display?

Allows changing of the textColor of the date picker. Has effect only when display is "spinner".

Which seems to be backed up by the code.

https://github.com/react-native-datetimepicker/datetimepicker/blob/master/ios/RNDateTimePickerManager.m#L87

It looks like UIDatePickerStyleWheels corresponds to spinner https://github.com/react-native-datetimepicker/datetimepicker/blob/master/ios/RNDateTimePickerManager.m#L26

[pedromarta]

https://github.com/pedromarta/datetimepicker/commit/8a58077e412d5258c881484619cf754cc7acc337

That is my approach to an eventual fix, it works nicely, although it's done on the React side.

heightStyle is being used as a dependency, since it also gets set in state after the 1st layout.

RCT_CUSTOM_VIEW_PROPERTY(textColor, UIColor, RNDateTimePicker) is being blocked due to #247 (the issue is still live after beta). On that problem, it seems that textColor is being set before the actual date picker style changes to UIDatePickerStyleWheels (?).

By reaching RCT_CUSTOM_VIEW_PROPERTY(textColor, UIColor, RNDateTimePicker) after the 1st layout with the textColor value change from undefined to the actual value passed through props, the change won't be blocked by

if (@available(iOS 14.0, *) && view.datePickerStyle != UIDatePickerStyleWheels) {
    // prevents #247
    return;
  }

since we'll meet the view.datePickerStyle != UIDatePickerStyleWheels condition at that time.

@vonovak Would this be worthy of a PR?

[vonovak]

@pedromarta sorry, I don't follow. And I don't really understand what https://github.com/pedromarta/datetimepicker/commit/8a58077e412d5258c881484619cf754cc7acc337 is about.

Would you expand on that?

[pedromarta]

if (@available(iOS 14.0, *) && view.datePickerStyle != UIDatePickerStyleWheels) {
    // prevents #247
    return;
  }

That stretch of code in RNDateTimePickerManager.m blocks textColor from being set in devices with iOS 14.0. view.datePickerStyle only gets changed to UIDatePickerStyleWheels after that.

https://github.com/pedromarta/datetimepicker/commit/8a58077e412d5258c881484619cf754cc7acc337 changes textColor from undefined to props.textColor to reach RCT_CUSTOM_VIEW_PROPERTY(textColor, UIColor, RNDateTimePicker) when the view.datePickerStyle == UIDatePickerStyleWheels condition can be met.

[williamhaley]

What you're saying makes sense to me @pedromarta. That explains some behavior around textColor I've seen the past few days but have been too lazy to identify. (See attached gif. The color starts as blue, but isn't used on initial app launch. I change to red, which then works. I change back to blue again, and now blue works).

My app is built with textColor="blue" for the DateTimePicker, but that textColor does not take effect when the app is launched. Only when the textColor is changed does that prop seem to matter. Then the DateTimePicker re-renders and actually uses the value.

[tgreco]

@vonovak any update on this one?
I am having trouble trying to style this component on ios 14.

[vonovak]

Hello, I'm not aware of any way to change the color of text in OP's screenshot. The textColor prop only works for UIDatePickerStyleWheels which corresponds to display="spinner" (as documented) although there apparently are issues as seen in https://github.com/react-native-datetimepicker/datetimepicker/issues/308#issuecomment-711112673

since I don't think anything can be done here, I'm closing. If you have some other problems, please open a new issue.

[vonovak]

@pedromarta it'd be nice to fix the issue you fixed in https://github.com/pedromarta/datetimepicker/commit/8a58077e412d5258c881484619cf754cc7acc337 but instead of fixing it from JS, I would prefer to see the fix done in the native module (when color prop is set, we should remember it, and then when the display prop changes to UIDatePickerStyleWheels then we would recover that color, if that makes sense.? Would you be able to contribute that? Thanks!

[sayo96]

Even having display="spinner" is not allowing me to change text color. Here is a sample of my code:

 <DateTimePicker
      testID="dateTimePicker"
      value={new Date(date)}
      mode="date"
      display="spinner"
      textColor="red"
      onChange={Platform.OS === 'android' ? handleChangeAndroid : handleChange}
    />

I'm on expo sdk 38 and i'm using @react-native-community/datetimepicker:3.0.6

[alesdvorakcz]

I am having same problem. v3.0.9 looks like it ignores textColor on ios 14.3

<DateTimePicker
   mode="datetime"
   display="inline"
   textColor="red"
   onChange={...}
   value={...}
/>

[stefan-girlich]

@alesdvorakcz could you please add your iOS version and device type to your comment?

Since discussion of issue #247 has been merged with the discussion of this issue, I'd like to highlight again that there still seem to be to particular crashes related to react-native-datetimepicker v3.0.2 and iOS 14.x for full transparency:

• Cannot read property 'getDefaultDisplayValue' of undefined(see #306, currently still experiencing this using library v3.0.9 with expo v38.0.8 on iOS 14.4)
• [_UIDatePickerIOSCompactView setHighlightsToday:]: unrecognized selector sent to instance 0x7f7fc7e0ddc0 (see #247)

_Update_:

Solution
Updating expo to v40.0 (via expo update) solved the issue for me; now the application neither crashes when using textColornor shows white fonts on white background in "default" mode.

Specs:

• Expo 40.0
• iOS 14.4
• iPhone X
• react-native-datetimepicker 3.0.9
• (react-native-modal-datetime-picker 9.1.0)

[fix777]

I am having same problem. v3.0.9 looks like it ignores textColor on ios.

<DateTimePicker
   mode="datetime"
   display="inline"
   textColor="red"
   onChange={...}
   value={...}
/>

Hi, there.
Can I ask how you changed the background color to grey and text color to white?

[alesdvorakcz]

I am having same problem. v3.0.9 looks like it ignores textColor on ios.

<DateTimePicker
   mode="datetime"
   display="inline"
   textColor="red"
   onChange={...}
   value={...}
/>

Hi, there.
Can I ask how you changed the background color to grey and text color to white?

Its just default dark theme on ios/iphone

[alesdvorakcz]

@fix777 Its not crashing, just the color property is not working. I have ios 14.3

[thisisgit]

It says here that the textColor property only has effect only when display is "spinner".

But I'm also here while looking for possible solution to change that default system blue color to another color in iOS 14 datepicker.
Anyone knows solution to that?