@getuserfeedback/react-native 5.15.2 → 5.15.3

package/README.md

@@ -45,6 +45,22 @@ export function App() {
 
 That is enough to receive flows published for automatic Widget delivery.
 
+## Native color scheme
+
+For flows using the native renderer, set `clientOptions.colorScheme` to
+`"light"`, `"dark"`, or `"system"`. Omitted values and browser auto-detect
+objects follow the device appearance on native (light when unavailable).
+
+Scheme-only prop changes and `client.configure({ colorScheme: "dark" })`
+repaint the SDK's default native palette without restarting the flow or
+clearing its draft. An unchanged prop does not override a later configure call.
+The selection belongs to that client: runtime recreation retains it, while a
+replacement client (for example, a new API key) starts from its initial prop.
+Native repaint does not wait for Core: configure still forwards to Core and
+retains its existing promise/error behavior, but remote failure does not roll
+back native appearance. WebView flows keep their existing scheme forwarding
+and browser auto-detection behavior. This does not add a style override API.
+
 - [React Native SDK guide](https://getuserfeedback.com/docs/get-started/react-native-sdk)
 - [React Native SDK reference](https://getuserfeedback.com/docs/reference/react-native-sdk-reference)
 - [Package versions](https://www.npmjs.com/package/@getuserfeedback/react-native?activeTab=versions)

package/dist/native-color-scheme.d.ts

@@ -0,0 +1,31 @@
+export declare const NativeColorSchemeContext: import("react").Context<import("@getuserfeedback/protocol/host").ColorSchemeConfig | undefined>;
+export declare function useNativeColorScheme(): {
+    scheme: "dark" | "light";
+    palette: {
+        background: string;
+        text: string;
+        muted: string;
+        input: string;
+        border: string;
+        placeholder: string;
+        button: string;
+        buttonText: string;
+        accent: string;
+        disabled: string;
+        disabledText: string;
+        error: string;
+    } | {
+        background: string;
+        text: string;
+        muted: string;
+        input: string;
+        border: string;
+        placeholder: string;
+        button: string;
+        buttonText: string;
+        accent: string;
+        disabled: string;
+        disabledText: string;
+        error: string;
+    };
+};

package/dist/native-color-scheme.js

@@ -0,0 +1,44 @@
+import { createContext, useContext } from "react";
+// Host-local presentation only; never the acknowledged Core configuration.
+export const NativeColorSchemeContext = createContext(undefined);
+const palettes = {
+    light: {
+        background: "#ffffff",
+        text: "#17202a",
+        muted: "#475569",
+        input: "#ffffff",
+        border: "#64748b",
+        placeholder: "#64748b",
+        button: "#e7eefb",
+        buttonText: "#17202a",
+        accent: "#2563eb",
+        disabled: "#e5e7eb",
+        disabledText: "#4b5563",
+        error: "#aa0000",
+    },
+    dark: {
+        background: "#111827",
+        text: "#f3f4f6",
+        muted: "#cbd5e1",
+        input: "#1f2937",
+        border: "#94a3b8",
+        placeholder: "#94a3b8",
+        button: "#1e3a5f",
+        buttonText: "#f8fafc",
+        accent: "#93c5fd",
+        disabled: "#374151",
+        disabledText: "#cbd5e1",
+        error: "#fca5a5",
+    },
+};
+export function useNativeColorScheme() {
+    const requested = useContext(NativeColorSchemeContext);
+    const device = require("react-native").useColorScheme();
+    // Browser auto-detection has no DOM on native; use the device preference.
+    const scheme = requested === "light" || requested === "dark"
+        ? requested
+        : device === "dark"
+            ? "dark"
+            : "light";
+    return { scheme, palette: palettes[scheme] };
+}

package/dist/native-flow-content.js

@@ -1,4 +1,5 @@
 import { createElement, useLayoutEffect, useRef, useState, } from "react";
+import { useNativeColorScheme } from "./native-color-scheme.js";
 /** Thin native editor: drafts only. Core owns validation, navigation and submission. */
 export function NativeFlowContent({ controller, presentationMode = "overlay", record, }) {
     const flow = record.nativeFlow;
@@ -7,6 +8,7 @@ export function NativeFlowContent({ controller, presentationMode = "overlay", re
     const { projection, interaction } = flow;
     const { View, Text, TextInput, Pressable, ScrollView, useWindowDimensions, } = require("react-native");
     const { height: windowHeight } = useWindowDimensions();
+    const { scheme, palette } = useNativeColorScheme();
     const [draft, setDraft] = useState(projection.answers);
     const rawDraft = useRef(draft);
     const scroll = useRef(null);
@@ -68,16 +70,20 @@ export function NativeFlowContent({ controller, presentationMode = "overlay", re
         onPress,
         style: {
             padding: 12,
-            backgroundColor: buttonDisabled ? "#ddd" : "#e7eefb",
+            backgroundColor: buttonDisabled ? palette.disabled : palette.button,
             borderRadius: 6,
             marginTop: 8,
         },
-    }, createElement(Text, { style: { color: "#17202a" } }, label));
+    }, createElement(Text, {
+        style: {
+            color: buttonDisabled ? palette.disabledText : palette.buttonText,
+        },
+    }, label));
     return createElement(ScrollView, {
         ref: scroll,
         style: Object.assign(Object.assign({}, (presentationMode === "content"
             ? { flexGrow: 0, flexShrink: 1, maxHeight: windowHeight }
-            : { flex: 1, maxHeight: "100%" })), { width: "100%", backgroundColor: "#fff" }),
+            : { flex: 1, maxHeight: "100%" })), { width: "100%", backgroundColor: palette.background }),
         keyboardShouldPersistTaps: "handled",
         nestedScrollEnabled: presentationMode === "content",
         // Report the actual viewport, never the window ceiling or inner content.
@@ -87,29 +93,39 @@ export function NativeFlowContent({ controller, presentationMode = "overlay", re
         testID: "native-flow-renderer",
         style: { padding: 24, gap: 12 },
     }, projection.mode === "simulated"
-        ? createElement(Text, { testID: "native-flow-simulated" }, "SIMULATED — no response is saved")
+        ? createElement(Text, {
+            testID: "native-flow-simulated",
+            style: { color: palette.muted },
+        }, "SIMULATED — no response is saved")
         : null, ...projection.blocks.map((block) => {
         var _a;
         if (block.kind === "statement")
-            return createElement(View, { key: block.key }, ...block.paragraphs.map((text, index) => createElement(Text, { key: index }, text)));
+            return createElement(View, { key: block.key }, ...block.paragraphs.map((text, index) => createElement(Text, { key: index, style: { color: palette.text } }, text)));
         const value = draft[block.key];
         const requiredLabel = block.required ? ", required" : "";
         const selected = Array.isArray(value)
             ? ((_a = value[0]) !== null && _a !== void 0 ? _a : "")
             : (value !== null && value !== void 0 ? value : "");
-        return createElement(View, { key: block.key, style: { gap: 6 } }, createElement(Text, {}, block.label + (block.required ? " *" : "")), block.description ? createElement(Text, {}, block.description) : null, block.kind === "text"
+        return createElement(View, { key: block.key, style: { gap: 6 } }, createElement(Text, { style: { color: palette.text } }, block.label + (block.required ? " *" : "")), block.description
+            ? createElement(Text, { style: { color: palette.muted } }, block.description)
+            : null, block.kind === "text"
             ? createElement(TextInput, {
                 accessibilityLabel: block.label + requiredLabel,
                 accessibilityHint: block.description,
                 value: selected,
                 placeholder: block.placeholder,
+                placeholderTextColor: palette.placeholder,
+                keyboardAppearance: scheme,
+                selectionColor: palette.accent,
+                cursorColor: palette.accent,
                 editable: !disabled,
                 maxLength: 4000,
                 onChangeText: (text) => update(block.key, text),
                 style: {
-                    color: "#17202a",
+                    color: disabled ? palette.disabledText : palette.text,
+                    backgroundColor: disabled ? palette.disabled : palette.input,
                     borderWidth: 1,
-                    borderColor: "#999",
+                    borderColor: palette.border,
                     borderRadius: 4,
                     padding: 10,
                 },
@@ -132,12 +148,20 @@ export function NativeFlowContent({ controller, presentationMode = "overlay", re
                 disabled,
                 onPress: () => update(block.key, option.value),
                 style: { padding: 10 },
-            }, createElement(Text, {}, `${selected === option.value ? "●" : "○"} ${option.label}`)))), projection.errors[block.key]
-            ? createElement(Text, { accessibilityRole: "alert", style: { color: "#a00" } }, projection.errors[block.key])
+            }, createElement(Text, {
+                style: {
+                    color: disabled ? palette.disabledText : palette.text,
+                },
+            }, `${selected === option.value ? "●" : "○"} ${option.label}`)))), projection.errors[block.key]
+            ? createElement(Text, { accessibilityRole: "alert", style: { color: palette.error } }, projection.errors[block.key])
             : null);
-    }), ...projection.formErrors.map((text, index) => createElement(Text, { key: `error-${index}`, accessibilityRole: "alert" }, text)), ...projection.terminal.map((text, index) => createElement(Text, { key: `terminal-${index}` }, text)), projection.status === "succeeded" &&
+    }), ...projection.formErrors.map((text, index) => createElement(Text, {
+        key: `error-${index}`,
+        accessibilityRole: "alert",
+        style: { color: palette.error },
+    }, text)), ...projection.terminal.map((text, index) => createElement(Text, { key: `terminal-${index}`, style: { color: palette.text } }, text)), projection.status === "succeeded" &&
         (projection.mode === "simulated" || projection.terminal.length === 0)
