rn-system-bar 3.0.3 → 3.1.1

package/lib/src/useSystemBar.d.ts

@@ -0,0 +1,19 @@
+import type { NavigationBarBehavior, NavigationBarButtonStyle, NavigationBarStyle, NavigationBarVisibility, Orientation, ScreencastInfo, StatusBarStyle } from "./types";
+export interface SystemBarConfig {
+    navigationBarColor?: string;
+    navigationBarVisibility?: NavigationBarVisibility;
+    navigationBarButtonStyle?: NavigationBarButtonStyle;
+    navigationBarStyle?: NavigationBarStyle;
+    navigationBarBehavior?: NavigationBarBehavior;
+    statusBarColor?: string;
+    statusBarStyle?: StatusBarStyle;
+    statusBarVisible?: boolean;
+    statusBarAnimated?: boolean;
+    keepScreenOn?: boolean;
+    immersiveMode?: boolean;
+    brightness?: number;
+    orientation?: Orientation;
+    secureScreen?: boolean;
+}
+export declare const useSystemBar: (config: SystemBarConfig) => void;
+export declare const useScreencast: () => ScreencastInfo;

package/lib/src/useSystemBar.js

@@ -0,0 +1,102 @@
+"use strict";
+// ─────────────────────────────────────────────
+//  rn-system-bar · useSystemBar.ts
+// ─────────────────────────────────────────────
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScreencast = exports.useSystemBar = void 0;
+const react_1 = require("react");
+const SystemBar = __importStar(require("./SystemBar"));
+const useSystemBar = (config) => {
+    const configRef = (0, react_1.useRef)("");
+    const configStr = JSON.stringify(config);
+    (0, react_1.useEffect)(() => {
+        if (configRef.current === configStr)
+            return;
+        configRef.current = configStr;
+        const apply = async () => {
+            const p = [];
+            if (config.navigationBarColor !== undefined)
+                SystemBar.setNavigationBarColor(config.navigationBarColor);
+            if (config.navigationBarVisibility !== undefined)
+                p.push(SystemBar.setNavigationBarVisibility(config.navigationBarVisibility));
+            if (config.navigationBarButtonStyle !== undefined)
+                p.push(SystemBar.setNavigationBarButtonStyle(config.navigationBarButtonStyle));
+            if (config.navigationBarStyle !== undefined)
+                p.push(SystemBar.setNavigationBarStyle(config.navigationBarStyle));
+            if (config.navigationBarBehavior !== undefined)
+                p.push(SystemBar.setNavigationBarBehavior(config.navigationBarBehavior));
+            await Promise.allSettled(p);
+            if (config.statusBarColor !== undefined)
+                SystemBar.setStatusBarColor(config.statusBarColor, config.statusBarAnimated);
+            if (config.statusBarStyle !== undefined)
+                SystemBar.setStatusBarStyle(config.statusBarStyle, config.statusBarAnimated);
+            if (config.statusBarVisible !== undefined)
+                SystemBar.setStatusBarVisibility(config.statusBarVisible, config.statusBarAnimated);
+            if (config.keepScreenOn !== undefined)
+                SystemBar.keepScreenOn(config.keepScreenOn);
+            if (config.immersiveMode !== undefined)
+                SystemBar.immersiveMode(config.immersiveMode);
+            if (config.brightness !== undefined)
+                SystemBar.setBrightness(config.brightness);
+            if (config.orientation !== undefined)
+                SystemBar.setOrientation(config.orientation);
+            if (config.secureScreen !== undefined)
+                SystemBar.setSecureScreen(config.secureScreen);
+        };
+        apply().catch(() => {
+            if (__DEV__)
+                console.warn("[rn-system-bar] useSystemBar: one or more settings failed.");
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [configStr]);
+};
+exports.useSystemBar = useSystemBar;
+// ─────────────────────────────────────────────
+//  useScreencast
+// ─────────────────────────────────────────────
+const useScreencast = () => {
+    const [info, setInfo] = (0, react_1.useState)({
+        isCasting: false,
+        displayName: null,
+    });
+    (0, react_1.useEffect)(() => {
+        SystemBar.getScreencastInfo().then(setInfo).catch(() => { });
+        const unsub = SystemBar.onScreencastChange(setInfo);
+        return () => unsub();
+    }, []);
+    return info;
+};
+exports.useScreencast = useScreencast;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "rn-system-bar",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "description": "Control Android & iOS system bars, brightness, volume, orientation and screen flags from React Native.",
-  "main": "index.ts",
-  "react-native": "index.ts",
-  "types": "src/types.ts",
+  "main": "lib/index.js",
+  "react-native": "lib/index.js",
+  "types": "lib/index.d.ts",
   "homepage": "https://github.com/your-org/rn-system-bar",
   "license": "MIT",
   "author": "Your Name",
@@ -23,6 +23,7 @@
   "files": [
     "index.ts",
     "src/",
+    "lib/",
     "specs/",
     "android/",
     "ios/",
@@ -31,5 +32,15 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": ">=0.73.0"
+  },
+  "scripts": {
+    "build": "rimraf lib && npx tsc",
+    "npm:prepublish": "npm publish --access public",
+    "installing": "cd .. && npm install rn-system-bar@latest && cd rn-system-bar"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-native": "^0.72.8",
+    "typescript": "^5.9.3"
   }
 }

package/src/SystemBar.ts

@@ -1,9 +1,7 @@
 // ─────────────────────────────────────────────
 //  rn-system-bar · SystemBar.ts
-//  v4 — expo-navigation-bar based, zero deprecated APIs
 // ─────────────────────────────────────────────
 
-import * as NavigationBar from "expo-navigation-bar";
 import { NativeModules, Platform, StatusBar } from "react-native";
 
 import type {
@@ -12,222 +10,171 @@ import type {
   NavigationBarStyle,
   NavigationBarVisibility,
   Orientation,
+  ScreencastInfo,
   StatusBarStyle,
   VolumeStream,
 } from "./types";
 
-const { SystemBar: SystemBarNative } = NativeModules;
+const NavBar = (() => {
+  try { return require("expo-navigation-bar"); }
+  catch { return null; }
+})();
+
+const { SystemBar: Native } = NativeModules;
 
 const isAndroid = Platform.OS === "android";
 
 const androidOnly = (name: string): boolean => {
   if (!isAndroid) {
-    if (__DEV__) {
-      console.warn(
-        `[rn-system-bar] ${name}() is Android-only and is a no-op on iOS.`,
-      );
-    }
+    if (__DEV__) console.warn(`[rn-system-bar] ${name}() is Android-only, no-op on iOS.`);
     return false;
   }
   return true;
 };
 
 const checkNative = () => {
-  if (!SystemBarNative) {
-    throw new Error(
-      "[rn-system-bar] Native module not found. Rebuild your Android/iOS project.",
-    );
-  }
+  if (!Native) throw new Error("[rn-system-bar] Native module not found. Rebuild your project.");
 };
 
 // ═══════════════════════════════════════════════
-//  NAVIGATION BAR  — expo-navigation-bar (Android only)
-//  Uses WindowInsetsController internally on API 30+.
-//  Zero deprecated APIs.
+//  NAVIGATION BAR  (Android-only)
+//  Color → native Window API (edge-to-edge safe)
+//  Others → expo-navigation-bar (work in edge-to-edge)
 // ═══════════════════════════════════════════════
 
-/**
- * Set navigation bar background color.
- * @param color  Hex string e.g. "#000000"
- * @platform android
- */
-export const setNavigationBarColor = (color: string): Promise<void> => {
-  if (!androidOnly("setNavigationBarColor")) return Promise.resolve();
-  return NavigationBar.setBackgroundColorAsync(color);
-};
-
-/**
- * Show or hide the navigation bar.
- * @platform android
- */
-export const setNavigationBarVisibility = (
-  mode: NavigationBarVisibility,
-): Promise<void> => {
+export const setNavigationBarColor = (color: string): void => {
+  if (!androidOnly("setNavigationBarColor")) return;
+  checkNative();
+  Native.setNavigationBarColor(color);
+};
+
+export const setNavigationBarVisibility = (mode: NavigationBarVisibility): Promise<void> => {
   if (!androidOnly("setNavigationBarVisibility")) return Promise.resolve();
-  return NavigationBar.setVisibilityAsync(mode);
+  return NavBar?.setVisibilityAsync(mode) ?? Promise.resolve();
 };
 
-/**
- * Set navigation bar icon/button style.
- * @param style  "light" = white icons | "dark" = black icons
- * @platform android
- */
-export const setNavigationBarButtonStyle = (
-  style: NavigationBarButtonStyle,
-): Promise<void> => {
+export const setNavigationBarButtonStyle = (style: NavigationBarButtonStyle): Promise<void> => {
   if (!androidOnly("setNavigationBarButtonStyle")) return Promise.resolve();
-  return NavigationBar.setButtonStyleAsync(style);
+  return NavBar?.setButtonStyleAsync(style) ?? Promise.resolve();
 };
 
-/**
- * Set navigation bar visual style.
- * @platform android
- */
-export const setNavigationBarStyle = (
-  style: NavigationBarStyle,
-): Promise<void> => {
+export const setNavigationBarStyle = (style: NavigationBarStyle): Promise<void> => {
   if (!androidOnly("setNavigationBarStyle")) return Promise.resolve();
-  const buttonStyle: NavigationBarButtonStyle =
-    style === "dark" || style === "auto" ? "dark" : "light";
-  return NavigationBar.setButtonStyleAsync(buttonStyle);
-};
-
-/**
- * Set navigation bar gesture behavior.
- * @platform android
- */
-export const setNavigationBarBehavior = (
-  behavior: NavigationBarBehavior,
-): Promise<void> => {
+  const btn: NavigationBarButtonStyle = style === "dark" || style === "auto" ? "dark" : "light";
+  return NavBar?.setButtonStyleAsync(btn) ?? Promise.resolve();
+};
+
+export const setNavigationBarBehavior = (behavior: NavigationBarBehavior): Promise<void> => {
   if (!androidOnly("setNavigationBarBehavior")) return Promise.resolve();
-  return NavigationBar.setBehaviorAsync(behavior);
+  return NavBar?.setBehaviorAsync(behavior) ?? Promise.resolve();
 };
 
 // ═══════════════════════════════════════════════
 //  STATUS BAR
-//  React Native StatusBar — cross-platform, no deprecated APIs.
 // ═══════════════════════════════════════════════
 
-/**
- * Set status bar background color.
- * @platform android
- */
 export const setStatusBarColor = (color: string, animated = false): void => {
   if (!androidOnly("setStatusBarColor")) return;
   StatusBar.setBackgroundColor(color, animated);
 };
 
-/**
- * Set status bar icon style.
- * "light" = white icons | "dark" = dark icons
- */
-export const setStatusBarStyle = (
-  style: StatusBarStyle,
-  animated = false,
-): void => {
-  StatusBar.setBarStyle(
-    style === "light" ? "light-content" : "dark-content",
-    animated,
-  );
-};
-
-/**
- * Show or hide the status bar.
- */
-export const setStatusBarVisibility = (
-  visible: boolean,
-  animated = false,
-): void => {
+export const setStatusBarStyle = (style: StatusBarStyle, animated = false): void => {
+  StatusBar.setBarStyle(style === "light" ? "light-content" : "dark-content", animated);
+};
+
+export const setStatusBarVisibility = (visible: boolean, animated = false): void => {
   StatusBar.setHidden(!visible, animated ? "slide" : "none");
 };
 
 // ═══════════════════════════════════════════════
-//  BRIGHTNESS  — native module
+//  BRIGHTNESS
+//
+//  setBrightness  → updates BOTH window brightness (instant)
+//                   AND system brightness (persisted).
+//                   On first call: opens WRITE_SETTINGS if not granted.
+//
+//  getBrightness  → reads SYSTEM brightness so slider always
+//                   matches the device brightness bar.
 // ═══════════════════════════════════════════════
 
-/**
- * Set screen brightness (0.0 – 1.0).
- */
 export const setBrightness = (level: number): void => {
   checkNative();
-  SystemBarNative.setBrightness(Math.max(0, Math.min(1, level)));
+  Native.setBrightness(Math.max(0.01, Math.min(1, level)));
 };
 
-/**
- * Get current screen brightness.
- * @returns Promise<number>  0.0 – 1.0
- */
 export const getBrightness = (): Promise<number> => {
   checkNative();
-  return SystemBarNative.getBrightness();
+  return Native.getBrightness();
 };
 
 // ═══════════════════════════════════════════════
-//  VOLUME  — native module
+//  VOLUME
 // ═══════════════════════════════════════════════
 
-/**
- * Set volume level (0.0 – 1.0).
- * @param stream  "music" | "ring" | "notification" | "alarm" | "system"
- */
-export const setVolume = (
-  level: number,
-  stream: VolumeStream = "music",
-): void => {
+export const setVolume = (level: number, stream: VolumeStream = "music"): void => {
   checkNative();
-  SystemBarNative.setVolume(Math.max(0, Math.min(1, level)), stream);
+  Native.setVolume(Math.max(0, Math.min(1, level)), stream);
 };
 
-/**
- * Get current volume level (0.0 – 1.0).
- */
 export const getVolume = (stream: VolumeStream = "music"): Promise<number> => {
   checkNative();
-  return SystemBarNative.getVolume(stream);
+  return Native.getVolume(stream);
 };
 
-/**
- * Show or hide the system volume popup.
- * @platform android
- */
 export const setVolumeHUDVisible = (visible: boolean): void => {
   if (!androidOnly("setVolumeHUDVisible")) return;
   checkNative();
-  SystemBarNative.setVolumeHUDVisible(visible);
+  Native.setVolumeHUDVisible(visible);
 };
 
 // ═══════════════════════════════════════════════
-//  SCREEN  — native module
+//  SCREEN
 // ═══════════════════════════════════════════════
 
-/**
- * Prevent the screen from going to sleep.
- */
 export const keepScreenOn = (enable: boolean): void => {
   checkNative();
-  SystemBarNative.keepScreenOn(enable);
+  Native.keepScreenOn(enable);
 };
 
-/**
- * Enable immersive fullscreen (hides status + nav bar).
- * Uses WindowInsetsController on API 30+.
- * @platform android
- */
 export const immersiveMode = (enable: boolean): void => {
   if (!androidOnly("immersiveMode")) return;
   checkNative();
-  SystemBarNative.immersiveMode(enable);
+  Native.immersiveMode(enable);
+};
+
+export const setSecureScreen = (enable: boolean): void => {
+  if (!androidOnly("setSecureScreen")) return;
+  checkNative();
+  Native.setSecureScreen(enable);
 };
 
 // ═══════════════════════════════════════════════
-//  ORIENTATION  — native module
+//  ORIENTATION
 // ═══════════════════════════════════════════════
 
-/**
- * Lock or unlock screen orientation.
- * "portrait" | "landscape" | "landscape-left" | "landscape-right" | "auto"
- */
 export const setOrientation = (mode: Orientation): void => {
   checkNative();
-  SystemBarNative.setOrientation(mode);
+  Native.setOrientation(mode);
+};
+
+// ═══════════════════════════════════════════════
+//  SCREENCAST
+// ═══════════════════════════════════════════════
+
+export const getScreencastInfo = (): Promise<ScreencastInfo> => {
+  checkNative();
+  return Native.getScreencastInfo();
+};
+
+export const onScreencastChange = (
+  callback: (info: ScreencastInfo) => void
+): (() => void) => {
+  checkNative();
+  const { DeviceEventEmitter } = require("react-native");
+  Native.startScreencastListener();
+  const sub = DeviceEventEmitter.addListener("SystemBar_ScreencastChange", callback);
+  return () => {
+    sub.remove();
+    Native.stopScreencastListener();
+  };
 };

package/src/types.ts

@@ -3,27 +3,14 @@
 // ─────────────────────────────────────────────
 
 export type NavigationBarBehavior =
-  | "overlay-swipe"   // Swipe from edge reveals bar briefly (overlay)
-  | "inset-swipe"     // Swipe insets content when bar appears
-  | "inset-touch";    // Touch insets content when bar appears
+  | "overlay-swipe"
+  | "inset-swipe"
+  | "inset-touch";
 
-export type NavigationBarButtonStyle =
-  | "light"           // White / light-coloured icons
-  | "dark";           // Black / dark-coloured icons
-
-export type NavigationBarStyle =
-  | "auto"            // System decides
-  | "inverted"        // Inverted from system
-  | "light"           // Light background nav bar
-  | "dark";           // Dark background nav bar
-
-export type NavigationBarVisibility =
-  | "visible"
-  | "hidden";
-
-export type StatusBarStyle =
-  | "light"           // Light icons (for dark backgrounds)
-  | "dark";           // Dark icons (for light backgrounds)
+export type NavigationBarButtonStyle = "light" | "dark";
+export type NavigationBarStyle = "auto" | "inverted" | "light" | "dark";
+export type NavigationBarVisibility = "visible" | "hidden";
+export type StatusBarStyle = "light" | "dark";
 
 export type Orientation =
   | "portrait"
@@ -39,32 +26,7 @@ export type VolumeStream =
   | "alarm"
   | "system";
 
-export interface SystemBarAPI {
-  // Navigation Bar
-  setNavigationBarColor(color: string): void;
-  setNavigationBarVisibility(mode: NavigationBarVisibility): void;
-  setNavigationBarButtonStyle(style: NavigationBarButtonStyle): void;
-  setNavigationBarStyle(style: NavigationBarStyle): void;
-  setNavigationBarBehavior(behavior: NavigationBarBehavior): void;
-
-  // Status Bar
-  setStatusBarColor(color: string): void;
-  setStatusBarStyle(style: StatusBarStyle): void;
-  setStatusBarVisibility(visible: boolean): void;
-
-  // Brightness
-  setBrightness(level: number): void;
-  getBrightness(): Promise<number>;
-
-  // Volume
-  setVolume(level: number, stream?: VolumeStream): void;
-  getVolume(stream?: VolumeStream): Promise<number>;
-  setVolumeHUDVisible(visible: boolean): void;
-
-  // Screen
-  keepScreenOn(enable: boolean): void;
-  immersiveMode(enable: boolean): void;
-
-  // Orientation
-  setOrientation(mode: Orientation): void;
+export interface ScreencastInfo {
+  isCasting: boolean;
+  displayName: string | null;
 }

package/src/useSystemBar.ts

@@ -0,0 +1,90 @@
+// ─────────────────────────────────────────────
+//  rn-system-bar · useSystemBar.ts
+// ─────────────────────────────────────────────
+
+import { useEffect, useRef, useState } from "react";
+import type {
+  NavigationBarBehavior,
+  NavigationBarButtonStyle,
+  NavigationBarStyle,
+  NavigationBarVisibility,
+  Orientation,
+  ScreencastInfo,
+  StatusBarStyle,
+} from "./types";
+import * as SystemBar from "./SystemBar";
+
+// ─────────────────────────────────────────────
+//  useSystemBar — apply system bar config safely
+//  All async calls run inside useEffect — no Suspense crash
+// ─────────────────────────────────────────────
+export interface SystemBarConfig {
+  navigationBarColor?: string;
+  navigationBarVisibility?: NavigationBarVisibility;
+  navigationBarButtonStyle?: NavigationBarButtonStyle;
+  navigationBarStyle?: NavigationBarStyle;
+  navigationBarBehavior?: NavigationBarBehavior;
+  statusBarColor?: string;
+  statusBarStyle?: StatusBarStyle;
+  statusBarVisible?: boolean;
+  statusBarAnimated?: boolean;
+  keepScreenOn?: boolean;
+  immersiveMode?: boolean;
+  brightness?: number;
+  orientation?: Orientation;
+  secureScreen?: boolean;
+}
+
+export const useSystemBar = (config: SystemBarConfig) => {
+  const configRef = useRef("");
+  const configStr = JSON.stringify(config);
+
+  useEffect(() => {
+    if (configRef.current === configStr) return;
+    configRef.current = configStr;
+
+    const apply = async () => {
+      const p: Promise<void>[] = [];
+
+      if (config.navigationBarColor       !== undefined) SystemBar.setNavigationBarColor(config.navigationBarColor);
+      if (config.navigationBarVisibility  !== undefined) p.push(SystemBar.setNavigationBarVisibility(config.navigationBarVisibility));
+      if (config.navigationBarButtonStyle !== undefined) p.push(SystemBar.setNavigationBarButtonStyle(config.navigationBarButtonStyle));
+      if (config.navigationBarStyle       !== undefined) p.push(SystemBar.setNavigationBarStyle(config.navigationBarStyle));
+      if (config.navigationBarBehavior    !== undefined) p.push(SystemBar.setNavigationBarBehavior(config.navigationBarBehavior));
+
+      await Promise.allSettled(p);
+
+      if (config.statusBarColor   !== undefined) SystemBar.setStatusBarColor(config.statusBarColor, config.statusBarAnimated);
+      if (config.statusBarStyle   !== undefined) SystemBar.setStatusBarStyle(config.statusBarStyle, config.statusBarAnimated);
+      if (config.statusBarVisible !== undefined) SystemBar.setStatusBarVisibility(config.statusBarVisible, config.statusBarAnimated);
+      if (config.keepScreenOn     !== undefined) SystemBar.keepScreenOn(config.keepScreenOn);
+      if (config.immersiveMode    !== undefined) SystemBar.immersiveMode(config.immersiveMode);
+      if (config.brightness       !== undefined) SystemBar.setBrightness(config.brightness);
+      if (config.orientation      !== undefined) SystemBar.setOrientation(config.orientation);
+      if (config.secureScreen     !== undefined) SystemBar.setSecureScreen(config.secureScreen);
+    };
+
+    apply().catch(() => {
+      if (__DEV__) console.warn("[rn-system-bar] useSystemBar: one or more settings failed.");
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configStr]);
+};
+
+// ─────────────────────────────────────────────
+//  useScreencast
+// ─────────────────────────────────────────────
+export const useScreencast = () => {
+  const [info, setInfo] = useState<ScreencastInfo>({
+    isCasting: false,
+    displayName: null,
+  });
+
+  useEffect(() => {
+    SystemBar.getScreencastInfo().then(setInfo).catch(() => {});
+    const unsub = SystemBar.onScreencastChange(setInfo);
+    return () => unsub();
+  }, []);
+
+  return info;
+};