Android button text color irregular in Expo managed workflow app

[simplex-linz]

Bug report

Summary

I’m using the react native community Date Time Picker in my managed workflow Expo app(Expo SDK Version 43.0.3) I recently found out that on older Android phones, the text color of the module would render as white, thus not visible on white background.

This only happens when using display “spinner” and not the “calendar” (default) one. In spinner display, I have a green text color on recent Android and white on old ones. In calendar, I have a nice blue color.

I saw a lot of issues on their github to fix this, and all solutions include managing the style file in the android folder.

Another solution I tried was adding a “primaryColor” field in Expo config file, but this changed nothing.

Does someone know how to fix this issue, changing color or preventing it to render as white in a managed expo app?

Reproducible sample code

sample code for snack.expo

Steps to reproduce

1. …
2. …

Describe what you expected to happen:

1. …
2. …

Environment info

npx react-native info output:

System:
    OS: macOS 11.0.1
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 63.14 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 17.0.1 - /usr/local/opt/openjdk/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.64.3 => 0.64.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

datetimepicker version: 3.5.2 (5.0.1 have same problem)

Android version: API29、30 Expo SDK version: 43.0.3

[huskerhelter]

Hi, I got the same problem too, the "ok" and "cancel" button turns white and no longer visible. Hope this can be fixed ASAP

[kehobert]

+1. This needs fix

[kehobert]

