rn-system-bar 3.1.7 → 3.1.8

package/lib/src/useSystemBar.js

@@ -36,9 +36,22 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScreencast = exports.useSystemBar = void 0;
+exports.useAppCast = exports.useScreencast = exports.useSystemScreencast = exports.useTheme = exports.useThemeSystemBar = exports.useSystemBar = void 0;
 const react_1 = require("react");
 const SystemBar = __importStar(require("./SystemBar"));
+const useTheme_1 = require("./useTheme");
+// ─────────────────────────────────────────────
+//  useSystemBar
+//  Apply system bar settings declaratively.
+//
+//  @example
+//  useSystemBar({
+//    navigationBarColor:       "transparent",
+//    navigationBarButtonStyle: "light",
+//    statusBarStyle:           "light",
+//    keepScreenOn:             true,
+//  });
+// ─────────────────────────────────────────────
 const useSystemBar = (config) => {
     const configRef = (0, react_1.useRef)("");
     const configStr = JSON.stringify(config);
@@ -47,7 +60,6 @@ const useSystemBar = (config) => {
             return;
         configRef.current = configStr;
         const apply = async () => {
-            // All nav bar calls are now sync (no expo-navigation-bar)
             if (config.navigationBarColor !== undefined)
                 SystemBar.setNavigationBarColor(config.navigationBarColor);
             if (config.navigationBarVisibility !== undefined)
@@ -58,6 +70,8 @@ const useSystemBar = (config) => {
                 SystemBar.setNavigationBarStyle(config.navigationBarStyle);
             if (config.navigationBarBehavior !== undefined)
                 SystemBar.setNavigationBarBehavior(config.navigationBarBehavior);
+            if (config.statusBarColor !== undefined)
+                SystemBar.setStatusBarColor(config.statusBarColor);
             if (config.statusBarStyle !== undefined)
                 SystemBar.setStatusBarStyle(config.statusBarStyle);
             if (config.statusBarVisible !== undefined)
@@ -81,20 +95,70 @@ const useSystemBar = (config) => {
     }, [configStr]);
 };
 exports.useSystemBar = useSystemBar;
+const useThemeSystemBar = (config) => {
+    var _a, _b, _c;
+    const theme = (0, useTheme_1.useTheme)();
+    const resolved = Object.assign(Object.assign({}, ((_a = config.base) !== null && _a !== void 0 ? _a : {})), (theme.isDark ? ((_b = config.dark) !== null && _b !== void 0 ? _b : {}) : ((_c = config.light) !== null && _c !== void 0 ? _c : {})));
+    (0, exports.useSystemBar)(resolved);
+    return theme;
+};
+exports.useThemeSystemBar = useThemeSystemBar;
 // ─────────────────────────────────────────────
-//  useScreencast
+//  Re-export useTheme + theme types
 // ─────────────────────────────────────────────
-const useScreencast = () => {
+var useTheme_2 = require("./useTheme");
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return useTheme_2.useTheme; } });
+// ─────────────────────────────────────────────
+//  useSystemScreencast
+//  Tracks OS-level external display state.
+//  Android: DisplayManager (HDMI / Miracast / Presentation display).
+//  iOS:     UIScreen.screens (AirPlay mirror).
+//
+//  @example
+//  const { isCasting, displayName, displays } = useSystemScreencast();
+// ─────────────────────────────────────────────
+const useSystemScreencast = () => {
     const [info, setInfo] = (0, react_1.useState)({
         isCasting: false,
         displayName: null,
         displays: [],
     });
     (0, react_1.useEffect)(() => {
-        SystemBar.getScreencastInfo().then(setInfo).catch(() => { });
-        const unsub = SystemBar.onScreencastChange(setInfo);
+        SystemBar.getSystemScreencastInfo()
+            .then(setInfo)
+            .catch(() => { });
+        const unsub = SystemBar.onSystemScreencastChange(setInfo);
         return () => unsub();
     }, []);
     return info;
 };