-        ? createElement(Text, { testID: "native-flow-complete" }, projection.mode === "simulated"
+        ? createElement(Text, { testID: "native-flow-complete", style: { color: palette.text } }, projection.mode === "simulated"
             ? "SIMULATED completion — nothing saved"
             : "Thank you")
         : null, projection.canGoBack ? button("Back", () => interact("back")) : null, interaction === "draft-failed"
@@ -155,6 +179,10 @@ export function NativeFlowContent({ controller, presentationMode = "overlay", re
             disabled: !record.isActive,
             onPress: () => controller.closeNativeFlow(record),
             style: { padding: 12 },
-        }, createElement(Text, {}, "Close"))
+        }, createElement(Text, {
+            style: {
+                color: !record.isActive ? palette.disabledText : palette.text,
+            },
+        }, "Close"))
         : null));
 }

package/dist/native-provider-client-controller.d.ts

@@ -4,10 +4,13 @@ import { type OpenRequestDispatcher } from "@getuserfeedback/sdk/internal/open-r
 export declare function createNativeProviderClientController(input: {
     instanceId: string;
     onError?: (error: Error) => void;
+    initialColorScheme?: ConfigureOptions["colorScheme"];
 }): {
     client: import("./client.js").Client;
     directSessionController: import("./native-direct-command-session-controller.js").NativeDirectCommandSessionController;
     flowRegistry: import("./native-provider-flow-registry.js").NativeProviderFlowRegistry;
+    getNativeColorScheme: () => import("@getuserfeedback/protocol/host").ColorSchemeConfig | undefined;
+    subscribeNativeColorScheme: (listener: () => void) => () => void;
     getRuntimeConfiguration: () => ConfigureOptions;
     observeOpenRequest: (payload: Parameters<OpenRequestDispatcher["dispatch"]>[0]) => ReturnType<OpenRequestDispatcher["dispatch"]>;
     dispose: () => void;

package/dist/native-provider-client-controller.js

@@ -4,6 +4,9 @@ import { createNativeProviderClient, parseRequiredString, } from "./native-provi
 import { createNativeProviderCommandController } from "./native-provider-command-controller.js";
 import { createNativeProviderFlowRegistry } from "./native-provider-flow-registry.js";
 export function createNativeProviderClientController(input) {
+    // Presentation belongs to this client, independently of Core acknowledgement.
+    let nativeColorScheme = input.initialColorScheme;
+    const colorSchemeListeners = new Set();
     let runtimeConfiguration = {};
     const updateRuntimeConfiguration = (updates) => {
         runtimeConfiguration = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, runtimeConfiguration), (updates.auth === undefined ? {} : { auth: updates.auth })), (updates.capabilities === undefined
@@ -44,7 +47,15 @@ export function createNativeProviderClientController(input) {
             catch (error) {
                 return commands.reject(error);
             }
-            const settlement = await commands.runOperation((dispatch) => dispatch(canonicalCommand), options);
+            const settlement = await commands.runOperation((dispatch) => {
+                if (canonicalCommand.kind === "configure" &&
+                    canonicalCommand.opts.colorScheme !== undefined) {
+                    nativeColorScheme = canonicalCommand.opts.colorScheme;
+                    for (const listener of colorSchemeListeners)
+                        listener();
+                }
+                return dispatch(canonicalCommand);
+            }, options);
             if (canonicalCommand.kind === "configure" && settlement !== undefined) {
                 updateRuntimeConfiguration(canonicalCommand.opts);
             }
@@ -57,9 +68,17 @@ export function createNativeProviderClientController(input) {
         client,
         directSessionController: session,
         flowRegistry: flows,
+        getNativeColorScheme: () => nativeColorScheme,
+        subscribeNativeColorScheme: (listener) => {
+            colorSchemeListeners.add(listener);
+            return () => {
+                colorSchemeListeners.delete(listener);
+            };
+        },
         getRuntimeConfiguration: () => (Object.assign({}, runtimeConfiguration)),
         observeOpenRequest,
         dispose: () => {
+            colorSchemeListeners.clear();
             flows.reset();
             commands.dispose();
         },

package/dist/native-provider.js

@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { parseInitOptions } from "@getuserfeedback/protocol";
+import { DEFAULT_AUTO_DETECT_COLOR_SCHEME_ATTRS, parseInitOptions, } from "@getuserfeedback/protocol";
 import { createUniqueId } from "@getuserfeedback/protocol/host";
 import { createActionRegistry, } from "@getuserfeedback/sdk/internal/action-registry";
 import { resolveLinkRouter } from "@getuserfeedback/sdk/internal/link-router";
-import { createContext, createElement, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createContext, createElement, Fragment, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { NativeStandardFlowContainer } from "./flow-container.js";
+import { NativeColorSchemeContext } from "./native-color-scheme.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";
@@ -123,7 +124,9 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
     const actionRegistry = useNativeActionRegistry(clientOptions.actions);
     const linkRouter = useNativeLinkRouter(clientOptions.links);
     const normalizedClientOptions = parseNativeInitOptions(clientOptions, actionRegistry.definitions);
-    const clientOptionsKey = toClientOptionsKey(normalizedClientOptions);
+    const { colorScheme } = normalizedClientOptions, runtimeIdentityOptions = __rest(normalizedClientOptions, ["colorScheme"]);
+    const clientOptionsKey = toClientOptionsKey(runtimeIdentityOptions);
+    const colorSchemePropKey = toClientOptionsKey(colorScheme);
     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;
@@ -140,14 +143,40 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         apiKey: normalizedClientOptions.apiKey,
         hostCapabilities: normalizedClientOptions.hostCapabilities,
     });
-    const controllerOwner = useMemo(() => ({
+    const createControllerOwner = () => ({
         identityKey: clientIdentityKey,
+        colorSchemePropKey,
         controller: createNativeProviderClientController({
             instanceId,
             onError: reportError,
+            initialColorScheme: colorScheme,
         }),
-    }), [clientIdentityKey, instanceId, reportError]);
+    });
+    let [controllerOwner, setControllerOwner] = useState(createControllerOwner);
+    // Initialize the whole owner together, before committing a replacement client.
+    // Scheme-only prop changes update that owner without replacing it.
+    if (controllerOwner.identityKey !== clientIdentityKey) {
+        controllerOwner = createControllerOwner();
+        setControllerOwner(controllerOwner);
+    }
     const controller = controllerOwner.controller;
+    const hostColorScheme = useSyncExternalStore(controller.subscribeNativeColorScheme, controller.getNativeColorScheme, controller.getNativeColorScheme);
+    useLayoutEffect(() => {
+        if (controllerOwner.colorSchemePropKey === colorSchemePropKey)
+            return;
+        controllerOwner.colorSchemePropKey = colorSchemePropKey;
+        // Prop changes share configure's forwarding path, not runtime identity.
+        // Unchanged props must not undo a later imperative configure.
+        void controller.client
+            .configure({
+            colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : {
+                autoDetectColorScheme: [...DEFAULT_AUTO_DETECT_COLOR_SCHEME_ATTRS],
+            },
+        })
+            .catch(() => {
+            // The controller reports remote failures; local appearance is retained.
+        });
+    }, [colorScheme, colorSchemePropKey, controller, controllerOwner]);
     const attachViewProjection = useCallback((nextProjection) => {
         setProjection(nextProjection);
         return () => setProjection((current) => current === nextProjection ? null : current);
@@ -199,7 +228,7 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
     }, [controller]);
     const getRuntimeConfiguration = useCallback(() => controller.getRuntimeConfiguration(), [controller]);
     const handleHandleInvalidated = useCallback((message) => controller.onHandleInvalidated(message), [controller]);
-    return createElement(GetUserFeedbackContext.Provider, { value: controller.client }, createElement(NativeFlowContainerContext.Provider, { value: flowContainerContext }, createElement(Fragment, null, children, createElement(NativeStandardFlowContainer), createElement(NativeProviderRuntime, {
+    return createElement(NativeColorSchemeContext.Provider, { value: hostColorScheme }, createElement(GetUserFeedbackContext.Provider, { value: controller.client }, createElement(NativeFlowContainerContext.Provider, { value: flowContainerContext }, createElement(Fragment, null, children, createElement(NativeStandardFlowContainer), createElement(NativeProviderRuntime, {
         attachViewProjection,
         coreUrl,
         coreWebViewComponent: webViewComponent,
@@ -215,7 +244,7 @@ export function GetUserFeedbackProvider({ children, clientOptions, instanceId: i
         onHandleInvalidated: handleHandleInvalidated,
         observeOpenRequest: controller.observeOpenRequest,
         viewWebViewComponent: webViewComponent,
-    }))));
+    })))));
 }
 /**
  * Returns the React Native SDK client from the nearest provider.

package/dist/native-runtime-root.js

@@ -40,7 +40,9 @@ export function NativeRuntimeRoot({ attachViewProjection, coreUrl, coreWebViewCo
     const onStartupTerminalErrorRef = useRef(onStartupTerminalError);
     onStartupTerminalErrorRef.current = onStartupTerminalError;
     const createStartupCommandRef = useRef(createStartupCommand);
-    createStartupCommandRef.current = createStartupCommand;
+    useLayoutEffect(() => {
+        createStartupCommandRef.current = createStartupCommand;
+    }, [createStartupCommand]);
     const hostActionsRef = useRef(hostActions);
     hostActionsRef.current = hostActions;
     const linkRouterRef = useRef(linkRouter);

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.15.2";
+export const REACT_NATIVE_SDK_VERSION = reactNativeSdkVersion.length > 0 ? reactNativeSdkVersion : "5.15.3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getuserfeedback/react-native",
-  "version": "5.15.2",
+  "version": "5.15.3",
   "description": "getuserfeedback React Native SDK",
   "keywords": [
     "getuserfeedback",