@mrmeg/expo-ui 0.2.0 → 0.3.0

package/dist/state/themeStore.d.ts

@@ -11,3 +11,4 @@ export declare function resolveThemePreference(userTheme: ThemePreference, syste
 export declare const useThemeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeStore>>;
 export declare function syncSystemTheme(): void;
 export declare function startSystemThemeListener(): () => void;
+export declare function syncThemeFromEnvironment(): () => void;

package/dist/state/themeStore.js

@@ -13,7 +13,9 @@ function getSystemTheme() {
 }
 export const useThemeStore = create((set) => ({
     userTheme: "system",
-    systemTheme: getSystemTheme(),
+    // Always start with "light" so SSR and the first client render agree.
+    // Real values are populated by `syncThemeFromEnvironment()` after mount.
+    systemTheme: "light",
     setTheme: (theme) => {
         set({
             userTheme: theme,
@@ -89,6 +91,18 @@ export function startSystemThemeListener() {
     };
     return stopSystemThemeListener;
 }
-// Load saved theme on store creation
-useThemeStore.getState().loadTheme();
-startSystemThemeListener();
+// Single entry point for host apps to populate the store from the
+// environment (persisted preference + OS color scheme listener). Safe to
+// call multiple times — `startSystemThemeListener` is idempotent — and
+// returns the unsubscribe so it can be used directly inside `useEffect`.
+export function syncThemeFromEnvironment() {
+    useThemeStore.getState().loadTheme();
+    return startSystemThemeListener();
+}
+// Native has no SSR mismatch concern, so keep the historical auto-init
+// behavior there. On web the host app must call `syncThemeFromEnvironment()`
+// from a top-level `useEffect` to avoid hydration mismatches.
+if (Platform.OS !== "web") {
+    useThemeStore.getState().loadTheme();
+    startSystemThemeListener();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [