@userflow-tech/react-native 0.3.1 → 0.4.0

package/src/surfaces/BannerSurface.tsx

@@ -61,11 +61,13 @@ export function BannerSurface({
     if (!webView) {
       if (!warnedMissingWebView) {
         warnedMissingWebView = true;
-        console.warn(
-          'Userflow: WebView banner requires react-native-webview in the native binary. ' +
-            'Add it to your app (e.g. npx expo install react-native-webview), run pod install under ios/, ' +
-            'then rebuild with expo run:ios (not Expo Go). Falling back to the native banner bar.',
-        );
+        if (__DEV__) {
+          console.warn(
+            'Userflow: WebView banner requires react-native-webview in the native binary. ' +
+              'Add it to your app (e.g. npx expo install react-native-webview), run pod install under ios/, ' +
+              'then rebuild with expo run:ios (not Expo Go). Falling back to the native banner bar.',
+          );
+        }
       }
       return <BannerBar session={session} onActions={onActions} onDismiss={onDismiss} />;
     }

package/src/surfaces/safeArea.ts

@@ -48,6 +48,11 @@ function loadSafeAreaModule(): SafeAreaModule | null {
   return cachedModule;
 }
 
+/** True when the optional peer's JavaScript package can be loaded. */
+export function isSafeAreaContextInstalled(): boolean {
+  return loadSafeAreaModule() != null;
+}
+
 function copyInsets(insets: Partial<EdgeInsets> | null | undefined): EdgeInsets | null {
   if (!insets) return null;
   const top = insets.top;

package/src/version.ts

@@ -1,2 +1,2 @@
 /** Generated by scripts/write-version.mjs — do not edit. */
-export const SDK_VERSION = '0.3.1';
+export const SDK_VERSION = '0.4.0';

package/vendor/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userflow-tech/core",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Userflow React Native SDK core — platform-agnostic engine and protocol client.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",

package/vendor/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userflow-tech/protocol",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Userflow React Native SDK protocol — wire contracts and shared types.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",

package/docs/webview-custom-banner-poc.md

@@ -1,64 +0,0 @@
-# WebView banner POC (React Native)
-
-Proof of concept for React Native banners that use **Evaluate JavaScript** on buttons—the same `window.userflow` bridge and (when the WebView path is used) web banner DOM + theme **custom.css** as userflow.js on web.
-
-## Enabling
-
-1. **Custom CSS (theme):** Publish custom CSS in the builder (**Edit custom CSS**). When the theme has a `cssVersion`, banners use the WebView renderer and load `custom.css` from the CDN (same URL as userflow.js iframes). Use `.userflow-custom-container-<name>` on container blocks and `.userflow-custom-button-<name>` as button appearance in the builder.
-2. **Evaluate JavaScript:** Use a button whose **only** action is **Evaluate JavaScript** if the script should auto-run when the WebView loads (once per banner session). Mixed-action buttons run eval on click only.
-3. `react-native-webview` ships as an SDK dependency; after install or upgrade, **rebuild** the native app (`pod install` on iOS). If Metro still cannot load it, add `react-native-webview` explicitly in the host app and rebuild again.
-
-For local SDK development without custom CSS or Evaluate JavaScript, use `setDebugForceWebViewBanner` from `bannerNeedsWebView.ts` (not exported on the public `Userflow` API).
-
-Web embeds are unchanged (native userflow.js banner).
-
-## Architecture
-
-- **Native shell:** `BannerHost` / `EmbedBannerPlaceholder` unchanged (overlay vs flow, safe area, margins, max width).
-- **Single WebView:** `BannerWebViewBar` renders the web DOM (`userflowjs-banner-*`, `userflowjs-bubble-button-*`) plus inlined frame CSS and a link to `https://cdn.{host}/themes/{themeId}/stylesheets/{cssVersion}/custom.css` when the theme has `cssVersion`.
-- **Actions:** Button clicks post to RN → `BannerSessionEngine.handleActions` → `EVAL_JS` uses the **same** WebView via `evalJsController` (overlay `EvalJsHost` is suppressed while the banner owns the page).
-- **Dismiss from JS:** `userflow.endFlow()` and `userflow.close()` end the **banner session** (same as the native X), not only the tour flow engine.
-
-## Manual test checklist (iOS + Android)
-
-- [ ] Standard banner (no Evaluate JavaScript): native `BannerBar`, unchanged layout.
-- [ ] WebView banner: theme custom CSS applies to buttons/content (use builder theme + custom classes on buttons).
-- [ ] Top (`BODY_FIRST`) and bottom (`BODY_LAST`) placement; overlay on/off.
-- [ ] Button **Evaluate JavaScript** runs (`userflow.track`, `userflow.updateUser`, etc.).
-- [ ] **Auto-run on show:** Evaluate JavaScript on an **eval-only** banner button (no other actions on that button) runs when the WebView loads. TinyTime fixture: `apps/tinytime/eval-js-samples/etoro-crypto-deposit-banner-rn.js`.
-- [ ] Dismiss (X) ends banner with user-closed reason.
-- [ ] Small phone, large phone, and tablet aspect ratios—watch for clipped or extra-tall bar (height comes from WebView content measurement).
-- [ ] Rotation: bar height updates after orientation change.
-
-## Findings
-
-### Feasibility
-
-- **Works in principle:** WebView can load CDN `custom.css` and reuse web class names; eval JS reuses the existing `wrapCode` / `window.userflow` bridge.
-- **Gaps vs web:** Rich content HTML export is a **subset** (paragraphs, headings, lists, quotes, code, links, attributes)—no images/video/button groups inside content. Button hidden/disabled conditions are not evaluated in the WebView. Fonts rely on theme `fontFamily` / custom CSS, not full web font loading.
-
-### Layout and screen-size risks
-
-- Height is driven by content measurement on `.userflowjs-banner-root` and `ResizeObserver` when available; there can be a one-frame jump before measure completes.
-- `overlay: false` push layout depends on measured WebView height—verify on long copy and multiple buttons wrapping.
-- Safe area is applied on the **native** host, not inside the WebView document (unlike some full-screen eval JS samples).
-
-### Single WebView / eval routing
-
-- While a WebView banner is mounted, `evalJsController.bannerOwnsWebView` prevents a second overlay WebView.
-- **Conflict:** A flow **Evaluate JavaScript** step running at the same time as a WebView banner would share the banner WebView—not supported in this POC.
-
-### Security / performance
-
-- Custom CSS is fetched from the CDN at runtime (network required on first paint).
-- One WebView per banner session with eval JS; memory cost is acceptable for typical use but not ideal for many simultaneous surfaces.
-
-### Follow-ups before production
-
-- Builder copy review; document unsupported banner capabilities (sticky scroll, element embed modes, condition-driven buttons).
-- Align with UMD-166 (banner component) and UMD-168 (banner eval extension).
-- Optional: ship compiled `bubble-frame` CSS from CDN instead of bundled subset.
-
-## Customer sample fixtures
-
-When validating against a specific customer banner, paste their theme **custom.css** and button **Evaluate JavaScript** into the builder test flow and attach the same snippets to the Jira ticket for regression reference.