rn-system-bar 3.1.7 → 3.2.0

package/lib/src/SystemBar.js

@@ -5,7 +5,7 @@
 //  All APIs → native Kotlin / iOS Swift.
 // ─────────────────────────────────────────────
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onScreencastChange = exports.getScreencastInfo = exports.setOrientation = exports.setSecureScreen = exports.immersiveMode = exports.keepScreenOn = exports.onVolumeChange = exports.setVolumeHUDVisible = exports.getVolume = exports.setVolume = exports.onBrightnessChange = exports.getBrightness = exports.setBrightness = exports.setStatusBarVisibility = exports.setStatusBarStyle = exports.setNavigationBarBehavior = exports.setNavigationBarStyle = exports.setNavigationBarButtonStyle = exports.setNavigationBarVisibility = exports.setNavigationBarColor = void 0;
+exports.onAppCastChange = exports.getAppCastInfo = exports.disconnectAppCast = exports.connectAppCast = exports.stopAppCastScan = exports.startAppCastScan = exports.onScreencastChange = exports.getScreencastInfo = exports.onSystemScreencastChange = exports.getSystemScreencastInfo = exports.setOrientation = exports.setSecureScreen = exports.immersiveMode = exports.keepScreenOn = exports.onVolumeChange = exports.setVolumeHUDVisible = exports.getVolume = exports.setVolume = exports.onBrightnessChange = exports.getBrightness = exports.setBrightness = exports.setStatusBarVisibility = exports.setStatusBarStyle = exports.setStatusBarColor = exports.setNavigationBarBehavior = exports.setNavigationBarStyle = exports.setNavigationBarButtonStyle = exports.setNavigationBarVisibility = exports.setNavigationBarColor = void 0;
 const react_native_1 = require("react-native");
 const { SystemBar: Native } = react_native_1.NativeModules;
 const isAndroid = react_native_1.Platform.OS === "android";
@@ -17,20 +17,40 @@ const androidOnly = (name) => {
     }
     return true;
 };