-exports.useScreencast = useScreencast;
+exports.useSystemScreencast = useSystemScreencast;
+/** @deprecated Renamed to useSystemScreencast() */
+exports.useScreencast = exports.useSystemScreencast;
+const useAppCast = () => {
+    const [info, setInfo] = (0, react_1.useState)({
+        state: "idle",
+        devices: [],
+        connectedDevice: null,
+        error: null,
+    });
+    (0, react_1.useEffect)(() => {
+        // Sync initial state
+        SystemBar.getAppCastInfo()
+            .then(setInfo)
+            .catch(() => { });
+        // Subscribe to all cast events (device found/lost, state changes, errors)
+        const unsub = SystemBar.onAppCastChange(setInfo);
+        return () => {
+            unsub();
+            // Auto-stop scan on unmount — avoids background battery drain
+            SystemBar.stopAppCastScan();
+        };
+    }, []);
+    const scan = (0, react_1.useCallback)(() => SystemBar.startAppCastScan(), []);
+    const stopScan = (0, react_1.useCallback)(() => SystemBar.stopAppCastScan(), []);
+    const connect = (0, react_1.useCallback)((id, pin) => SystemBar.connectAppCast(id, pin), []);
+    const disconnect = (0, react_1.useCallback)(() => SystemBar.disconnectAppCast(), []);
+    return Object.assign(Object.assign({}, info), { scan, stopScan, connect, disconnect });
+};
+exports.useAppCast = useAppCast;

package/lib/src/useTheme.d.ts

@@ -0,0 +1,24 @@
+import type { ThemeMode, ThemeState } from "./types";
+/**
+ * Set the global theme mode from anywhere (outside a component).
+ * Triggers all `useTheme()` consumers.
+ */
+export declare function setGlobalThemeMode(mode: ThemeMode): void;
+/**
+ * React hook — subscribe to theme state.
+ *
+ * @example
+ * const { isDark, mode, setMode } = useTheme();
+ *
+ * // Auto nav bar colour based on theme
+ * useEffect(() => {
+ *   setNavigationBarColor(isDark ? "#000000" : "#ffffff");
+ *   setNavigationBarButtonStyle(isDark ? "light" : "dark");
+ * }, [isDark]);
+ *
+ * // Manual override
+ * <Button onPress={() => setMode("dark")}  title="Force Dark"  />
+ * <Button onPress={() => setMode("light")} title="Force Light" />
+ * <Button onPress={() => setMode("system")}title="Follow OS"   />
+ */
+export declare function useTheme(): ThemeState;

package/lib/src/useTheme.js

