rn-system-bar v3

Control Android & iOS system bars, brightness, volume, orientation and screen flags from React Native.

Supports React Native CLI · Expo Dev Client · TypeScript · New Architecture (TurboModules)

📦 Installation

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

iOS (after install):

cd ios && pod install

Android: Auto-linked. No manual steps required.

🏗 Architecture

React Native App
      │
      ▼
rn-system-bar  (TypeScript API + Platform guard)
      │
      ├─ Android ──► SystemBarModule.kt ──► Android SDK APIs
      │                                      ├ WindowInsetsController (API 30+)
      │                                      ├ AudioManager
      │                                      └ ActivityInfo
      │
      └─ iOS ──────► SystemBarModule.swift ──► UIKit / AVFoundation

📁 Folder Structure

rn-system-bar/
├ package.json
├ index.ts
├ rn-system-bar.podspec
│
├ src/
│  ├ SystemBar.ts          ← JS/TS API (Platform-guarded)
│  └ types.ts              ← All TypeScript types
│
├ specs/
│  └ NativeSystemBar.ts    ← TurboModule spec (New Architecture)
│
├ android/
│  ├ build.gradle
│  └ src/main/java/com/systembar/
│     ├ SystemBarModule.kt ← Full Android native module
│     └ SystemBarPackage.kt
│
└ ios/
   ├ SystemBarModule.swift  ← iOS native module
   └ SystemBarModule.m      ← ObjC bridge header

🚀 API Reference

Navigation Bar — Android only

All NavigationBar APIs are automatically guarded with Platform.OS === "android". Calling them on iOS prints a dev warning and is a no-op — no crash.

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

setNavigationBarColor("#1a1a2e");          // hex color
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 (iOS ignores bg color)
setStatusBarStyle("light");     // "light" | "dark"  — works on both platforms
setStatusBarVisibility(false);  // hide status bar

Brightness

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

setBrightness(0.8);                          // 0.0 – 1.0

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

Volume

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

setVolumeHUDVisible(false);                  // hide the system volume popup (Android)
setVolume(0.5, "music");                     // 0.0 – 1.0, stream: "music" | "ring" | "notification" | "alarm" | "system"

const vol = await getVolume("music");        // returns 0.0 – 1.0

iOS note: setVolume() is a no-op on iOS (Apple restriction). getVolume() works.

Screen

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

keepScreenOn(true);                          // prevent sleep
immersiveMode(true);                         // hide status + nav bar (Android only)

Orientation

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

setOrientation("portrait");          // lock portrait
setOrientation("landscape");         // lock landscape
setOrientation("landscape-left");    // specific side
setOrientation("landscape-right");
setOrientation("auto");              // unlock — sensor-driven

📱 Full Example

import React, { useEffect } from "react";
import { View, Button, Platform } from "react-native";
import * as SystemBar from "rn-system-bar";

export default function App() {

  useEffect(() => {
    // Works on both platforms
    SystemBar.setStatusBarStyle("light");
    SystemBar.setBrightness(0.9);
    SystemBar.keepScreenOn(true);

    // Android-only (auto-guarded — safe to call without Platform check)
    SystemBar.setNavigationBarColor("#000000");
    SystemBar.setNavigationBarButtonStyle("light");
    SystemBar.setNavigationBarBehavior("overlay-swipe");
  }, []);

  return (
    <View>
      <Button
        title="Immersive Mode"
        onPress={() => SystemBar.immersiveMode(true)}
      />
      <Button
        title="Landscape"
        onPress={() => SystemBar.setOrientation("landscape")}
      />
      <Button
        title="Get Brightness"
        onPress={async () => {
          const b = await SystemBar.getBrightness();
          console.log("Brightness:", b);
        }}
      />
    </View>
  );
}

🆕 New Architecture (TurboModules)

Add to your react-native.config.js:

module.exports = {
  dependencies: {
    "rn-system-bar": {
      platforms: {
        android: {
          packageImportPath: "import com.systembar.SystemBarPackage;",
        },
      },
    },
  },
};

The specs/NativeSystemBar.ts file is already configured for codegen via codegenConfig in package.json.

🔖 Type Reference

type NavigationBarBehavior = "overlay-swipe" | "inset-swipe" | "inset-touch";
type NavigationBarButtonStyle = "light" | "dark";
type NavigationBarStyle = "auto" | "inverted" | "light" | "dark";
type NavigationBarVisibility = "visible" | "hidden";
type StatusBarStyle = "light" | "dark";
type Orientation = "portrait" | "landscape" | "landscape-left" | "landscape-right" | "auto";
type VolumeStream = "music" | "ring" | "notification" | "alarm" | "system";

📋 Platform Support Matrix

| Feature | Android | iOS | |----------------------------|:-------:|:---:| | setNavigationBarColor | ✅ | ❌ | | setNavigationBarVisibility | ✅ | ❌ | | setNavigationBarButtonStyle| ✅ | ❌ | | setNavigationBarStyle | ✅ | ❌ | | setNavigationBarBehavior | ✅ | ❌ | | setStatusBarColor | ✅ | ❌ | | setStatusBarStyle | ✅ | ✅ | | setStatusBarVisibility | ✅ | ✅ | | setBrightness | ✅ | ✅ | | getBrightness | ✅ | ✅ | | setVolume | ✅ | ❌* | | getVolume | ✅ | ✅ | | setVolumeHUDVisible | ✅ | ❌ | | keepScreenOn | ✅ | ✅ | | immersiveMode | ✅ | ❌ | | setOrientation | ✅ | ✅ |

*iOS: setVolume is a no-op due to Apple restrictions.