-const checkNative = () => {
+const checkNative = (method) => {
     if (!Native)
         throw new Error("[rn-system-bar] Native module not found. Rebuild your project.");
+    if (method && typeof Native[method] !== "function")
+        throw new Error(`[rn-system-bar] Native.${method} not found. Rebuild your project.`);
 };
 // ═══════════════════════════════════════════════
 //  NAVIGATION BAR  (Android — 100% native)
 // ═══════════════════════════════════════════════
+/**
+ * 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
+ */
 const setNavigationBarColor = (color) => {
     if (!androidOnly("setNavigationBarColor"))
         return;
     checkNative();
-    Native.setNavigationBarColor(color);
+    Native.setNavigationBarColor(color); // Kotlin handles the special values
 };
 exports.setNavigationBarColor = setNavigationBarColor;
+/**
+ * Hide or show the navigation bar.
+ *
+ * @param mode `"visible"` | `"hidden"`
+ */
 const setNavigationBarVisibility = (mode) => {
     if (!androidOnly("setNavigationBarVisibility"))
         return;
@@ -62,6 +82,21 @@ exports.setNavigationBarBehavior = setNavigationBarBehavior;
 // ═══════════════════════════════════════════════
 //  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
+ */
+const setStatusBarColor = (color) => {
+    if (!androidOnly("setStatusBarColor"))
+        return;
+    checkNative();
+    Native.setStatusBarColor(color);
+};
+exports.setStatusBarColor = setStatusBarColor;
 const setStatusBarStyle = (style) => {
     checkNative();
     Native.setStatusBarStyle(style);
@@ -86,7 +121,7 @@ const getBrightness = () => {
 };
 exports.getBrightness = getBrightness;
 /**
- * Subscribe to system brightness changes (polls every 500ms on Android).
+ * Subscribe to system brightness changes (polls every 500 ms on Android).
  * @returns unsubscribe function
  */
 const onBrightnessChange = (callback) => {
@@ -166,21 +201,145 @@ const setOrientation = (mode) => {
 };
 exports.setOrientation = setOrientation;
 // ═══════════════════════════════════════════════
-//  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).
+ */
+const getSystemScreencastInfo = () => {
+    if (!Native || typeof Native.getSystemScreencastInfo !== "function") {
+        if (__DEV__)
+            console.warn("[rn-system-bar] getSystemScreencastInfo not available on this build.");
+        return Promise.resolve({
+            isCasting: false,
+            displayName: null,
+            displays: [],
+        });
+    }
+    return Native.getSystemScreencastInfo();
+};
+exports.getSystemScreencastInfo = getSystemScreencastInfo;
+/**
+ * Subscribe to system external-display changes.
+ * Fires when an HDMI / Miracast / AirPlay display connects or disconnects.
+ * @returns unsubscribe function
+ */
+const onSystemScreencastChange = (callback) => {
+    checkNative();
+    const { DeviceEventEmitter } = require("react-native");
+    Native.startSystemScreencastListener();
+    const sub = DeviceEventEmitter.addListener("SystemBar_SystemScreencastChange", callback);
+    return () => {
+        sub.remove();
+        Native.stopSystemScreencastListener();
+    };
+};
+exports.onSystemScreencastChange = onSystemScreencastChange;
+// ─────────────────────────────────────────────
+//  Legacy aliases (backward compat)
+// ─────────────────────────────────────────────
+/** @deprecated Use getSystemScreencastInfo() */
+exports.getScreencastInfo = exports.getSystemScreencastInfo;
+/** @deprecated Use onSystemScreencastChange() */
+exports.onScreencastChange = exports.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()
 // ═══════════════════════════════════════════════
-const getScreencastInfo = () => {
+/**
+ * Start scanning for nearby castable devices (Chromecast, TV, etc.).
+ * Listen for results via `onAppCastChange`.
+ * Android: uses MediaRouter. iOS: no-op (AirPlay is system-only).
+ */
+const startAppCastScan = () => {
+    if (!androidOnly("startAppCastScan"))
+        return;
+    checkNative();
+    Native.startAppCastScan();
+};
+exports.startAppCastScan = startAppCastScan;
+/**
+ * Stop the device discovery scan.
+ */
+const stopAppCastScan = () => {
+    if (!androidOnly("stopAppCastScan"))
+        return;
+    checkNative();
+    Native.stopAppCastScan();
+};
+exports.stopAppCastScan = 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.
+ */
+const connectAppCast = (deviceId, pairingPin) => {
+    if (!androidOnly("connectAppCast"))
+        return;
+    checkNative();
+    Native.connectAppCast(deviceId, pairingPin !== null && pairingPin !== void 0 ? pairingPin : null);
+};
+exports.connectAppCast = connectAppCast;
+/**
+ * Disconnect the active in-app cast session.
+ */
+const disconnectAppCast = () => {
+    if (!androidOnly("disconnectAppCast"))
+        return;
+    checkNative();
+    Native.disconnectAppCast();
+};
+exports.disconnectAppCast = disconnectAppCast;
+/**
+ * Get the current in-app cast snapshot (state + device list).
+ */
+const getAppCastInfo = () => {
+    if (!isAndroid) {
+        return Promise.resolve({
+            state: "idle",
+            devices: [],
+            connectedDevice: null,
+            error: null,
+        });
+    }
     checkNative();
-    return Native.getScreencastInfo();
+    return Native.getAppCastInfo();
 };
-exports.getScreencastInfo = getScreencastInfo;
-const onScreencastChange = (callback) => {
+exports.getAppCastInfo = getAppCastInfo;
+/**
+ * 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
+ */
+const onAppCastChange = (callback) => {
+    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();
     };
 };
-exports.onScreencastChange = onScreencastChange;
+exports.onAppCastChange = onAppCastChange;

package/lib/src/types.d.ts

@@ -3,6 +3,37 @@ export type NavigationBarButtonStyle = "light" | "dark";
 export type NavigationBarStyle = "auto" | "inverted" | "light" | "dark";
 export type NavigationBarVisibility = "visible" | "hidden";
 export type StatusBarStyle = "light" | "dark";
+/**
+ * Navigation bar color value.
+ *
+ * - Any CSS hex string  →  solid colour      e.g. "#1a1a2e", "#000"
+ * - `"transparent"`     →  fully transparent  (FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS +
+ *                           transparent color; content draws behind bar)
+ * - `"translucent"`     →  semi-transparent   (FLAG_TRANSLUCENT_NAVIGATION)
+ */
+export type NavigationBarColorValue = string | "transparent" | "translucent";
+/**
+ * Status bar background color value.
+ *
+ * - Any CSS hex string  →  solid colour
+ * - `"transparent"`     →  fully transparent  (draws behind content)
+ * - `"translucent"`     →  semi-transparent
+ */
+export type StatusBarColorValue = string | "transparent" | "translucent";
+/**
+ * "system"  → follow the OS Appearance (dark/light).
+ * "dark"    → force dark.
+ * "light"   → force light.
+ */
+export type ThemeMode = "system" | "dark" | "light";
+export interface ThemeState {
+    /** Resolved dark-mode flag. Always a concrete boolean. */
+    isDark: boolean;
+    /** Currently active override ("system" = following OS). */
+    mode: ThemeMode;
+    /** Set the override mode. Pass "system" to revert to OS. */
+    setMode: (mode: ThemeMode) => void;
+}
 export type Orientation = "portrait" | "landscape" | "landscape-left" | "landscape-right" | "auto";
 export type VolumeStream = "music" | "ring" | "notification" | "alarm" | "system";
 export interface ScreencastDisplay {
@@ -10,8 +41,37 @@ export interface ScreencastDisplay {
     name: string;
     isValid: boolean;
 }
-export interface ScreencastInfo {
+/** Result of getSystemScreencastInfo() — physical/HDMI/Miracast external display. */
+export interface SystemScreencastInfo {
     isCasting: boolean;
     displayName: string | null;
     displays: ScreencastDisplay[];
 }
+/** Connection state of the in-app cast session. */
+export type AppCastState = "idle" | "scanning" | "connecting" | "connected" | "disconnecting";
+/** A discovered castable device (TV, Chromecast, etc.). */
+export interface AppCastDevice {
+    /** Unique route ID from MediaRouter. */
+    id: string;
+    /** Human-readable device name e.g. "Living Room TV". */
+    name: string;
+    /** Device description / model string (may be null). */
+    description: string | null;
+    /** Signal strength 0–100, or null if unavailable. */
+    signalStrength: number | null;
+    /** Whether a pairing/PIN step is required. */
+    requiresPairing: boolean;
+}
+/** Full snapshot of in-app cast state. */
+export interface AppCastInfo {
+    state: AppCastState;
+    /** Devices found during the last scan. */
+    devices: AppCastDevice[];
+    /** The device currently connected (or connecting). */
+    connectedDevice: AppCastDevice | null;
+    /** Error message from the last failed operation. */
+    error: string | null;
+}
+/** @deprecated Use SystemScreencastInfo */
+export interface ScreencastInfo extends SystemScreencastInfo {
+}

package/lib/src/useSystemBar.d.ts

@@ -1,11 +1,11 @@
-import type { NavigationBarBehavior, NavigationBarButtonStyle, NavigationBarStyle, NavigationBarVisibility, Orientation, ScreencastInfo, StatusBarStyle } from "./types";
+import type { AppCastInfo, NavigationBarBehavior, NavigationBarButtonStyle, NavigationBarColorValue, NavigationBarStyle, NavigationBarVisibility, Orientation, ScreencastInfo, StatusBarColorValue, StatusBarStyle, SystemScreencastInfo, ThemeMode, ThemeState } from "./types";
 export interface SystemBarConfig {
-    navigationBarColor?: string;
+    navigationBarColor?: NavigationBarColorValue;
     navigationBarVisibility?: NavigationBarVisibility;
     navigationBarButtonStyle?: NavigationBarButtonStyle;
     navigationBarStyle?: NavigationBarStyle;
     navigationBarBehavior?: NavigationBarBehavior;
-    statusBarColor?: string;
+    statusBarColor?: StatusBarColorValue;
     statusBarStyle?: StatusBarStyle;
     statusBarVisible?: boolean;
     statusBarAnimated?: boolean;
@@ -16,4 +16,35 @@ export interface SystemBarConfig {
     secureScreen?: boolean;
 }
 export declare const useSystemBar: (config: SystemBarConfig) => void;
+export interface ThemedSystemBarConfig {
+    /** Config applied when the resolved theme is DARK. */
+    dark?: SystemBarConfig;
+    /** Config applied when the resolved theme is LIGHT. */
+    light?: SystemBarConfig;
+    /**
+     * Static config merged under both themes.
+     * Theme-specific (dark/light) values always win.
+     */
+    base?: SystemBarConfig;
+}
+export declare const useThemeSystemBar: (config: ThemedSystemBarConfig) => ThemeState;
+export { useTheme } from "./useTheme";
+export type { ThemeMode, ThemeState };
+export declare const useSystemScreencast: () => SystemScreencastInfo;
+/** @deprecated Renamed to useSystemScreencast() */
 export declare const useScreencast: () => ScreencastInfo;
+export interface UseAppCastReturn extends AppCastInfo {
+    /** Start scanning for nearby castable devices (TV, Chromecast, etc.). */
+    scan: () => void;
+    /** Stop the device discovery scan. */
+    stopScan: () => void;
+    /**
+     * Connect to a discovered device and begin casting this app's screen.
+     * @param deviceId   The `id` field from `AppCastDevice`.
+     * @param pairingPin Optional PIN string if `requiresPairing` is true.
+     */
+    connect: (deviceId: string, pairingPin?: string) => void;
+    /** End the active cast session and return to idle. */
+    disconnect: () => void;
+}
+export declare const useAppCast: () => UseAppCastReturn;

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,96 @@ 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.useSystemScreencast = useSystemScreencast;
+/** @deprecated Renamed to useSystemScreencast() */
+// useSystemBar.ts — useScreencast
+const useScreencast = () => {
+    const [info, setInfo] = (0, react_1.useState)({
+        isCasting: false,
+        displayName: null,
+        displays: [],
+    });
+    (0, react_1.useEffect)(() => {
+        // Guard: if method doesn't exist on native module, bail silently
+        SystemBar.getScreencastInfo()
+            .then(setInfo)
+            .catch(() => {
+            if (__DEV__)
+                console.warn("[rn-system-bar] getSystemScreencastInfo not available. Rebuild native.");
+        });
+        let unsub;
+        try {
+            unsub = SystemBar.onScreencastChange(setInfo);
+        }
+        catch (_a) {
+            // native listener not available
+        }
+        return () => unsub === null || unsub === void 0 ? void 0 : unsub();
+    }, []);
+    return info;
+};
 exports.useScreencast = useScreencast;
+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.2.0",
   "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": [