Datetimepicker: PLEASE WHEN CAN WE BE ABLE TO USE COLORS AS PROPS

Created on 4 Oct 2019  Â·  10Comments  Â·  Source: react-native-datetimepicker/datetimepicker

Feature Request

There is a need to use colors based on the theme color of the app we are building. I have worked on three apps and the idea of using this package has been rejected three times because of no flexible when it comes to styling

Why it is needed

Possible implementation

Code sample

All 10 comments

Hi, sorry my english is bad but i want to share how i can change theme color of the picker.
in android/app/src/main/res/values/styles.xml i put:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:datePickerDialogTheme">@style/DialogDatePicker.Theme</item>
    </style>

<style name="DialogDatePicker.Theme" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">@color/ocean_green</item>
        <item name="android:textColor">@color/dove_gray</item>
        <item name="android:textColorPrimary">@color/dove_gray</item>
    </style>
  • colorAccent is the color of header of picker and selector
  • textColor is the color of numbers and text buttons
  • extColorPrimary is the color of text of month.

I hope it works for you, regards

@guilleSequeiraWolox Thanks for the excellent example for how to style it statically. However - being able to set it dynamically is a must if your app supports any kinds of themes (which is a common case in these days of Dark Mode).

I have an app that's using the datepicker on iOS on top of a white background.

On iOS 13.2, the color of the datepicker text is now white(!), thus the datepicker is invisible..

Please allow us to set the text colours of the date- and timepicker on iOS.

Edit: Actually I see now that my problem appears when dark mode is enabled. Dark mode on = white text, dark mode off = black text. That's understandable, but makes it impossible to use this module unless you now default to a background colour that's gray.

+1 on this issue. This feature is required.

+1 very much required

On Thu, Nov 21, 2019, 12:19 PM Samir Madhavan notifications@github.com
wrote:

+1 on this issue. This feature is required.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/react-native-datetimepicker/issues/36?email_source=notifications&email_token=AHDHZJ645UYH27IWB7UXTGLQUZVE7A5CNFSM4I5OJIP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEZ4HQY#issuecomment-557040579,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHDHZJ4OGDDT2CQLLCFOEMLQUZVE7ANCNFSM4I5OJIPQ
.

+1 great module but useless to us if we cannot style the date picker - seems like a very obvious need?

+1

Yes please

For now, you can manually change it by editing android/app/src/main/res/values/styles.xml.

More details here - https://github.com/react-native-community/react-native-datetimepicker/issues/20#issuecomment-545527682

Closing in favor of #20. If you need this, please implement it and contribute a PR, I'll review it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

StarryFire picture StarryFire  Â·  3Comments

gabrieljablonski picture gabrieljablonski  Â·  5Comments

inferusvv picture inferusvv  Â·  4Comments

sorinsi picture sorinsi  Â·  5Comments

DylanVerstraete picture DylanVerstraete  Â·  4Comments