rn-system-bar

Control Android & iOS system bars, brightness, volume, orientation, network, battery, haptics, font scale and screen flags from React Native — with zero Expo dependency.

Installation

npm install rn-system-bar
# or
yarn add rn-system-bar

iOS — run pod install after installing:

cd ios && pod install

Platform coverage

| Feature | Android | iOS | | --------------------------------------------- | ------- | -------- | | Navigation bar color / visibility / style | ✅ | stub | | Status bar color / style / visibility | ✅ | ✅ | | Brightness get / set / listen | ✅ | ✅ | | Volume get / set / listen | ✅ | get only | | Keep screen on | ✅ | ✅ | | Immersive mode | ✅ | stub | | Secure screen | ✅ | stub | | Orientation | ✅ | ✅ | | Network info + listener | ✅ | ✅ | | Battery info + listener | ✅ | ✅ | | Haptic feedback | ✅ | ✅ | | System screencast (HDMI / Miracast / AirPlay) | ✅ | ✅ | | Font scale + listener | ✅ | ✅ |

API Reference

Navigation Bar (Android only)

import {
  setNavigationBarColor,
  setNavigationBarVisibility,
  setNavigationBarButtonStyle,
  setNavigationBarStyle,
  setNavigationBarBehavior,
} from "rn-system-bar";

setNavigationBarColor("#1a1a2e"); // solid hex
setNavigationBarColor("transparent"); // edge-to-edge
setNavigationBarColor("translucent"); // frosted glass

setNavigationBarVisibility("hidden"); // "visible" | "hidden"
setNavigationBarButtonStyle("light"); // "light" | "dark"
setNavigationBarStyle("dark"); // "auto" | "inverted" | "light" | "dark"
setNavigationBarBehavior("overlay-swipe"); // "overlay-swipe" | "inset-swipe" | "inset-touch"

Status Bar

import {
  setStatusBarColor,
  setStatusBarStyle,
  setStatusBarVisibility,
} from "rn-system-bar";

setStatusBarColor("#000000"); // Android only — hex | "transparent" | "translucent"
setStatusBarStyle("light"); // "light" | "dark"
setStatusBarVisibility(false); // hide status bar

Brightness

import {
  setBrightness,
  getBrightness,
  onBrightnessChange,
} from "rn-system-bar";

setBrightness(0.5); // 0.0–1.0
const level = await getBrightness(); // returns 0.0–1.0

const unsub = onBrightnessChange((brightness) => {
  console.log("Brightness:", brightness);
});
unsub(); // stop listening

Volume

import {
  setVolume,
  getVolume,
  setVolumeHUDVisible,
  onVolumeChange,
} from "rn-system-bar";

setVolume(0.8); // 0.0–1.0, defaults to "music" stream
setVolume(0.5, "ring"); // "music" | "ring" | "notification" | "alarm" | "system"
const vol = await getVolume("music");

setVolumeHUDVisible(false); // Android only — suppress system volume UI

const unsub = onVolumeChange((volume, stream) => {
  console.log(`${stream} volume: ${volume}`);
});
unsub();

Screen

import { keepScreenOn, immersiveMode, setSecureScreen } from "rn-system-bar";

keepScreenOn(true); // prevent display sleep
immersiveMode(true); // Android only — hide both bars
setSecureScreen(true); // Android only — block screenshots / screen recording

Orientation

import { setOrientation } from "rn-system-bar";

// "portrait" | "landscape" | "landscape-left" | "landscape-right" | "auto"
setOrientation("landscape");
setOrientation("auto"); // follow system auto-rotate

Network

import { getNetworkInfo, onNetworkChange } from "rn-system-bar";

const info = await getNetworkInfo();
// {
//   type: "wifi" | "cellular" | "none" | "unknown",
//   isConnected: boolean,
//   isAirplaneMode: boolean,   // Android only
//   ssid: string | null,       // Android only, requires location permission
//   cellularGeneration: string | null,  // Android only
// }

const unsub = onNetworkChange((info) => {
  console.log("Network:", info.type, info.isConnected);
});
unsub();

Battery

import { getBatteryInfo, onBatteryChange } from "rn-system-bar";

const info = await getBatteryInfo();
// {
//   level: number,       // 0–100, -1 if unknown
//   state: "charging" | "discharging" | "full" | "unknown",
//   isCharging: boolean,
//   isLow: boolean,      // true when level <= 20 and not charging
// }

const unsub = onBatteryChange((info) => {
  if (info.isLow) console.warn("Battery low:", info.level);
});
unsub();

Haptics

import { haptic } from "rn-system-bar";

haptic("light"); // subtle tap
haptic("medium"); // default
haptic("heavy"); // strong tap
haptic("success"); // notification — success
haptic("warning"); // notification — warning
haptic("error"); // notification — error
haptic("selection"); // selection tick

System Screencast (HDMI / Miracast / AirPlay)

Detects OS-level external displays — HDMI, Miracast on Android; AirPlay mirror on iOS.

import {
  getSystemScreencastInfo,
  onSystemScreencastChange,
} from "rn-system-bar";

const info = await getSystemScreencastInfo();
// {
//   isCasting: boolean,
//   displayName: string | null,
//   displays: Array<{ id: number, name: string, isValid: boolean }>,
// }

const unsub = onSystemScreencastChange((info) => {
  console.log("Casting:", info.isCasting, info.displayName);
});
unsub();

Font Scale

import { getFontScaleInfo, onFontScaleChange } from "rn-system-bar";

const info = await getFontScaleInfo();
// {
//   fontScale: number,   // 1.0 = default; larger = user has increased text size
//   density: number,     // screen pixel density
// }

const unsub = onFontScaleChange((info) => {
  console.log("Font scale changed:", info.fontScale);
});
unsub();

React Hooks

useSystemBar — declarative config

import { useSystemBar } from "rn-system-bar";

useSystemBar({
  navigationBarColor: "transparent",
  navigationBarButtonStyle: "light",
  statusBarStyle: "light",
  keepScreenOn: true,
  brightness: 0.8,
  orientation: "portrait",
});

useThemeSystemBar — theme-aware config

import { useThemeSystemBar } from "rn-system-bar";

const { isDark, mode, setMode } = useThemeSystemBar({
  dark: { navigationBarColor: "#000000", statusBarStyle: "light" },
  light: { navigationBarColor: "#ffffff", statusBarStyle: "dark" },
  base: { keepScreenOn: true },
});

useSystemScreencast

import { useSystemScreencast } from "rn-system-bar";

const { isCasting, displayName, displays } = useSystemScreencast();

useTheme

import { useTheme } from "rn-system-bar";

const { isDark, mode, setMode } = useTheme();
setMode("dark"); // "dark" | "light" | "system"

Permissions

Android

Add to AndroidManifest.xml if you need to write system brightness:

<uses-permission
  android:name="android.permission.WRITE_SETTINGS"
  tools:ignore="ProtectedPermissions" />

iOS

No additional permissions required. Note:

• setVolume is a no-op on iOS (AVAudioSession restriction).
• setSecureScreen / immersiveMode are no-ops on iOS.
• isAirplaneMode, ssid, and cellularGeneration in NetworkInfo are always false / null on iOS.

License

MIT