Status bar color is customized appropriately

A dark app with barStyle="dark-content" renders dark icons on a dark background — time, battery, and signal become invisible. On Android, omitting backgroundColor means the status bar inherits theme colors that may not match the navigation, producing a visible seam between system and app UI. Users perceive this as a rendering bug and submit screenshots to support, inflating ticket volume for a single-line fix.

Configure StatusBar once at the root of the app, matching barStyle to the background luminance:

import { StatusBar } from 'react-native';
export default function App() {
  return <><StatusBar barStyle="dark-content" backgroundColor="#ffffff" /><Navigation /></>;
}

Use barStyle="light-content" for dark themes and barStyle="dark-content" for light themes; override per-screen only when a hero banner demands inverted contrast.

• ID: mobile-ux-patterns.layout-safe-areas.status-bar-color

• Severity: medium

• What to look for: Count all screens and check how many have StatusBar configuration. Quote the actual backgroundColor and barStyle values. Verify the configuration is applied consistently across at least 100% of screens or set globally at root.

• Pass criteria: StatusBar is configured with explicit backgroundColor and barStyle that match the app theme, applied to at least 1 global location (root layout) or consistently across all screens. Provides good contrast with system icons (dark text on light background, light text on dark).

• Fail criteria: StatusBar is not configured at all, or color creates poor contrast with icons making them hard to see, or configuration is only on some screens leaving others with default styling.

• Skip (N/A) when: The app uses only the system default status bar styling and has no custom theme colors that would conflict with default behavior.

• Detail on fail: Quote the actual configuration found (or note its absence). "StatusBar is not configured — default color may not match app theme, and icon visibility varies by device." or "StatusBar uses light color with light text icons, making them invisible."

• Remediation: Use StatusBar component to set appropriate colors:

  import { StatusBar } from 'react-native';
  
  export default function App() {
    return (
      <>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <Navigation />
      </>
    );
  }
  

  Use barStyle="dark-content" for light backgrounds (dark icons) and barStyle="light-content" for dark backgrounds (light icons).