@userflow-tech/react-native 0.1.0

package/src/surfaces/TooltipSurface.tsx

@@ -0,0 +1,743 @@
+import type { FlowSessionEngine } from '@userflow-tech/core';
+import type {
+  EndFlowReasonInput,
+  FlowSessionFragment,
+  FlowStepFragment,
+  ThemeFragment,
+} from '@userflow-tech/protocol';
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  Keyboard,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+import { anchorRegistry } from '../anchors/AnchorRegistry';
+import { addAnimationFrameCallback, removeAnimationFrameCallback } from '../anchors/animationFrame';
+import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
+import type { AnyFiber } from '../anchors/fiber/fiberInternals';
+import { invalidateFiberAnchor, resolveAnchorHost } from '../anchors/resolveAnchorHost';
+import { resolveManualAnchorId } from '../anchors/resolveManualAnchorId';
+import { scrollAnchorIntoView } from '../anchors/scrollAnchorIntoView';
+import { getScrollPadding } from '../anchors/scrollConfig';
+import { targetPressMonitor } from '../anchors/targetPressMonitor';
+import { RichContentRenderer } from '../content/RichContentRenderer';
+import type { LookupAttribute } from '../content/types';
+
+import { CloseButton } from './CloseButton';
+import { resolveCloseButtonColor } from './resolveCloseButtonColor';
+import { MADE_WITH_USERFLOW_GAP, MadeWithUserflow } from './MadeWithUserflow';
+import { ProgressBar } from './ProgressBar';
+import { ABSOLUTE_FILL } from './absoluteFill';
+import { parseBackdropOpacity } from './parseBackdropOpacity';
+import { resolveStepProgress } from './progress';
+import { useUserflowSafeAreaInsets } from './safeArea';
+import { resolveBubbleChrome } from './themeChrome';
+import { TooltipBubble } from './tooltip/TooltipBubble';
+import { TooltipCutout } from './tooltip/TooltipCutout';
+import { computeTooltipPosition } from './tooltip/computeTooltipPosition';
+import {
+  inferTooltipPlacement,
+  type Rect,
+  type TooltipPlacementSide,
+} from './tooltip/inferTooltipPlacement';
+import { parseBackdropPadding } from './tooltip/parseBackdropPadding';
+import { buildEffectiveViewport, isRectFullyVisible, rectsEqual } from './tooltip/rect';
+import {
+  resolveTooltipButtonsAlign,
+  resolveTooltipCardLayout,
+  resolveTooltipCardMaxWidth,
+  resolveTooltipCenterPadding,
+} from './resolveTooltipLayout';
+
+export interface TooltipSurfaceProps {
+  engine: FlowSessionEngine;
+  session: FlowSessionFragment;
+  currentStep: FlowStepFragment;
+  theme: ThemeFragment;
+  lookupAttribute: LookupAttribute;
+}
+
+type MissingMode = 'waiting' | 'reported';
+
+/** Interval for re-resolving a missing / remounted anchor (not for live measure). */
+const RESOLVE_MS = 250;
+/** Slower resolve poll after FLAG/ERROR report so a late-mounting target can recover. */
+const RESOLVE_SLOW_MS = 1000;
+/**
+ * Max scroll-into-view attempts per step while the target stays partially
+ * clipped. Only a safety net for targets that can never become fully visible —
+ * the usual stop condition is the target coming into view.
+ */
+const MAX_SCROLL_ATTEMPTS = 8;
+
+function normalizePlacement(value: unknown): TooltipPlacementSide | null {
+  if (value == null) return null;
+  const upper = String(value).toUpperCase();
+  if (upper === 'ABOVE' || upper === 'BELOW' || upper === 'LEFT' || upper === 'RIGHT') {
+    return upper;
+  }
+  return null;
+}
+
+function parseToleranceMs(raw: ThemeFragment['tooltipMissingToleranceSeconds']): number {
+  const seconds = typeof raw === 'number' ? raw : parseFloat(String(raw));
+  if (!Number.isFinite(seconds) || seconds < 0) return 5000;
+  return Math.max(0, seconds * 1000);
+}
+
+function missingBehavior(theme: ThemeFragment): string {
+  return String(theme.tooltipMissingBehavior ?? 'FLAG').toUpperCase();
+}
+
+/**
+ * Anchored tooltip chrome: measure manual / fiber anchor, place with web flip/shift,
+ * optional cutout backdrop, missing-target report + theme fallbacks.
+ */
+export function TooltipSurface({
+  engine,
+  session,
+  currentStep,
+  theme,
+  lookupAttribute,
+}: TooltipSurfaceProps): React.ReactElement | null {
+  const version = session.version;
+  const chrome = resolveBubbleChrome(theme, 'tooltip');
+  const progress = resolveStepProgress(version, currentStep.id);
+  const showClose = !version.closeDisabled;
+  const backdropOpacity = parseBackdropOpacity(theme.backdropOpacity);
+  const backdropPadding = parseBackdropPadding(currentStep.backdropPadding);
+  const anchorId = resolveManualAnchorId(currentStep.selector?.css);
+  const desiredPlacement = normalizePlacement(currentStep.tooltipPlacement);
+  const behavior = missingBehavior(theme);
+  const insets = useUserflowSafeAreaInsets();
+  const centerPaddingStyle = resolveTooltipCenterPadding(insets);
+
+  const [keyboardBottomInset, setKeyboardBottomInset] = React.useState(0);
+  const [target, setTarget] = React.useState<Rect | null>(null);
+  const [bubbleSize, setBubbleSize] = React.useState({ width: 280, height: 160 });
+  const [placement, setPlacement] = React.useState<TooltipPlacementSide>(
+    desiredPlacement ?? 'BELOW',
+  );
+  const [missingMode, setMissingMode] = React.useState<MissingMode>('waiting');
+  const [registryTick, setRegistryTick] = React.useState(0);
+  /** True after at least one *failed* measure for the current step/anchor. */
+  const [measureAttempted, setMeasureAttempted] = React.useState(false);
+
+  const reportedRef = React.useRef(false);
+  const placementRef = React.useRef(placement);
+  placementRef.current = placement;
+  const mountedRef = React.useRef(true);
+  const targetRef = React.useRef<Rect | null>(null);
+  /** Bounded scroll-into-view attempts for the current step. */
+  const scrollAttemptsRef = React.useRef(0);
+  /**
+   * True once the target has been seen fully visible for this step. From then
+   * on the user owns the scroll position — rAF keeps tracking the target, but
+   * scrolling it back would fight a deliberate scroll away from it.
+   */
+  const scrollSettledRef = React.useRef(false);
+  /** In-flight measureInWindow guard for the rAF loop. */
+  const measureInFlightRef = React.useRef(false);
+  /** Latest resolved host fiber (for scroll-ancestor walk + rAF remeasure). */
+  const hostFiberRef = React.useRef<AnyFiber | null>(null);
+  const hostMeasureRef = React.useRef<
+    ((callback: (x: number, y: number, width: number, height: number) => void) => void) | null
+  >(null);
+  const hostScrollIntoViewRef = React.useRef<(() => void) | undefined>(undefined);
+  const keyboardBottomInsetRef = React.useRef(keyboardBottomInset);
+  keyboardBottomInsetRef.current = keyboardBottomInset;
+  const insetsRef = React.useRef(insets);
+  insetsRef.current = insets;
+  const missingModeRef = React.useRef(missingMode);
+  missingModeRef.current = missingMode;
+  const behaviorRef = React.useRef(behavior);
+  behaviorRef.current = behavior;
+  const draftModeRef = React.useRef(session.draftMode);
+  draftModeRef.current = session.draftMode;
+
+  const endAsUserClosed = React.useCallback(() => {
+    void engine.endFlow('USER_CLOSED' as EndFlowReasonInput);
+  }, [engine]);
+
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const bump = () => setRegistryTick((n) => n + 1);
+    const unsubRegistry = anchorRegistry.subscribe(bump);
+    const unsubScan = fiberScanRoot.subscribe(bump);
+    return () => {
+      unsubRegistry();
+      unsubScan();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    reportedRef.current = false;
+    scrollAttemptsRef.current = 0;
+    scrollSettledRef.current = false;
+    measureInFlightRef.current = false;
+    hostFiberRef.current = null;
+    hostMeasureRef.current = null;
+    hostScrollIntoViewRef.current = undefined;
+    targetRef.current = null;
+    setMissingMode('waiting');
+    setMeasureAttempted(false);
+    setTarget(null);
+  }, [currentStep.id, anchorId]);
+
+  const applyTarget = React.useCallback((next: Rect | null) => {
+    if (!mountedRef.current) return;
+    if (rectsEqual(targetRef.current, next)) return;
+    if (next == null) {
+      // The anchor went away (unmount / navigation), so whatever scroll position
+      // the user had settled on no longer applies. Treat its next appearance as
+      // a fresh one and allow scrolling to it again.
+      scrollAttemptsRef.current = 0;
+      scrollSettledRef.current = false;
+    }
+    targetRef.current = next;
+    setTarget(next);
+  }, []);
+
+  const markMeasureAttempted = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    setMeasureAttempted((prev) => (prev ? prev : true));
+  }, []);
+
+  const effectiveViewport = React.useCallback(() => {
+    const windowSize = Dimensions.get('window');
+    const scrollPadding = getScrollPadding();
+    return buildEffectiveViewport(
+      {
+        width: windowSize.width,
+        height: Math.max(0, windowSize.height - keyboardBottomInsetRef.current),
+      },
+      {
+        top: (insetsRef.current.top ?? 0) + (scrollPadding?.top ?? 0),
+        right: (insetsRef.current.right ?? 0) + (scrollPadding?.right ?? 0),
+        bottom: (insetsRef.current.bottom ?? 0) + (scrollPadding?.bottom ?? 0),
+        left: (insetsRef.current.left ?? 0) + (scrollPadding?.left ?? 0),
+      },
+    );
+  }, []);
+
+  const maybeScrollIntoView = React.useCallback(
+    (rect: Rect) => {
+      if (scrollSettledRef.current) return;
+      if (isRectFullyVisible(rect, effectiveViewport())) {
+        scrollSettledRef.current = true;
+        return;
+      }
+      if (scrollAttemptsRef.current >= MAX_SCROLL_ATTEMPTS) return;
+
+      scrollAttemptsRef.current += 1;
+      const measure = hostMeasureRef.current;
+      if (!measure) return;
+
+      try {
+        const host = {
+          measureInWindow: measure,
+          ...(hostScrollIntoViewRef.current
+            ? { scrollIntoView: hostScrollIntoViewRef.current }
+            : {}),
+        };
+        scrollAnchorIntoView({
+          rect,
+          host,
+          fiber: hostFiberRef.current,
+        });
+      } catch {
+        // Best-effort only — missing-target path still applies if never visible.
+      }
+    },
+    [effectiveViewport],
+  );
+
+  /**
+   * Resolve the anchor host (registry / fiber scan). Used by the interval and
+   * on registry ticks — intentionally NOT on every animation frame.
+   */
+  const resolveTarget = React.useCallback(() => {
+    if (!mountedRef.current) return;
+
+    if (!anchorId) {
+      hostFiberRef.current = null;
+      hostMeasureRef.current = null;
+      hostScrollIntoViewRef.current = undefined;
+      markMeasureAttempted();
+      applyTarget(null);
+      return;
+    }
+
+    const resolution = resolveAnchorHost(anchorId);
+    if (resolution.status !== 'found') {
+      hostFiberRef.current = null;
+      hostMeasureRef.current = null;
+      hostScrollIntoViewRef.current = undefined;
+      markMeasureAttempted();
+      applyTarget(null);
+      return;
+    }
+
+    hostFiberRef.current = resolution.fiber ?? null;
+    hostMeasureRef.current = resolution.host.measureInWindow;
+    hostScrollIntoViewRef.current = resolution.host.scrollIntoView;
+
+    // Kick an immediate measure after resolve so the first paint isn't waiting
+    // on the next rAF (and so missing targets still mark attempted).
+    if (measureInFlightRef.current) return;
+    measureInFlightRef.current = true;
+    resolution.host.measureInWindow((x, y, width, height) => {
+      measureInFlightRef.current = false;
+      if (!mountedRef.current) return;
+
+      if (width <= 0 || height <= 0) {
+        invalidateFiberAnchor(anchorId);
+        hostFiberRef.current = null;
+        hostMeasureRef.current = null;
+        markMeasureAttempted();
+        applyTarget(null);
+        return;
+      }
+
+      const rect: Rect = { x, y, width, height };
+      maybeScrollIntoView(rect);
+      applyTarget(rect);
+    });
+  }, [anchorId, applyTarget, markMeasureAttempted, maybeScrollIntoView]);
+
+  /**
+   * Live re-measure of an already-resolved host. Driven by the shared rAF hub
+   * so the bubble / cutout track finger scrolls without a 250ms lag.
+   */
+  const remeasureResolvedHost = React.useCallback(() => {
+    if (!mountedRef.current) return;
+    if (measureInFlightRef.current) return;
+    const measure = hostMeasureRef.current;
+    if (!measure) return;
+
+    measureInFlightRef.current = true;
+    measure((x, y, width, height) => {
+      measureInFlightRef.current = false;
+      if (!mountedRef.current) return;
+
+      if (width <= 0 || height <= 0) {
+        if (anchorId) invalidateFiberAnchor(anchorId);
+        hostFiberRef.current = null;
+        hostMeasureRef.current = null;
+        markMeasureAttempted();
+        applyTarget(null);
+        return;
+      }
+
+      const rect: Rect = { x, y, width, height };
+      maybeScrollIntoView(rect);
+      applyTarget(rect);
+    });
+  }, [anchorId, applyTarget, markMeasureAttempted, maybeScrollIntoView]);
+
+  React.useEffect(() => {
+    resolveTarget();
+  }, [resolveTarget, registryTick]);
+
+  // Resolve poll: recover missing / remounted anchors. Live measurement is on rAF.
+  React.useEffect(() => {
+    const allowsRecovery =
+      behavior === 'FLAG' || behavior === 'ERROR' || (behavior === 'END' && session.draftMode);
+    const pauseAfterReport = missingMode === 'reported' && !allowsRecovery;
+
+    if (pauseAfterReport) {
+      return;
+    }
+
+    resolveTarget();
+    const intervalMs = missingMode === 'reported' ? RESOLVE_SLOW_MS : RESOLVE_MS;
+    const handle = setInterval(resolveTarget, intervalMs);
+    const dimSub = Dimensions.addEventListener('change', resolveTarget);
+    const onKeyboardShow = (event: { endCoordinates?: { height?: number } }) => {
+      setKeyboardBottomInset(Math.max(0, event.endCoordinates?.height ?? 0));
+      resolveTarget();
+    };
+    const onKeyboardHide = () => {
+      setKeyboardBottomInset(0);
+      resolveTarget();
+    };
+    const kbShow = Keyboard.addListener('keyboardDidShow', onKeyboardShow);
+    const kbHide = Keyboard.addListener('keyboardDidHide', onKeyboardHide);
+    return () => {
+      clearInterval(handle);
+      dimSub.remove();
+      kbShow.remove();
+      kbHide.remove();
+    };
+  }, [resolveTarget, missingMode, behavior, session.draftMode]);
+
+  // rAF tracking while a host is resolved (and we are not paused after report).
+  React.useEffect(() => {
+    const allowsRecovery =
+      behavior === 'FLAG' || behavior === 'ERROR' || (behavior === 'END' && session.draftMode);
+    const pauseAfterReport = missingMode === 'reported' && !allowsRecovery;
+    if (pauseAfterReport || !target) {
+      return;
+    }
+
+    addAnimationFrameCallback(remeasureResolvedHost);
+    return () => {
+      removeAnimationFrameCallback(remeasureResolvedHost);
+    };
+  }, [target, missingMode, behavior, session.draftMode, remeasureResolvedHost]);
+
+  // Missing-target tolerance → report once, then theme fallback.
+  // Only start after a failed measure so a slow measureInWindow cannot
+  // false-report while the target is still loading.
+  React.useEffect(() => {
+    if (target) {
+      // FLAG/ERROR (and draft END) may recover; BUBBLE/live END stay on their fallback.
+      const allowsRecovery =
+        behaviorRef.current === 'FLAG' ||
+        behaviorRef.current === 'ERROR' ||
+        (behaviorRef.current === 'END' && draftModeRef.current);
+      if (missingModeRef.current === 'reported' && !allowsRecovery) {
+        return;
+      }
+      reportedRef.current = false;
+      setMissingMode('waiting');
+      return;
+    }
+
+    if (!measureAttempted) {
+      return;
+    }
+
+    const ms = parseToleranceMs(theme.tooltipMissingToleranceSeconds);
+    const timer = setTimeout(() => {
+      if (!mountedRef.current || reportedRef.current) return;
+      reportedRef.current = true;
+      setMissingMode('reported');
+      void engine.reportTooltipTargetMissing(currentStep.id);
+    }, ms);
+
+    return () => clearTimeout(timer);
+  }, [
+    target,
+    measureAttempted,
+    engine,
+    currentStep.id,
+    theme.tooltipMissingBehavior,
+    theme.tooltipMissingToleranceSeconds,
+  ]);
+
+  const onCardLayout = React.useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setBubbleSize((prev) =>
+        prev.width === width && prev.height === height ? prev : { width, height },
+      );
+    }
+  }, []);
+
+  const windowDims = Dimensions.get('window');
+  const windowSize = React.useMemo(
+    () => ({
+      width: windowDims.width,
+      // Treat the keyboard as covering the bottom of the window so placement /
+      // flip / clamp keep the card in the visible region above it.
+      height: Math.max(0, windowDims.height - keyboardBottomInset),
+    }),
+    [windowDims.width, windowDims.height, keyboardBottomInset],
+  );
+  const cardMaxWidth = resolveTooltipCardMaxWidth(theme, currentStep.width, windowSize.width);
+  const cardLayoutStyle = resolveTooltipCardLayout(cardMaxWidth, windowSize.width);
+  const buttonsAlign = resolveTooltipButtonsAlign(theme);
+  const progressBarProps = {
+    enabled: theme.progressBarEnabled,
+    fraction: progress.fraction,
+    theme,
+    totalSteps: progress.total,
+    contentPadding: chrome.contentPadding,
+  };
+  const isMissing = target == null;
+  const showAsBubbleFallback = isMissing && missingMode === 'reported' && behavior === 'BUBBLE';
+  const showMissingUi =
+    isMissing &&
+    missingMode === 'reported' &&
+    (behavior === 'FLAG' || behavior === 'ERROR' || (behavior === 'END' && session.draftMode));
+  // END: engine ends the flow only when !draftMode — hide only then.
+  const hideAfterEnd =
+    isMissing && missingMode === 'reported' && behavior === 'END' && !session.draftMode;
+  const showWaitingUi = isMissing && missingMode === 'waiting' && measureAttempted;
+
+  const layout = React.useMemo(() => {
+    if (!target) return null;
+    const nextPlacement = inferTooltipPlacement({
+      target,
+      bubbleSize,
+      notchSize: chrome.notchSize,
+      windowSize,
+      currentPlacement: placementRef.current,
+      desiredPlacement,
+    });
+    return {
+      placement: nextPlacement,
+      ...computeTooltipPosition({
+        target,
+        bubbleSize,
+        placement: nextPlacement,
+        notchSize: chrome.notchSize,
+        backdropPadding,
+        windowSize,
+        bubbleBorderRadius: chrome.borderRadius,
+        bubbleBorderWidth: chrome.borderWidth,
+      }),
+    };
+  }, [
+    target,
+    bubbleSize,
+    chrome.notchSize,
+    chrome.borderRadius,
+    chrome.borderWidth,
+    windowSize,
+    desiredPlacement,
+    backdropPadding,
+  ]);
+
+  React.useEffect(() => {
+    if (layout && layout.placement !== placement) {
+      setPlacement(layout.placement);
+    }
+  }, [layout, placement]);
+
+  // Web parity: "When target element is clicked" → step.actions.
+  // Observe taps via TargetPressBridge (pass-through); do not steal the press.
+  const hasTarget = target != null;
+  const targetActions = currentStep.actions;
+  React.useEffect(() => {
+    if (!hasTarget || currentStep.tooltipTargetBlocked || targetActions.length === 0) {
+      targetPressMonitor.clear();
+      return;
+    }
+
+    targetPressMonitor.set({
+      getRect: () => targetRef.current,
+      onPress: () => {
+        void engine.handleActions(targetActions);
+      },
+    });
+
+    return () => {
+      targetPressMonitor.clear();
+    };
+  }, [hasTarget, currentStep.tooltipTargetBlocked, targetActions, engine]);
+
+  if (hideAfterEnd) {
+    return null;
+  }
+
+  // Still pending the first measure attempt — stay invisible briefly.
+  if (isMissing && missingMode === 'waiting' && !measureAttempted) {
+    return null;
+  }
+
+  if (showWaitingUi) {
+    return (
+      <View style={styles.root} testID="userflow-tooltip-surface" pointerEvents="box-none">
+        <View style={[styles.center, centerPaddingStyle]} pointerEvents="box-none">
+          <View
+            testID="userflow-tooltip-waiting"
+            accessibilityViewIsModal
+            pointerEvents="auto"
+            style={[
+              chrome.shadowStyle,
+              styles.waitingCard,
+              cardLayoutStyle,
+              {
+                borderRadius: chrome.borderRadius,
+                backgroundColor: chrome.backgroundColor,
+              },
+            ]}
+          >
+            {/* Shadow on the outer shell — fill clips and iOS would clip the shadow. */}
+            <View
+              style={[chrome.fillStyle, { padding: chrome.contentPadding, alignItems: 'center' }]}
+            >
+              <ActivityIndicator color={theme.fontColor} />
+              <Text
+                style={{
+                  color: theme.fontColor,
+                  fontSize: theme.fontSize,
+                  marginTop: 12,
+                  textAlign: 'center',
+                }}
+              >
+                Looking for target…
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  const progressTop = theme.progressBarEnabled && theme.progressBarPosition === 'TOP';
+  const progressBottom = theme.progressBarEnabled && theme.progressBarPosition === 'BOTTOM';
+  const showBranding = session.flow.company.flowBranding;
+  const contentPadding = chrome.contentPadding;
+
+  const cardBody = (
+    <>
+      {showClose ? (
+        <CloseButton onPress={endAsUserClosed} color={resolveCloseButtonColor(theme)} />
+      ) : null}
+      {progressTop ? <ProgressBar {...progressBarProps} position="TOP" /> : null}
+      <ScrollView
+        testID="userflow-flow-scroll"
+        style={styles.scroll}
+        contentContainerStyle={[
+          styles.scrollContent,
+          {
+            paddingHorizontal: contentPadding,
+            paddingTop: contentPadding,
+            paddingBottom: showBranding ? MADE_WITH_USERFLOW_GAP : contentPadding,
+          },
+        ]}
+        keyboardShouldPersistTaps="handled"
+        nestedScrollEnabled
+        bounces={false}
+      >
+        {showMissingUi ? (
+          <View testID="userflow-tooltip-missing">
+            <Text
+              style={[styles.missingTitle, { color: theme.fontColor, fontSize: theme.fontSize }]}
+            >
+              Target not found
+            </Text>
+            <Text style={{ color: theme.fontColor, fontSize: theme.fontSize, opacity: 0.8 }}>
+              This step's anchor is missing. Close to continue, or wait if the screen is still
+              loading.
+            </Text>
+          </View>
+        ) : (
+          <RichContentRenderer
+            content={currentStep.content}
+            buttons={currentStep.buttons}
+            theme={theme}
+            sessionData={session.data}
+            lookupAttribute={lookupAttribute}
+            defaultButtonsAlign={buttonsAlign}
+            onActions={(actions) => {
+              void engine.handleActions(actions);
+            }}
+          />
+        )}
+      </ScrollView>
+      {progressBottom ? <ProgressBar {...progressBarProps} position="BOTTOM" /> : null}
+      <MadeWithUserflow
+        company={session.flow.company}
+        color={theme.fontColor}
+        contentPadding={contentPadding}
+      />
+    </>
+  );
+
+  if (showAsBubbleFallback || showMissingUi) {
+    return (
+      <View style={styles.root} testID="userflow-tooltip-surface" pointerEvents="box-none">
+        <View style={[styles.center, centerPaddingStyle]} pointerEvents="box-none">
+          <View
+            testID="userflow-tooltip-card"
+            accessibilityViewIsModal
+            pointerEvents="auto"
+            onLayout={onCardLayout}
+            style={[
+              chrome.shadowStyle,
+              styles.fallbackCard,
+              cardLayoutStyle,
+              {
+                borderRadius: chrome.borderRadius,
+                backgroundColor: chrome.backgroundColor,
+              },
+            ]}
+          >
+            {/* Shadow lives on the outer layer: the fill clips its content and
+                iOS clips the shadow with it. */}
+            <View style={[chrome.fillStyle, styles.fallbackFill]}>{cardBody}</View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  if (!layout || !target) {
+    return null;
+  }
+
+  return (
+    <View style={styles.root} testID="userflow-tooltip-surface" pointerEvents="box-none">
+      {currentStep.backdrop ? (
+        <TooltipCutout
+          targetRect={layout.targetHighlightRect}
+          backdropColor={theme.backdropColor}
+          backdropOpacity={backdropOpacity}
+          targetBlocked={currentStep.tooltipTargetBlocked}
+        />
+      ) : null}
+
+      <TooltipBubble
+        chrome={chrome}
+        notchPosition={layout.notchPosition}
+        onLayout={onCardLayout}
+        style={{
+          position: 'absolute',
+          left: layout.cardPosition.x,
+          top: layout.cardPosition.y,
+          ...cardLayoutStyle,
+        }}
+      >
+        {cardBody}
+      </TooltipBubble>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    ...ABSOLUTE_FILL,
+  },
+  center: {
+    ...ABSOLUTE_FILL,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  fallbackCard: {
+    maxHeight: '80%',
+    flexShrink: 1,
+  },
+  fallbackFill: {
+    flexShrink: 1,
+  },
+  waitingCard: {
+    width: '100%',
+  },
+  scroll: {
+    flexGrow: 0,
+    flexShrink: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  missingTitle: {
+    fontWeight: '700',
+    marginBottom: 8,
+  },
+});