react-native-datetimepicker Change Text Color

Question

Issue

I need to change the color of the text displayed in the picker for react-native-datetimepicker as I have a very dark background and the text is extremely hard to see on it.

What I've Tried

I've tried passing in color: 'white' as a style to the DateTimePicker component and I've also tried passing in the itemStyle prop to the DateTimePicker component as that is how you change text styles on react-native's Picker component. Neither have worked.

Does anyone know how to change the text style in react-native-datetimepicker?

Example

Answer 1

If you are using expo, you must go to node_modules/react-native-date-picker/style.js folder and use this:

dateText: {
    color: '#fff'
},

Answer 2

You have to pass in hex format. If you pass in #FFFFFF , the text color should change but there's an issue though. It only changes the color after a user interaction. The current date is always set to black. I don't think it can be modified though.https://developer.apple.com/documentation/uikit/uidatepicker , in this article it states that the UIDatePicker is not customizable.

Answer 3

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:datePickerDialogTheme">@style/Dialog.Theme</item>
    <item name="android:timePickerDialogTheme">@style/Dialog.Theme</item>
</style>

<style name="Dialog.Theme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF0000</item>
    <item name="android:textColorPrimary">#0000FF</item>
</style>

click

Answer 4

You have the property textColor available:

<DateTimePicker 
...
textColor="white" />