@userflow-tech/react-native 0.2.0 → 0.3.0

package/lib/typescript/module/src/surfaces/bannerWebView/bannerWebFrameCss.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Banner + bubble-button subset of web `bubble-frame.styl` for custom-banner WebViews.
+ * Custom theme CSS targets the same class names as userflow.js.
+ */
+export declare const BANNER_WEB_FRAME_CSS = "\n.userflowjs-theme-root {\n  line-height: var(--userflow-line-height, 24px);\n  color: var(--userflow-main-foreground-color, inherit);\n  font-weight: var(--userflow-font-weight-normal, 400);\n}\n.userflowjs-theme-root, .userflowjs-theme-root button {\n  font-family: var(--userflow-font-family, system-ui, sans-serif);\n  font-size: var(--userflow-font-size, 16px);\n}\n.userflowjs-theme-root b, .userflowjs-theme-root strong {\n  font-weight: var(--userflow-font-weight-bold, 600);\n}\n.userflowjs-theme-root a {\n  color: var(--userflow-link-color, inherit);\n  text-decoration: underline;\n}\n.userflowjs-theme-root h1 {\n  font-size: var(--userflow-h1-font-size, 1.25em);\n  font-weight: var(--userflow-font-weight-bold, 600);\n  margin: 0 0 16px;\n}\n.userflowjs-theme-root h2 {\n  font-size: var(--userflow-h2-font-size, 1.125em);\n  font-weight: var(--userflow-font-weight-bold, 600);\n  margin: 0 0 16px;\n}\n.userflowjs-theme-root p {\n  margin: 0 0 16px;\n}\n.userflowjs-button-reset {\n  outline: 0;\n  border: 0;\n  padding: 0;\n  margin: 0;\n  background-color: transparent;\n  cursor: pointer;\n}\n.userflowjs-bubble-button-base {\n  display: inline-block;\n  padding: calc((var(--userflow-button-height, 32px) - var(--userflow-line-height, 24px)) / 2) var(--userflow-font-size, 16px);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border-radius: 0.375em;\n  font-size: var(--userflow-font-size, 16px);\n  font-weight: var(--userflow-font-weight-bold, 600);\n  height: var(--userflow-button-height, 32px);\n  line-height: var(--userflow-line-height, 24px);\n  border: 0;\n  cursor: pointer;\n}\n.userflowjs-bubble-button {\n  display: inline-flex;\n  align-items: center;\n}\n.userflowjs-bubble-button--primary,\n.userflowjs-bubble-button--default,\n.userflowjs-bubble-button--banner-primary,\n.userflowjs-bubble-button--banner-secondary {\n  font-family: var(--userflow-font-family, system-ui, sans-serif);\n  border-radius: var(--userflow-button-border-radius, 0.375em);\n  min-width: var(--userflow-button-min-width, 0);\n  white-space: normal;\n  max-width: 100%;\n}\n.userflowjs-bubble-button--banner-primary {\n  background-color: var(--userflow-banner-foreground-color);\n  color: var(--userflow-banner-background-color);\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.userflowjs-bubble-button--banner-secondary {\n  background-color: var(--userflow-banner-background-color);\n  color: var(--userflow-banner-foreground-color);\n  border: 1px solid var(--userflow-banner-foreground-color);\n  padding-left: 12px;\n  padding-right: 12px;\n}\n.userflowjs-banner-root {\n  position: relative;\n  background: var(--userflow-banner-background-color);\n  color: var(--userflow-banner-foreground-color);\n  padding: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-sizing: border-box;\n}\n.userflowjs-banner-root--content-layout-START .userflowjs-banner-inner {\n  justify-content: flex-start;\n}\n.userflowjs-banner-root--content-layout-CENTER .userflowjs-banner-inner {\n  justify-content: center;\n}\n.userflowjs-banner-root--content-layout-SPACE_BETWEEN .userflowjs-banner-inner {\n  justify-content: space-between;\n}\n.userflowjs-banner-inner {\n  flex: 1 1 auto;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  column-gap: 16px;\n  row-gap: 8px;\n  margin: 0 8px;\n  min-width: 0;\n}\n.userflowjs-banner-content {\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  flex-shrink: 1;\n  min-width: 0;\n}\n.userflowjs-banner-buttons {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n.userflowjs-banner-start-spacer {\n  flex: 1 1 0;\n  max-width: var(--userflow-button-height, 32px);\n  height: var(--userflow-button-height, 32px);\n}\n.userflowjs-banner-close {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--userflow-button-height, 32px);\n  height: var(--userflow-button-height, 32px);\n  color: var(--userflow-banner-foreground-color);\n  background: transparent;\n  padding: 0;\n  border-radius: 4px;\n}\n.userflowjs-banner-close:hover {\n  background-color: var(--userflow-banner-hover-background-color, rgba(0,0,0,0.08));\n}\n";
+//# sourceMappingURL=bannerWebFrameCss.d.ts.map

