Alert Button Color on Android Different In Expo Go vs Standalone Built With EAS

Expo Application Services (EAS)
1

Using Managed workflow, eas-cli 0.48.2, Expo SDK 44.0.4

My Android Alert modal buttons (OK, Cancel, etc.) when I use Expo Go are blue. This is true whether I’m using “expo start” or “expo publish”. When I build the same project with EAS, either for the Play Store or preview distribution for a physical device, the buttons are black. I’ve tried both Android devices in my home. I don’t see any options for configuring the Android Alert button color in Expo or React Native, so I’m not really sure what I could do about this or how I could be causing it with my code. I checked the GitHub Issues/Discussions and here, and don’t see a similar problem. It’s not the end of the world if it’s black, but blue is nice to make them look like pressable entities.

I should add that this is my first time building with EAS. I used to build with “expo build”, and the Alert buttons were blue in that version on my device.

Button colors on iOS are how they should be, using the AlertButtonStyle options.

Anybody have any advice/ideas/links/info about this?

2

Could you paste some code here?

Also, there are some things that work a bit differently in EAS vs. expo build. I don’t know if any of this applies to you situation, but it’s worth a look if you haven’t seen it yet:

3

Thanks for your reply, Wodin. I had seen that page before. I know that things might be a bit different in “expo build” and EAS, but it seems weird that Expo Go has the expected blue color, but my EAS builds do not. I’ll post some stuff here.

If you think this could be an “issue”, maybe I should post it to GitHub.

The code below is just about the simplest Alert function possible, but even it has black OK button on EAS but blue in Expo Go.

const simpleTextAlert = () => Alert.alert('Any text can go here')

package.json dependencies

"@expo-google-fonts/montserrat": "^0.1.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-masked-view/masked-view": "0.2.6",
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/material-bottom-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/stack": "^6.1.1",
"expo": "^44.0.4",
"expo-app-loading": "~1.3.0",
"expo-application": "~4.0.1",
"expo-av": "~10.2.0",
"expo-device": "~4.1.0",
"expo-font": "~10.0.4",
"expo-location": "~14.0.1",
"expo-speech": "~10.1.0",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"expo-system-ui": "~1.1.0",
"expo-updates": "~0.11.6",
"firebase": "^9.1.3",
"react": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0",
"react-native-maps": "0.29.4",
"react-native-paper": "^4.11.2",
"react-native-reanimated": "^2.2.3",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1"

app.config.js

const IS_PREVIEW = process.env.APP_VARIANT === "preview";

export default {
  owner: "*****",
  name: IS_PREVIEW ? "******" : "*****",
  slug: "*****",
  description: "*****",
  privacy: "unlisted",
  platforms: [
    "ios",
    "android"
  ],
  version: "*****",
  orientation: "default",
  backgroundColor: "#ffffff",
  primaryColor: "*****",
  icon: "./assets/icon.png",
  splash: {
    image: "./assets/splash.png",
    resizeMode: "contain",
    backgroundColor: "#000000"
  },
  updates: {
    fallbackToCacheTimeout: 5000
  },
  assetBundlePatterns: [
    "**/*"
  ],
  ios: {
    bundleIdentifier: IS_PREVIEW ? "*****" : "*****",
    buildNumber: "6",
    supportsTablet: true,
    infoPlist: {
      "NSLocationWhenInUseUsageDescription": "*****"
    }
  },
  androidStatusBar: {
    barStyle: "light-content",
    backgroundColor: "#000000",
    translucent: false
  },
  android: {
    package: IS_PREVIEW ? "*****" : "*****",
    versionCode: 6,
    adaptiveIcon: {
      foregroundImage: "./assets/adaptive-icon.png",
      backgroundColor: "#ffffff"
    },
    permissions: [
      "ACCESS_FINE_LOCATION"
    ],
    config: {
      googleMaps: {
        apiKey: "*****"
      }
    }
  }
}

eas.json

{
  "cli": {
    "version": ">= 0.48.2"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "releaseChannel": "staging",
      "distribution": "internal",
      "env": {
        "APP_VARIANT": "preview"
      }
    },
    "production": {
      "releaseChannel": "prod-v1"
    }
  },
  "submit": {
    "production": {
      "android": {
        "serviceAccountKeyPath": "*****"
      },
      "ios": {
        "ascAppId": "*****"
      }
    }
  }
}
4

Thanks for all the config. Please provide more code. I don’t see anything in what you’ve provided that I would expect to produce a blue button.

EDIT: Sorry, I see what you mean. The text/title of the “OK” button in the alert is a blue colour in Expo Go, but after building with EAS it’s black.

5

Yes, that’s correct. So you’ve seen it for yourself now? I figured it must be pretty rare if there was no other discussion about this until I posted.

There aren’t configuration options for the Alert buttons on Android. iOS lets us use an enum, but it’s working as expected on iOS so nothing to go on there.

I’m glad that I can now spell “colour” the correct way when discussing with you!

6

Yes, I created a new Expo SDK 44 app that just shows an alert. If I run it in Expo Go the Alert’s OK button shows in blue. If I build with eas build -p android --profile preview --local the OK button shows in black.

I’ve found some possible ways to change the colour of the button, but I don’t know why it’s different in the EAS build in the first place. See, for example, the following answer, which would require a config plugin:

If you want to try this, have a look here:

But I think it’s worth creating an issue on GitHub.

7

Thanks, I created a GitHub issue:

https://github.com/expo/expo/issues/16898