Add refresh control and RN fixes

Author: roncohen

.gitignore

@@ -20,6 +20,7 @@ dist-ssr
 !.vscode/settings.json
 .idea
 .DS_Store
+.expo/
 *.suo
 *.ntvs*
 *.njsproj

package.json

@@ -25,10 +25,16 @@
   "devDependencies": {
     "lerna": "^8.1.3",
     "prettier": "^3.5.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "typedoc": "0.27.6",
     "typedoc-plugin-frontmatter": "^1.1.2",
     "typedoc-plugin-markdown": "^4.4.2",
     "typedoc-plugin-mdn-links": "^4.0.7",
     "typescript": "^5.7.3"
+  },
+  "resolutions": {
+    "react": "19.1.0",
+    "react-dom": "19.1.0"
   }
 }

packages/browser-sdk/package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc --project tsconfig.build.json && vite build",
+    "build": "tsc --project tsconfig.build.json && vite build && node scripts/create-native-entry.cjs",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:e2e": "yarn build && playwright test",
@@ -29,8 +29,10 @@
   ],
   "main": "./dist/reflag-browser-sdk.umd.js",
   "types": "./dist/types/src/index.d.ts",
+  "react-native": "./dist/index.native.js",
   "exports": {
     ".": {
+      "react-native": "./dist/index.native.js",
       "import": "./dist/reflag-browser-sdk.mjs",
       "require": "./dist/reflag-browser-sdk.umd.js",
       "types": "./dist/types/src/index.d.ts"

packages/browser-sdk/scripts/create-native-entry.cjs

@@ -0,0 +1,14 @@
+const fs = require("fs");
+const path = require("path");
+
+const distDir = path.join(__dirname, "..", "dist");
+const outFile = path.join(distDir, "index.native.js");
+
+if (!fs.existsSync(distDir)) {
+  fs.mkdirSync(distDir, { recursive: true });
+}
+
+const contents = `"use strict";\nmodule.exports = require("./reflag-browser-sdk.umd.js");\n`;
+fs.writeFileSync(outFile, contents);
+
+console.log("Wrote", outFile);

packages/browser-sdk/src/client.ts

@@ -26,10 +26,14 @@ import { ReflagContext, ReflagDeprecatedContext } from "./context";
 import { HookArgs, HooksManager, State } from "./hooksManager";
 import { HttpClient } from "./httpClient";
 import { Logger, loggerWithPrefix, quietConsoleLogger } from "./logger";
+import { StorageAdapter } from "./storage";
 import { showToolbarToggle } from "./toolbar";
 
 const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
 const isNode = typeof document === "undefined"; // deno supports "window" but not "document" according to https://remix.run/docs/en/main/guides/gotchas
+const isReactNative =
+  typeof navigator !== "undefined" &&
+  /ReactNative/i.test(navigator.userAgent ?? "");
 
 /**
  * (Internal) User context.
@@ -297,6 +301,12 @@ export type InitOptions = ReflagDeprecatedContext & {
    * Pre-fetched flags to be used instead of fetching them from the server.
    */
   bootstrappedFlags?: RawFlags;
+
+  /**
+   * Optional storage adapter used for caching flags and overrides.
+   * Useful for React Native (AsyncStorage).
+   */
+  storage?: StorageAdapter;
 };
 
 const defaultConfig: Config = {
@@ -366,7 +376,9 @@ export interface Flag {
 
 function shouldShowToolbar(opts: InitOptions) {
   const toolbarOpts = opts.toolbar;
-  if (typeof window === "undefined") return false;
+  if (typeof window === "undefined" || typeof window.location === "undefined") {
+    return false;
+  }
   if (typeof toolbarOpts === "boolean") return toolbarOpts;
   if (typeof toolbarOpts?.show === "boolean") return toolbarOpts.show;
   return window.location.hostname === "localhost";
@@ -439,13 +451,15 @@ export class ReflagClient {
         timeoutMs: opts.timeoutMs,
         fallbackFlags: opts.fallbackFlags,
         offline: this.config.offline,
+        storage: opts.storage,
       },
     );
 
     if (
       !this.config.offline &&
       this.context?.user &&
       !isNode && // do not prompt on server-side
+      !isReactNative && // disable SSE-based auto feedback in React Native
       opts?.feedback?.enableAutoFeedback !== false // default to on
     ) {
       if (isMobile) {
@@ -870,6 +884,13 @@ export class ReflagClient {
     return this.flagsClient.getFlags();
   }
 
+  /**
+   * Force refresh flags from the API, bypassing cache.
+   */
+  refresh() {
+    return this.flagsClient.refreshFlags();
+  }
+
   /**
    * @deprecated Use `getFlag` instead.
    */

packages/browser-sdk/src/config.ts

@@ -10,4 +10,5 @@ export const SDK_VERSION = `browser-sdk/${version}`;
 export const FLAG_EVENTS_PER_MIN = 1;
 export const FLAGS_EXPIRE_MS = 30 * 24 * 60 * 60 * 1000; // expire entirely after 30 days
 
-export const IS_SERVER = typeof window === "undefined";
+export const IS_SERVER =
+  typeof window === "undefined" || typeof document === "undefined";

packages/browser-sdk/src/feedback/ui/index.native.ts

@@ -0,0 +1,17 @@
+import { Position } from "../../ui/types";
+
+import { OpenFeedbackFormOptions } from "./types";
+
+export const DEFAULT_POSITION: Position = {
+  type: "DIALOG",
+  placement: "bottom-right",
+};
+
+export function openFeedbackForm(_options: OpenFeedbackFormOptions): void {
+  // React Native doesn't support the web feedback UI.
+  // Users should implement their own UI and use `feedback` or `useSendFeedback`.
+  console.warn(
+    "[Reflag] Feedback UI is not supported in React Native. " +
+      "Use `feedback` or `useSendFeedback` with a custom UI instead.",
+  );
+}

packages/browser-sdk/src/flag/flagCache.ts

@@ -1,9 +1,6 @@
-import { RawFlags } from "./flags";
+import { StorageAdapter } from "../storage";
 
-interface StorageItem {
-  get(): string | null;
-  set(value: string): void;
-}
+import { RawFlags } from "./flags";
 
 interface cacheEntry {
   expireAt: number;
@@ -52,25 +49,29 @@ export interface CacheResult {
 }
 
 export class FlagCache {
-  private storage: StorageItem;
+  private storage: StorageAdapter | null;
+  private readonly storageKey: string;
   private readonly staleTimeMs: number;
   private readonly expireTimeMs: number;
 
   constructor({
     storage,
+    storageKey,
     staleTimeMs,
     expireTimeMs,
   }: {
-    storage: StorageItem;
+    storage: StorageAdapter | null;
+    storageKey: string;
     staleTimeMs: number;
     expireTimeMs: number;
   }) {
     this.storage = storage;
+    this.storageKey = storageKey;
     this.staleTimeMs = staleTimeMs;
     this.expireTimeMs = expireTimeMs;
   }
 
-  set(
+  async set(
     key: string,
     {
       flags,
@@ -81,7 +82,8 @@ export class FlagCache {
     let cacheData: CacheData = {};
 
     try {
-      const cachedResponseRaw = this.storage.get();
+      if (!this.storage) return cacheData;
+      const cachedResponseRaw = await this.storage.getItem(this.storageKey);
       if (cachedResponseRaw) {
         cacheData = validateCacheData(JSON.parse(cachedResponseRaw)) ?? {};
       }
@@ -99,14 +101,16 @@ export class FlagCache {
       Object.entries(cacheData).filter(([_k, v]) => v.expireAt > Date.now()),
     );
 
-    this.storage.set(JSON.stringify(cacheData));
+    if (!this.storage) return cacheData;
+    await this.storage.setItem(this.storageKey, JSON.stringify(cacheData));
 
     return cacheData;
   }
 
-  get(key: string): CacheResult | undefined {
+  async get(key: string): Promise<CacheResult | undefined> {
     try {
-      const cachedResponseRaw = this.storage.get();
+      if (!this.storage) return;
+      const cachedResponseRaw = await this.storage.getItem(this.storageKey);
       if (cachedResponseRaw) {
         const cachedResponse = validateCacheData(JSON.parse(cachedResponseRaw));
         if (