How to change color of TimePickerAndroid in React Native?

Question

Is it possible to change default color of the TimePickerAndroid component ?

score 15 · Answer 1 · answered Jan 13 '17 at 20:06

You would have to change it from the styles.xml file of android. Here's what you do:

1) Open up styles.xml: "android/app/src/main/res/values/styles.xml" 2) you'll need to add a few lines:

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <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>

In styles.xml you should already have:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

If you do just add the remaining lines. If not go ahead and add them.

4) Lastly, just recompile the app. "react-native run-android". You should see the color change right away.

This is the correct answer. It should be marked as such. – Hunter Dolan Apr 14 '17 at 15:22 — Hunter Dolan, Apr 14 '17 at 15:22
This worked for me -- give this answer the checkmark. – Nunchucks Jun 20 '18 at 21:58 — Nunchucks, Jun 20 '18 at 21:58
In case of date picker dialogue @style/Dialog.Theme – sanister Nov 22 '21 at 16:41 — sanister, Nov 22 '21 at 16:41

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

Using React-native, unfortunately no.

However, by changing some java files in RN and using this solution from SO you might be able to do it. If you succeed doing this, I suggest you create a Pull Request on RN's repository as it might be very useful for other users. You could also develop it as a module and open source via NPM.

edited May 23 '17 at 10:31

Community

1
1

answered Sep 20 '16 at 17:29

G. Hamaide

7,078
2
36
57

How to change color of TimePickerAndroid in React Native?

2 Answers2