@userflow-tech/react-native 0.5.0 → 0.7.0

package/src/anchors/fiber/detectAppFontFamily.ts

@@ -0,0 +1,400 @@
+/**
+ * Host-app font used when a theme is still on the default CSS stack.
+ *
+ * React Native does not inherit `fontFamily` from a parent view, so the family
+ * actually in use is the one set on `Text`. The primary font is whichever
+ * family appears on the most visible host text under the scan root (the SDK
+ * overlay is a sibling and is not walked). Embedded banners are inside that
+ * root; their hosts use a `userflow-` testID and are not votes, or the bar's
+ * own text would win. Text with no family counts as the platform font. Icon
+ * faces are not content. Nested text with no family does not vote: the
+ * ancestor text already does, and a child run must not add another vote for
+ * that family or for the platform font.
+ *
+ * A finished walk is cached until the visible screen changes, the reported
+ * screen changes, or `Userflow.reset()`. A walk that hits the node cap is not
+ * cached. Failures return null.
+ */
+import { getCurrentScreenLocation } from '../../screenTracker';
+
+import { fiberScanRoot } from './FiberScanRootStore';
+import {
+  type AnyFiber,
+  MAX_ANCESTOR_WALK,
+  getHostTypeName,
+  getLiveHostProps,
+  getReturn,
+  getStateNode,
+} from './fiberInternals';
+import { isFiberOnVisibleScreen, isScreenHostFiber } from './visibleScreens';
+import { walkVisibleFibers } from './walkVisibleFibers';
+
+const TEXT_HOST_NAMES = new Set(['Text', 'RCTText', 'RCTVirtualText']);
+
+/** SDK hosts inside the scan root (embedded banners). Not the app's font. */
+const SDK_HOST_TEST_ID_PREFIX = 'userflow-';
+
+/** Cycle guard for nested-text inheritance. Real trees are only a few levels deep. */
+const MAX_FONT_ANCESTORS = 50;
+
+const CSS_GENERIC_FAMILIES = new Set([
+  'sans-serif',
+  'serif',
+  'monospace',
+  'system-ui',
+  'ui-sans-serif',
+  'ui-serif',
+  'ui-monospace',
+  'ui-rounded',
+  'cursive',
+  'fantasy',
+  'emoji',
+  'math',
+  'fangsong',
+  'inherit',
+  'initial',
+  'unset',
+]);
+
+/** Short vector-icon families. Matched after stripping spaces and punctuation. */
+const ICON_FONT_EXACT = new Set([
+  'feather',
+  'antdesign',
+  'entypo',
+  'fontisto',
+  'simplelineicons',
+  'octicons',
+  'zocial',
+  'foundation',
+  'evilicons',
+]);
+
+interface FontCache {
+  instance: object;
+  /** null: countable text voted for the platform font, or nothing voted. */
+  family: string | null;
+  /** Visible screens this tally belongs to. Empty when the tree has none. */
+  screens: AnyFiber[];
+  /** `updateScreen` / router identity at tally time. Null before the first report. */
+  screenKey: string | null;
+}
+
+let cache: FontCache | null = null;
+
+/** Drop the cached app font. Called from `Userflow.reset()`. */
+export function resetDetectedAppFont(): void {
+  cache = null;
+}
+
+/**
+ * Family to apply, or null when the app font is the platform face or could
+ * not be read. Never throws.
+ */
+export function detectAppFontFamily(): string | null {
+  try {
+    const instance = fiberScanRoot.getInstance();
+    if (!instance || typeof instance !== 'object') return null;
+
+    const root = fiberScanRoot.getFiber();
+    if (!root) return null;
+    if (cache?.instance === instance && cacheStillCurrent(cache, root)) return cache.family;
+
+    const tally = tallyHostText(root);
+    if (tally.truncated) {
+      if (!tally.voted) return null;
+      return pickMajority(tally.counts);
+    }
+
+    const family = tally.voted ? pickMajority(tally.counts) : null;
+    cache = { instance, family, screens: tally.screens, screenKey: reportedScreenKey() };
+    return family;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Faces that appear in the builder's default system stack. A comma-separated
+ * list made only of these and generic keywords is that default, not a custom
+ * font. A single concrete name is still kept, including `Roboto`.
+ */
+const DEFAULT_STACK_FACES = new Set([
+  'blinkmacsystemfont',
+  'segoe ui',
+  'roboto',
+  'helvetica',
+  'arial',
+  'apple color emoji',
+  'segoe ui emoji',
+  'segoe ui symbol',
+]);
+
+/**
+ * A single React Native family name. CSS stacks and generic keywords are not
+ * usable as a host `fontFamily` — RN treats the whole string as one face.
+ * Theme stacks are parsed by {@link themeConcreteFontFamily}.
+ */
+export function concreteFontFamily(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const name = unwrapFontName(value);
+  if (!name || name.includes(',') || name.startsWith('-')) return undefined;
+  if (CSS_GENERIC_FAMILIES.has(name.toLowerCase())) return undefined;
+  return name;
+}
+
+/**
+ * Family a theme author chose. A single concrete name is kept. A comma-separated
+ * list keeps the first family that is not a generic or a default-stack face,
+ * so `"Source Sans Pro", sans-serif` stays Source Sans Pro and the system
+ * stack still resolves to undefined.
+ */
+export function themeConcreteFontFamily(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const parts = splitCssFamilies(value);
+  if (parts.length === 0) return undefined;
+  if (parts.length === 1) return concreteFontFamily(parts[0]);
+  for (const part of parts) {
+    const name = concreteFontFamily(part);
+    if (!name || DEFAULT_STACK_FACES.has(name.toLowerCase())) continue;
+    return name;
+  }
+  return undefined;
+}
+
+/**
+ * Split a CSS `font-family` list. A quote that opens a family is wrapping and
+ * is removed; a quote inside a name stays, so `Foo"Bar` is one family.
+ * Commas inside wrapping quotes are not separators.
+ */
+export function splitCssFamilies(value: string): string[] {
+  const parts: string[] = [];
+  let current = '';
+  let quote: '"' | "'" | null = null;
+  for (const char of value) {
+    if (quote) {
+      if (char === quote) quote = null;
+      else current += char;
+      continue;
+    }
+    if ((char === '"' || char === "'") && current.trim() === '') {
+      quote = char;
+      continue;
+    }
+    if (char === ',') {
+      const name = current.trim();
+      if (name) parts.push(name);
+      current = '';
+      continue;
+    }
+    current += char;
+  }
+  const name = current.trim();
+  if (name) parts.push(name);
+  return parts;
+}
+
+/** Generic keywords and vendor-prefixed faces stay unquoted in CSS. */
+export function isBareCssFamily(name: string): boolean {
+  return name.startsWith('-') || CSS_GENERIC_FAMILIES.has(name.toLowerCase());
+}
+
+export function isIconFontFamily(name: string): boolean {
+  const key = name.toLowerCase().replace(/[^a-z0-9]/g, '');
+  if (ICON_FONT_EXACT.has(key)) return true;
+  return (
+    key.startsWith('fontawesome') ||
+    key.startsWith('ionicons') ||
+    key.startsWith('materialcommunityicons') ||
+    key.startsWith('materialicons') ||
+    key.startsWith('materialsymbols')
+  );
+}
+
+interface Tally {
+  voted: boolean;
+  truncated: boolean;
+  screens: AnyFiber[];
+  counts: Map<string | null, number>;
+}
+
+function tallyHostText(root: AnyFiber): Tally {
+  const counts = new Map<string | null, number>();
+  const screens: AnyFiber[] = [];
+  let voted = false;
+  const { truncated } = walkVisibleFibers(root, (fiber) => {
+    try {
+      if (isScreenHostFiber(fiber)) screens.push(fiber);
+      if (!isTextHost(fiber)) return;
+      const vote = voteFor(fiber, root);
+      if (vote === 'skip') return;
+      voted = true;
+      counts.set(vote, (counts.get(vote) ?? 0) + 1);
+    } catch {
+      // One unreadable node is not a vote.
+    }
+  });
+  return { voted, truncated, screens, counts };
+}
+
+/** Usable family, null for the platform font, or skip for an icon face. */
+function voteFor(fiber: AnyFiber, root: AnyFiber): string | null | 'skip' {
+  if (isUnderSdkHost(fiber, root)) return 'skip';
+  const own = classifyFamily(readFontFamily(fiber));
+  if (own.kind === 'icon') return 'skip';
+  if (own.kind === 'family') return own.name;
+  if (own.kind === 'unusable') return null;
+  // No family of its own. The ancestor text node casts the vote for this run.
+  if (hasAncestorText(fiber, root)) return 'skip';
+  return null;
+}
+
+function hasAncestorText(fiber: AnyFiber, root: AnyFiber): boolean {
+  let parent = getReturn(fiber);
+  for (let depth = 0; parent && parent !== root && depth < MAX_FONT_ANCESTORS; depth += 1) {
+    if (isTextHost(parent)) return true;
+    parent = getReturn(parent);
+  }
+  return false;
+}
+
+function cacheStillCurrent(cached: FontCache, root: AnyFiber): boolean {
+  if (cached.screenKey !== reportedScreenKey()) return false;
+  if (cached.screens.length === 0) return true;
+  return cached.screens.every((screen) => screenStillCurrent(screen, root));
+}
+
+function screenStillCurrent(screen: AnyFiber, root: AnyFiber): boolean {
+  if (!isFiberOnVisibleScreen(screen)) return false;
+  let current: AnyFiber = screen;
+  for (let depth = 0; current && depth < MAX_ANCESTOR_WALK; depth += 1) {
+    if (current === root) return true;
+    current = getReturn(current);
+  }
+  return false;
+}
+
+function reportedScreenKey(): string | null {
+  const location = getCurrentScreenLocation();
+  if (!location) return null;
+  const key = 'path' in location ? location.path : location.screen;
+  return key || null;
+}
+
+type Classified =
+  | { kind: 'absent' }
+  | { kind: 'icon' }
+  | { kind: 'family'; name: string }
+  | { kind: 'unusable' };
+
+function classifyFamily(raw: string | undefined): Classified {
+  if (!raw) return { kind: 'absent' };
+  if (isIconFontFamily(raw)) return { kind: 'icon' };
+  const concrete = concreteFontFamily(raw);
+  if (!concrete) return { kind: 'unusable' };
+  return { kind: 'family', name: concrete };
+}
+
+function pickMajority(counts: Map<string | null, number>): string | null {
+  const platform = counts.get(null) ?? 0;
+  let bestName: string | null = null;
+  let bestCount = 0;
+  for (const [name, count] of counts) {
+    if (name == null) continue;
+    if (bestName == null || count > bestCount || (count === bestCount && name < bestName)) {
+      bestName = name;
+      bestCount = count;
+    }
+  }
+  if (bestName == null || platform > bestCount) return null;
+  return bestName;
+}
+
+function isUnderSdkHost(fiber: AnyFiber, root: AnyFiber): boolean {
+  let parent = getReturn(fiber);
+  for (let depth = 0; parent && parent !== root && depth < MAX_FONT_ANCESTORS; depth += 1) {
+    try {
+      const testID = getLiveHostProps(parent)?.testID;
+      if (typeof testID === 'string' && testID.startsWith(SDK_HOST_TEST_ID_PREFIX)) {
+        return true;
+      }
+    } catch {
+      // An unreadable ancestor is not an SDK host.
+    }
+    parent = getReturn(parent);
+  }
+  return false;
+}
+
+function isTextHost(fiber: AnyFiber): boolean {
+  const typeName = getHostTypeName(fiber);
+  if (typeName && TEXT_HOST_NAMES.has(typeName)) return true;
+  const elementType = fiber?.elementType;
+  if (typeof elementType === 'string' && TEXT_HOST_NAMES.has(elementType)) return true;
+  try {
+    const node = getStateNode(fiber) as {
+      viewConfig?: { uiViewClassName?: unknown };
+      __viewConfig?: { uiViewClassName?: unknown };
+    } | null;
+    const className = node?.viewConfig?.uiViewClassName ?? node?.__viewConfig?.uiViewClassName;
+    return typeof className === 'string' && TEXT_HOST_NAMES.has(className);
+  } catch {
+    return false;
+  }
+}
+
+function readFontFamily(fiber: AnyFiber): string | undefined {
+  try {
+    const flat = flattenFontStyle(getLiveHostProps(fiber)?.style);
+    const family = flat?.fontFamily;
+    if (typeof family !== 'string') return undefined;
+    const trimmed = family.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function flattenFontStyle(style: unknown): { fontFamily?: unknown } | null {
+  if (style == null || style === false) return null;
+  if (typeof style === 'number') return flattenRegisteredStyle(style);
+  if (Array.isArray(style)) {
+    let family: unknown;
+    for (const entry of style) {
+      const flat = flattenFontStyle(entry);
+      if (flat && flat.fontFamily != null) family = flat.fontFamily;
+    }
+    return { fontFamily: family };
+  }
+  if (typeof style === 'object') return style as { fontFamily?: unknown };
+  return null;
+}
+
+/**
+ * StyleSheet ids are numbers. Resolve them only when one shows up so tests
+ * that pass plain style objects do not load react-native.
+ */
+function flattenRegisteredStyle(styleId: number): { fontFamily?: unknown } | null {
+  try {
+    // Lazy require so unit tests that pass plain style objects do not load RN.
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const { StyleSheet } = require('react-native') as {
+      StyleSheet?: { flatten?: (style: number) => { fontFamily?: unknown } | null | undefined };
+    };
+    const flat = StyleSheet?.flatten?.(styleId);
+    return flat ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function unwrapFontName(value: string): string {
+  const trimmed = value.trim();
+  if (trimmed.length >= 2) {
+    const first = trimmed[0];
+    const last = trimmed[trimmed.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+      return trimmed.slice(1, -1).trim();
+    }
+  }
+  return trimmed;
+}

package/src/anchors/fiber/presentedModal.ts

@@ -0,0 +1,203 @@
+/**
+ * Where a natively presented modal sits in the window.
+ *
+ * Fabric measures and hit-tests content inside a react-native-screens modal
+ * screen (`RNSModalScreen`) or a React Native `<Modal>` relative to the modal,
+ * not the window: both shadow nodes are `RootNodeKind`, and the native side
+ * reports only their size. That is the window for full-screen presentations,
+ * but a page sheet or form sheet starts below the top of the window, so window
+ * points and measured rects disagree by the sheet's origin.
+ *
+ * The SDK has no native code to ask UIKit where the sheet is, so the origin is
+ * derived from sizes: a sheet as wide as the window is anchored to its bottom.
+ * Measured on iOS 17.4 and 26.5 and an iPadOS 26.5 portrait iPad: page sheets
+ * at 852 − 783 = 69, 874 − 812 = 62 and 1210 − 1104 = 106, a `fitToContents`
+ * form sheet at 852 − 424 = 428.
+ *
+ * A narrower sheet (an iPad form sheet) cannot be placed from sizes. One
+ * measured 580×376 on a 834×1210 window sat at y = 549, neither centered (417)
+ * nor bottom-anchored (834): its detent is anchored inside a taller container
+ * the shadow tree never sees. It gets no origin, so picks on it fail closed.
+ *
+ * Only a sheet at its full-height detent is reliably on the bottom edge. A
+ * shorter one is not, in two cases, and also gets no origin:
+ * - From iOS 26 it floats. On iOS 26.5 the `fitToContents` trade ticket
+ *   measured 402×424 on a 402×874 window, but UIKit drew it about 8pt in from
+ *   the sides and bottom at about 0.96 scale, so a bottom-anchored origin was
+ *   up to 8pt off. Page sheets there stay edge to edge (origin 62, exact).
+ * - While the keyboard is up, a sheet that fits above the keyboard may have
+ *   been lifted to clear it. One that is taller than the space above the
+ *   keyboard was not: on iOS 26.5 a page sheet stayed at 62 with a 335pt
+ *   keyboard, and on iOS 17.4 the trade ticket grew from 424 to 715 under a
+ *   291pt keyboard and stayed on the bottom edge (852 − 715 = 137, exact).
+ *
+ * Paper measures with UIKit, in window coordinates, so its origin is zero.
+ * Outside iOS the modal is measured where it sits, as before this lookup.
+ */
+import { Dimensions, Keyboard, Platform } from 'react-native';
+
+import type { AnyFiber } from './fiberInternals';
+import { measureHostFiber } from './measureHostFiber';
+import { fiberIsUnder, topmostVisibleModalHost } from './visibleRect';
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface PresentedModal {
+  /** `RNSModalScreen`, or React Native's `ModalHostView`. */
+  host: AnyFiber;
+  /**
+   * Window position of `(0, 0)` in the space the modal's content is measured
+   * and hit-tested in. Null when the modal cannot be placed.
+   */
+  origin: Point | null;
+  /** The modal's size, when it was measured (iOS Fabric only). */
+  size: Size | null;
+  /** True on iOS Fabric, where that space is the modal's own rather than the window's. */
+  modalSpace: boolean;
+}
+
+const ZERO: Point = { x: 0, y: 0 };
+
+const MEASURE_TIMEOUT_MS = 400;
+
+/** Layout sizes are fractional and may miss the window size by a hair. */
+const SIZE_SLACK = 1;
+
+/**
+ * A sheet whose top is within this fraction of the window height is at its
+ * full-height detent. Measured: 69/852 (iOS 17.4), 62/874 (iOS 26.5) and
+ * 106/1210 (iPadOS 26.5). Medium and `fitToContents` detents start far lower.
+ */
+const FULL_HEIGHT_SHEET_MAX_TOP = 0.15;
+
+/** First iOS release that floats sheets shorter than full height. */
+const FLOATING_SHEETS_IOS = 26;
+
+function isFabric(): boolean {
+  const manager = (globalThis as { nativeFabricUIManager?: unknown }).nativeFabricUIManager;
+  return manager != null && typeof manager === 'object';
+}
+
+function readWindowSize(): Size | null {
+  try {
+    const { width, height } = Dimensions.get('window');
+    if (width > 0 && height > 0) return { width, height };
+  } catch {
+    // Tests and odd hosts.
+  }
+  return null;
+}
+
+function floatsShortSheets(): boolean {
+  const major = parseInt(String(Platform.Version), 10);
+  return Number.isFinite(major) && major >= FLOATING_SHEETS_IOS;
+}
+
+/** Window y of the keyboard's top edge, or null when it is down. Unknown counts as up at the bottom. */
+function keyboardTop(windowSize: Size): number | null {
+  try {
+    if (typeof Keyboard?.isVisible !== 'function' || !Keyboard.isVisible()) return null;
+    const metrics = typeof Keyboard.metrics === 'function' ? Keyboard.metrics() : undefined;
+    return metrics && metrics.height > 0 ? metrics.screenY : windowSize.height;
+  } catch {
+    return null;
+  }
+}
+
+function measureSize(fiber: AnyFiber): Promise<Size | null> {
+  return new Promise((resolve) => {
+    let settled = false;
+    const timer = setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      resolve(null);
+    }, MEASURE_TIMEOUT_MS);
+    try {
+      measureHostFiber(fiber, (_x, _y, width, height) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        resolve(width > 0 && height > 0 ? { width, height } : null);
+      });
+    } catch {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      resolve(null);
+    }
+  });
+}
+
+/**
+ * Window origin of a presented modal of `size`, bottom-anchored. Null when it
+ * is narrower than the window (see above) or does not fit in it, as
+ * mid-rotation.
+ */
+export function modalOriginInWindow(size: Size, windowSize: Size): Point | null {
+  if (size.width <= 0 || size.height <= 0) return null;
+  if (size.width > windowSize.width + SIZE_SLACK || size.height > windowSize.height + SIZE_SLACK) {
+    return null;
+  }
+  if (size.width < windowSize.width - SIZE_SLACK) return null;
+  return { x: 0, y: Math.max(0, windowSize.height - size.height) };
+}
+
+/** {@link modalOriginInWindow}, or null when a short sheet may be off the bottom edge (see above). */
+function placeModal(size: Size, windowSize: Size): Point | null {
+  const origin = modalOriginInWindow(size, windowSize);
+  if (!origin || origin.y <= windowSize.height * FULL_HEIGHT_SHEET_MAX_TOP) return origin;
+  if (floatsShortSheets()) return null;
+  const keyboard = keyboardTop(windowSize);
+  if (keyboard != null && size.height <= keyboard) return null;
+  return origin;
+}
+
+/**
+ * The modal drawn on top of the app and where its content space sits in the
+ * window, or null when nothing is presented. Look it up per tap: a
+ * `fitToContents` sheet resizes as its content changes.
+ */
+export async function locatePresentedModal(root: AnyFiber | null): Promise<PresentedModal | null> {
+  const host = topmostVisibleModalHost(root);
+  if (!host) return null;
+  if (Platform.OS !== 'ios' || !isFabric()) {
+    return { host, origin: ZERO, size: null, modalSpace: false };
+  }
+  const size = await measureSize(host);
+  const windowSize = readWindowSize();
+  const origin = size && windowSize ? placeModal(size, windowSize) : null;
+  return { host, origin, size, modalSpace: true };
+}
+
+/** True when window point `(x, y)` is outside a placed modal, on the screen it covers. */
+export function isOutsideModal(x: number, y: number, modal: PresentedModal): boolean {
+  const { origin, size } = modal;
+  if (!origin || !size) return false;
+  return x < origin.x || y < origin.y || x > origin.x + size.width || y > origin.y + size.height;
+}
+
+/**
+ * Window position of `(0, 0)` in the space `fiber` is measured in, given what
+ * {@link locatePresentedModal} returned. Null when `modal` covers `fiber`, or
+ * `fiber` is inside a modal that cannot be placed.
+ */
+export function measureOriginOf(fiber: AnyFiber, modal: PresentedModal | null): Point | null {
+  if (!modal) return ZERO;
+  if (!fiberIsUnder(fiber, modal.host)) return null;
+  return modal.origin;
+}
+
+/** `rect`, measured in `modal`'s content space, in window coordinates. */
+export function rectInWindow<T extends Point>(rect: T, modal: PresentedModal): T {
+  const origin = modal.origin ?? ZERO;
+  if (origin.x === 0 && origin.y === 0) return rect;
+  return { ...rect, x: rect.x + origin.x, y: rect.y + origin.y };
+}

package/src/anchors/fiber/touchTargetFiber.ts

@@ -73,9 +73,10 @@ function nativeTagForTouch(
   event: GestureResponderEvent,
   identifier: number | string | undefined,
 ): number | undefined {
+  // Readonly: React Native 0.88 types changedTouches as a readonly array.
   const native = event.nativeEvent as {
     target?: unknown;
-    changedTouches?: Array<{ identifier?: number | string; target?: unknown }>;
+    changedTouches?: ReadonlyArray<{ identifier?: number | string; target?: unknown }>;
   };
   if (identifier != null && native.changedTouches) {
     const touch = native.changedTouches.find((entry) => entry.identifier === identifier);

package/src/anchors/fiber/visibleRect.ts

@@ -17,6 +17,7 @@ import {
 } from './fiberInternals';
 import { findScrollAncestors } from './findScrollAncestors';
 import { measureHostFiber } from './measureHostFiber';
+import { isFiberOnVisibleScreen } from './visibleScreens';
 
 export interface VisibleRect {
   x: number;
@@ -30,6 +31,9 @@ const MEASURE_TIMEOUT_MS = 400;
 /** Paper and Fabric names for React Native's `<Modal>`. */
 const MODAL_HOST_TYPES = new Set(['RCTModalHostView', 'ModalHostView']);
 
+/** react-native-screens' iOS host for `modal`, `transparentModal`, `formSheet` and other presented screens. */
+const SCREENS_MODAL_TYPE = 'RNSModalScreen';
+
 type MeasureCallback = (x: number, y: number, width: number, height: number) => void;
 
 function measureFiberRect(fiber: AnyFiber): Promise<VisibleRect | null> {
@@ -99,10 +103,12 @@ export async function clipToScrollViewports(
 
 function isModalHost(fiber: AnyFiber): boolean {
   const type = getHostTypeName(fiber);
-  return type !== undefined && MODAL_HOST_TYPES.has(type);
+  return type !== undefined && (MODAL_HOST_TYPES.has(type) || type === SCREENS_MODAL_TYPE);
 }
 
 function isModalVisible(fiber: AnyFiber): boolean {
+  // A presented screen stays mounted under the next one; only the top of its stack is visible.
+  if (getHostTypeName(fiber) === SCREENS_MODAL_TYPE) return isFiberOnVisibleScreen(fiber);
   const props = getMemoizedProps(fiber);
   if (!props) return true;
   if (props.visible === false) return false;
@@ -110,8 +116,11 @@ function isModalVisible(fiber: AnyFiber): boolean {
 }
 
 /**
- * The visible modal host drawn on top, or null. Later siblings win: React
- * Native mounts a newer `<Modal>` after the previous one.
+ * The visible modal host drawn on top, or null: a React Native `<Modal>` or a
+ * screen react-native-screens presents natively. Later fibers win: React Native
+ * mounts a newer `<Modal>` after the previous one, a native stack's newest
+ * screen is its last child, and a modal presented from inside another one sits
+ * deeper in the tree.
  */
 export function topmostVisibleModalHost(root: AnyFiber | null, maxNodes = 8_000): AnyFiber | null {
   if (!root) return null;

package/src/anchors/fiber/visibleScreens.ts

@@ -64,6 +64,11 @@ function isScreenFiber(fiber: AnyFiber): boolean {
   return type !== undefined && SCREEN_TYPES.has(type);
 }
 
+/** Host screen the walk can key a cache on (`RNSScreen`, `RNSModalScreen`). */
+export function isScreenHostFiber(fiber: AnyFiber): boolean {
+  return isScreenFiber(fiber);
+}
+
 function isStackContainer(fiber: AnyFiber): boolean {
   const type = getHostTypeName(fiber);
   return type !== undefined && STACK_CONTAINER_TYPES.has(type);