the Ok button just disappear like that using Expo version 43 datetimepicker version 4.0.1 (Already tried to downgrade to 3.5.2 and upgrade to 5.0.0, still doesn't work)

[paulsizer]

Has anyone found a fix for this?

[marlonbosse]

I already tried overwriting SpinnerDatePickerStyle but no luck so far. If someone find a fix, please share!

[marlonbosse]

I finally found a solution:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@drawable/theme_button_level2_selector</item>
        <item name="android:textAppearance">?attr/theme_text_Emphasized2_OnFill</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/theme_onBrandLevel2Fill</item>
    </style>
    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/theme_layoutDisabled</item>
    </style>

Keep in mind I'm using the spinner variant, you can replace spinner with calendar and it works too.

Basically you overwrite the SpinnerDatePickerDialog style that is being used inside of the lib.

@paulsizer @kehobert @simplex-linz

[kelvinndmo]

Am here with a fix for this, not really a fix but how you can go around it.

Use expo dev client by doing the following:

• install expo-dev-client.
• build you app with eas.
• Go to expo.dev and follow the instructions on how you can install it on your device.
• After this everything will be ok,

Let me know if this helps, it worked for me

[simplex-linz]

I finally found a solution:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@drawable/theme_button_level2_selector</item>
        <item name="android:textAppearance">?attr/theme_text_Emphasized2_OnFill</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/theme_onBrandLevel2Fill</item>
    </style>
    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/theme_layoutDisabled</item>
    </style>

Keep in mind I'm using the spinner variant, you can replace spinner with calendar and it works too.

Basically you overwrite the SpinnerDatePickerDialog style that is being used inside of the lib.

@paulsizer @kehobert @simplex-linz

@manojmalik20 thank you solution share I think that just work for Expo Bare workflow....

[gwalshington]

@simplex-linz @marlonbosse What file are you putting this in?

This is only happening to me in production after I build with Expo -> the app is a bare workflow that I run locally with yarn run android, but I still publish the apk with expo build:android.

When I run the app in a simulator, or on a device with yarn, it is fine and the text is black. It's only after I build the apk using expo that the Ok and Cancel button text are white.

UPDATE I've figured out the issue is only happening when the app is downloaded on the Android 'Work' profile. If the app is in the 'Personal' section of the phone, the buttons are fine.

Here is a picture from the exact same phone, where the app is downloaded both on the Personal and Work sections.

[ngima]

I had similar problem on version v4.0.0 (Managed Workflow) Android 11 while using DateTimePicker mode 'time', the time picker dialog's button are all white resulting invisibility.

And following step solved the issue for me

1. I upgraded @react-native-community/datetimepicker to v5.1.0
2. Run expo start -c

[webdevmario]

I have this issue as well for the Managed flow but on Expo SDK 45. The Expo compatible version of this package is 6.1.2. I was previously running 4.0.0 on SDK 44 and this was working appropriately.

I am only having this issue when using the spinner display setting.

The buttons are definitely there, you can tap on them. You just can't see them.

I attempted to manipulate app.json settings for Android but it did not address the issue. I also tried expo start -c and that did not resolve it.

Please see attached screenshot for how the buttons display when tapping where the button should display and continuing to hold. The buttons are there.

[cheejiayuan512]

Still happening with expo 45, anyone has any suggestions?

[e4basil]

I finally found a solution:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@drawable/theme_button_level2_selector</item>
        <item name="android:textAppearance">?attr/theme_text_Emphasized2_OnFill</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/theme_onBrandLevel2Fill</item>
    </style>
    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/theme_layoutDisabled</item>
    </style>

Keep in mind I'm using the spinner variant, you can replace spinner with calendar and it works too.

Basically you overwrite the SpinnerDatePickerDialog style that is being used inside of the lib.

@paulsizer @kehobert @simplex-linz

These theme edit not working in expo manged work flow any workarounds ?

[cheejiayuan512]

maybe

I finally found a solution:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@drawable/theme_button_level2_selector</item>
        <item name="android:textAppearance">?attr/theme_text_Emphasized2_OnFill</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/theme_onBrandLevel2Fill</item>
    </style>
    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/theme_layoutDisabled</item>
    </style>

Keep in mind I'm using the spinner variant, you can replace spinner with calendar and it works too. Basically you overwrite the SpinnerDatePickerDialog style that is being used inside of the lib. @paulsizer @kehobert @simplex-linz

These theme edit not working in expo manged work flow any workarounds ?

i think someone can try with expo's config-plugins, im not very familiar with its API but it seems promising. i tried this but its not working. my android-datepicker-color-config-plugin.js file

/** @type {import('@expo/config-plugins')} */
const {
    AndroidConfig,
    withAndroidStyles,
} = require('@expo/config-plugins');

const { assignStylesValue, getAppThemeLightNoActionBarGroup, setStylesItem } = AndroidConfig.Styles;

const DIALOG_PICKER_THEME_NAME = 'CustomDatePicker';
const TIME_PICKER_THEME_NAME = 'DialogTimePicker.Theme';

const ACCENT_COLOR = '#000000';

/** @type {import('@expo/config-plugins').ConfigPlugin} */
const withTheme = (config) => withAndroidStyles(config, (config) => {
    const dialogDateParent = { name: DIALOG_PICKER_THEME_NAME, parent: 'android:Theme.Material.Light.Dialog' };
    const dialogTimeParent = { name: "CustomDatePicker", parent: 'android:Theme.Material.Light.Dialog' };

    config.modResults = setStylesItem({
        parent: 'android:Widget.Material.DatePicker',
        name:'CustomDatePicker',
        xml: config.modResults,
        item: {
            $: {
                name: 'android:datePickerMode',
            },
            _: 'spinner',
        },
    });

    config.modResults = setStylesItem({
        name:"ButtonBarStyle",
        xml: config.modResults,
        item: {
            $: {
                name: 'android:textColorPrimary',
            },
            _: '@drawable/theme_button_level2_selector',
        },
    });
    config.modResults = setStylesItem({
        name:"ButtonBarStyle",
        xml: config.modResults,
        item: {
            $: {
                name: 'android:textAppearance',
            },
            _: '?attr/theme_text_Emphasized2_OnFill',
        },
    });
    config.modResults = setStylesItem({
        name:"ButtonBarStyle.Positive",
        xml: config.modResults,
        item: {
            $: {
                name: 'android:textColor',
            },
            _: '@color/theme_onBrandLevel2Fill',
        },
    });
    config.modResults = setStylesItem({
        name:"ButtonBarStyle.Negative",
        xml: config.modResults,
        item: {
            $: {
                name: 'android:textColor',
            },
            _: '@color/theme_layoutDisabled',
        },
    });
    config.modResults = assignStylesValue(config.modResults, {
        add: true,
        parent: 'android:Theme.Material.Light.Dialog',
        name: 'android:datePickerStyle',
        value: `@style/${DIALOG_PICKER_THEME_NAME}`,
    });
    config.modResults = assignStylesValue(config.modResults, {
        add: true,
        parent: 'android:Theme.Material.Light.Dialog',
        name: 'android:buttonBarPositiveButtonStyle',
        value: `@style/ButtonBarStyle.Positive`,
    });
    config.modResults = assignStylesValue(config.modResults, {
        add: true,
        parent: 'android:Theme.Material.Light.Dialog',
        name: 'android:buttonBarNegativeButtonStyle',
        value: `@style/ButtonBarStyle.Negative`,
    });


    config.modResults = assignStylesValue(config.modResults, {
        add: true,
        parent: getAppThemeLightNoActionBarGroup(),
        name: 'android:timePickerDialogTheme',
        value: `@style/${TIME_PICKER_THEME_NAME}`,
    });

    return config;
});

module.exports = withTheme;

my app.json

{
  "expo": {
    ...,
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ],
      [
        "expo-media-library",
        {
        "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
        "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
        "isAccessMediaLocationEnabled": "true"
        }
      ],
      ["./android-datepicker-color-config-plugin.js"]
    ]
  }
}

