expo-app-blocker 0.1.6 → 0.1.7

package/README.md

@@ -73,7 +73,8 @@ Add the plugin to your `app.json`:
             "primaryButtonLabel": "Earn Free Time",
             "secondaryButtonLabel": "Not now",
             "primaryButtonColor": "#fb6107",
-            "background": "#f6f6f6",
+            "backgroundColor": "#f6f6f6",
+            "backgroundBlurStyle": "systemThickMaterialLight",
             "icon": "./assets/shield-icon.png"
           }
         }
@@ -95,7 +96,8 @@ Add the plugin to your `app.json`:
 | `ios.shield.primaryButtonColor` | `string` | `"#fb6107"` | Primary button background color (hex) |
 | `ios.shield.titleColor` | `string` | `"#111111"` | Title text color (hex) |
 | `ios.shield.subtitleColor` | `string` | `"#737373"` | Subtitle text color (hex) |
-| `ios.shield.background` | `"blur"\|string` | `"blur"` | `"blur"` for frosted glass effect, or a hex color (e.g. `"#f6f6f6"`) for a solid background |
+| `ios.shield.backgroundColor` | `string\|null` | `null` | Solid background color (hex). e.g. `"#f6f6f6"` for light, `"#1a1a2e"` for dark |
+| `ios.shield.backgroundBlurStyle` | `string\|null` | `"systemThickMaterial"` | Blur style. Auto-defaults when no backgroundColor. See below for all options |
 | `ios.shield.icon` | `string` | SF Symbol | Path to custom shield icon PNG (relative to project root, e.g. `"./assets/shield-icon.png"`) |
 | `android.notificationTitle` | `string` | `"App Blocked"` | Notification title |
 | `android.notificationText` | `string` | `"{appName} is blocked."` | Notification text |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-app-blocker",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Expo module for cross-platform app blocking. Android: UsageStatsManager + Overlay. iOS: Screen Time API (FamilyControls + ManagedSettings + DeviceActivity).",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/plugin/src/index.js

