@getuserfeedback/react-native 5.0.9 → 5.1.1

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import type { AppEventExternalId, AppEventJsonValue, PublicCommandPayload } from "@getuserfeedback/protocol";
-import type { ConfigureOptions, InitOptions } from "@getuserfeedback/sdk";
+import type { CapabilitiesInput, ConfigureOptions, GraphOperations, InitOptions } from "@getuserfeedback/sdk";
 type IdentifyTraits = Record<string, unknown>;
 type TrackProperties = Record<string, AppEventJsonValue>;
 type OpenCommand = Extract<PublicCommandPayload, {
@@ -23,7 +23,10 @@ type CommandOptions = {
     idempotencyKey?: string;
 };
 /** React Native provider initialization options. */
-export type ClientOptions = InitOptions;
+export type ClientOptions = Omit<InitOptions, "capabilities" | "hostCapabilities"> & {
+    /** Capabilities supported by the current app version. */
+    capabilities?: CapabilitiesInput | undefined;
+};
 /** Operations for one on-demand flow lifecycle. */
 export interface FlowRun {
     readonly flowId: string;
@@ -52,6 +55,8 @@ export interface Client {
     };
     /** Records a product event for targeting and analysis. */
     track: (eventName: string, properties?: TrackProperties, options?: TrackOptions) => Promise<void>;
+    /** Records directed relationship observations through the analytics pipeline. */
+    graph: GraphOperations;
     /** Returns the controller for one on-demand flow lifecycle. */
     flow: (flowId: string) => FlowRun;
     /** Closes every open flow owned by this provider. */

package/dist/core-webview-bridge-adapter.js

@@ -10,6 +10,8 @@ const CORE_WEBVIEW_BRIDGE_CONFIG = {
     connectTimeoutMessage: "Timed out connecting core to the native host",
     connectTimeoutMs: 30000,
     inactiveConnectionMessage: "Core WebView bridge connection is not active",
+    reactivateOnNativeEpochChange: false,
+    throwOnUnavailablePost: false,
 };
 export const parseCoreWebViewBridgeMessage = (value) => parseWebViewConnectionBridgeMessage(value, {
     invalidIdentity: "Invalid core WebView bridge message identity",

package/dist/flow-container.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from "react";
+/** Aggregate state and controls for a customer-owned flow container. */
+export type UseFlowContainerReturn = Readonly<{
+    /** True when an active flow is visible. */
+    isOpen: boolean;
+    /** True when an active flow is waiting for its measured size. */
+    isLoading: boolean;
+    /** True when the customer container should be visible. */
+    shouldRenderContainer: boolean;
+    /** Close every active flow rendered by this container. */
+    close: () => Promise<void>;
+}>;
+export declare function NativeStandardFlowContainer(): ReactElement | null;
+/**
+ * Observe and control the provider's customer-owned flow container.
+ *
+ * @see https://getuserfeedback.com/docs/guides/advanced/containers
+ */
+export declare function useFlowContainer(): UseFlowContainerReturn;
+/**
+ * Render the active flow at its measured size inside a custom container.
+ * Keep this component mounted when the projected WebView must retain its state.
+ *
+ * @see https://getuserfeedback.com/docs/guides/advanced/containers
+ */
+export declare function FlowContent(): ReactElement | null;

package/dist/flow-container.js

@@ -0,0 +1,75 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement, useCallback, useContext, useLayoutEffect, useRef, useSyncExternalStore, } from "react";
+import { NativeFlowContainerContext } from "./native-flow-container-context.js";
+import { NativeViewHostProjection, } from "./native-view-host-projection.js";
+const EMPTY_RECORDS = Object.freeze([]);
+const subscribeNoop = () => () => { };
+const getEmptyRecords = () => EMPTY_RECORDS;
+const renderProjection = (projection, presentationMode) => {
+    if (!projection)
+        return null;
+    const { key } = projection, props = __rest(projection, ["key"]);
+    return createElement(NativeViewHostProjection, Object.assign(Object.assign({}, props), { key,
+        presentationMode }));
+};
+const useRecords = (projection) => {
+    var _a, _b, _c;
+    return useSyncExternalStore((_a = projection === null || projection === void 0 ? void 0 : projection.controller.subscribe) !== null && _a !== void 0 ? _a : subscribeNoop, (_b = projection === null || projection === void 0 ? void 0 : projection.controller.getSnapshot) !== null && _b !== void 0 ? _b : getEmptyRecords, (_c = projection === null || projection === void 0 ? void 0 : projection.controller.getSnapshot) !== null && _c !== void 0 ? _c : getEmptyRecords);
+};
+export function NativeStandardFlowContainer() {
+    const context = useContext(NativeFlowContainerContext);
+    return (context === null || context === void 0 ? void 0 : context.contentOwner) === null
+        ? renderProjection(context.projection, "overlay")
+        : null;
+}
+/**
+ * Observe and control the provider's customer-owned flow container.
+ *
+ * @see https://getuserfeedback.com/docs/guides/advanced/containers
+ */
+export function useFlowContainer() {
+    const context = useContext(NativeFlowContainerContext);
+    if (!context) {
+        throw new Error("useFlowContainer must be used inside GetUserFeedbackProvider");
+    }
+    const records = useRecords(context.projection);
+    const isOpen = records.some((record) => record.isActive && record.size !== null);
+    const isLoading = records.some((record) => record.isActive && record.size === null);
+    const close = useCallback(() => context.client.close(), [context.client]);
+    return {
+        close,
+        isLoading,
+        isOpen,
+        shouldRenderContainer: isLoading || isOpen,
+    };
+}
+/**
+ * Render the active flow at its measured size inside a custom container.
+ * Keep this component mounted when the projected WebView must retain its state.
+ *
+ * @see https://getuserfeedback.com/docs/guides/advanced/containers
+ */
+export function FlowContent() {
+    var _a;
+    const context = useContext(NativeFlowContainerContext);
+    if (!context) {
+        throw new Error("FlowContent must be used inside GetUserFeedbackProvider");
+    }
+    const ownerRef = useRef(null);
+    (_a = ownerRef.current) !== null && _a !== void 0 ? _a : (ownerRef.current = {});
+    const owner = ownerRef.current;
+    useLayoutEffect(() => context.registerContent(owner), [context.registerContent, owner]);
+    return context.contentOwner === owner
+        ? renderProjection(context.projection, "content")
+        : null;
+}

package/dist/native-flow-container-context.d.ts

@@ -0,0 +1,14 @@
+import type { Client } from "./client.js";
+import type { NativeViewProjection } from "./native-view-host-projection.js";
+export type NativeFlowContainerContextValue = Readonly<{
+    client: Client;
+    contentOwner: object | null;
+    projection: NativeViewProjection | null;
+    registerContent: (owner: object) => () => void;
+}>;
+export declare const NativeFlowContainerContext: import("react").Context<Readonly<{
+    client: Client;
+    contentOwner: object | null;
+    projection: NativeViewProjection | null;
+    registerContent: (owner: object) => () => void;
+}> | null>;

package/dist/native-flow-container-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const NativeFlowContainerContext = createContext(null);

package/dist/native-provider-client.js

@@ -34,20 +34,25 @@ const toIdentifyCommandPayload = (identifyInput, traitsOrOptions, options) => {
     };
 };
 export function createNativeProviderClient({ dispatchCommand, flow, instanceId, }) {
+    const track = (eventName, properties, options) => {
+        assertNoSegmentExternalIdsInValueArgument({
+            argument: properties,
+            commandName: "track",
+            valueArgumentName: "properties",
+            callShape: "track(eventName, properties, { externalIds })",
+        });
+        return dispatchCommand(Object.assign(Object.assign({ kind: "track", origin: "customer", event: parseRequiredString("eventName", eventName) }, (properties === undefined ? {} : { properties })), ((options === null || options === void 0 ? void 0 : options.externalIds) === undefined
+            ? {}
+            : { context: { externalIds: options.externalIds } })));
+    };
     return {
         instanceId,
         configure: (opts, options) => dispatchCommand({ kind: "configure", opts }, options),
         identify: ((identifyInput, traitsOrOptions, options) => dispatchCommand(toIdentifyCommandPayload(identifyInput, traitsOrOptions, options))),
-        track: (eventName, properties, options) => {
-            assertNoSegmentExternalIdsInValueArgument({
-                argument: properties,
-                commandName: "track",
-                valueArgumentName: "properties",
-                callShape: "track(eventName, properties, { externalIds })",
-            });
-            return dispatchCommand(Object.assign(Object.assign({ kind: "track", origin: "customer", event: parseRequiredString("eventName", eventName) }, (properties === undefined ? {} : { properties })), ((options === null || options === void 0 ? void 0 : options.externalIds) === undefined
-                ? {}
-                : { context: { externalIds: options.externalIds } })));
+        track,
+        graph: {
+            connect: (relationship) => track("gx.graph.relationship.connected", relationship),
+            disconnect: (relationship) => track("gx.graph.relationship.disconnected", relationship),
         },
         flow,
         close: () => dispatchCommand({ kind: "close" }),

package/dist/native-provider.d.ts

@@ -1,6 +1,8 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { Client, ClientOptions } from "./client.js";
 export type { Client, ClientOptions, FlowRun } from "./client.js";
+export type { UseFlowContainerReturn } from "./flow-container.js";
+export { FlowContent, useFlowContainer } from "./flow-container.js";
 /**
  * Custom WebView implementation used by the native runtime.
  *

package/dist/native-provider.js

@@ -1,8 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { parseInitOptions } from "@getuserfeedback/protocol";
-import { createUniqueId, PRODUCTION_WIDGET_RUNTIME_ENDPOINTS, } from "@getuserfeedback/protocol/host";
-import { createContext, createElement, Fragment, useCallback, useContext, useEffect, useRef, useState, } from "react";
+import { createUniqueId } from "@getuserfeedback/protocol/host";
+import { createContext, createElement, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { NativeStandardFlowContainer } from "./flow-container.js";
+import { NativeFlowContainerContext, } from "./native-flow-container-context.js";
 import { createNativeProviderClientController } from "./native-provider-client-controller.js";
+import { REACT_NATIVE_PINNED_CORE_URL } from "./native-runtime-endpoints.js";
 import { NativeProviderRuntime } from "./native-runtime-root.js";
+export { FlowContent, useFlowContainer } from "./flow-container.js";
 const GetUserFeedbackContext = createContext(null);
 const toClientOptionsKey = (value) => {
     if (value === null || typeof value !== "object") {
@@ -18,6 +33,26 @@ const toClientOptionsKey = (value) => {
         .map((key) => `${JSON.stringify(key)}:${toClientOptionsKey(record[key])}`)
         .join(",")}}`;
 };
+const compareClientOptionsKeys = (left, right) => left < right ? -1 : left > right ? 1 : 0;
+const parseNativeInitOptions = (_a) => {
+    var { capabilities } = _a, clientOptions = __rest(_a, ["capabilities"]);
+    const initOptions = parseInitOptions(Object.assign(Object.assign({}, clientOptions), (capabilities !== undefined
+        ? {
+            hostCapabilities: capabilities.map((capability) => typeof capability === "string"
+                ? { key: capability }
+                : Object.assign({}, capability)),
+        }
+        : {})));
+    const hostCapabilities = initOptions.hostCapabilities;
+    const normalizedHostCapabilities = hostCapabilities === null || hostCapabilities === void 0 ? void 0 : hostCapabilities.map((capability) => ({
+        capability,
+        key: toClientOptionsKey(capability),
+    })).sort((left, right) => compareClientOptionsKeys(left.key, right.key)).filter((entry, index, entries) => { var _a; return ((_a = entries[index - 1]) === null || _a === void 0 ? void 0 : _a.key) !== entry.key; }).map(({ capability }) => capability);
+    return Object.assign(Object.assign({}, initOptions), { hostCapabilities: normalizedHostCapabilities === undefined ||
+            normalizedHostCapabilities.length === 0
+            ? undefined
+            : normalizedHostCapabilities });
+};
 export function GetUserFeedbackProvider({ children, clientOptions, instanceId: instanceIdProp, onError, webViewComponent, }) {
     var _a, _b;
     const [instanceId] = useState(() => {
@@ -26,9 +61,12 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
             ? normalizedInstanceId
             : createUniqueId("rn");
     });
-    const normalizedClientOptions = parseInitOptions(clientOptions);
+    const [contentOwner, setContentOwner] = useState(null);
+    const [projection, setProjection] = useState(null);
+    const contentOwnerRef = useRef(null);
+    const normalizedClientOptions = parseNativeInitOptions(clientOptions);
     const clientOptionsKey = toClientOptionsKey(normalizedClientOptions);
-    const coreUrl = (_b = (_a = normalizedClientOptions.runtimeEndpoints) === null || _a === void 0 ? void 0 : _a.coreUrl) !== null && _b !== void 0 ? _b : PRODUCTION_WIDGET_RUNTIME_ENDPOINTS.coreUrl;
+    const coreUrl = (_b = (_a = normalizedClientOptions.runtimeEndpoints) === null || _a === void 0 ? void 0 : _a.coreUrl) !== null && _b !== void 0 ? _b : REACT_NATIVE_PINNED_CORE_URL;
     const onErrorRef = useRef(onError);
     onErrorRef.current = onError;
     const reportError = useCallback((error) => {
@@ -48,6 +86,29 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         });
     }
     const controller = controllerRef.current;
+    const attachViewProjection = useCallback((nextProjection) => {
+        setProjection(nextProjection);
+        return () => setProjection((current) => current === nextProjection ? null : current);
+    }, []);
+    const registerContent = useCallback((owner) => {
+        if (contentOwnerRef.current && contentOwnerRef.current !== owner) {
+            throw new Error("Only one FlowContent can be mounted in a GetUserFeedbackProvider");
+        }
+        contentOwnerRef.current = owner;
+        setContentOwner(owner);
+        return () => {
+            if (contentOwnerRef.current !== owner)
+                return;
+            contentOwnerRef.current = null;
+            setContentOwner(null);
+        };
+    }, []);
+    const flowContainerContext = useMemo(() => ({
+        client: controller.client,
+        contentOwner,
+        projection,
+        registerContent,
+    }), [contentOwner, controller.client, projection, registerContent]);
     const lifecycleRevisionRef = useRef(0);
     useEffect(() => {
         lifecycleRevisionRef.current += 1;
@@ -66,7 +127,8 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         }
     }, [controller]);
     const handleHandleInvalidated = useCallback((message) => controller.onHandleInvalidated(message), [controller]);
-    return createElement(GetUserFeedbackContext.Provider, { value: controller.client }, createElement(Fragment, null, children, createElement(NativeProviderRuntime, {
+    return createElement(GetUserFeedbackContext.Provider, { value: controller.client }, createElement(NativeFlowContainerContext.Provider, { value: flowContainerContext }, createElement(Fragment, null, children, createElement(NativeStandardFlowContainer), createElement(NativeProviderRuntime, {
+        attachViewProjection,
         coreUrl,
         coreWebViewComponent: webViewComponent,
         directSessionController: controller.directSessionController,
@@ -77,7 +139,7 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         onError: reportError,
         onHandleInvalidated: handleHandleInvalidated,
         viewWebViewComponent: webViewComponent,
-    })));
+    }))));
 }
 export function useGetUserFeedback() {
     const client = useContext(GetUserFeedbackContext);

package/dist/native-runtime-endpoints.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React Native is an independently deployed direct host, so this stays pinned
+ * to a retained Core artifact matching its projection contract. Advance it
+ * only after the matching artifact exists on the CDN; see
+ * docs/specs/2026-08-02-flow-interaction-model.md (Projection protocol and
+ * rollout).
+ */
+export declare const REACT_NATIVE_PINNED_CORE_URL: "https://cdn.getuserfeedback.com/widget/core/v3/core.html";

package/dist/native-runtime-endpoints.js

@@ -0,0 +1,8 @@
+/**
+ * React Native is an independently deployed direct host, so this stays pinned
+ * to a retained Core artifact matching its projection contract. Advance it
+ * only after the matching artifact exists on the CDN; see
+ * docs/specs/2026-08-02-flow-interaction-model.md (Projection protocol and
+ * rollout).
+ */
+export const REACT_NATIVE_PINNED_CORE_URL = "https://cdn.getuserfeedback.com/widget/core/v3/core.html";

package/dist/native-runtime-root.d.ts

@@ -6,7 +6,7 @@ import { type CoreWebViewHostProps } from "./core-webview-host.js";
 import { type NativeCoreCommandSession } from "./native-core-command-session.js";
 import { type NativeDirectCommandSession } from "./native-direct-command-session.js";
 import type { NativeDirectCommandSessionController } from "./native-direct-command-session-controller.js";
-import { type NativeViewHostProjectionProps } from "./native-view-host-projection.js";
+import { type NativeViewHostProjectionProps, type NativeViewProjection } from "./native-view-host-projection.js";
 export type NativeRuntimeRootProps = {
     coreUrl: string;
     coreWebViewComponent?: CoreWebViewHostProps["webViewComponent"];
@@ -17,6 +17,7 @@ export type NativeRuntimeRootProps = {
     onInvalidMessage?: (error: Error, value: unknown) => void;
     onStartupTerminalError?: (error: Error) => void;
     startupCommandSettlementTimeoutMs?: number;
+    attachViewProjection?: (projection: NativeViewProjection) => () => void;
     viewNativeViewComponent?: NativeViewHostProjectionProps["nativeViewComponent"];
     viewWebViewComponent?: NativeViewHostProjectionProps["webViewComponent"];
 };
@@ -32,6 +33,6 @@ type NativeProviderRuntimeProps = Omit<NativeRuntimeRootProps, "onCommandSession
     instanceId: string;
     onCommandSessionChange?: (session: NativeDirectCommandSession | null) => void;
 };
-export declare function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs, startupCommand, viewNativeViewComponent, viewWebViewComponent, }: NativeRuntimeRootProps): ReactElement;
+export declare function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs, startupCommand, viewNativeViewComponent, viewWebViewComponent, }: NativeRuntimeRootProps): ReactElement;
 export declare function NativeProviderRuntime({ directSessionController, initOptions, instanceId, onCommandSessionChange, onError, ...runtimeProps }: NativeProviderRuntimeProps): ReactElement;
 export {};

package/dist/native-runtime-root.js

@@ -19,7 +19,7 @@ import { NativeViewHostProjection, } from "./native-view-host-projection.js";
 import { createNativeViewRecordController, } from "./native-view-record-controller.js";
 import { createProviderCommandEnvelope, REACT_NATIVE_CLIENT_META, } from "./provider-command-helpers.js";
 const DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS = 30000;
-export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, startupCommand, viewNativeViewComponent, viewWebViewComponent, }) {
+export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewComponent, onCommandSessionChange, onError, onHandleInvalidated, onInvalidMessage, onStartupTerminalError, startupCommandSettlementTimeoutMs = DEFAULT_STARTUP_COMMAND_SETTLEMENT_TIMEOUT_MS, startupCommand, viewNativeViewComponent, viewWebViewComponent, }) {
     const [coreHostRevision, setCoreHostRevision] = useState(0);
     const [session, setSession] = useState(null);
     const sessionRef = useRef(null);
@@ -121,6 +121,10 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, onCommandSess
         };
         const startupCommand = startupCommandRef.current;
         if (startupCommand) {
+            // TODO(architecture): Reconcile direct-runtime startup command settlement
+            // with view projection. Android smoke can project the opened view while the
+            // public open request still times out waiting for Core's settlement.
+            // [principle=one-authoritative-command-lifecycle] [scope=slice] [priority=high] [impact=high] [risk=high] [epic=runtime-neutral-view-host-orchestration] [epic_order=2]
             void commandSessionOwner.session
                 .dispatch(startupCommand, {
                 settlementTimeoutMs: startupCommandSettlementTimeoutMs,
@@ -198,6 +202,23 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, onCommandSess
             }
         }
     }, [notifyCommandSessionObserver]);
+    useLayoutEffect(() => {
+        if (!session || !attachViewProjection)
+            return;
+        return attachViewProjection({
+            controller: session.controller,
+            key: session.key,
+            nativeViewComponent: viewNativeViewComponent,
+            onInvalidMessage,
+            webViewComponent: viewWebViewComponent,
+        });
+    }, [
+        attachViewProjection,
+        onInvalidMessage,
+        session,
+        viewNativeViewComponent,
+        viewWebViewComponent,
+    ]);
     return createElement(Fragment, null, createElement(CoreWebViewHost, {
         coreUrl,
         key: `${coreUrl}:${coreHostRevision}`,
@@ -206,7 +227,7 @@ export function NativeRuntimeRoot({ coreUrl, coreWebViewComponent, onCommandSess
         onDisconnected: handleDisconnected,
         onInvalidMessage,
         webViewComponent: coreWebViewComponent,
-    }), session === null
+    }), session === null || attachViewProjection
         ? null
         : createElement(NativeViewHostProjection, {
             controller: session.controller,

package/dist/native-view-host-projection.d.ts

@@ -1,9 +1,20 @@
 import { type ComponentType, type ReactElement } from "react";
-import type { NativeViewRecordController } from "./native-view-record-controller.js";
+import type { NativeViewPresentationMode } from "./native-view-presentation-surface.js";
+import type { NativeViewRecord, NativeViewRecordController } from "./native-view-record-controller.js";
 export type NativeViewHostProjectionProps = {
     controller: NativeViewRecordController;
     onInvalidMessage?: (error: Error, value: unknown) => void;
     nativeViewComponent?: ComponentType<Record<string, unknown>>;
+    presentationMode?: NativeViewPresentationMode;
     webViewComponent?: ComponentType<Record<string, unknown>>;
 };
-export declare function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, webViewComponent, }: NativeViewHostProjectionProps): ReactElement;
+export type NativeViewProjection = Readonly<Omit<NativeViewHostProjectionProps, "presentationMode"> & {
+    key: number;
+}>;
+export declare function NativeProjectedViewContent({ controller, onInvalidMessage, record, webViewComponent, }: {
+    controller: NativeViewRecordController;
+    onInvalidMessage?: (error: Error, value: unknown) => void;
+    record: NativeViewRecord;
+    webViewComponent?: ComponentType<Record<string, unknown>>;
+}): ReactElement;
+export declare function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, presentationMode, webViewComponent, }: NativeViewHostProjectionProps): ReactElement;

package/dist/native-view-host-projection.js

@@ -1,8 +1,7 @@
 import { createElement, Fragment, useCallback, useEffect, useLayoutEffect, useRef, useSyncExternalStore, } from "react";
 import { NativeViewPresentationSurface } from "./native-view-presentation-surface.js";
 import { ViewWebViewHost } from "./view-webview-host.js";
-function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInvalidMessage, record, webViewComponent, }) {
-    var _a;
+export function NativeProjectedViewContent({ controller, onInvalidMessage, record, webViewComponent, }) {
     const detachConnectionRef = useRef(null);
     const detachConnection = useCallback(() => {
         const detach = detachConnectionRef.current;
@@ -18,6 +17,26 @@ function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInva
             detachConnectionRef.current = controllerDetach;
         }
     }, [controller, record.allocationId]);
+    useEffect(() => detachConnection, [detachConnection]);
+    return createElement(ViewWebViewHost, {
+        generation: record.generation,
+        onActivationRetryExhausted: (error) => {
+            controller.failViewAllocation({
+                allocationId: record.allocationId,
+                error,
+                viewId: record.viewId,
+            });
+        },
+        onConnected: handleConnected,
+        onDisconnected: detachConnection,
+        onInvalidMessage,
+        srcdoc: record.srcdoc,
+        viewId: record.viewId,
+        webViewComponent,
+    });
+}
+function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInvalidMessage, presentationMode, record, webViewComponent, }) {
+    var _a;
     const layoutTransactionId = (_a = record.size) === null || _a === void 0 ? void 0 : _a.layoutTransactionId;
     useLayoutEffect(() => {
         if (!layoutTransactionId) {
@@ -48,30 +67,20 @@ function NativeViewHostProjectionEntry({ controller, nativeViewComponent, onInva
             viewId: record.viewId,
         });
     });
-    useEffect(() => detachConnection, [detachConnection]);
-    return createElement(NativeViewPresentationSurface, { nativeViewComponent, record }, createElement(ViewWebViewHost, {
-        generation: record.generation,
-        onActivationRetryExhausted: (error) => {
-            controller.failViewAllocation({
-                allocationId: record.allocationId,
-                error,
-                viewId: record.viewId,
-            });
-        },
-        onConnected: handleConnected,
-        onDisconnected: detachConnection,
+    return createElement(NativeViewPresentationSurface, { nativeViewComponent, presentationMode, record }, createElement(NativeProjectedViewContent, {
+        controller,
         onInvalidMessage,
-        srcdoc: record.srcdoc,
-        viewId: record.viewId,
+        record,
         webViewComponent,
     }));
 }
-export function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, webViewComponent, }) {
+export function NativeViewHostProjection({ controller, nativeViewComponent, onInvalidMessage, presentationMode, webViewComponent, }) {
     const records = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     return createElement(Fragment, null, records.map((record) => createElement(NativeViewHostProjectionEntry, {
         controller,
         nativeViewComponent,
         onInvalidMessage,
+        presentationMode,
         record,
         webViewComponent,
         key: record.allocationId,

package/dist/native-view-presentation-surface.d.ts

@@ -1,7 +1,9 @@
 import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { NativeViewRecord } from "./native-view-record-controller.js";
-export declare function NativeViewPresentationSurface({ children, nativeViewComponent, record, }: {
+export type NativeViewPresentationMode = "content" | "overlay";
+export declare function NativeViewPresentationSurface({ children, presentationMode, nativeViewComponent, record, }: {
     children?: ReactNode;
+    presentationMode?: NativeViewPresentationMode;
     nativeViewComponent?: ComponentType<Record<string, unknown>>;
     record: NativeViewRecord;
 }): ReactElement;

package/dist/native-view-presentation-surface.js

@@ -18,6 +18,11 @@ const HIDDEN_HOST_SURFACE_STYLE = {
 const PRESENTED_HOST_SURFACE_STYLE = {
     zIndex: 2147483647,
 };
+const CONTENT_HOST_SURFACE_STYLE = {
+    alignItems: "center",
+    maxHeight: "100%",
+    maxWidth: "100%",
+};
 const TOP_PLACEMENT_STYLE = {
     justifyContent: "flex-start",
 };
@@ -50,8 +55,30 @@ const resolveNativeView = () => {
     }
     return reactNativeModule.View;
 };
-export function NativeViewPresentationSurface({ children, nativeViewComponent, record, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+export function NativeViewPresentationSurface({ children, presentationMode = "overlay", nativeViewComponent, record, }) {
+    var _a, _b, _c;
+    const NativeView = nativeViewComponent !== null && nativeViewComponent !== void 0 ? nativeViewComponent : resolveNativeView();
+    const isPresented = record.isActive && record.size !== null;
+    const hostStyle = presentationMode === "content" && isPresented
+        ? Object.assign(Object.assign({}, CONTENT_HOST_SURFACE_STYLE), { height: (_a = record.size) === null || _a === void 0 ? void 0 : _a.height, width: (_b = record.size) === null || _b === void 0 ? void 0 : _b.width }) : Object.assign(Object.assign(Object.assign({}, HOST_SURFACE_STYLE), (((_c = record.size) === null || _c === void 0 ? void 0 : _c.placement) === "docked-top"
+        ? TOP_PLACEMENT_STYLE
+        : BOTTOM_PLACEMENT_STYLE)), (isPresented
+        ? PRESENTED_HOST_SURFACE_STYLE
+        : HIDDEN_HOST_SURFACE_STYLE));
+    return createElement(NativeView, {
+        accessibilityElementsHidden: !isPresented,
+        importantForAccessibility: isPresented ? "auto" : "no-hide-descendants",
+        pointerEvents: isPresented ? "box-none" : "none",
+        style: hostStyle,
+        testID: `gx-native-view-presentation-${record.viewId}`,
+    }, createElement(NativeViewPresentationFrame, {
+        children,
+        nativeViewComponent,
+        record,
+    }));
+}
+function NativeViewPresentationFrame({ children, nativeViewComponent, record, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const NativeView = nativeViewComponent !== null && nativeViewComponent !== void 0 ? nativeViewComponent : resolveNativeView();
     const isPresented = record.isActive && record.size !== null;
     const hasMeasuredFrame = isPresented || ((_a = record.size) === null || _a === void 0 ? void 0 : _a.layoutTransactionId) !== undefined;
@@ -74,19 +101,9 @@ export function NativeViewPresentationSurface({ children, nativeViewComponent, r
         borderTopRightRadius: cornerRadii.topRight,
     };
     return createElement(NativeView, {
-        accessibilityElementsHidden: !isPresented,
-        importantForAccessibility: isPresented ? "auto" : "no-hide-descendants",
-        pointerEvents: isPresented ? "box-none" : "none",
-        style: Object.assign(Object.assign(Object.assign({}, HOST_SURFACE_STYLE), (((_g = record.size) === null || _g === void 0 ? void 0 : _g.placement) === "docked-top"
-            ? TOP_PLACEMENT_STYLE
-            : BOTTOM_PLACEMENT_STYLE)), (isPresented
-            ? PRESENTED_HOST_SURFACE_STYLE
-            : HIDDEN_HOST_SURFACE_STYLE)),
-        testID: `gx-native-view-presentation-${record.viewId}`,
-    }, createElement(NativeView, {
         pointerEvents: isPresented ? "auto" : "none",
         style: hasMeasuredFrame
-            ? Object.assign(Object.assign(Object.assign(Object.assign({}, MEASURED_VIEW_FRAME_STYLE), cornerRadiusStyle), frameShadowStyle), { height: (_h = record.size) === null || _h === void 0 ? void 0 : _h.height, width: (_j = record.size) === null || _j === void 0 ? void 0 : _j.width }) : PREPARING_VIEW_FRAME_STYLE,
+            ? Object.assign(Object.assign(Object.assign(Object.assign({}, MEASURED_VIEW_FRAME_STYLE), cornerRadiusStyle), frameShadowStyle), { height: (_g = record.size) === null || _g === void 0 ? void 0 : _g.height, width: (_h = record.size) === null || _h === void 0 ? void 0 : _h.width }) : PREPARING_VIEW_FRAME_STYLE,
         testID: `gx-native-view-frame-${record.viewId}`,
     }, createElement(NativeView, {
         style: Object.assign(Object.assign({}, VIEW_FRAME_CONTENT_STYLE), cornerRadiusStyle),
@@ -95,5 +112,5 @@ export function NativeViewPresentationSurface({ children, nativeViewComponent, r
         pointerEvents: "none",
         style: Object.assign(Object.assign(Object.assign(Object.assign({}, VIEW_FRAME_BORDER_OVERLAY_STYLE), cornerRadiusStyle), borderStyle), frameOverlayShadowStyle),
         testID: `gx-native-view-frame-border-${record.viewId}`,
-    })));
+    }));
 }

package/dist/native-view-record-controller.js

@@ -236,6 +236,7 @@ export function createNativeViewRecordController(input) {
             layoutReportRevision: 0,
             pendingCoreToViewMessages: [],
             preparation,
+            retainedSize: null,
             size: null,
             srcdoc: action.srcdoc,
             committedLayoutReportOccurrence: null,
@@ -541,6 +542,7 @@ export function createNativeViewRecordController(input) {
                 }
             };
             const handleMessage = (value) => {
+                var _a;
                 if (coreConnectionFailed ||
                     detached ||
                     disposed ||
@@ -554,6 +556,14 @@ export function createNativeViewRecordController(input) {
                         connected.data.viewId === viewId) {
                         const wasViewConnected = entry.isViewConnected;
                         entry.isViewConnected = true;
+                        if (entry.size === null &&
+                            ((_a = entry.retainedSize) === null || _a === void 0 ? void 0 : _a.connectionId) === connection.connectionId) {
+                            entry.size = entry.retainedSize.size;
+                            const readySize = connectionReadiness.recordSize(entry.size);
+                            if (readySize) {
+                                deliverReadiness(readySize);
+                            }
+                        }
                         drainCoreToViewMessages(entry);
                         if (!wasViewConnected &&
                             !coreConnectionFailed &&
@@ -600,6 +610,10 @@ export function createNativeViewRecordController(input) {
                 }
                 const size = toViewSizeReport(parsed.data);
                 entry.size = size;
+                entry.retainedSize = {
+                    connectionId: connection.connectionId,
+                    size,
+                };
                 entry.layoutReportRevision += 1;
                 const readySize = connectionReadiness.recordSize(size);
                 if (readySize) {
@@ -636,6 +650,10 @@ export function createNativeViewRecordController(input) {
             entry.viewConnection = connection;
             entry.isViewConnected = false;
             entry.committedLayoutReportOccurrence = null;
+            const retainedSize = entry.retainedSize;
+            if ((retainedSize === null || retainedSize === void 0 ? void 0 : retainedSize.connectionId) !== connection.connectionId) {
+                entry.retainedSize = null;
+            }
             previousDetach === null || previousDetach === void 0 ? void 0 : previousDetach();
             if (entry.size !== null) {
                 entry.size = null;

package/dist/version.js

@@ -3,4 +3,4 @@ const reactNativeSdkVersion = typeof __GX_REACT_NATIVE_SDK_VERSION__ === "string
     : "";
 // Build scripts patch this fallback to the package version for published artifacts.
 // Source-linked workspace usage keeps the local fallback.
-export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "5.0.9";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "5.1.1";

package/dist/view-webview-bridge-adapter.js

@@ -10,6 +10,8 @@ const VIEW_WEBVIEW_BRIDGE_CONFIG = {
     connectTimeoutMessage: "Timed out connecting view to the native host",
     connectTimeoutMs: 30000,
     inactiveConnectionMessage: "View WebView bridge connection is not active",
+    reactivateOnNativeEpochChange: true,
+    throwOnUnavailablePost: true,
 };
 export const parseViewWebViewBridgeMessage = (value) => parseWebViewConnectionBridgeMessage(value, {
     invalidIdentity: "Invalid view WebView bridge message identity",
@@ -40,16 +42,16 @@ const buildViewHostBootstrapScript = () => {
       var connection = bridge.createConnection({
         connectionIdentity: { viewId: config.viewId },
         generation: config.generation,
-        onActivated: function (activeTransport) {
+        prepareActivation: function (activeTransport) {
           transport = activeTransport;
           if (typeof options.onMessage === "function") {
             activeTransport.subscribe(options.onMessage);
           }
-          activeTransport.postMessage({
-            t: "getuserfeedback:action:viewConnect",
-            gen: config.generation,
-            viewId: config.viewId
-          });
+        },
+        onActivated: function (_activeTransport, reactivate) {
+          if (reactivate) {
+            window.dispatchEvent(new Event("resize"));
+          }
         },
         onError: options.onError
       });

package/dist/view-webview-host-controller.d.ts

@@ -1,6 +1,7 @@
 import { type ViewWebViewBridgeMessage } from "./view-webview-bridge-adapter.js";
 import { type WebViewHostController } from "./webview-host-controller.js";
 export type ViewWebViewHostConnection = {
+    connectionId: string;
     generation: number;
     transport: {
         postMessage: (message: unknown) => void;

package/dist/view-webview-host-controller.js

@@ -11,18 +11,34 @@ export const createViewWebViewHostController = (input) => {
         buildActivationScript: buildViewWebViewBridgeScript,
         buildHostMessageScript: buildViewWebViewHostMessageScript,
         onConnected: (connection) => {
+            const listeners = new Set();
             input.onConnected({
+                connectionId: connection.connectionId,
                 generation: connection.generation,
                 transport: {
                     postMessage: connection.postMessage,
-                    subscribe: (listener) => connection.subscribe((message) => {
-                        if (message.kind === "message") {
-                            listener(message.message);
-                        }
-                    }),
+                    subscribe: (listener) => {
+                        listeners.add(listener);
+                        const unsubscribe = connection.subscribe((message) => {
+                            if (message.kind === "message") {
+                                listener(message.message);
+                            }
+                        });
+                        return () => {
+                            listeners.delete(listener);
+                            unsubscribe();
+                        };
+                    },
                 },
                 viewId: input.viewId,
             });
+            for (const listener of listeners) {
+                listener({
+                    gen: input.generation,
+                    t: "getuserfeedback:action:viewConnect",
+                    viewId: input.viewId,
+                });
+            }
         },
         onDisconnected: input.onDisconnected,
         onActivationRetryExhausted: input.onActivationRetryExhausted,

package/dist/webview-connection-bridge-script.d.ts

@@ -4,6 +4,8 @@ export type WebViewConnectionBridgeScriptConfig = {
     connectTimeoutMessage: string;
     connectTimeoutMs: number;
     inactiveConnectionMessage: string;
+    reactivateOnNativeEpochChange: boolean;
+    throwOnUnavailablePost: boolean;
 };
 export declare const buildWebViewConnectionBridgeScript: (input: ({
     phase: "documentStart";

package/dist/webview-connection-bridge-script.js

@@ -8,6 +8,8 @@ export const buildWebViewConnectionBridgeScript = (input) => {
     const bridgeProtocolVersion = serializeForJavaScript(input.config.bridgeProtocolVersion);
     const connectTimeoutMessage = serializeForJavaScript(input.config.connectTimeoutMessage);
     const inactiveConnectionMessage = serializeForJavaScript(input.config.inactiveConnectionMessage);
+    const reactivateOnNativeEpochChange = String(input.config.reactivateOnNativeEpochChange);
+    const throwOnUnavailablePost = String(input.config.throwOnUnavailablePost);
     return `
 (function () {
   var bridgeId = ${bridgeId};
@@ -15,6 +17,8 @@ export const buildWebViewConnectionBridgeScript = (input) => {
   var bridgeProtocolVersion = ${bridgeProtocolVersion};
   var connectTimeoutMessage = ${connectTimeoutMessage};
   var inactiveConnectionMessage = ${inactiveConnectionMessage};
+  var reactivateOnNativeEpochChange = ${reactivateOnNativeEpochChange};
+  var throwOnUnavailablePost = ${throwOnUnavailablePost};
   var existingBridge = window[bridgeGlobalKey];
 
   if (
@@ -22,11 +26,11 @@ export const buildWebViewConnectionBridgeScript = (input) => {
     existingBridge.protocolVersion === bridgeProtocolVersion &&
     existingBridge.bridgeId === bridgeId
   ) {
-    var didConnect = false;
+    var activationResult = false;
     if (${String(activateNative)}) {
-      didConnect = existingBridge.activateNative(${String(activationEpoch)});
+      activationResult = existingBridge.activateNative(${String(activationEpoch)});
     }
-    if (!didConnect) {
+    if (activationResult === false) {
       existingBridge.notifyConnected();
     }
     return;
@@ -41,6 +45,7 @@ export const buildWebViewConnectionBridgeScript = (input) => {
   var isClosed = false;
   var isNativeActivated = ${String(activateNative)};
   var nativeEpoch = ${String(activationEpoch)};
+  var activatedNativeEpoch = null;
 
   function postToNative(message) {
     var nativeBridge = window.ReactNativeWebView;
@@ -90,6 +95,7 @@ export const buildWebViewConnectionBridgeScript = (input) => {
       connectPromise: null,
       connectTimeout: null,
       onActivated: options.onActivated,
+      prepareActivation: options.prepareActivation,
       onError: options.onError,
       rejectConnect: null,
       resolveConnect: null,
@@ -103,7 +109,12 @@ export const buildWebViewConnectionBridgeScript = (input) => {
           }
           return;
         }
-        postToNative(toConnectionMessage("message", connection, message));
+        if (
+          !postToNative(toConnectionMessage("message", connection, message)) &&
+          throwOnUnavailablePost
+        ) {
+          throw new Error(inactiveConnectionMessage);
+        }
       },
       subscribe: function (listener) {
         if (activeConnection !== connection) {
@@ -154,7 +165,7 @@ export const buildWebViewConnectionBridgeScript = (input) => {
           }, ${connectTimeoutMs});
         });
         connection.connectPromise = connectPromise;
-        bridge.activateConnection();
+        bridge.activateConnection(false);
         return connectPromise;
       },
       disconnect: function () {
@@ -190,26 +201,34 @@ export const buildWebViewConnectionBridgeScript = (input) => {
     bridgeId: bridgeId,
     protocolVersion: bridgeProtocolVersion,
     createConnection: createConnection,
-    activateConnection: function () {
+    activateConnection: function (reactivate) {
       var connection = activeConnection;
       if (
         !isNativeActivated ||
         !connection ||
-        connection.isConnected
+        (connection.isConnected && !reactivate)
       ) {
         return false;
       }
+      if (typeof connection.prepareActivation === "function") {
+        try {
+          connection.prepareActivation(connection.transport, reactivate);
+        } catch {
+          return false;
+        }
+      }
       try {
         if (!postToNative(toConnectionMessage("connected", connection))) {
           return false;
         }
       } catch (error) {
-        reportConnectionError(connection, error);
         return false;
       }
       connection.isConnected = true;
       try {
-        connection.onActivated(connection.transport);
+        if (typeof connection.onActivated === "function") {
+          connection.onActivated(connection.transport, reactivate);
+        }
       } catch (error) {
         connection.isConnected = false;
         connection.isDisconnected = true;
@@ -233,6 +252,7 @@ export const buildWebViewConnectionBridgeScript = (input) => {
         connection.connectPromise = null;
         return false;
       }
+      activatedNativeEpoch = nativeEpoch;
       if (connection.resolveConnect) {
         if (connection.connectTimeout) {
           clearTimeout(connection.connectTimeout);
@@ -246,14 +266,20 @@ export const buildWebViewConnectionBridgeScript = (input) => {
     },
     activateNative: function (epoch) {
       if (typeof epoch !== "number" || !Number.isSafeInteger(epoch) || epoch < 0) {
-        return false;
+        return null;
       }
       if (nativeEpoch !== null && epoch < nativeEpoch) {
-        return false;
+        return null;
       }
+      var shouldReactivate =
+        reactivateOnNativeEpochChange &&
+        activeConnection &&
+        activeConnection.isConnected &&
+        activatedNativeEpoch !== epoch;
       isNativeActivated = true;
       nativeEpoch = epoch;
-      return bridge.activateConnection();
+      var didActivate = bridge.activateConnection(shouldReactivate);
+      return shouldReactivate && !didActivate ? null : didActivate;
     },
     notifyConnected: function () {
       if (activeConnection && activeConnection.isConnected) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "5.0.9",
+  "version": "5.1.1",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",
@@ -44,8 +44,8 @@
     "lint": "biome check ."
   },
   "dependencies": {
-    "@getuserfeedback/protocol": "^3.31.1",
-    "@getuserfeedback/sdk": "^0.12.36",
+    "@getuserfeedback/protocol": "^3.31.3",
+    "@getuserfeedback/sdk": "^0.13.1",
     "robot3": "^1.2.0"
   },
   "peerDependencies": {