[search654321]

Same issue here

[bdhcode]

Does anyone found solution for the date picker buttons color?

[gpawlik]

@bdhcode @search654321 @cheejiayuan512 Have you managed to find some workaround for this issue?

[bdhcode]

No actually, the picker button appear normally in some phone and do not appear on some

[gomo]

I have tried the following versions and still have the spinner's button problem.

expo: 44.0.5 @react-native-community/datetimepicker: 4.0.0, 5.1.0, 6.2.0

The calendar's buttons display correctly, but I can't use it, because I want to use it to enter the date of birth. It is hard to move to older years.

[eduramofo]

Same issue here

[eduramofo]

I finally found a solution:

    <style name="SpinnerDatePickerDialog" parent="android:Theme.Material.Light.Dialog">
        <item name="android:datePickerStyle">@style/CustomDatePicker</item>
        <item name="android:buttonBarPositiveButtonStyle">@style/ButtonBarStyle.Positive</item>
        <item name="android:buttonBarNegativeButtonStyle">@style/ButtonBarStyle.Negative</item>
    </style>

    <style name="CustomDatePicker" parent="android:Widget.Material.DatePicker">
        <item name="android:datePickerMode">spinner</item>
    </style>

    <style name="ButtonBarStyle">
        <item name="android:background">@drawable/theme_button_level2_selector</item>
        <item name="android:textAppearance">?attr/theme_text_Emphasized2_OnFill</item>
    </style>

    <style name="ButtonBarStyle.Positive">
        <item name="android:textColor">@color/theme_onBrandLevel2Fill</item>
    </style>
    <style name="ButtonBarStyle.Negative">
        <item name="android:textColor">@color/theme_layoutDisabled</item>
    </style>

Keep in mind I'm using the spinner variant, you can replace spinner with calendar and it works too.

Basically you overwrite the SpinnerDatePickerDialog style that is being used inside of the lib.

@paulsizer @kehobert @simplex-linz

Where do i put this file?

[marlonbosse]

You need to put it inside res -> themes.xml file (except if you already use a different file to define Android styles).

[artsnr1]

Same issue after update. Wasn't before :@

[artsnr1]

The issue appeared in Expo Go but it vanished when I generated a build (android APK). I am using latest expo sdk 46

[jte0711]

Same issue after update. Wasn't before :@

I just started using this package and running to the same issue. What version did you use before?

[kvntzn]

for the spinner, the button shows when the device is only in dark mode

[vonovak]

Hello everyone, maintainer here 👋 this issue has apparently attracted a lot of interest, including comments with attempts for a solution. (although none have resulted in a pull request that would fix the issue once for all). I'll be looking into a fix next week, sorry for the wait 👍 .

[gwalshington]

@vonovak I figured out my issue was that on Android there are different profiles (like Personal and Work), and the issue was those profiles change the colors of the date picker for some reason, so the buttons only disappeared on the green profile. Someone on SO helped me come to this conclusion

[vonovak]

:tada: This issue has been resolved in version 6.5.1 :tada:

If this package helps you, consider sponsoring us! :rocket:

[vonovak]

reopening since the PR #673 only covers the original reported problem: button text invisible with spinner mode. In other modes, this is not fixed yet and I recommend that people use the display default. I'll circle back to this at some point soon once more funds from sponsors are available. Thank you 🙂