package/lib/typescript/module/src/surfaces/bannerWebView/bannerWebFrameCss.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bannerWebFrameCss.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/bannerWebView/bannerWebFrameCss.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,mpIA4IhC,CAAC"}

package/lib/typescript/module/src/surfaces/bannerWebView/buildCustomBannerHtml.d.ts

@@ -0,0 +1,9 @@
+import type { BannerSessionFragment } from '@userflow-tech/protocol';
+import type { EvalJsContext } from '../../evalJs/types';
+export interface BuildCustomBannerBodyOptions {
+    /** When true, omit eval-only auto-run (e.g. WebView remount while session is still active). */
+    skipAutoRunEval?: boolean;
+}
+export declare function buildCustomBannerBodyHtml(session: BannerSessionFragment, lookupAttribute: (fqn: string) => string | null, serverEndpoint: string, options?: BuildCustomBannerBodyOptions): string;
+export declare function buildCustomBannerHtml(context: EvalJsContext, session: BannerSessionFragment, lookupAttribute: (fqn: string) => string | null, serverEndpoint: string, options?: BuildCustomBannerBodyOptions): string;
+//# sourceMappingURL=buildCustomBannerHtml.d.ts.map

package/lib/typescript/module/src/surfaces/bannerWebView/buildCustomBannerHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildCustomBannerHtml.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/bannerWebView/buildCustomBannerHtml.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAIrF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AA8GxD,MAAM,WAAW,4BAA4B;IAC3C,+FAA+F;IAC/F,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,qBAAqB,EAC9B,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,EAC/C,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,4BAA4B,GACrC,MAAM,CAqCR;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,qBAAqB,EAC9B,eAAe,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,EAC/C,cAAc,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,4BAA4B,GACrC,MAAM,CAGR"}

package/lib/typescript/module/src/surfaces/bannerWebView/buttonClassName.d.ts

@@ -0,0 +1,3 @@
+/** Mirrors web `TreeDoc.buttonClassName`. */
+export declare function buttonClassName(appearance: string | null | undefined): string;
+//# sourceMappingURL=buttonClassName.d.ts.map

package/lib/typescript/module/src/surfaces/bannerWebView/buttonClassName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonClassName.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/bannerWebView/buttonClassName.ts"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAa7E"}

package/lib/typescript/module/src/surfaces/bannerWebView/resolveCdnHost.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+/**
+ * Map the end-user websocket host to the theme stylesheet CDN host
+ * (same convention as web userflow.js).
+ */
+export declare function resolveCdnHost(serverEndpoint: string): string;
+export declare function themePublishedCssVersion(theme: ThemeFragment): string | null;
+export declare function themeHasPublishedCustomCss(theme: ThemeFragment): boolean;
+export declare function resolveCustomStylesheetUrl(serverEndpoint: string, theme: ThemeFragment): string | null;
+//# sourceMappingURL=resolveCdnHost.d.ts.map

