Navigation Bar color not changing in EAS build standalone app?

The navigation Bar color is not changing even though I’ve mentioned it in the app.json file.

This issue has been discussed here @brentvatne asked to post an issue regarding this.

My app.json file

{
  "expo": {
    "name": "NavigationBar",
    "slug": "NavigationBar",
    "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.NavigationBar.NavigationBar",
      "buildNumber": "1.0.0",
      "supportsTablet": true
    },
    "android": {
      "package": "com.NavigationBar.NavigationBar",
      "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"
    }
  }
}

Expo Go app develeopment Screenshot

EAS Build apk screenshot result (eas build -p android --profile NavigationBar)

Expo Build apk screenshot result (expo build:android -t apk)

I’ve added EAS build apk and Expo Build apk links below.

EAS build apk link - https://drive.google.com/file/d/1xNsZPN191h8AgCPImBocBFw-Stk3-CQH/view?usp=sharing

Expo Build apk link - https://drive.google.com/file/d/1bDUOS6J32wTdAoXa_4jy9we8LfzJD69E/view?usp=sharing

Minimal Reproducible Snack Example

App.js

import * as React from "react";
import { Text, View, StyleSheet, Button } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="Random Button" />
      <View style={styles.BottomBar}>
        <Text>Navigation Bar color not changing in EAS Build</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  BottomBar: {
    position: "absolute",
    bottom: 0,
    height: 40,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
});

[kartikeyvaish]

This is fixed now. Thanks, @brentvatne @EvanBacon.

[bzozoo]

Same problem with statusbar too