@@ -186,9 +186,35 @@ function withAppBlockerIOS(config, pluginConfig) {
       const primaryColor = hexToRgb(shield.primaryButtonColor || "#fb6107");
       const titleColor = hexToRgb(shield.titleColor || "#111111");
       const subtitleColor = hexToRgb(shield.subtitleColor || "#737373");
-      // background: "blur" (default) or a hex color string
-      const bgRaw = shield.background ?? shield.backgroundColor ?? null;
-      const bgColor = (bgRaw && bgRaw !== "blur") ? hexToRgb(bgRaw) : null;
+      // Background color (solid) - separate from blur
+      const bgColorHex = shield.backgroundColor || null;
+      const bgColor = bgColorHex ? hexToRgb(bgColorHex) : null;
+
+      // Blur style mapping
+      const blurStyleMap = {
+        "systemUltraThinMaterial": ".systemUltraThinMaterial",
+        "systemThinMaterial": ".systemThinMaterial",
+        "systemMaterial": ".systemMaterial",
+        "systemThickMaterial": ".systemThickMaterial",
+        "systemChromeMaterial": ".systemChromeMaterial",
+        "systemUltraThinMaterialLight": ".systemUltraThinMaterialLight",
+        "systemThinMaterialLight": ".systemThinMaterialLight",
+        "systemMaterialLight": ".systemMaterialLight",
+        "systemThickMaterialLight": ".systemThickMaterialLight",
+        "systemChromeMaterialLight": ".systemChromeMaterialLight",
+        "systemUltraThinMaterialDark": ".systemUltraThinMaterialDark",
+        "systemThinMaterialDark": ".systemThinMaterialDark",
+        "systemMaterialDark": ".systemMaterialDark",
+        "systemThickMaterialDark": ".systemThickMaterialDark",
+        "systemChromeMaterialDark": ".systemChromeMaterialDark",
+        "regular": ".regular",
+        "prominent": ".prominent",
+        "light": ".light",
+        "dark": ".dark",
+        "extraLight": ".extraLight",
+      };
+      const blurRaw = shield.backgroundBlurStyle || (bgColorHex ? null : "systemThickMaterial");
+      const blurSwift = blurRaw && blurStyleMap[blurRaw] ? blurStyleMap[blurRaw] : null;
 
       // All placeholder replacements
       const replacements = {
@@ -206,9 +232,10 @@ function withAppBlockerIOS(config, pluginConfig) {
         "SHIELD_SUBTITLE_R_PLACEHOLDER": subtitleColor.r,
         "SHIELD_SUBTITLE_G_PLACEHOLDER": subtitleColor.g,
         "SHIELD_SUBTITLE_B_PLACEHOLDER": subtitleColor.b,
-        "SHIELD_BG_PLACEHOLDER": bgColor
+        "SHIELD_BG_COLOR_PLACEHOLDER": bgColor
           ? `UIColor(red: ${bgColor.r}, green: ${bgColor.g}, blue: ${bgColor.b}, alpha: 1.0)`
           : "nil",
+        "SHIELD_BLUR_STYLE_PLACEHOLDER": blurSwift || "nil",
       };
 
       // Inject all placeholders into extension Swift files

package/src/ExpoAppBlocker.types.ts

@@ -81,11 +81,31 @@ export interface ShieldConfig {
   /** Subtitle text color (hex). Default: "#737373" */
   subtitleColor?: string;
   /**
-   * Background style. Two modes:
-   * - "blur" (default): Frosted glass effect over the blocked app (iOS systemThickMaterial)
-   * - A hex color string (e.g. "#f6f6f6"): Solid color background
+   * Solid background color (hex). Optional.
+   * When set, the shield uses this color instead of (or in addition to) a blur.
+   * Example: "#f6f6f6" for light gray, "#1a1a2e" for dark.
    */
-  background?: "blur" | string;
+  backgroundColor?: string | null;
+  /**
+   * Background blur style. Default: "systemThickMaterial" (when no backgroundColor is set).
+   * Set to null to disable blur (when using backgroundColor only).
+   * Both can be combined - blur renders behind the color.
+   *
+   * Adaptive (light/dark auto):
+   * - "systemUltraThinMaterial", "systemThinMaterial", "systemMaterial",
+   *   "systemThickMaterial", "systemChromeMaterial"
+   *
+   * Light only:
+   * - "systemUltraThinMaterialLight", "systemThinMaterialLight", "systemMaterialLight",
+   *   "systemThickMaterialLight", "systemChromeMaterialLight"
+   *
+   * Dark only:
+   * - "systemUltraThinMaterialDark", "systemThinMaterialDark", "systemMaterialDark",
+   *   "systemThickMaterialDark", "systemChromeMaterialDark"
+   *
+   * Legacy: "regular", "prominent", "light", "dark", "extraLight"
+   */
+  backgroundBlurStyle?: string | null;
   /** Path to shield icon image (PNG). Optional. */
   icon?: string;
 }

package/targets/ShieldConfiguration/ShieldConfigurationExtension.swift

@@ -12,7 +12,8 @@ class ShieldConfigurationExtension: ShieldConfigurationDataSource {
   private let shieldPrimaryButtonLabel = "SHIELD_PRIMARY_BUTTON_PLACEHOLDER"
   private let shieldSecondaryButtonLabel = "SHIELD_SECONDARY_BUTTON_PLACEHOLDER"
   private let shieldPrimaryButtonColor = UIColor(red: SHIELD_PRIMARY_R_PLACEHOLDER, green: SHIELD_PRIMARY_G_PLACEHOLDER, blue: SHIELD_PRIMARY_B_PLACEHOLDER, alpha: 1.0)
-  private let shieldBackgroundColor: UIColor? = SHIELD_BG_PLACEHOLDER
+  private let shieldBackgroundColor: UIColor? = SHIELD_BG_COLOR_PLACEHOLDER
+  private let shieldBlurStyle: UIBlurEffect.Style? = SHIELD_BLUR_STYLE_PLACEHOLDER
   private let shieldTitleColor = UIColor(red: SHIELD_TITLE_R_PLACEHOLDER, green: SHIELD_TITLE_G_PLACEHOLDER, blue: SHIELD_TITLE_B_PLACEHOLDER, alpha: 1.0)
   private let shieldSubtitleColor = UIColor(red: SHIELD_SUBTITLE_R_PLACEHOLDER, green: SHIELD_SUBTITLE_G_PLACEHOLDER, blue: SHIELD_SUBTITLE_B_PLACEHOLDER, alpha: 1.0)
 
@@ -40,7 +41,7 @@ class ShieldConfigurationExtension: ShieldConfigurationDataSource {
   private func makeConfig(appName: String) -> ShieldConfiguration {
     if isTemporarilyUnlocked() {
       return ShieldConfiguration(
-        backgroundBlurStyle: shieldBackgroundColor == nil ? .systemThickMaterial : nil,
+        backgroundBlurStyle: shieldBlurStyle,
         backgroundColor: shieldBackgroundColor,
         icon: mascotIcon,
         title: ShieldConfiguration.Label(text: "Almost there!", color: shieldTitleColor),