Status bar content color visible against background

Status bar icons and clock rendered at insufficient contrast against the app background fail WCAG 2.2 SC 1.4.3 (Contrast Minimum) and SC 1.4.11 (Non-text Contrast), both of which apply to UI component contrast. In practice, light icons on a white header or dark icons on a dark screen become invisible — users lose time reference, network status, and battery indication. Apps that support both light and dark themes but hardcode a single barStyle will fail on exactly one theme for every user, creating a systemic failure that is easy to reproduce and difficult to miss in App Store review. The fix takes one line but its absence signals that light/dark support was never tested end-to-end.

Drive barStyle dynamically from your active theme rather than hardcoding it. In app/_layout.tsx or your root App.tsx, read the current color scheme and set the bar style accordingly.

import { StatusBar } from 'react-native';
import { useColorScheme } from 'react-native';

export default function RootLayout() {
  const scheme = useColorScheme();
  const isDark = scheme === 'dark';

  return (
    <>
      <StatusBar
        barStyle={isDark ? 'light-content' : 'dark-content'}
        backgroundColor={isDark ? '#121212' : '#ffffff'}
      />
      <Slot />
    </>
  );
}

Test on a physical device in both system themes — simulators do not always reproduce contrast failures accurately. If your app overrides the system theme, ensure the barStyle toggles in sync with your in-app theme state, not the OS setting.