Navigation Bar color not changing in EAS build standalone app?

Expo Application Services (EAS)
1

Navigation color is not changing in my build app.

I have integrated expo-updates in my app and it works perfectly fine. All the changes are getting updated but not the NavigationBar color. Also, the navigation bar color gets changed in the development mode in Expo Go App, but after updating the app by publishing it, no changes are seen there…

Suppose my Home Screen has text component say like this

<Text>This is a text before update</Text>

and my app.json looks like this

{

  "expo": {

    "name": "example",

    "slug": "example",

    "version": "1.2.0",

    "orientation": "portrait",

    "icon": "./assets/icon.png",

    "splash": {

      "image": "./assets/splash.png",

      "resizeMode": "cover",

      "backgroundColor": "#2e2a5a"

    },

    "updates": {

      "fallbackToCacheTimeout": 0

    },

    "assetBundlePatterns": ["**/*"],

    "ios": {

      "bundleIdentifier": "com.example.example",

      "buildNumber": "1.0.0",

      "supportsTablet": true

    },

    "android": {

      "package": "com.example.example",

      "versionCode": 1,

      "adaptiveIcon": {

        "foregroundImage": "./assets/adaptive-icon.png",

        "backgroundColor": "#2e2a5a"

      }

    },

    "androidStatusBar": {

      "barStyle": "light-content",

      "backgroundColor": "#2e2a5a"

    },

    "web": {

      "favicon": "./assets/favicon.png"

    }

  }

}

In the expo go app I see the Text perfectly fine

Now when I change the Text component and app.json as follows

Changed Text component <Text>This is a changed updated Text</Text>

My app.json to this

{

  "expo": {

    "name": "example",

    "slug": "example",

    "version": "1.2.0",

    "orientation": "portrait",

    "icon": "./assets/icon.png",

    "splash": {

      "image": "./assets/splash.png",

      "resizeMode": "cover",

      "backgroundColor": "#2e2a5a"

    },

    "updates": {

      "fallbackToCacheTimeout": 0

    },

    "assetBundlePatterns": ["**/*"],

    "ios": {

      "bundleIdentifier": "com.example.example",

      "buildNumber": "1.0.0",

      "supportsTablet": true

    },

    "android": {

      "package": "com.example.example",

      "versionCode": 1,

      "adaptiveIcon": {

        "foregroundImage": "./assets/adaptive-icon.png",

        "backgroundColor": "#2e2a5a"

      }

    },

    "androidStatusBar": {

      "barStyle": "light-content",

      "backgroundColor": "#2e2a5a"

    },

    "androidNavigationBar": {

      "barStyle": "light-content",

      "backgroundColor": "#2e2a5a"

    },

    "web": {

      "favicon": "./assets/favicon.png"

    }

  }

}

Now I see the Text component and Navigation Bar color getting changed in Expo Go App but after I run expo-publish, I only see the Text component getting changed and not the Navigation Bar color in the standalone app. Is it not reading the app.json file or should I rebuild the app.

2

this field can’t be updated over-the-air, it’s set at build time

3

@notbrent I think there’s some problem with EAS Build

I am sharing two screenshots

I re-built my app using EAS Build by running eas build -p android --profile someName I get the apk and on opening i get this result

EAS BUILD
EAS BUILD1076×544 41.6 KB

my eas config is as follows

{
  "builds": {
    "android": {
      "release": {
        "workflow": "managed"
      },
      "someName": {
        "workflow": "managed",
        "buildType": "apk"
      }
    }
  }
}

So I tried to build with normal expo:build
so I ran expo build:android -t apk I got the APK and the result is shown below

EXPO BUILD ANDROID APK
EXPO BUILD ANDROID APK1080×568 44.2 KB

As you can see navigationBar color gets applied in the expo build but not in eas build
for both builds I’ve used this app.json

{

  "expo": {

    "name": "exampleApp",

    "slug": "example",

    "version": "2.2.0",

    "orientation": "portrait",

    "icon": "./assets/icon.png",

    "splash": {

      "image": "./assets/splash.png",

      "resizeMode": "cover",

      "backgroundColor": "#2e2a5a"

    },

    "updates": {

      "fallbackToCacheTimeout": 0

    },

    "assetBundlePatterns": ["**/*"],

    "ios": {

      "bundleIdentifier": "com.example.example",

      "buildNumber": "1.0.0",

      "supportsTablet": true

    },

    "android": {

      "package": "com.example.example",

      "versionCode": 1,

      "adaptiveIcon": {

        "foregroundImage": "./assets/adaptive-icon.png",

        "backgroundColor": "#2e2a5a"

      }

    },

    "androidStatusBar": {

      "barStyle": "light-content",

      "backgroundColor": "#2e2a5a"

    },

    "androidNavigationBar": {

      "barStyle": "light-content",

      "backgroundColor": "#2e2a5a"

    },

    "web": {

      "favicon": "./assets/favicon.png"

    }

  }

}

Note : StatusBar configs are working properly…I’ve checked my expo-updates are working as expected. Its just that in the apk using EAS build, navigation color is not getting applied.

4

it sounds like we currently don’t account for this in our expo config scripts. thanks for raising this! can you post an issue with a minimal reproducible example to Issues · expo/expo · GitHub? it’d be very helpful!

5

Sure, I’ll do that right away. Also @notbrent Please check your Twitter DM