Styling of the material datepicker on android

[pkfms]

Question

Has anyone been able to change the styling of the datepicker when using the new material version?
The config plugin deosn't work anymore, the material version uses different style properties.
I have been playing around with creating my own config plugin but I haven't found any style properties which have any effect.

[dsoffiantini]

I have tried and found the issue in the code is in these .setTheme calls here, since it is specifically applying the base themes from material components

datetimepicker/android/src/main/java/com/reactcommunity/rndatetimepicker/RNMaterialDatePicker.kt

Lines 101 to 105 in 4865e33

	if (isFullscreen) {
	builder.setTheme(com.google.android.material.R.style.ThemeOverlay_Material3_MaterialCalendar_Fullscreen)
	} else {
	builder.setTheme(com.google.android.material.R.style.ThemeOverlay_Material3_MaterialCalendar)
	}

By commenting out these lines you can then apply a theme by adding the following to styles.xml

 <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="materialCalendarTheme">@style/ThemeOverlay.App.DatePicker</item>
    </style>

<style name="ThemeOverlay.App.DatePicker" parent="ThemeOverlay.Material3.MaterialCalendar">
        <item name="backgroundColor">@color/white</item>
        <item name="colorAccent">@color/red</item>
        ...
    </style>

Here is all the attributes you can apply for reference

I'm still trying to figure out a way in kotlin to grab the theme overlay if it exists, and if not apply the default material theme, but no luck so far. I'll submit a PR if I manage to figure it out, but the best solution may be to expose an attribute in the package and then look for that attribute in the code.

[sidorchukandrew]

I'm able to change the colors of the date picker by specifying them in styles.xml. You are right, though, that the Expo config plugin was not updated to support theming the new colors. There needs to be a holistic approach to theming Android apps.

In my styles.xml when I set something like

 <item name="colorPrimary">#D81B60</item>

I see it reflected in the date picker (the primary color is now pink instead of green):

[sidorchukandrew]

@dsoffiantini

Yes, this was an issue I struggled with when I was adding these new components. I opted with letting the users of the library apply color/theme styles across the application as a whole. For example:

 <item name="colorPrimary">#D81B60</item>

will update the calendar with the new color, even though, like you pointed out, we're setting the theme of the date picker to com.google.android.material.R.style.ThemeOverlay_Material3_MaterialCalendar_Fullscreen. That theme still pulls its color values from the attributes you define in your styles.xml.

The only downside (and I wouldn't even consider it a downside), is that when you change the colorPrimary, it will affect other system components in the app, not just the calendar. It will change the color of the switches and alerts.

[sidorchukandrew]

If you add <item name="colorSurfaceContainerHigh">#000000</item> to your styles.xml, you'll see the background of the date picker change to black.

[dsoffiantini]

@sidorchukandrew You are correct that there are some system wide values you can set to change some of the styling of the calendar, but it will affect all material components of the app. The documentation I linked shows what the default values are for some of the styling properties and what you can tweak to change it. The PR I have created and linked in this issue would fix this and allow you to set an overlay style for the calendar.

The time picker luckily does not override the theme in the code, and can be styled independently from the other components.