package/lib/typescript/module/src/surfaces/bannerWebView/resolveCdnHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveCdnHost.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/bannerWebView/resolveCdnHost.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAe7D;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAO5E;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAExE;AAED,wBAAgB,0BAA0B,CACxC,cAAc,EAAE,MAAM,EACtB,KAAK,EAAE,aAAa,GACnB,MAAM,GAAG,IAAI,CAOf"}

package/lib/typescript/module/src/surfaces/bannerWebView/richContentDocToHtml.d.ts

@@ -0,0 +1,3 @@
+import type { LookupAttribute, RichContentDoc } from '../../content/types';
+export declare function richContentDocToHtml(content: string | RichContentDoc | null | undefined, lookupAttribute: LookupAttribute): string;
+//# sourceMappingURL=richContentDocToHtml.d.ts.map

package/lib/typescript/module/src/surfaces/bannerWebView/richContentDocToHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"richContentDocToHtml.d.ts","sourceRoot":"","sources":["../../../../../../src/surfaces/bannerWebView/richContentDocToHtml.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,eAAe,EAEf,cAAc,EAEf,MAAM,qBAAqB,CAAC;AA+E7B,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,GAAG,SAAS,EACnD,eAAe,EAAE,eAAe,GAC/B,MAAM,CAIR"}

package/lib/typescript/module/src/surfaces/resolveBannerTheme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeFragment } from '@userflow-tech/protocol';
+/** Default banner chrome when theme banner tokens are unset (matches product / web debugger palette). */
+export declare const DEFAULT_BANNER_BACKGROUND_COLOR = "#0A1A24";
+export declare const DEFAULT_BANNER_FOREGROUND_COLOR = "#FFFFFF";
+export declare function resolveBannerBackgroundColor(theme: ThemeFragment): string;
+export declare function resolveBannerForegroundColor(theme: ThemeFragment): string;
+//# sourceMappingURL=resolveBannerTheme.d.ts.map

package/lib/typescript/module/src/surfaces/resolveBannerTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveBannerTheme.d.ts","sourceRoot":"","sources":["../../../../../src/surfaces/resolveBannerTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,yGAAyG;AACzG,eAAO,MAAM,+BAA+B,YAAY,CAAC;AACzD,eAAO,MAAM,+BAA+B,YAAY,CAAC;AAOzD,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAEzE;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAEzE"}

package/lib/typescript/module/src/surfaces/safeArea.d.ts