@@ -0,0 +1,81 @@
+"use strict";
+// ─────────────────────────────────────────────
+//  rn-system-bar · useTheme.ts
+//
+//  Reads the OS colour scheme via React Native's
+//  `Appearance` API and lets the user override it
+//  with "dark" | "light" | "system".
+//
+//  Usage:
+//    const { isDark, mode, setMode } = useTheme();
+//    const { isDark } = useTheme();               // read-only
+// ─────────────────────────────────────────────
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setGlobalThemeMode = setGlobalThemeMode;
+exports.useTheme = useTheme;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+// ── Module-level singleton so all consumers share state ──────────────────────
+let _mode = "system";
+let _systemIsDark = react_native_1.Appearance.getColorScheme() === "dark";
+const _listeners = new Set();
+function _notify() {
+    const isDark = resolveIsDark(_mode, _systemIsDark);
+    _listeners.forEach((fn) => fn({ isDark, mode: _mode }));
+}
+function resolveIsDark(mode, systemIsDark) {
+    if (mode === "dark")
+        return true;
+    if (mode === "light")
+        return false;
+    return systemIsDark; // "system"
+}
+// Keep in sync with OS changes
+react_native_1.Appearance.addChangeListener(({ colorScheme }) => {
+    _systemIsDark = colorScheme === "dark";
+    _notify();
+});
+// ── Public API ───────────────────────────────────────────────────────────────
+/**
+ * Set the global theme mode from anywhere (outside a component).
+ * Triggers all `useTheme()` consumers.
+ */
+function setGlobalThemeMode(mode) {
+    _mode = mode;
+    _notify();
+}
+/**
+ * React hook — subscribe to theme state.
+ *
+ * @example
+ * const { isDark, mode, setMode } = useTheme();
+ *
+ * // Auto nav bar colour based on theme
+ * useEffect(() => {
+ *   setNavigationBarColor(isDark ? "#000000" : "#ffffff");
+ *   setNavigationBarButtonStyle(isDark ? "light" : "dark");
+ * }, [isDark]);
+ *
+ * // Manual override
+ * <Button onPress={() => setMode("dark")}  title="Force Dark"  />
+ * <Button onPress={() => setMode("light")} title="Force Light" />
+ * <Button onPress={() => setMode("system")}title="Follow OS"   />
+ */
+function useTheme() {
+    const [state, setState] = (0, react_1.useState)(() => ({
+        isDark: resolveIsDark(_mode, _systemIsDark),
+        mode: _mode,
+    }));
+    (0, react_1.useEffect)(() => {
+        // Sync on mount in case singleton changed between renders
+        setState({ isDark: resolveIsDark(_mode, _systemIsDark), mode: _mode });
+        _listeners.add(setState);
+        return () => {
+            _listeners.delete(setState);
+        };
+    }, []);
+    const setMode = (0, react_1.useCallback)((newMode) => {
+        setGlobalThemeMode(newMode);
+    }, []);
+    return Object.assign(Object.assign({}, state), { setMode });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-system-bar",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Control Android & iOS system bars, brightness, volume, orientation and screen flags from React Native.",
   "main": "lib/index.js",
   "react-native": "lib/index.js",
@@ -37,7 +37,8 @@
   "scripts": {
     "build": "rimraf lib && npx tsc",
     "npm:prepublish": "npm publish --access public",
-    "installing": "cd .. && npm install rn-system-bar@latest && cd rn-system-bar"
+    "installing": "cd .. && npm install rn-system-bar@latest && cd rn-system-bar",
+    "dev": "npm run build && npm run npm:prepublish && npm run installing"
   },
   "expo": {
     "plugins": [

package/specs/NativeSystemBar.ts

@@ -7,33 +7,48 @@ import type { TurboModule } from "react-native";
 import { TurboModuleRegistry } from "react-native";
 
 export interface Spec extends TurboModule {
-  // Navigation Bar (Android-only)
+  // ── Navigation Bar (Android-only) ──────────
+  // color: hex string | "transparent" | "translucent"
   setNavigationBarColor(color: string): void;
   setNavigationBarVisibility(mode: string): void;
   setNavigationBarButtonStyle(style: string): void;
   setNavigationBarStyle(style: string): void;
   setNavigationBarBehavior(behavior: string): void;
 
-  // Status Bar
+  // ── Status Bar ─────────────────────────────
+  // color: hex string | "transparent" | "translucent"
   setStatusBarColor(color: string): void;
   setStatusBarStyle(style: string): void;
   setStatusBarVisibility(visible: boolean): void;
 
-  // Brightness
+  // ── Brightness ─────────────────────────────
   setBrightness(level: number): void;
   getBrightness(): Promise<number>;
 
-  // Volume
+  // ── Volume ─────────────────────────────────
   setVolume(level: number, stream: string): void;
   getVolume(stream: string): Promise<number>;
   setVolumeHUDVisible(visible: boolean): void;
 
-  // Screen
+  // ── Screen ─────────────────────────────────
   keepScreenOn(enable: boolean): void;
   immersiveMode(enable: boolean): void;
+  setSecureScreen(enable: boolean): void;
 
-  // Orientation
+  // ── Orientation ────────────────────────────
   setOrientation(mode: string): void;
+
+  // ── System Screencast ──────────────────────
+  getSystemScreencastInfo(): Promise<Object>;
+  startSystemScreencastListener(): void;
+  stopSystemScreencastListener(): void;
+
+  // ── App-only Cast (Android only) ───────────
+  startAppCastScan(): void;
+  stopAppCastScan(): void;
+  connectAppCast(deviceId: string, pairingPin: string | null): void;
+  disconnectAppCast(): void;
+  getAppCastInfo(): Promise<Object>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>("SystemBar");

package/src/SystemBar.ts

@@ -7,13 +7,18 @@
 import { NativeModules, Platform } from "react-native";
 
 import type {
+  AppCastInfo,
+  AppCastState,
   NavigationBarBehavior,
   NavigationBarButtonStyle,
+  NavigationBarColorValue,
   NavigationBarStyle,
   NavigationBarVisibility,
   Orientation,
   ScreencastInfo,
+  StatusBarColorValue,
   StatusBarStyle,
+  SystemScreencastInfo,
   VolumeStream,
 } from "./types";
 
@@ -23,33 +28,59 @@ const isAndroid = Platform.OS === "android";
 
 const androidOnly = (name: string): boolean => {
   if (!isAndroid) {
-    if (__DEV__) console.warn(`[rn-system-bar] ${name}() is Android-only, 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 (!Native) throw new Error("[rn-system-bar] Native module not found. Rebuild your project.");
+  if (!Native)
+    throw new Error(
+      "[rn-system-bar] Native module not found. Rebuild your project.",
+    );
 };
 
 // ═══════════════════════════════════════════════
 //  NAVIGATION BAR  (Android — 100% native)
 // ═══════════════════════════════════════════════
 
-export const setNavigationBarColor = (color: string): void => {
+/**
+ * Set the navigation bar background colour.
+ *
+ * @param color
+ *   - Any hex string   →  solid colour        e.g. `"#1a1a2e"`
+ *   - `"transparent"`  →  fully transparent   (content draws behind bar)
+ *   - `"translucent"`  →  semi-transparent    (system scrim over content)
+ *
+ * @example
+ * setNavigationBarColor("#000000");       // solid black
+ * setNavigationBarColor("transparent");   // glass / edge-to-edge
+ * setNavigationBarColor("translucent");   // frosted glass
+ */
+export const setNavigationBarColor = (color: NavigationBarColorValue): void => {
   if (!androidOnly("setNavigationBarColor")) return;
   checkNative();
-  Native.setNavigationBarColor(color);
+  Native.setNavigationBarColor(color); // Kotlin handles the special values
 };
 
-export const setNavigationBarVisibility = (mode: NavigationBarVisibility): void => {
+/**
+ * Hide or show the navigation bar.
+ *
+ * @param mode `"visible"` | `"hidden"`
+ */
+export const setNavigationBarVisibility = (
+  mode: NavigationBarVisibility,
+): void => {
   if (!androidOnly("setNavigationBarVisibility")) return;
   checkNative();
   Native.setNavigationBarVisibility(mode);
 };
 
-export const setNavigationBarButtonStyle = (style: NavigationBarButtonStyle): void => {
+export const setNavigationBarButtonStyle = (
+  style: NavigationBarButtonStyle,
+): void => {
   if (!androidOnly("setNavigationBarButtonStyle")) return;
   checkNative();
   Native.setNavigationBarButtonStyle(style);
@@ -61,7 +92,9 @@ export const setNavigationBarStyle = (style: NavigationBarStyle): void => {
   Native.setNavigationBarStyle(style);
 };
 
-export const setNavigationBarBehavior = (behavior: NavigationBarBehavior): void => {
+export const setNavigationBarBehavior = (
+  behavior: NavigationBarBehavior,
+): void => {
   if (!androidOnly("setNavigationBarBehavior")) return;
   checkNative();
   Native.setNavigationBarBehavior(behavior);
@@ -71,6 +104,20 @@ export const setNavigationBarBehavior = (behavior: NavigationBarBehavior): void
 //  STATUS BAR  (native — no RN StatusBar)
 // ═══════════════════════════════════════════════
 
+/**
+ * Set the status bar background colour (Android only).
+ *
+ * @param color
+ *   - Any hex string   →  solid colour
+ *   - `"transparent"`  →  fully transparent
+ *   - `"translucent"`  →  semi-transparent
+ */
+export const setStatusBarColor = (color: StatusBarColorValue): void => {
+  if (!androidOnly("setStatusBarColor")) return;
+  checkNative();
+  Native.setStatusBarColor(color);
+};
+
 export const setStatusBarStyle = (style: StatusBarStyle): void => {
   checkNative();
   Native.setStatusBarStyle(style);
@@ -96,18 +143,18 @@ export const getBrightness = (): Promise<number> => {
 };
 
 /**
- * Subscribe to system brightness changes (polls every 500ms on Android).
+ * Subscribe to system brightness changes (polls every 500 ms on Android).
  * @returns unsubscribe function
  */
 export const onBrightnessChange = (
-  callback: (brightness: number) => void
+  callback: (brightness: number) => void,
 ): (() => void) => {
   checkNative();
   const { DeviceEventEmitter } = require("react-native");
   Native.startBrightnessListener();
   const sub = DeviceEventEmitter.addListener(
     "SystemBar_BrightnessChange",
-    (e: { brightness: number }) => callback(e.brightness)
+    (e: { brightness: number }) => callback(e.brightness),
   );
   return () => {
     sub.remove();
@@ -119,7 +166,10 @@ export const onBrightnessChange = (
 //  VOLUME
 // ═══════════════════════════════════════════════
 
-export const setVolume = (level: number, stream: VolumeStream = "music"): void => {
+export const setVolume = (
+  level: number,
+  stream: VolumeStream = "music",
+): void => {
   checkNative();
   Native.setVolume(Math.max(0, Math.min(1, level)), stream);
 };
@@ -140,14 +190,15 @@ export const setVolumeHUDVisible = (visible: boolean): void => {
  * @returns unsubscribe function
  */
 export const onVolumeChange = (
-  callback: (volume: number, stream: VolumeStream) => void
+  callback: (volume: number, stream: VolumeStream) => void,
 ): (() => void) => {
   checkNative();
   const { DeviceEventEmitter } = require("react-native");
   Native.startVolumeListener();
   const sub = DeviceEventEmitter.addListener(
     "SystemBar_VolumeChange",
-    (e: { volume: number; stream: VolumeStream }) => callback(e.volume, e.stream)
+    (e: { volume: number; stream: VolumeStream }) =>
+      callback(e.volume, e.stream),
   );
   return () => {
     sub.remove();
@@ -186,23 +237,145 @@ export const setOrientation = (mode: Orientation): void => {
 };
 
 // ═══════════════════════════════════════════════
-//  SCREENCAST
+//  SYSTEM SCREENCAST  (external display / HDMI / Miracast)
+//  Reads DisplayManager — detects any externally mirrored display.
+// ═══════════════════════════════════════════════
+
+/**
+ * One-shot snapshot of system-level external display state.
+ * Works on both Android (DisplayManager) and iOS (UIScreen.screens).
+ */
+export const getSystemScreencastInfo = (): Promise<SystemScreencastInfo> => {
+  checkNative();
+  return Native.getSystemScreencastInfo();
+};
+
+/**
+ * Subscribe to system external-display changes.
+ * Fires when an HDMI / Miracast / AirPlay display connects or disconnects.
+ * @returns unsubscribe function
+ */
+export const onSystemScreencastChange = (
+  callback: (info: SystemScreencastInfo) => void,
+): (() => void) => {
+  checkNative();
+  const { DeviceEventEmitter } = require("react-native");
+  Native.startSystemScreencastListener();
+  const sub = DeviceEventEmitter.addListener(
+    "SystemBar_SystemScreencastChange",
+    callback,
+  );
+  return () => {
+    sub.remove();
+    Native.stopSystemScreencastListener();
+  };
+};
+
+// ─────────────────────────────────────────────
+//  Legacy aliases (backward compat)
+// ─────────────────────────────────────────────
+/** @deprecated Use getSystemScreencastInfo() */
+export const getScreencastInfo = getSystemScreencastInfo;
+/** @deprecated Use onSystemScreencastChange() */
+export const onScreencastChange = onSystemScreencastChange;
+
+// ═══════════════════════════════════════════════
+//  APP-ONLY CAST  (MediaRouter — Chromecast / TV)
+//  Mirrors only this app's screen — NOT the whole system.
+//  Flow:  startAppCastScan() → onAppCastChange (devices arrive)
+//         → connectAppCast(deviceId) → onAppCastChange (state = "connected")
+//         → disconnectAppCast()
 // ═══════════════════════════════════════════════
 
-export const getScreencastInfo = (): Promise<ScreencastInfo> => {
+/**
+ * Start scanning for nearby castable devices (Chromecast, TV, etc.).
+ * Listen for results via `onAppCastChange`.
+ * Android: uses MediaRouter. iOS: no-op (AirPlay is system-only).
+ */
+export const startAppCastScan = (): void => {
+  if (!androidOnly("startAppCastScan")) return;
+  checkNative();
+  Native.startAppCastScan();
+};
+
+/**
+ * Stop the device discovery scan.
+ */
+export const stopAppCastScan = (): void => {
+  if (!androidOnly("stopAppCastScan")) return;
+  checkNative();
+  Native.stopAppCastScan();
+};
+
+/**
+ * Connect to a discovered device and begin casting this app's screen.
+ * @param deviceId  The `id` field from `AppCastDevice` (MediaRouter route ID).
+ * @param pairingPin  Optional PIN string if `requiresPairing` is true.
+ */
+export const connectAppCast = (deviceId: string, pairingPin?: string): void => {
+  if (!androidOnly("connectAppCast")) return;
+  checkNative();
+  Native.connectAppCast(deviceId, pairingPin ?? null);
+};
+
+/**
+ * Disconnect the active in-app cast session.
+ */
+export const disconnectAppCast = (): void => {
+  if (!androidOnly("disconnectAppCast")) return;
+  checkNative();
+  Native.disconnectAppCast();
+};
+
+/**
+ * Get the current in-app cast snapshot (state + device list).
+ */
+export const getAppCastInfo = (): Promise<AppCastInfo> => {
+  if (!isAndroid) {
+    return Promise.resolve({
+      state: "idle" as AppCastState,
+      devices: [],
+      connectedDevice: null,
+      error: null,
+    });
+  }
   checkNative();
-  return Native.getScreencastInfo();
+  return Native.getAppCastInfo();
 };
 
-export const onScreencastChange = (
-  callback: (info: ScreencastInfo) => void
+/**
+ * Subscribe to in-app cast state changes.
+ * Fires on: device discovered/lost, state changes (scanning → connecting → connected),
+ * pairing requests, errors.
+ *
+ * @example
+ * const unsub = onAppCastChange((info) => {
+ *   if (info.state === "connected") console.log("Casting to", info.connectedDevice?.name);
+ *   if (info.error) console.warn("Cast error:", info.error);
+ * });
+ *
+ * @returns unsubscribe function
+ */
+export const onAppCastChange = (
+  callback: (info: AppCastInfo) => void,
 ): (() => void) => {
+  if (!isAndroid) {
+    // iOS: immediately call with idle state, return no-op
+    callback({
+      state: "idle",
+      devices: [],
+      connectedDevice: null,
+      error: null,
+    });
+    return () => {};
+  }
   checkNative();
   const { DeviceEventEmitter } = require("react-native");
-  Native.startScreencastListener();
-  const sub = DeviceEventEmitter.addListener("SystemBar_ScreencastChange", callback);
+  const sub = DeviceEventEmitter.addListener(
+    "SystemBar_AppCastChange",
+    callback,
+  );
   return () => {
     sub.remove();
-    Native.stopScreencastListener();
   };
 };