@userflow-tech/react-native 0.4.5 → 0.5.0

package/src/surfaces/TooltipSurface.tsx

@@ -1,9 +1,10 @@
 import type { FlowSessionEngine } from '@userflow-tech/core';
-import type {
-  EndFlowReasonInput,
-  FlowSessionFragment,
-  FlowStepFragment,
-  ThemeFragment,
+import {
+  decodeMobileAutoData,
+  type EndFlowReasonInput,
+  type FlowSessionFragment,
+  type FlowStepFragment,
+  type ThemeFragment,
 } from '@userflow-tech/protocol';
 import * as React from 'react';
 import {
@@ -20,6 +21,7 @@ import {
 import { anchorRegistry } from '../anchors/AnchorRegistry';
 import { autoAnchorRegistry } from '../anchors/AutoAnchorRegistry';
 import { addAnimationFrameCallback, removeAnimationFrameCallback } from '../anchors/animationFrame';
+import { isAppActive, subscribeAppActive } from '../anchors/appActive';
 import { fiberScanRoot } from '../anchors/fiber/FiberScanRoot';
 import type { AnyFiber } from '../anchors/fiber/fiberInternals';
 import { clipToScrollViewports } from '../anchors/fiber/visibleRect';
@@ -27,6 +29,7 @@ import {
   clearFiberAnchorCache,
   invalidateFiberAnchor,
   resolveAnchorHost,
+  subscribeAnchorScreenChange,
 } from '../anchors/resolveAnchorHost';
 import { resolveAutoAnchorHost } from '../anchors/resolveAutoAnchorHost';
 import { resolveManualAnchorId } from '../anchors/resolveManualAnchorId';
@@ -42,6 +45,7 @@ import { MADE_WITH_USERFLOW_GAP, MadeWithUserflow } from './MadeWithUserflow';
 import { ProgressBar } from './ProgressBar';
 import { ABSOLUTE_FILL } from './absoluteFill';
 import { useCardTransitionPhase } from './cardTransition';
+import { stepTrapsHostAccessibility } from './hostAccessibilityTrap';
 import { parseBackdropOpacity } from './parseBackdropOpacity';
 import { resolveStepProgress } from './progress';
 import { resolveCloseButtonColor } from './resolveCloseButtonColor';
@@ -77,6 +81,7 @@ import {
   tooltipSideGap,
   tooltipVerticalGap,
 } from './tooltip/resolveSideCardWidth';
+import { TargetSearchSchedule } from './tooltip/targetSearchSchedule';
 
 export interface TooltipSurfaceProps {
   engine: FlowSessionEngine;
@@ -94,10 +99,6 @@ export interface TooltipSurfaceProps {
 
 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;
 /**
  * One-frame delay before the first resolve after a step/reset so dialog
  * teardown cannot arm the missing-target timer with a 0-size measure.
@@ -162,6 +163,11 @@ export function TooltipSurface({
   const selector = currentStep.selector;
   const isAuto = (selector?.type as string | null) === 'AUTO';
   const autoData = selector?.autoData ?? null;
+  // Decoded once per step rather than on every search.
+  const decodedAutoData = React.useMemo(
+    () => (isAuto ? decodeMobileAutoData(autoData) : null),
+    [isAuto, autoData],
+  );
   const anchorId = isAuto ? null : resolveManualAnchorId(selector?.css);
   const targetKey = isAuto ? `auto:${autoData ?? ''}` : (anchorId ?? '');
   const highlight = currentStep.backdrop ? resolveHighlightChrome(theme, backdropPadding) : null;
@@ -191,7 +197,6 @@ export function TooltipSurface({
     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);
   /**
@@ -272,18 +277,6 @@ export function TooltipSurface({
     };
   }, []);
 
-  React.useEffect(() => {
-    const bump = () => setRegistryTick((n) => n + 1);
-    const unsubRegistry = anchorRegistry.subscribe(bump);
-    const unsubAuto = autoAnchorRegistry.subscribe(bump);
-    const unsubScan = fiberScanRoot.subscribe(bump);
-    return () => {
-      unsubRegistry();
-      unsubAuto();
-      unsubScan();
-    };
-  }, []);
-
   React.useEffect(() => {
     reportedRef.current = false;
     scrollAttemptsRef.current = 0;
@@ -426,14 +419,14 @@ export function TooltipSurface({
   );
 
   /**
-   * Resolve the anchor host (registry / fiber scan). Used by the interval and
-   * on registry ticks — intentionally NOT on every animation frame.
+   * Resolve the anchor host (registry / fiber scan). Driven by
+   * {@link TargetSearchSchedule} — intentionally NOT on every animation frame.
    */
   const resolveTarget = React.useCallback(() => {
     if (!mountedRef.current) return;
 
     const resolution = isAuto
-      ? resolveAutoAnchorHost(autoData)
+      ? resolveAutoAnchorHost(decodedAutoData)
       : anchorId
         ? resolveAnchorHost(anchorId)
         : null;
@@ -474,7 +467,7 @@ export function TooltipSurface({
       maybeScrollIntoView(rect);
       applyTarget(rect);
     });
-  }, [anchorId, applyTarget, autoData, dropHost, isAuto, maybeScrollIntoView]);
+  }, [anchorId, applyTarget, decodedAutoData, dropHost, isAuto, maybeScrollIntoView]);
 
   /**
    * Live re-measure of an already-resolved host. Driven by the shared rAF hub
@@ -509,45 +502,60 @@ export function TooltipSurface({
     });
   }, [applyTarget, dropHost, maybeScrollIntoView]);
 
+  const resolveTargetRef = React.useRef(resolveTarget);
+  resolveTargetRef.current = resolveTarget;
+  const searchRef = React.useRef<TargetSearchSchedule | null>(null);
+  const searchAllowsRecovery =
+    behavior === 'FLAG' || behavior === 'ERROR' || (behavior === 'END' && session.draftMode);
+  const searchStopped = missingMode === 'reported' && !searchAllowsRecovery;
+
+  // Target search: steady poll while anchored, backoff while missing, nothing
+  // while the app is in the background. Live measurement is on rAF. A new step
+  // or target restarts it right away; a same-step restart (`resetNonce`) goes
+  // through `resolveArmed`, after the first-resolve delay.
   React.useEffect(() => {
-    if (!resolveArmed) return;
-    resolveTarget();
-  }, [resolveTarget, registryTick, resolveArmed]);
-
-  // Resolve poll: recover missing / remounted anchors. Live measurement is on rAF.
-  React.useEffect(() => {
-    if (!resolveArmed) {
+    if (!resolveArmed || searchStopped) {
       return;
     }
-    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 search = new TargetSearchSchedule(() => resolveTargetRef.current());
+    searchRef.current = search;
+    search.setMode(targetRef.current ? 'anchored' : 'missing');
+
+    const trigger = () => search.trigger();
+    const unsubscribers = [
+      anchorRegistry.subscribe(trigger),
+      autoAnchorRegistry.subscribe(trigger),
+      fiberScanRoot.subscribe(trigger),
+      subscribeAnchorScreenChange(() => search.rearm()),
+      subscribeAppActive((active) => (active ? search.resume() : search.pause())),
+    ];
+    if (!isAppActive()) search.pause();
+    search.runNow();
+
+    const dimSub = Dimensions.addEventListener('change', () => search.runNow());
     const onKeyboardShow = (event: { endCoordinates?: { height?: number } }) => {
       setKeyboardBottomInset(Math.max(0, event.endCoordinates?.height ?? 0));
-      resolveTarget();
+      search.runNow();
     };
     const onKeyboardHide = () => {
       setKeyboardBottomInset(0);
-      resolveTarget();
+      search.runNow();
     };
     const kbShow = Keyboard.addListener('keyboardDidShow', onKeyboardShow);
     const kbHide = Keyboard.addListener('keyboardDidHide', onKeyboardHide);
     return () => {
-      clearInterval(handle);
+      for (const unsubscribe of unsubscribers) unsubscribe();
       dimSub.remove();
       kbShow.remove();
       kbHide.remove();
+      search.dispose();
+      if (searchRef.current === search) searchRef.current = null;
     };
-  }, [resolveTarget, missingMode, behavior, session.draftMode, resolveArmed]);
+  }, [resolveArmed, searchStopped, currentStep.id, targetKey]);
+
+  React.useEffect(() => {
+    searchRef.current?.setMode(target ? 'anchored' : 'missing');
+  }, [target]);
 
   // rAF tracking while a host is resolved (and we are not paused after report).
   React.useEffect(() => {
@@ -864,6 +872,9 @@ export function TooltipSurface({
 
   const showBranding = session.flow.company.flowBranding;
   const contentPadding = chrome.contentPadding;
+  // Modal only while the host is trapped too. Otherwise VoiceOver would skip
+  // the host app, including the target this step asks the user to press.
+  const cardIsModal = stepTrapsHostAccessibility(currentStep);
 
   // Still pending the first measure attempt — only the blocker shows.
   if (isMissing && missingMode === 'waiting' && !measureAttempted) {
@@ -877,7 +888,7 @@ export function TooltipSurface({
         <View style={[styles.center, centerPaddingStyle]} pointerEvents="box-none">
           <CardFade
             testID="userflow-tooltip-waiting"
-            accessibilityViewIsModal
+            accessibilityViewIsModal={cardIsModal}
             pointerEvents="auto"
             style={[
               chrome.shadowStyle,
@@ -990,7 +1001,7 @@ export function TooltipSurface({
         <View style={[styles.center, centerPaddingStyle]} pointerEvents="box-none">
           <CardFade
             testID="userflow-tooltip-card"
-            accessibilityViewIsModal
+            accessibilityViewIsModal={cardIsModal}
             pointerEvents="auto"
             onLayout={onCardLayout}
             style={[
@@ -1032,6 +1043,7 @@ export function TooltipSurface({
         onLayout={onCardLayout}
         maxHeight={layout.maxCardHeight}
         showNotch={layout.showNotch}
+        accessibilityViewIsModal={cardIsModal}
         style={{
           position: 'absolute',
           left: layout.cardPosition.x,

package/src/surfaces/bannerBarLayout.ts

@@ -3,10 +3,12 @@ import { BannerContentLayout } from '@userflow-tech/protocol';
 import type { ViewStyle } from 'react-native';
 
 import {
+  BANNER_CLOSE_SLOT_SIZE,
   BANNER_INNER_COLUMN_GAP,
   BANNER_INNER_MARGIN_HORIZONTAL,
   BANNER_INNER_ROW_GAP,
   BANNER_OVERLAY_SCREEN_INSET_HORIZONTAL,
+  BANNER_ROOT_PADDING,
 } from './bannerBarTokens';
 import type { EdgeInsets } from './safeArea';
 
@@ -16,13 +18,50 @@ function optionalMargin(value: number | null | undefined): number | undefined {
   return value == null ? undefined : value;
 }
 
+/** Fixed horizontal chrome inside the embed width (padding, close/spacer slots, inner margins). */
+export function bannerHorizontalChromeWidth(): number {
+  return BANNER_ROOT_PADDING * 2 + BANNER_CLOSE_SLOT_SIZE * 2 + BANNER_INNER_MARGIN_HORIZONTAL * 2;
+}
+
+/** Outer bar cap — max embed width only (max content width limits the inner row on web). */
+export function resolveBannerFrameMaxWidth(banner: BannerFragment): number | null {
+  return banner.maxWidth;
+}
+
+export function bannerHasMaxContentWidth(banner: BannerFragment): boolean {
+  return banner.maxContentWidth != null;
+}
+
+/**
+ * Cap for the native inner row and WebView HTML `.userflowjs-banner-inner` only.
+ * Returns null when max content width is unset. May be 0 when embed width is narrower than chrome.
+ */
+export function resolveBannerInnerMaxWidth(banner: BannerFragment): number | null {
+  if (!bannerHasMaxContentWidth(banner)) {
+    return null;
+  }
+  let cap = banner.maxContentWidth!;
+  if (banner.maxWidth != null) {
+    const embedInnerCap = Math.max(0, banner.maxWidth - bannerHorizontalChromeWidth());
+    cap = Math.min(cap, embedInnerCap);
+  }
+  return cap;
+}
+
 /** Outer frame: max embed width and builder outer margin (web `userflowjs-banner-frame`). */
 export function bannerFrameStyle(banner: BannerFragment): ViewStyle {
-  const hasMaxWidth = banner.maxWidth != null;
+  const frameMaxWidth = resolveBannerFrameMaxWidth(banner);
+  const hasFrameCap = frameMaxWidth != null;
 
   return {
-    alignSelf: hasMaxWidth ? 'center' : 'stretch',
-    ...(hasMaxWidth ? { maxWidth: banner.maxWidth! } : null),
+    alignSelf: hasFrameCap ? 'center' : 'stretch',
+    ...(hasFrameCap
+      ? {
+          maxWidth: frameMaxWidth!,
+          width: '100%' as const,
+          overflow: 'hidden' as const,
+        }
+      : null),
     marginTop: optionalMargin(banner.marginTop),
     marginRight: optionalMargin(banner.marginRight),
     marginBottom: optionalMargin(banner.marginBottom),
@@ -56,12 +95,45 @@ export function bannerInnerJustifyContent(
   }
 }
 
+/**
+ * Push-layout chrome: safe-area pad + bar background on the same node as the
+ * fade so an animated banner does not leave a visible status-bar strip at opacity 0.
+ */
+export function bannerPushLayoutChrome(
+  edge: 'top' | 'bottom',
+  insets: EdgeInsets,
+  backgroundColor: string,
+): ViewStyle {
+  return {
+    backgroundColor,
+    paddingTop: edge === 'top' ? insets.top : 0,
+    paddingBottom: edge === 'bottom' ? insets.bottom : 0,
+  };
+}
+
+/** Matches web `.userflowjs-banner-inner { flex(1000000) }` vs start-spacer `flex(1)`. */
+const BANNER_INNER_FLEX_GROW = 1_000_000;
+
+/** Painted bar (`userflow-banner`) — fill the frame so max embed width clips chrome, not just margins. */
+export function bannerBarRootStyle(banner: BannerFragment): ViewStyle {
+  if (resolveBannerFrameMaxWidth(banner) == null) {
+    return {};
+  }
+  return {
+    width: '100%',
+    maxWidth: '100%',
+  };
+}
+
 export function bannerInnerStyle(banner: BannerFragment): ViewStyle {
-  const hasMaxContentWidth = banner.maxContentWidth != null;
+  const hasMaxContentWidth = bannerHasMaxContentWidth(banner);
+  const innerMaxWidth = resolveBannerInnerMaxWidth(banner);
   return {
-    flexGrow: 1,
+    // Web `.userflowjs-banner-inner { flex(1000000) }` — grow with shrink so text wraps and close stays visible.
+    flexGrow: BANNER_INNER_FLEX_GROW,
     flexShrink: 1,
-    flexBasis: 0,
+    // `auto` avoids the old `flexBasis: 0` + inner `width: 100%` sliver; `minWidth: 0` lets shrink wrap text.
+    flexBasis: hasMaxContentWidth ? ('auto' as const) : 0,
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center',
@@ -69,6 +141,7 @@ export function bannerInnerStyle(banner: BannerFragment): ViewStyle {
     rowGap: BANNER_INNER_ROW_GAP,
     marginHorizontal: BANNER_INNER_MARGIN_HORIZONTAL,
     justifyContent: bannerInnerJustifyContent(banner.contentLayout),
-    ...(hasMaxContentWidth ? { maxWidth: banner.maxContentWidth!, width: '100%' } : null),
+    minWidth: hasMaxContentWidth ? 0 : undefined,
+    ...(innerMaxWidth != null && innerMaxWidth > 0 ? { maxWidth: innerMaxWidth } : null),
   };
 }

package/src/surfaces/bannerWebView/BannerWebViewBar.tsx

@@ -23,14 +23,18 @@ import { getEvalJsWebView, type EvalJsWebViewHandle } from '../../evalJs/getWebV
 import { injectEvalPendingIntoWebView } from '../../evalJs/injectEvalPending';
 import type { EvalJsContext } from '../../evalJs/types';
 import { useEvalJsWebViewInjection } from '../../evalJs/useEvalJsWebViewInjection';
+import { usePushBannerHostInsetRegistration } from '../../runtime/pushBannerLayoutContext';
+import { setBannerFlowSpacerHeight } from '../../runtime/bannerFlowSpacer';
+import { warnBannerOnce } from '../../runtime/bannerPlacement';
 import { getUserflowCore } from '../../runtime/userflowCore';
 import { getCurrentScreenLocation, subscribeScreenLocation } from '../../screenTracker';
 import {
   bannerFrameStyle,
-  bannerInnerStyle,
+  bannerPushLayoutChrome,
   resolveBannerBarBorderRadius,
 } from '../bannerBarLayout';
 import { bannerOverlayShadowStyle } from '../bannerBarTokens';
+import { resolveBannerBackgroundColor } from '../resolveBannerTheme';
 import { useUserflowSafeAreaInsets } from '../safeArea';
 
 import { collectBannerAutoRunEvalCodes } from './bannerAutoRunEvalJs';
@@ -39,6 +43,8 @@ import { buildCustomBannerBodyHtml } from './buildCustomBannerHtml';
 
 export interface BannerWebViewBarProps {
   session: BannerSessionFragment;
+  pushLayoutEdge?: 'top' | 'bottom' | null;
+  overlaySafeEdge?: 'top' | 'bottom' | null;
   onActions: (actions: FlowActionFragment[]) => void | Promise<void>;
   onDismiss: (endReason: EndFlowReasonInput) => void;
 }
@@ -68,14 +74,27 @@ function useEvalJsScreen(): { name?: string; path?: string } {
 
 export function BannerWebViewBar({
   session,
+  pushLayoutEdge = null,
+  overlaySafeEdge = null,
   onActions,
   onDismiss,
 }: BannerWebViewBarProps): React.ReactElement | null {
   const banner = session.version.banner;
+  const overlay = banner?.overlay !== false;
+  const hostInsetEdge = banner && !overlay && pushLayoutEdge ? pushLayoutEdge : null;
+  const pushLayoutRegistrationEdge =
+    hostInsetEdge ?? (!overlay && overlaySafeEdge ? overlaySafeEdge : null);
+  const safeAreaEdge = hostInsetEdge ?? overlaySafeEdge ?? null;
+  const onPushChromeLayout = usePushBannerHostInsetRegistration(
+    pushLayoutRegistrationEdge,
+    session.id,
+    pushLayoutRegistrationEdge != null,
+  );
   const WebView = getEvalJsWebView();
   const webRef = React.useRef<EvalJsWebViewHandle>(null);
   const [pageReady, setPageReady] = React.useState(false);
   const [contentHeight, setContentHeight] = React.useState(56);
+  const [webLayoutHeight, setWebLayoutHeight] = React.useState<number | null>(null);
   const colorScheme = useColorScheme();
   const viewport = useWindowDimensions();
   const insets = useUserflowSafeAreaInsets();
@@ -104,18 +123,18 @@ export function BannerWebViewBar({
   const serverEndpoint = getUserflowCore().getServerEndpoint() ?? DEFAULT_SERVER_ENDPOINT;
 
   const skipAutoRunEval = shouldSkipBannerAutoRunEval(session.id);
-  const initialContext = React.useRef(context);
   const html = React.useMemo(() => {
     const body = buildCustomBannerBodyHtml(session, lookupAttribute, serverEndpoint, {
       skipAutoRunEval,
     });
-    return buildBootstrapHtml(initialContext.current, body);
-  }, [lookupAttribute, serverEndpoint, session, skipAutoRunEval]);
+    return buildBootstrapHtml(context, body);
+  }, [context, lookupAttribute, serverEndpoint, session, skipAutoRunEval]);
 
-  const opacity = React.useRef(new Animated.Value(banner?.animate ? 0 : 1)).current;
+  const fadeIn = banner?.animate === true && hostInsetEdge == null;
+  const opacity = React.useRef(new Animated.Value(fadeIn ? 0 : 1)).current;
 
   React.useEffect(() => {
-    if (!banner?.animate) {
+    if (!fadeIn) {
       opacity.setValue(1);
       return;
     }
@@ -129,13 +148,39 @@ export function BannerWebViewBar({
     return () => {
       animation.stop();
     };
-  }, [banner?.animate, opacity, session.id]);
+  }, [fadeIn, opacity, session.id]);
 
   React.useEffect(() => {
     setPageReady(false);
     setContentHeight(56);
+    setWebLayoutHeight(null);
   }, [session.id, html]);
 
+  const reserveFlowSpace = !overlay && overlaySafeEdge != null;
+  React.useEffect(() => {
+    if (!reserveFlowSpace || !overlaySafeEdge) {
+      return;
+    }
+    return () => {
+      setBannerFlowSpacerHeight(overlaySafeEdge, 0);
+    };
+  }, [overlaySafeEdge, reserveFlowSpace, session.id]);
+
+  React.useEffect(() => {
+    if (pushLayoutRegistrationEdge == null) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      if (webLayoutHeight == null) {
+        warnBannerOnce(
+          `push-webview-layout:${session.id}`,
+          'Userflow: push-layout WebView banner did not report a layout height; check custom CSS / WebView logs',
+        );
+      }
+    }, 4000);
+    return () => clearTimeout(timer);
+  }, [pushLayoutRegistrationEdge, session.id, webLayoutHeight]);
+
   React.useEffect(() => {
     if (!pageReady || skipAutoRunEval || !banner) {
       return;
@@ -177,17 +222,23 @@ export function BannerWebViewBar({
             const maxHeight = Math.floor(viewport.height * 0.92);
             const next = Math.min(Math.ceil(height), maxHeight);
             setContentHeight((prev) => (Math.abs(next - prev) <= 1 ? prev : next));
+            setWebLayoutHeight(next);
           }
           return;
         }
         if (record.__userflow === 1 && record.type === 'bannerButton') {
           const buttonId = record.buttonId;
           if (typeof buttonId === 'string' && banner) {
-            const button = banner.buttons.find((entry) => entry.id === buttonId);
+            const button =
+              banner.buttons.find((entry) => entry.id === buttonId) ??
+              banner.buttons.find((entry) => entry.cvid === buttonId);
             if (button) {
               void Promise.resolve(onActions(button.actions)).then(() => {
                 injectEvalPendingIntoWebView(webRef.current);
               });
+            } else if (__DEV__) {
+              // eslint-disable-next-line no-console -- intentional development diagnostic
+              console.warn('[Userflow] banner button not found for id', buttonId);
             }
           }
           return;
@@ -241,72 +292,113 @@ export function BannerWebViewBar({
           return;
       }
     },
-    [banner, onActions, onDismiss, viewport.height],
+    [
+      banner,
+      insets.bottom,
+      insets.top,
+      onActions,
+      onDismiss,
+      overlaySafeEdge,
+      reserveFlowSpace,
+      viewport.height,
+    ],
   );
 
   if (!banner || !WebView) {
     return null;
   }
 
-  const overlay = banner.overlay !== false;
   const frameStyle = bannerFrameStyle(banner);
-  const innerStyle = bannerInnerStyle(banner);
   const overlayEdge = banner.embedMode === BannerEmbedMode.BODY_LAST ? 'bottom' : 'top';
   const barRadius = resolveBannerBarBorderRadius(banner);
+  const backgroundColor = resolveBannerBackgroundColor(session.version.theme);
   const webStyle: ViewStyle = {
     width: '100%',
     height: contentHeight,
-    backgroundColor: 'transparent',
+    backgroundColor,
   };
   const debugging = typeof __DEV__ !== 'undefined' && __DEV__ ? true : undefined;
+  const insetChrome = safeAreaEdge
+    ? bannerPushLayoutChrome(safeAreaEdge, insets, backgroundColor)
+    : null;
+  const insetChromeOutsideFade = insetChrome != null && fadeIn;
+
+  const webViewBar = (
+    <View
+      testID="userflow-banner-webview"
+      pointerEvents="auto"
+      style={[{ borderRadius: barRadius ?? 0, overflow: 'hidden' as const }]}
+    >
+      <WebView
+        key={session.id}
+        ref={webRef}
+        source={{ html, baseUrl: EVAL_JS_BASE_URL }}
+        style={webStyle}
+        javaScriptEnabled
+        domStorageEnabled
+        scrollEnabled={false}
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        originWhitelist={['*']}
+        setSupportMultipleWindows={false}
+        androidLayerType="hardware"
+        {...(debugging !== undefined ? { webviewDebuggingEnabled: debugging } : {})}
+        onMessage={onMessage}
+        onLoadEnd={() => {
+          setPageReady(true);
+          webRef.current?.injectJavaScript(
+            'window.__userflowBannerLayout&&window.__userflowBannerLayout();true;',
+          );
+        }}
+        onShouldStartLoadWithRequest={(request) => {
+          if (isBootstrapUrl(request.url)) {
+            return true;
+          }
+          openExternal(request.url);
+          return false;
+        }}
+        onOpenWindow={(event) => {
+          const url = event.nativeEvent.targetUrl;
+          if (url) {
+            openExternal(url);
+          }
+        }}
+      />
+    </View>
+  );
+
+  const animatedBar = (
+    <Animated.View
+      style={[
+        { opacity },
+        overlay ? bannerOverlayShadowStyle(overlayEdge) : null,
+        insetChromeOutsideFade ? null : insetChrome,
+      ]}
+    >
+      {webViewBar}
+    </Animated.View>
+  );
 
   return (
-    <View testID="userflow-banner-frame" style={frameStyle}>
-      <Animated.View style={[{ opacity }, overlay ? bannerOverlayShadowStyle(overlayEdge) : null]}>
-        <View
-          testID="userflow-banner-webview"
-          style={[
-            { borderRadius: barRadius ?? 0, overflow: 'hidden' as const },
-            innerStyle.maxWidth != null ? { maxWidth: innerStyle.maxWidth } : null,
-          ]}
-        >
-          <WebView
-            ref={webRef}
-            source={{ html, baseUrl: EVAL_JS_BASE_URL }}
-            style={webStyle}
-            javaScriptEnabled
-            domStorageEnabled
-            scrollEnabled={false}
-            bounces={false}
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            originWhitelist={['*']}
-            setSupportMultipleWindows={false}
-            androidLayerType="hardware"
-            {...(debugging !== undefined ? { webviewDebuggingEnabled: debugging } : {})}
-            onMessage={onMessage}
-            onLoadEnd={() => {
-              setPageReady(true);
-              webRef.current?.injectJavaScript(
-                'window.__userflowBannerLayout&&window.__userflowBannerLayout();true;',
-              );
-            }}
-            onShouldStartLoadWithRequest={(request) => {
-              if (isBootstrapUrl(request.url)) {
-                return true;
+    <View
+      testID="userflow-banner-frame"
+      style={frameStyle}
+      onLayout={
+        reserveFlowSpace && overlaySafeEdge
+          ? (event) => {
+              onPushChromeLayout(event);
+              const h = event.nativeEvent.layout.height;
+              if (h > 0) {
+                setBannerFlowSpacerHeight(overlaySafeEdge, h);
               }
-              openExternal(request.url);
-              return false;
-            }}
-            onOpenWindow={(event) => {
-              const url = event.nativeEvent.targetUrl;
-              if (url) {
-                openExternal(url);
-              }
-            }}
-          />
-        </View>
-      </Animated.View>
+            }
+          : pushLayoutRegistrationEdge
+            ? onPushChromeLayout
+            : undefined
+      }
+    >
+      {insetChromeOutsideFade ? <View style={insetChrome}>{animatedBar}</View> : animatedBar}
     </View>
   );
 }