Android TimePickerDialog: Impossible to style text color (no available attributes in plugin)

[Odyrac]

Hi, and thanks for the great work on the plugin.

While styling the Android TimePickerDialog through the Expo config plugin, I noticed that it is not possible to customize the text colors of the dialog (Android buttons). The DatePickerDialog exposes several attributes such as android:textColor, but the TimePickerDialog only supports the following properties:

• background
• headerBackground
• numbersBackgroundColor
• numbersSelectorColor
• numbersTextColor

Any other property such as textColor is rejected by the plugin because it validates the allowed attributes. This makes it impossible to style the dialog’s text color.

The documentation seems to show that there is no possibilities to customize it :
https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/android-styling.md

A few questions:

• Is there any supported way to override the text colors of the TimePickerDialog via the plugin?
• Is this restriction intentional, or just a missing feature?

Thanks in advance for any clarification.

[Odyrac]

Hello @vonovak, I saw that you wrote the documentation about Android style customization. Do you know whether I’m missing a parameter or if this is simply not possible for the time picker? Thanks a lot for your help!

[vonovak]

Hello,
I don't know. My best advice is to try it and open a PR if you find a way to do it.

Thanks!

[Odyrac]

I investigated the issue and here is what I found. The accentColor and textColor properties do not work on the timePicker. To customize the Cancel and Ok buttons, I had to use this script.

const { withAndroidStyles } = require('@expo/config-plugins')

function applyAccentColor(styles, color) {
    const appTheme = styles.resources.style.find(
        style => style.$.name === 'AppTheme'
    )

    if (!appTheme) {
        return styles
    }

    if (!Array.isArray(appTheme.item)) {
        appTheme.item = []
    }

    appTheme.item = appTheme.item.filter(
        item => item.$.name !== 'android:colorAccent'
    )

    appTheme.item.push({
        $: { name: 'android:colorAccent' },
        _: color
    })

    return styles
}

const withAndroidAccentColor = (config, { color }) => {
    return withAndroidStyles(config, config => {
        config.modResults = applyAccentColor(config.modResults, color)
        return config
    })
}

module.exports = withAndroidAccentColor

And add

      [
        "./plugins/withAndroidAccentColor.cjs",
        {
          "color": "#FF5757"
        }
      ],

in app.json.

However, this also led me to discover the android:numbersInnerTextColor property, which is currently not supported by the timePicker even though it would simply need to be added to the accepted attributes. This property corresponds to the yellow section in the following screenshot.

Could you just add

const TIME_PICKER_ALLOWED_ATTRIBUTES = {
  background: {
    attrName: 'android:background',
  },
  headerBackground: {
    attrName: 'android:headerBackground',
  },
  numbersBackgroundColor: {
    attrName: 'android:numbersBackgroundColor',
  },
  numbersSelectorColor: {
    attrName: 'android:numbersSelectorColor',
  },
  numbersTextColor: {
    attrName: 'android:numbersTextColor',
  },
  // theses lines
  numbersInnerTextColor: {
    attrName: 'android:numbersInnerTextColor',
  },
} as const;

in plugin/src/withDateTimePickerStyles.ts or would you like that i open a pr? Thanks @vonovak!