@userflow-tech/react-native 0.4.4 → 0.5.0

package/src/runtime/BannerHost.tsx

@@ -1,11 +1,10 @@
 import type { BannerSessionEngine } from '@userflow-tech/core';
-import type { BannerSessionFragment } from '@userflow-tech/protocol';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { BannerSurface } from '../surfaces/BannerSurface';
 import { bannerOverlayHostPadding } from '../surfaces/bannerBarLayout';
-import { resolveBannerBackgroundColor } from '../surfaces/resolveBannerTheme';
+import { bannerNeedsWebView } from '../surfaces/bannerWebView/bannerNeedsWebView';
 import { useUserflowSafeAreaInsets } from '../surfaces/safeArea';
 
 import { SdkErrorBoundary } from './SdkErrorBoundary';
@@ -50,53 +49,72 @@ export function BannerHost({
   if (edgeFilter && edge !== edgeFilter) return null;
 
   const floats = banner.overlay !== false;
-  if ((placement === 'overlay') !== floats) return null;
+  const usesWebView = bannerNeedsWebView(banner, session.version.theme);
+  // Custom-css / eval WebViews paint in the overlay host (same as userflow.js). A second
+  // WKWebView in the flow slot often fails to load after the first banner dismisses.
+  const hostAsOverlay = floats || usesWebView;
+  if ((placement === 'overlay') !== hostAsOverlay) return null;
+
+  const pushLayoutEdge = placement === 'flow' && !hostAsOverlay ? edge : null;
+  // Builder overlay:true floats below the status bar. Push-layout WebViews in the overlay
+  // host still paint safe-area chrome (overlay:false + custom CSS).
+  const overlaySafeEdge = hostAsOverlay && !floats ? edge : null;
+
+  const surface = (
+    <BannerSurface
+      session={session}
+      pushLayoutEdge={pushLayoutEdge}
+      overlaySafeEdge={overlaySafeEdge}
+      onActions={(actions) => engine.handleActions(actions)}
+      onDismiss={(endReason) => {
+        void engine.endBanner(endReason);
+      }}
+    />
+  );
 
   const bar = (
     <SdkErrorBoundary scope="banner" resetKey={session.id}>
-      <BannerSurface
-        session={session}
-        onActions={(actions) => engine.handleActions(actions)}
-        onDismiss={(endReason) => {
-          void engine.endBanner(endReason);
-        }}
-      />
+      {placement === 'flow' ? (
+        <View testID="userflow-banner-flow" style={styles.flow}>
+          {surface}
+        </View>
+      ) : (
+        surface
+      )}
     </SdkErrorBoundary>
   );
 
   if (placement === 'flow') {
-    const backgroundColor = bannerBackground(session);
-    const safePad = edge === 'top' ? { paddingTop: insets.top } : { paddingBottom: insets.bottom };
-    return (
-      <View testID="userflow-banner-flow" style={[styles.flow, safePad, { backgroundColor }]}>
-        {bar}
-      </View>
-    );
+    return bar;
   }
 
-  const edgeStyle = edge === 'top' ? { top: insets.top } : { bottom: insets.bottom };
+  const edgeStyle =
+    edge === 'top' ? { top: floats ? insets.top : 0 } : { bottom: floats ? insets.bottom : 0 };
 
   return (
     <View
       pointerEvents="box-none"
       style={[styles.pin, edgeStyle, bannerOverlayHostPadding(insets)]}
     >
-      {bar}
+      <View pointerEvents="auto" style={styles.pinInteractive}>
+        {bar}
+      </View>
     </View>
   );
 }
 
-function bannerBackground(session: BannerSessionFragment): string {
-  return resolveBannerBackgroundColor(session.version.theme);
-}
-
 const styles = StyleSheet.create({
   pin: {
     position: 'absolute',
     left: 0,
     right: 0,
+    zIndex: 10,
+    elevation: 10,
   },
   flow: {
     alignSelf: 'stretch',
   },
+  pinInteractive: {
+    alignSelf: 'stretch',
+  },
 });

package/src/runtime/TargetPressBridge.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 import { StyleSheet, View, type GestureResponderEvent } from 'react-native';
 
 import { elementTapMonitor } from '../anchors/elementTapMonitor';
+import type { AnyFiber } from '../anchors/fiber/fiberInternals';
 import { touchBelongsToEvent, touchTargetFiber } from '../anchors/fiber/touchTargetFiber';
-import { targetPressMonitor } from '../anchors/targetPressMonitor';
+import { collectGestureHandlerTags } from '../anchors/gestureHandlerHandoff';
+import { targetPressMonitor, type TouchIdentifier } from '../anchors/targetPressMonitor';
 
-import { changedTouchPoints, forEachChangedTouch } from './changedTouchPoints';
+import { forEachChangedTouch } from './changedTouchPoints';
 import { isolateSync } from './isolateCall';
 
 export interface TargetPressBridgeProps {
@@ -25,6 +27,9 @@ export interface TargetPressBridgeProps {
  * Preview-chrome double taps are observed by `DoubleTapBridge` around the
  * whole provider tree — this bridge never sees overlay touches.
  *
+ * A touch that gesture-handler cancels is not dropped. The start is kept and
+ * counts as a tap if that handler later ends from ACTIVE.
+ *
  * Does not claim the gesture responder.
  */
 export function TargetPressBridge({ children }: TargetPressBridgeProps): React.ReactElement {
@@ -57,15 +62,23 @@ export function TargetPressBridge({ children }: TargetPressBridgeProps): React.R
 
   const onTouchCancel = React.useCallback((event: GestureResponderEvent) => {
     isolateSync('target-press', () => {
-      const points = changedTouchPoints(event);
-      if (points.length === 0) {
-        targetPressMonitor.cancelTouch();
-        elementTapMonitor.cancelTouch();
+      const changed = event.nativeEvent.changedTouches;
+      if (!changed || changed.length === 0) {
+        const identifiers = inProgressIdentifiers();
+        if (identifiers.length === 0) {
+          targetPressMonitor.cancelTouch();
+          elementTapMonitor.cancelTouch();
+          return;
+        }
+        // No per-finger target on this event; every finger shares its view.
+        const fallback = touchTargetFiber(event);
+        for (const identifier of identifiers) {
+          handOffCancelledTouch(event, identifier, fallback);
+        }
         return;
       }
-      for (const touch of points) {
-        targetPressMonitor.cancelTouch(touch.identifier);
-        elementTapMonitor.cancelTouch(touch.identifier);
+      for (const touch of changed) {
+        handOffCancelledTouch(event, touch.identifier, null);
       }
     });
   }, []);
@@ -84,6 +97,50 @@ export function TargetPressBridge({ children }: TargetPressBridgeProps): React.R
   );
 }
 
+/**
+ * A finger gesture-handler cancelled. Keep it if the touched view belongs to a
+ * gesture-handler control. A scroll container, or a touch with no handler, is
+ * dropped the way a system cancel is.
+ * `fallbackFiber` is used when this event names no per-finger target.
+ */
+function handOffCancelledTouch(
+  event: GestureResponderEvent,
+  identifier: TouchIdentifier,
+  fallbackFiber: AnyFiber | null,
+): void {
+  const elementHas = elementTapMonitor.hasTouch(identifier);
+  const tooltipHas = targetPressMonitor.hasTouch(identifier);
+  if (!elementHas && !tooltipHas) {
+    elementTapMonitor.cancelTouch(identifier);
+    targetPressMonitor.cancelTouch(identifier);
+    return;
+  }
+  const stored = elementHas ? elementTapMonitor.startFiber(identifier) : null;
+  const fiber = stored ?? fallbackFiber ?? touchTargetFiber(event, identifier);
+  const tags = collectGestureHandlerTags(fiber);
+  if (tags.length === 0) {
+    elementTapMonitor.cancelTouch(identifier);
+    targetPressMonitor.cancelTouch(identifier);
+    return;
+  }
+  if (elementHas) elementTapMonitor.handOffTouch(identifier, tags);
+  if (tooltipHas) targetPressMonitor.handOffTouch(identifier, tags);
+}
+
+function inProgressIdentifiers(): TouchIdentifier[] {
+  const seen = new Set<TouchIdentifier>();
+  const identifiers: TouchIdentifier[] = [];
+  for (const identifier of [
+    ...elementTapMonitor.inProgressIdentifiers(),
+    ...targetPressMonitor.inProgressIdentifiers(),
+  ]) {
+    if (seen.has(identifier)) continue;
+    seen.add(identifier);
+    identifiers.push(identifier);
+  }
+  return identifiers;
+}
+
 const styles = StyleSheet.create({
   root: {
     flex: 1,

package/src/runtime/UserflowOverlay.tsx

@@ -8,6 +8,7 @@ import { PreviewModeBanner } from '../pairing/PreviewModeBanner';
 import { getPairingController } from '../pairing/pairingRuntime';
 import { usePairingState } from '../pairing/usePairingState';
 import { usePreviewBarHold } from '../pairing/usePreviewBarHold';
+import { stepTrapsHostAccessibility } from '../surfaces/hostAccessibilityTrap';
 
 import { BannerHost } from './BannerHost';
 import { FlowRenderer } from './FlowRenderer';
@@ -57,14 +58,7 @@ export function UserflowOverlay({
     if (!session || !currentStep) {
       return false;
     }
-    const appearance = String(currentStep.appearance).toUpperCase();
-    if (appearance === 'HIDDEN') {
-      return false;
-    }
-    if (appearance !== 'TOOLTIP') {
-      return true;
-    }
-    return currentStep.tooltipTargetBlocked;
+    return stepTrapsHostAccessibility(currentStep);
   }, [pickerActive, previewConfirming, session, currentStep]);
 
   React.useLayoutEffect(() => {
@@ -105,13 +99,17 @@ export function UserflowOverlay({
        * captureScreen would otherwise include the modal or tooltip.
        * Remounting reads the same session back.
        */}
-      <BannerHost engine={bannerEngine} hidden={pickerActive} />
       {pickerActive ? null : (
         <FlowRenderer
           engine={engine}
           previewRestartGeneration={pairingState.previewRestartGeneration}
         />
       )}
+      {/*
+       * After flow chrome so BODY_FIRST / BODY_LAST overlay banners stay visible
+       * while a tour step (modal, tooltip, condition wait) is still active.
+       */}
+      <BannerHost engine={bannerEngine} hidden={pickerActive} />
       <ElementPickerOverlay />
     </>
   );

package/src/runtime/UserflowProvider.tsx

@@ -15,15 +15,15 @@ import type { EdgeInsets } from '../surfaces/safeArea';
 import { SurfaceLayoutInsetsProvider } from '../surfaces/surfaceLayoutInsets';
 
 import { BannerHost } from './BannerHost';
+import { BannerWebViewFlowSpacer } from './bannerFlowSpacer';
 import { SdkErrorBoundary } from './SdkErrorBoundary';
 import { TargetPressBridge } from './TargetPressBridge';
 import { UserflowOverlay } from './UserflowOverlay';
 import { getBannerSessionEngine } from './bannerEngine';
 import { BannerEngineContext } from './bannerEngineContext';
-import { bannerEdge } from './bannerPlacement';
 import { getFlowSessionEngine } from './flowEngine';
+import { PushBannerLayoutProvider, type PushBannerLayoutEdge } from './pushBannerLayoutContext';
 import { isolateSync } from './isolateCall';
-import { useBannerSession } from './useBannerSession';
 import { getUserflowCore } from './userflowCore';
 
 export interface UserflowContextValue {
@@ -122,8 +122,9 @@ export function UserflowProvider({
   const onOverlayError = React.useCallback(() => {
     setTrapHostAccessibility(false);
   }, []);
-  const bannerSession = useBannerSession(bannerEngine);
   const safeInsets = useUserflowSafeAreaInsets();
+  const [pushBannerLayoutEdge, setPushBannerLayoutEdge] =
+    React.useState<PushBannerLayoutEdge | null>(null);
   const [pickerActive, setPickerActive] = React.useState(
     () => elementPickerController.getState().active,
   );
@@ -134,15 +135,12 @@ export function UserflowProvider({
     });
   }, []);
 
-  const banner = bannerSession?.version.banner ?? null;
-  const flowEdge =
-    banner && banner.overlay === false && !pickerActive ? bannerEdge(banner.embedMode) : null;
   const hostInsets: EdgeInsets | null =
-    flowEdge === 'top' || flowEdge === 'bottom'
+    pushBannerLayoutEdge === 'top' || pushBannerLayoutEdge === 'bottom'
       ? {
           ...safeInsets,
-          top: flowEdge === 'top' ? 0 : safeInsets.top,
-          bottom: flowEdge === 'bottom' ? 0 : safeInsets.bottom,
+          top: pushBannerLayoutEdge === 'top' ? 0 : safeInsets.top,
+          bottom: pushBannerLayoutEdge === 'bottom' ? 0 : safeInsets.bottom,
         }
       : null;
 
@@ -163,31 +161,44 @@ export function UserflowProvider({
     <BannerEngineContext.Provider value={bannerEngine}>
       <UserflowContext.Provider value={contextValue}>
         <SurfaceLayoutInsetsProvider>
-          <DoubleTapBridge>
-            <View style={styles.root} collapsable={false} testID="userflow-root">
-              <BannerHost engine={bannerEngine} placement="flow" edge="top" hidden={pickerActive} />
-              <HostSafeArea insets={hostInsets}>{appContent}</HostSafeArea>
-              <BannerHost
-                engine={bannerEngine}
-                placement="flow"
-                edge="bottom"
-                hidden={pickerActive}
-              />
-              <View style={styles.overlay} pointerEvents="box-none">
-                <SdkErrorBoundary
-                  scope="overlay"
-                  resetKey={overlayResetKey}
-                  onError={onOverlayError}
-                >
-                  <UserflowOverlay
-                    engine={engine}
-                    bannerEngine={bannerEngine}
-                    onTrapChange={onTrapChange}
+          <PushBannerLayoutProvider onActiveEdgeChange={setPushBannerLayoutEdge}>
+            <DoubleTapBridge>
+              <View style={styles.root} collapsable={false} testID="userflow-root">
+                <View style={styles.flowBannerTop}>
+                  <BannerHost
+                    engine={bannerEngine}
+                    placement="flow"
+                    edge="top"
+                    hidden={pickerActive}
                   />
-                </SdkErrorBoundary>
+                  <BannerWebViewFlowSpacer engine={bannerEngine} edge="top" />
+                </View>
+                <HostSafeArea insets={hostInsets}>{appContent}</HostSafeArea>
+                <View style={styles.flowBannerBottom}>
+                  <BannerHost
+                    engine={bannerEngine}
+                    placement="flow"
+                    edge="bottom"
+                    hidden={pickerActive}
+                  />
+                  <BannerWebViewFlowSpacer engine={bannerEngine} edge="bottom" />
+                </View>
+                <View style={styles.overlay} pointerEvents="box-none">
+                  <SdkErrorBoundary
+                    scope="overlay"
+                    resetKey={overlayResetKey}
+                    onError={onOverlayError}
+                  >
+                    <UserflowOverlay
+                      engine={engine}
+                      bannerEngine={bannerEngine}
+                      onTrapChange={onTrapChange}
+                    />
+                  </SdkErrorBoundary>
+                </View>
               </View>
-            </View>
-          </DoubleTapBridge>
+            </DoubleTapBridge>
+          </PushBannerLayoutProvider>
         </SurfaceLayoutInsetsProvider>
       </UserflowContext.Provider>
     </BannerEngineContext.Provider>
@@ -228,7 +239,20 @@ const styles = StyleSheet.create({
   appContent: {
     flex: 1,
   },
+  flowBannerTop: {
+    zIndex: 1,
+    elevation: 1,
+    pointerEvents: 'box-none',
+  },
+  flowBannerBottom: {
+    zIndex: 1,
+    elevation: 1,
+    pointerEvents: 'box-none',
+  },
   overlay: {
     ...ABSOLUTE_FILL,
+    // Above flow banner slots so WebView banners receive touches (spacers are layout-only).
+    zIndex: 2,
+    elevation: 2,
   },
 });

package/src/runtime/bannerEngine.ts

@@ -1,4 +1,5 @@
 import { BannerSessionEngine, type UserflowCore } from '@userflow-tech/core';
+import type { EndFlowReasonInput } from '@userflow-tech/protocol';
 
 import { evalJsController } from '../evalJs/evalJsController';
 import { openFlowNavigateUrl } from '../navigation/openFlowNavigateUrl';
@@ -44,8 +45,15 @@ export function resetBannerSessionEngine(): void {
 }
 
 /** Drop the local banner without detaching (preview exit, user switch). */
-export function clearBannerSessionEngineLocalSession(): void {
-  bannerEngine?.clearLocalSession();
+export function clearBannerSessionEngineLocalSession(options?: {
+  rememberDraftForPreviewEnd?: boolean;
+}): void {
+  bannerEngine?.clearLocalSession(options);
+}
+
+/** Best-effort end of a Builder preview banner draft (including after local clear). */
+export async function endDraftBannerSession(): Promise<void> {
+  await bannerEngine?.endDraftBannerSession('USER_CLOSED' as EndFlowReasonInput);
 }
 
 /** Test helper: drop the singleton so the next get recreates it. */

package/src/runtime/bannerFlowSpacer.tsx

@@ -0,0 +1,70 @@
+import type { BannerSessionEngine } from '@userflow-tech/core';
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { bannerEdge } from './bannerPlacement';
+import { useBannerSession } from './useBannerSession';
+
+type SpacerEdge = 'top' | 'bottom';
+
+const heights: Record<SpacerEdge, number> = { top: 0, bottom: 0 };
+const listeners = new Set<() => void>();
+
+function emit(): void {
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+/** @internal */
+export function setBannerFlowSpacerHeight(edge: SpacerEdge, height: number): void {
+  const next = Math.max(0, Math.ceil(height));
+  if (heights[edge] === next) {
+    return;
+  }
+  heights[edge] = next;
+  emit();
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getHeight(edge: SpacerEdge): number {
+  return heights[edge];
+}
+
+/**
+ * Reserves layout space when a custom-css WebView banner is painted in the
+ * overlay host but the builder marked it `overlay: false` (push layout).
+ */
+export function BannerWebViewFlowSpacer({
+  engine,
+  edge,
+}: {
+  engine: BannerSessionEngine;
+  edge: SpacerEdge;
+}): React.ReactElement | null {
+  const session = useBannerSession(engine);
+  const height = React.useSyncExternalStore(
+    subscribe,
+    () => getHeight(edge),
+    () => getHeight(edge),
+  );
+
+  if (!session?.version.banner || height <= 0) {
+    return null;
+  }
+  const pinnedEdge = bannerEdge(session.version.banner.embedMode);
+  if (pinnedEdge !== edge) {
+    return null;
+  }
+
+  // Layout-only: the painted banner lives in the overlay host (lower z-index).
+  return (
+    <View pointerEvents="none" testID={`userflow-banner-flow-spacer-${edge}`} style={{ height }} />
+  );
+}

package/src/runtime/flowEngine.ts

@@ -31,6 +31,17 @@ export function getFlowSessionEngine(core: UserflowCore): FlowSessionEngine {
       updateUser: (attributes) => core.updateUser(attributes),
       updateGroup: (attributes, options) => core.updateGroup(attributes, options),
     });
+    flowEngine.on((event) => {
+      if (event.type !== 'sessionChange' || event.session !== null) {
+        return;
+      }
+      // Drop a flow's eval page when the tour ends. A banner WebView reuses the
+      // same controller and must keep its page alive until the banner dismisses.
+      if (evalJsController.getSnapshot().bannerOwnsWebView) {
+        return;
+      }
+      evalJsController.reset();
+    });
     if (endDraftOnArrival) watchForRestoredDraft();
   }
   return flowEngine;

package/src/runtime/previewStart.ts

@@ -0,0 +1,49 @@
+import type { UserflowCore } from '@userflow-tech/core';
+import type { EndFlowReasonInput } from '@userflow-tech/protocol';
+
+import { evalJsController } from '../evalJs/evalJsController';
+
+import {
+  clearBannerSessionEngineLocalSession,
+  endDraftBannerSession,
+  getBannerSessionEngine,
+} from './bannerEngine';
+import {
+  cancelPendingDraftEnd,
+  clearFlowSessionEngineLocalSession,
+  endDraftFlowSession,
+} from './flowEngine';
+
+/**
+ * Drop local tour state and reset eval before a Builder `startFlowWithToken`.
+ *
+ * When a draft banner is still active, end it on the server first. The channel
+ * dedupes an unchanged `SetBannerSession`, so clearing the banner locally
+ * without ending the draft leaves nothing visible on a second preview of the
+ * same banner.
+ */
+export async function prepareForBuilderPreviewStart(core: UserflowCore): Promise<void> {
+  cancelPendingDraftEnd();
+  clearFlowSessionEngineLocalSession();
+  core.setFlowSessionId(null);
+
+  const bannerEngine = getBannerSessionEngine(core);
+  const hasDraftBanner =
+    bannerEngine.getBannerSession()?.draftMode === true ||
+    bannerEngine.getDeferredDraftBannerSessionId() !== null;
+
+  if (hasDraftBanner) {
+    await bannerEngine.endDraftBannerForPreview('USER_CLOSED' as EndFlowReasonInput);
+  } else {
+    clearBannerSessionEngineLocalSession();
+    core.setBannerSessionId(null);
+  }
+
+  evalJsController.reset();
+}
+
+/** End tour and banner Builder drafts on the server (preview exit). */
+export async function endDraftPreviewSessions(): Promise<void> {
+  await endDraftFlowSession();
+  await endDraftBannerSession();
+}

package/src/runtime/pushBannerLayoutContext.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+
+export type PushBannerLayoutEdge = 'top' | 'bottom';
+
+interface PushBannerLayoutContextValue {
+  /** Push-layout banner chrome mounted; host safe-area may follow this edge. */
+  register: (edge: PushBannerLayoutEdge, token: string) => void;
+  unregister: (token: string) => void;
+}
+
+const PushBannerLayoutContext = React.createContext<PushBannerLayoutContextValue | null>(null);
+
+function pickEdge(registrations: Map<string, PushBannerLayoutEdge>): PushBannerLayoutEdge | null {
+  let top = false;
+  let bottom = false;
+  for (const edge of registrations.values()) {
+    if (edge === 'top') {
+      top = true;
+    }
+    if (edge === 'bottom') {
+      bottom = true;
+    }
+  }
+  if (top) {
+    return 'top';
+  }
+  if (bottom) {
+    return 'bottom';
+  }
+  return null;
+}
+
+export function PushBannerLayoutProvider({
+  children,
+  onActiveEdgeChange,
+}: {
+  children: React.ReactNode;
+  onActiveEdgeChange: (edge: PushBannerLayoutEdge | null) => void;
+}): React.ReactElement {
+  const registrations = React.useRef(new Map<string, PushBannerLayoutEdge>());
+  const onActiveEdgeChangeRef = React.useRef(onActiveEdgeChange);
+  onActiveEdgeChangeRef.current = onActiveEdgeChange;
+
+  const sync = React.useCallback(() => {
+    onActiveEdgeChangeRef.current(pickEdge(registrations.current));
+  }, []);
+
+  const value = React.useMemo<PushBannerLayoutContextValue>(
+    () => ({
+      register: (edge, token) => {
+        registrations.current.set(token, edge);
+        sync();
+      },
+      unregister: (token) => {
+        if (registrations.current.delete(token)) {
+          sync();
+        }
+      },
+    }),
+    [sync],
+  );
+
+  React.useLayoutEffect(() => {
+    sync();
+  }, [sync]);
+
+  return (
+    <PushBannerLayoutContext.Provider value={value}>{children}</PushBannerLayoutContext.Provider>
+  );
+}
+
+/** @internal */
+export function usePushBannerLayoutRegistration(
+  edge: PushBannerLayoutEdge | null | undefined,
+  sessionId: string | undefined,
+): void {
+  const ctx = React.useContext(PushBannerLayoutContext);
+  React.useLayoutEffect(() => {
+    if (!ctx || !edge || !sessionId) {
+      return;
+    }
+    const token = `${sessionId}:${edge}`;
+    ctx.register(edge, token);
+    return () => {
+      ctx.unregister(token);
+    };
+  }, [ctx, edge, sessionId]);
+}
+
+/**
+ * Clears the host top/bottom safe-area override only after push-layout chrome
+ * has laid out, so a session without visible chrome cannot leave a white strip.
+ *
+ * @internal
+ */
+export function usePushBannerHostInsetRegistration(
+  edge: PushBannerLayoutEdge | null | undefined,
+  sessionId: string,
+  enabled: boolean,
+): (event: LayoutChangeEvent) => void {
+  const [laidOut, setLaidOut] = React.useState(false);
+
+  React.useEffect(() => {
+    setLaidOut(false);
+  }, [edge, enabled]);
+
+  usePushBannerLayoutRegistration(enabled && laidOut && edge ? edge : null, sessionId);
+
+  return React.useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!enabled || !edge) {
+        return;
+      }
+      if (event.nativeEvent.layout.height > 0) {
+        setLaidOut(true);
+      }
+    },
+    [edge, enabled],
+  );
+}