rn-system-bar 3.0.3 → 3.1.0

package/src/useSystemBar.ts

@@ -0,0 +1,191 @@
+// ─────────────────────────────────────────────
+//  rn-system-bar · useSystemBar.ts  v5
+//  Hooks: useSystemBar, useBattery, useNetwork,
+//         useScreencast, useFontScale
+// ─────────────────────────────────────────────
+
+import { useEffect, useRef, useState } from "react";
+import type {
+  BatteryInfo,
+  FontScaleInfo,
+  HapticPattern,
+  NavigationBarBehavior,
+  NavigationBarButtonStyle,
+  NavigationBarStyle,
+  NavigationBarVisibility,
+  NetworkInfo,
+  Orientation,
+  ScreencastInfo,
+  StatusBarStyle,
+} from "./types";
+import * as SystemBar from "./SystemBar";
+
+// ─────────────────────────────────────────────
+//  useSystemBar — apply config safely
+// ─────────────────────────────────────────────
+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) p.push(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]);
+};
+
+// ─────────────────────────────────────────────
+//  🆕 useBattery
+// ─────────────────────────────────────────────
+/**
+ * Reactive battery info. Auto-updates on level/state changes.
+ * @example
+ * const { level, isCharging, isLow, state } = useBattery();
+ */
+export const useBattery = () => {
+  const [info, setInfo] = useState<BatteryInfo>({
+    level: -1,
+    state: "unknown",
+    isCharging: false,
+    isLow: false,
+  });
+
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    SystemBar.getBatteryInfo().then(setInfo).catch(() => {});
+    unsub = SystemBar.onBatteryChange(setInfo);
+    return () => unsub?.();
+  }, []);
+
+  return info;
+};
+
+// ─────────────────────────────────────────────
+//  🆕 useNetwork
+// ─────────────────────────────────────────────
+/**
+ * Reactive network info. Auto-updates on connection changes.
+ * @example
+ * const { isConnected, type, isAirplaneMode } = useNetwork();
+ */
+export const useNetwork = () => {
+  const [info, setInfo] = useState<NetworkInfo>({
+    type: "unknown",
+    isConnected: false,
+    isAirplaneMode: false,
+    ssid: null,
+    cellularGeneration: null,
+  });
+
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    SystemBar.getNetworkInfo().then(setInfo).catch(() => {});
+    unsub = SystemBar.onNetworkChange(setInfo);
+    return () => unsub?.();
+  }, []);
+
+  return info;
+};
+
+// ─────────────────────────────────────────────
+//  🆕 useScreencast
+// ─────────────────────────────────────────────
+/**
+ * Reactive screencast detection.
+ * @example
+ * const { isCasting, displayName } = useScreencast();
+ */
+export const useScreencast = () => {
+  const [info, setInfo] = useState<ScreencastInfo>({
+    isCasting: false,
+    displayName: null,
+  });
+
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    SystemBar.getScreencastInfo().then(setInfo).catch(() => {});
+    unsub = SystemBar.onScreencastChange(setInfo);
+    return () => unsub?.();
+  }, []);
+
+  return info;
+};
+
+// ─────────────────────────────────────────────
+//  🆕 useFontScale
+// ─────────────────────────────────────────────
+/**
+ * Reactive font scale info. Updates when user changes system text size.
+ * @example
+ * const { fontScale, density } = useFontScale();
+ */
+export const useFontScale = () => {
+  const [info, setInfo] = useState<FontScaleInfo>({
+    fontScale: 1.0,
+    density: 1.0,
+  });
+
+  useEffect(() => {
+    let unsub: (() => void) | undefined;
+    SystemBar.getFontScaleInfo().then(setInfo).catch(() => {});
+    unsub = SystemBar.onFontScaleChange(setInfo);
+    return () => unsub?.();
+  }, []);
+
+  return info;
+};
+
+// ─────────────────────────────────────────────
+//  🆕 useHaptic
+// ─────────────────────────────────────────────
+/**
+ * Returns a stable haptic trigger function.
+ * @example
+ * const triggerHaptic = useHaptic();
+ * <Button onPress={() => triggerHaptic("success")} />
+ */
+export const useHaptic = () => {
+  return (pattern: HapticPattern) => SystemBar.haptic(pattern);
+};