@@ -1,3 +1,4 @@
+import type { Context } from 'react';
 export interface EdgeInsets {
     top: number;
     right: number;
@@ -6,6 +7,11 @@ export interface EdgeInsets {
 }
 /** Safe-area insets with a zero fallback when the optional peer is missing. */
 export declare function useUserflowSafeAreaInsets(): EdgeInsets;
+/**
+ * `SafeAreaInsetsContext` from the optional peer, or `null` when it is not installed.
+ * In-flow banners override this so host screens do not add the inset the banner already consumed.
+ */
+export declare function getSafeAreaInsetsContext(): Context<EdgeInsets | null> | null;
 /** @internal */
 export declare function resetSafeAreaInsetsCacheForTests(): void;
 //# sourceMappingURL=safeArea.d.ts.map

package/lib/typescript/module/src/surfaces/safeArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safeArea.d.ts","sourceRoot":"","sources":["../../../../../src/surfaces/safeArea.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAkCD,+EAA+E;AAC/E,wBAAgB,yBAAyB,IAAI,UAAU,CAEtD;AAED,gBAAgB;AAChB,wBAAgB,gCAAgC,IAAI,IAAI,CAEvD"}
+{"version":3,"file":"safeArea.d.ts","sourceRoot":"","sources":["../../../../../src/surfaces/safeArea.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAmCD,+EAA+E;AAC/E,wBAAgB,yBAAyB,IAAI,UAAU,CAEtD;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,IAAI,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,IAAI,CAmB5E;AAED,gBAAgB;AAChB,wBAAgB,gCAAgC,IAAI,IAAI,CAGvD"}

package/lib/typescript/module/src/version.d.ts

@@ -1,3 +1,3 @@
 /** Generated by scripts/write-version.mjs — do not edit. */
-export declare const SDK_VERSION = "0.2.0";
+export declare const SDK_VERSION = "0.3.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@userflow-tech/react-native",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Userflow SDK for React Native — onboarding flows, tooltips, and modals.",
   "license": "SEE LICENSE IN LICENSE",
   "main": "./lib/commonjs/index.js",
@@ -81,7 +81,8 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "react-native-view-shot": ">=5.0.0"
+    "react-native-view-shot": ">=5.0.0",
+    "react-native-webview": ">=13.8.0"
   },
   "peerDependenciesMeta": {
     "@react-native-community/netinfo": {
@@ -122,8 +123,8 @@
     "react-native": "0.81.5",
     "react-native-builder-bob": "^0.30.0",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "~4.16.0",
     "react-native-view-shot": "^5.1.1",
+    "react-native-webview": "13.16.1",
     "react-test-renderer": "19.1.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.4.0"

package/src/anchors/AutoAnchorRegistry.ts

@@ -247,6 +247,10 @@ export class AutoAnchorRegistry {
   ): void {
     const inst = this.instances.get(instanceId);
     if (!inst) return;
+    // Stamped hosts call this on every render; notifying for a no-op patch
+    // re-renders registry subscribers, which re-render the stamps.
+    const keys = Object.keys(patch) as (keyof typeof patch)[];
+    if (keys.every((key) => Object.is(inst[key], patch[key]))) return;
 
     const prevIds = {
       manualId: inst.manualId,
@@ -434,6 +438,23 @@ export class AutoAnchorRegistry {
     return byManual.length > 1 || byManual.some((i) => i.ambiguous);
   }
 
+  /**
+   * Whether `inst` still has a look-alike inside `include`.
+   *
+   * The stored {@link AutoAnchorInstance.ambiguous} flag is registry-wide, so a
+   * copy on a covered screen keeps it set. Visibility can only clear that, never
+   * add ambiguity: an instance the registry considers unique stays unique.
+   */
+  isAmbiguousAmong(inst: AutoAnchorInstance, include: (i: AutoAnchorInstance) => boolean): boolean {
+    if (!inst.ambiguous) return false;
+    const peers = (list: AutoAnchorInstance[]) => list.filter((i) => i === inst || include(i));
+    if (inst.manualId) return peers(this.getInstancesByManualId(inst.manualId)).length > 1;
+    return (
+      this.isTwinWithin(inst, peers(this.getInstancesByTemplatePath(inst.templatePath))) ||
+      this.isTwinWithin(inst, peers(this.getInstancesByRegistryKey(inst.registryKey)))
+    );
+  }
+
   /** Test helper — drop every instance and reset ids. */
   clear(): void {
     this.instances.clear();
@@ -494,6 +515,24 @@ export class AutoAnchorRegistry {
     }
   }
 
+  /**
+   * True when `inst` cannot be told apart from another instance in `list`.
+   * An unlabelled group only: no content of its own, or a content signature a
+   * peer shares.
+   */
+  private isTwinWithin(inst: AutoAnchorInstance, list: AutoAnchorInstance[]): boolean {
+    const unlabelled = list.length > 1 && list.every((i) => !i.manualId);
+    if (!unlabelled) return false;
+    const sig = contentSignature(inst);
+    if (!sig) return true;
+    let count = 0;
+    for (const peer of list) {
+      if (contentSignature(peer) === sig) count += 1;
+      if (count > 1) return true;
+    }
+    return false;
+  }
+
   /**
    * Instances sharing a template path are only twins while they look alike.
    * Four rows from one `field()` helper are indistinguishable at register time
@@ -503,19 +542,10 @@ export class AutoAnchorRegistry {
    */
   private recomputeAmbiguity(registryKey: string, templatePath: string, manualId?: string): void {
     const mark = (list: AutoAnchorInstance[]) => {
-      const unlabelled = list.length > 1 && list.every((i) => !i.manualId);
-      const shared = new Map<string, number>();
-      if (unlabelled) {
-        for (const i of list) {
-          const sig = contentSignature(i);
-          if (sig) shared.set(sig, (shared.get(sig) ?? 0) + 1);
-        }
-      }
       for (const i of list) {
-        const sig = unlabelled ? contentSignature(i) : undefined;
-        const twins = unlabelled && (!sig || (shared.get(sig) ?? 0) > 1);
         i.ambiguous =
-          twins || (i.manualId ? this.getInstancesByManualId(i.manualId).length > 1 : false);
+          this.isTwinWithin(i, list) ||
+          (i.manualId ? this.getInstancesByManualId(i.manualId).length > 1 : false);
       }
     };
     mark(this.getInstancesByRegistryKey(registryKey));

package/src/anchors/fiber/fiberPath.ts

@@ -0,0 +1,117 @@
+/**
+ * Capture a release-stable fiber path for a host the Babel plugin never
+ * registered. `hostKind` and ids survive minification; `displayName` is only
+ * a tiebreaker at resolve time.
+ */
+import type { MobileFiberPath, MobileFiberSegment } from '@userflow-tech/protocol';
+
+import {
+  type AnyFiber,
+  MAX_ANCESTOR_WALK,
+  getHostTypeName,
+  getLiveHostProps,
+  getReturn,
+  getSibling,
+  isHostFiber,
+} from './fiberInternals';
+import { readHostText } from './readHostContent';
+
+const SCREEN_TYPES = new Set(['RNSScreen', 'RNSModalScreen']);
+
+function stringProp(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function displayNameOf(fiber: AnyFiber): string {
+  const type = fiber?.type;
+  if (typeof type === 'string') return type;
+  if (type && typeof type === 'object') {
+    const named = type as { displayName?: unknown; name?: unknown };
+    if (typeof named.displayName === 'string' && named.displayName) return named.displayName;
+    if (typeof named.name === 'string' && named.name) return named.name;
+  }
+  if (typeof type === 'function') {
+    const named = type as { displayName?: string; name?: string };
+    return named.displayName || named.name || 'Component';
+  }
+  return 'Unknown';
+}
+
+function hostSiblingIndex(fiber: AnyFiber): number {
+  const parent = getReturn(fiber);
+  if (!parent) return 0;
+  let index = 0;
+  let child = parent.child as AnyFiber | null;
+  let guard = 0;
+  while (child && guard < 500) {
+    if (child === fiber) return index;
+    if (isHostFiber(child)) index += 1;
+    child = getSibling(child);
+    guard += 1;
+  }
+  return 0;
+}
+
+function segmentFor(fiber: AnyFiber): MobileFiberSegment {
+  const hostKind = getHostTypeName(fiber);
+  const props = getLiveHostProps(fiber);
+  const testID = stringProp(props?.testID);
+  const accessibilityLabel =
+    stringProp(props?.accessibilityLabel) ?? stringProp(props?.['aria-label']);
+  const role = stringProp(props?.accessibilityRole) ?? stringProp(props?.role);
+  const key = stringProp(fiber?.key);
+  let text: string | undefined;
+  try {
+    text = readHostText(fiber, 1);
+  } catch {
+    text = undefined;
+  }
+  return {
+    displayName: displayNameOf(fiber),
+    ...(hostKind ? { hostKind } : {}),
+    ...(role ? { role } : {}),
+    siblingIndex: hostSiblingIndex(fiber),
+    ...(key ? { key } : {}),
+    ...(text ? { text } : {}),
+    ...(testID ? { testID } : {}),
+    ...(accessibilityLabel ? { accessibilityLabel } : {}),
+  };
+}
+
+/**
+ * Root → leaf path from the enclosing screen (or the walk root) down to `host`.
+ */
+export function fiberPathFromHost(host: AnyFiber): MobileFiberPath | null {
+  if (!host || !isHostFiber(host)) return null;
+
+  const hosts: AnyFiber[] = [];
+  let screen: AnyFiber | null = null;
+  let current: AnyFiber | null = host;
+  for (let depth = 0; current && depth < MAX_ANCESTOR_WALK; depth += 1) {
+    if (isHostFiber(current)) hosts.push(current);
+    const type = getHostTypeName(current);
+    if (type && SCREEN_TYPES.has(type)) {
+      screen = current;
+      break;
+    }
+    current = getReturn(current);
+  }
+
+  hosts.reverse();
+  if (hosts.length === 0) return null;
+
+  const leaf = hosts[hosts.length - 1]!;
+  let leafText: string | undefined;
+  try {
+    leafText = readHostText(leaf);
+  } catch {
+    leafText = undefined;
+  }
+  const root = screen ?? hosts[0]!;
+  return {
+    ...(displayNameOf(root) ? { rootDisplayName: displayNameOf(root) } : {}),
+    ...(leafText ? { leafText } : {}),
+    leafKind: getHostTypeName(leaf) ?? 'View',
+    segments: hosts.map(segmentFor),
+  };
+}

package/src/anchors/fiber/findAnchorFiber.ts

@@ -7,7 +7,7 @@ import {
   getSibling,
   isHostFiber,
 } from './fiberInternals';
-import { coveredScreenBranches, isScreenContainerFiber } from './visibleScreens';
+import { walkVisibleFibers } from './walkVisibleFibers';
 
 /**
  * Soft cap so a dense screen cannot stall the JS thread. One modest Expo Router
@@ -34,10 +34,11 @@ export type FindAnchorFiberResult =
  * tier that has any match so a testID hit is never made ambiguous by an
  * unrelated accessibilityLabel.
  *
- * Composite matches descend to the shallowest host descendant. Multiple
- * matches on a single root-to-leaf chain (e.g. Pressable forwarding testID to
- * its inner View) collapse to the outermost host. Disjoint matches fail closed
- * as ambiguous.
+ * A composite match resolves to the host beneath it that carries the same id
+ * (e.g. a tab item that wraps its button in a View and forwards testID to the
+ * button), else to its shallowest host descendant. Multiple matches on a single
+ * root-to-leaf chain (e.g. Pressable forwarding testID to its inner View)
+ * collapse to the outermost host. Disjoint matches fail closed as ambiguous.
  *
  * The walk never follows `rootFiber.sibling` so the Userflow overlay (a sibling
  * of {@link FiberScanRoot} in UserflowProvider) cannot self-match SDK testIDs.
@@ -52,27 +53,11 @@ export function findAnchorFiber(rootFiber: AnyFiber, id: string): FindAnchorFibe
       accessibilityLabel: [],
     };
 
-    const stack: AnyFiber[] = [rootFiber];
-    // Branches belonging to screens the user cannot see. Their siblings are
-    // still walked, so only the covered subtree is skipped.
-    const covered = new Set<AnyFiber>();
-    let visited = 0;
-    while (stack.length > 0 && visited < MAX_NODES) {
-      const fiber = stack.pop();
-      if (!fiber) continue;
-      visited += 1;
-
-      if (covered.has(fiber)) {
-        // Keep following the chain, but do not match or descend here.
-        if (fiber !== rootFiber) {
-          const sibling = getSibling(fiber);
-          if (sibling) stack.push(sibling);
-        }
-        continue;
-      }
-
-      const props = getMemoizedProps(fiber);
-      if (props) {
+    const { visited, truncated } = walkVisibleFibers(
+      rootFiber,
+      (fiber) => {
+        const props = getMemoizedProps(fiber);
+        if (!props) return;
         if (typeof props.testID === 'string' && props.testID === id) {
           byTier.testID.push(fiber);
         }
@@ -82,25 +67,11 @@ export function findAnchorFiber(rootFiber: AnyFiber, id: string): FindAnchorFibe
         if (typeof props.accessibilityLabel === 'string' && props.accessibilityLabel === id) {
           byTier.accessibilityLabel.push(fiber);
         }
-      }
+      },
+      MAX_NODES,
+    );
 
-      // Descend into children. Do NOT follow the seed root's sibling — in
-      // UserflowProvider the overlay (with SDK testIDs) is a sibling of
-      // FiberScanRoot and must stay outside the scan.
-      if (fiber !== rootFiber) {
-        const sibling = getSibling(fiber);
-        if (sibling) stack.push(sibling);
-      }
-      if (isScreenContainerFiber(fiber)) {
-        for (const branch of coveredScreenBranches(fiber)) {
-          covered.add(branch);
-        }
-      }
-      const child = getChild(fiber);
-      if (child) stack.push(child);
-    }
-
-    if (visited >= MAX_NODES) {
+    if (truncated || visited >= MAX_NODES) {
       // Truncation would otherwise look exactly like "the anchor isn't there".
       // eslint-disable-next-line no-console -- actionable: the anchor may exist but was not reached
       const warn = (message: string): void => console.warn(message);
@@ -143,14 +114,15 @@ export function findAnchorFiber(rootFiber: AnyFiber, id: string): FindAnchorFibe
 }
 
 /**
- * For each matched fiber, resolve the shallowest host descendant (or itself
- * when already a host). Deduplicate by identity / alternate.
+ * Resolve each matched fiber to the host that represents it. Deduplicate by
+ * identity / alternate.
  */
 function uniqueHosts(matches: AnyFiber[]): AnyFiber[] {
+  const forwarded = forwardedHostMatches(matches);
   const seen = new Set<AnyFiber>();
   const out: AnyFiber[] = [];
   for (const match of matches) {
-    const host = nearestHostDescendant(match) ?? (isHostFiber(match) ? match : null);
+    const host = isHostFiber(match) ? match : compositeHost(match, forwarded.get(match));
     if (!host) continue;
     const identity = host.alternate ?? host;
     if (seen.has(host) || seen.has(identity)) continue;
@@ -162,6 +134,44 @@ function uniqueHosts(matches: AnyFiber[]): AnyFiber[] {
   return out;
 }
 
+/**
+ * The host carrying a composite's id when the composite forwards it down one
+ * chain, else the composite's shallowest host. Carriers on disjoint chains keep
+ * the shallowest host, so a component repeating its id on two children still
+ * resolves to the component.
+ */
+function compositeHost(composite: AnyFiber, carriers: AnyFiber[] | undefined): AnyFiber | null {
+  const chains = carriers ? collapseToChains(carriers) : [];
+  if (chains.length === 1) return chains[0]!;
+  return nearestHostDescendant(composite);
+}
+
+/** Host matches grouped under each composite match they descend from. */
+function forwardedHostMatches(matches: AnyFiber[]): Map<AnyFiber, AnyFiber[]> {
+  const composites = new Map<AnyFiber, AnyFiber>();
+  for (const match of matches) {
+    if (isHostFiber(match)) continue;
+    composites.set(match, match);
+    if (match.alternate) composites.set(match.alternate, match);
+  }
+  const out = new Map<AnyFiber, AnyFiber[]>();
+  if (composites.size === 0) return out;
+  for (const host of matches) {
+    if (!isHostFiber(host)) continue;
+    let cur = getReturn(host);
+    for (let depth = 0; cur && depth < MAX_ANCESTOR_WALK; depth += 1) {
+      const composite = composites.get(cur);
+      if (composite) {
+        const carriers = out.get(composite);
+        if (carriers) carriers.push(host);
+        else out.set(composite, [host]);
+      }
+      cur = getReturn(cur);
+    }
+  }
+  return out;
+}
+
 /**
  * BFS under `fiber` for the shallowest host descendant. Returns `fiber` itself
  * when it is already a host.