@robono/messaging-react-native 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 ## 0.10.0 — release candidate
 
+## 0.11.1
+
+- Automatically install the shared calling UI package used by the account device-check panel, including chat-only installations. Native camera/calling dependencies remain optional.
+
+## 0.11.0
+
+Connects the supplied Messenger to recording/caption controls, on-device background blur and account device checks, using its existing call integration.
+
 Add supplied business cards, public groups and moderation, appearance controls, app-wide availability and inbox continuity. Own conversation opening and foreground incoming updates inside ExpoMessenger. Expand supplied interface languages.
 
 ## 0.9.0 — release candidate

package/README.md

@@ -257,7 +257,7 @@ import { MessagingCallingScreen } from '@robono/messaging-react-native/calling';
 />
 ```
 
-The `/calling` entry additionally needs the optional `@robono/calling-react-native` peer. Mount the calling overlay and configure native audio/notifications through the existing calling integration. This entry creates no call client and requests no permission. Omit `onCall` to hide the action; backend admission remains authoritative. `MessagingHeader` also accepts children for custom header actions.
+The shared `@robono/calling-react-native` UI package is installed automatically, including for the account device-check panel. Native call media and notification adapters remain optional. Mount the calling overlay and configure native audio/notifications through the existing calling integration. This entry creates no call client and requests no permission. Omit `onCall` to hide the action; backend admission remains authoritative. `MessagingHeader` also accepts children for custom header actions.
 
 The website preview renders the same bubbles, inline voice controls, full-screen photo/file viewer and video transport controls through React Native Web. Phone/tablet and portrait/landscape choices resize the real layout viewport without reloading the conversation. Browser media elements and Expo players drive the shared controls; the browser preview does not substitute native browser player controls or a generic dialog. Camera/library/file selection and OS permission prompts still follow the platform. Preview interactions never contact real users or send billable events.
 
@@ -448,3 +448,12 @@ The complete Messenger connection supplies foreground activity independently of
 the selected chat. Online now and optional Last seen are chosen in Features &
 preview. `connection.availability` can also supply an authorized contact list.
 [Activity setup, privacy and timing](https://robono.com/guides/user-availability.html).
+
+
+## Recording, captions and local call tools
+
+Robono hosts optional call recording and transcription. Enable recording once in the existing Calling settings; every participant must agree before capture, and anyone can stop it. The supplied controls include the consent notice, active-recording status and captions. No customer recording server is required.
+
+The supplied adapters also offer camera/microphone/speaker checks and camera background blur. Screen sharing is separate. Phone blur requires rebuilding the native app; browser blur downloads its model only when selected and needs the documented content-security policy. Background processing stays on the device.
+
+See the [recording and call tools guide](https://robono.com/guides/call-recording.html) for prices, retention, short-lived downloads, deletion, platform requirements and label customization. Captions arrive in short batches with several seconds of delay and can be inaccurate; incomplete transcripts are marked.

package/SBOM.spdx.json

@@ -2,10 +2,10 @@
   "spdxVersion": "SPDX-2.3",
   "dataLicense": "CC0-1.0",
   "SPDXID": "SPDXRef-DOCUMENT",
-  "name": "@robono/messaging-react-native@0.10.0",
-  "documentNamespace": "https://robono.com/sbom/messaging-react-native/0.10.0/f01772a63f341c1ecd147ed3249de2162211f081",
+  "name": "@robono/messaging-react-native@0.11.1",
+  "documentNamespace": "https://robono.com/sbom/messaging-react-native/0.11.1/286f4d0522c91da70b03b56bd0f6c1b2c04dfc1d",
   "creationInfo": {
-    "created": "2026-11-05T10:33:43.580Z",
+    "created": "2026-11-05T16:05:58.060Z",
     "creators": [
       "Organization: Robono (support@robono.com)"
     ]
@@ -14,11 +14,11 @@
     {
       "name": "@robono/messaging-react-native",
       "SPDXID": "SPDXRef-Package",
-      "versionInfo": "0.10.0",
+      "versionInfo": "0.11.1",
       "downloadLocation": "NOASSERTION",
       "filesAnalyzed": true,
       "packageVerificationCode": {
-        "packageVerificationCodeValue": "f01772a63f341c1ecd147ed3249de2162211f081"
+        "packageVerificationCodeValue": "286f4d0522c91da70b03b56bd0f6c1b2c04dfc1d"
       },
       "licenseConcluded": "LicenseRef-RobonoSDK",
       "licenseDeclared": "LicenseRef-RobonoSDK",
@@ -26,7 +26,7 @@
         "LicenseRef-RobonoSDK"
       ],
       "copyrightText": "Copyright (c) 2026 Add to Loop LLC.",
-      "comment": "Host-supplied peers (not bundled): {\"@robono/messaging\":\"^0.7.0\",\"react\":\">=18.2 <20\",\"react-native\":\">=0.76 <1\",\"expo-audio\":\">=55 <57\",\"expo-image-picker\":\">=55 <57\",\"expo-document-picker\":\">=55 <57\",\"expo-file-system\":\">=55.0.5 <57\",\"expo-sharing\":\">=55 <57\",\"expo-video\":\">=55 <57\",\"expo-crypto\":\">=55 <57\",\"react-native-safe-area-context\":\">=5 <6\",\"react-native-svg\":\">=15 <16\",\"@robono/calling-react-native\":\"^0.8.0\",\"expo-clipboard\":\">=8 <57\",\"expo-image-manipulator\":\">=14 <57\",\"expo-video-thumbnails\":\">=14 <57\",\"react-native-webview\":\">=13 <14\",\"expo-blur\":\">=55 <57\",\"expo-notifications\":\">=55 <57\",\"expo-secure-store\":\">=55 <57\",\"@robono/location-react-native\":\"^0.4.0\",\"expo-location\":\">=55 <57\",\"expo-constants\":\">=55 <57\",\"@robono/location\":\"^0.4.0\",\"expo-haptics\":\">=55 <57\",\"@robono/calling\":\"^0.5.0\"}"
+      "comment": "Host-supplied peers (not bundled): {\"@robono/messaging\":\"^0.7.1\",\"react\":\">=18.2 <20\",\"react-native\":\">=0.76 <1\",\"expo-audio\":\">=55 <57\",\"expo-image-picker\":\">=55 <57\",\"expo-document-picker\":\">=55 <57\",\"expo-file-system\":\">=55.0.5 <57\",\"expo-sharing\":\">=55 <57\",\"expo-video\":\">=55 <57\",\"expo-crypto\":\">=55 <57\",\"react-native-safe-area-context\":\">=5 <6\",\"react-native-svg\":\">=15 <16\",\"@robono/calling-react-native\":\"^0.9.0\",\"expo-clipboard\":\">=8 <57\",\"expo-image-manipulator\":\">=14 <57\",\"expo-video-thumbnails\":\">=14 <57\",\"react-native-webview\":\">=13 <14\",\"expo-blur\":\">=55 <57\",\"expo-notifications\":\">=55 <57\",\"expo-secure-store\":\">=55 <57\",\"@robono/location-react-native\":\"^0.4.0\",\"expo-location\":\">=55 <57\",\"expo-constants\":\">=55 <57\",\"@robono/location\":\"^0.4.0\",\"expo-haptics\":\">=55 <57\",\"@robono/calling\":\"^0.6.0\"}"
     }
   ],
   "files": [
@@ -36,11 +36,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "e3a4e40d5aff6784f0bb33a300a0da6081650f18af008f0bb11dad8210c16d7c"
+          "checksumValue": "e8eb4bd2858a2014e51054ae28adb47484ec1808f84f69f0627962c9f9be5d3f"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "16049433f53065f12fb14d35b6143c7be4217fa9"
+          "checksumValue": "7127471a85e7dc8b947adfafbca2b8244d2e47c1"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -74,11 +74,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "cc3068ad5b67b7caec6c16643820a36b4011a490b78084721a4b11a6f8e8fe33"
+          "checksumValue": "90ec61ecc2e49dc24e94f2f5be166fff96a6a9d5e43a547c63d063c304d31185"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "5ab62ccfa7007f7c44377ecd1bf924eb30492a87"
+          "checksumValue": "9b4494b4fb6e5087c85407fd0fb256a0b9e26ec9"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -112,11 +112,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "2f1328361b2b432a4f48bc2bb013656ddbdc50353cfba9b5a45c19c0b3adeca2"
+          "checksumValue": "837f6a3887d02c596f9fd2e5774a7920b3fb4c51d9f40019c64d4b1af3e233ca"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "1d464839cbe9a033b2a8646f332b420142146b48"
+          "checksumValue": "b936af0371f7c382903f2a2f7d847faeee5688e8"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -131,11 +131,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "baf9dbfdade3385884a35da4986763bbc92a56e3e01ef1486f933a67e66d749c"
+          "checksumValue": "399340c0a4539b5918e1ce1265a0811c624e7401bf21e7d7328449cfbc2609d4"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "3d801b65753ad15f69c8cbaa513d7a65d3d07322"
+          "checksumValue": "cd14cf72b91bac56dfd5ba1bac94d7e5bf647f42"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -454,11 +454,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "c5bed28fd78ae8b05fccffa938f6b846b8577152e5eb400c96e13869f44d9b80"
+          "checksumValue": "42e29921bce9f8ec264aa6ebcd20132a3c8adf14d1eeadb1a19648ebdd318303"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "273d74b211a3ba24a9d332cff8d1715760b67c67"
+          "checksumValue": "ca3c4c7fc708e9d1eaa81850c7b11fa21dbd419b"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -473,11 +473,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "15e46684ce38127a2f9a34441b70be9f7fca4088b94624a320be96cfbafc59b9"
+          "checksumValue": "398e93c24289d0c125acab0557a35c63b1fee9149137006568fefed0830b264a"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "209b8ea92646e034069ccb9bd7e79e56544b79c3"
+          "checksumValue": "cb781c3a18e5e5e004219816735809d21a3fd970"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -644,11 +644,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "4f4510054783370605c7eb1bc3d456cfa3606d37fb9f3589451c33fe444e8e49"
+          "checksumValue": "2663ea07823c8dd95db571753c56ec4e655d9ae0cf66fb086b91ed6a50a0a8cc"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "163dfad478e8fe7239ec106f6187f47b01142a59"
+          "checksumValue": "08d09268b8fc87e2a79666b09336e3310419d897"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -663,11 +663,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "8182046cbe30b3127281c57a205916478d569105e09e7ea9db075d74b6676573"
+          "checksumValue": "2656d4f7e8004333e73215709b6d4f84175a13ea476508e4965da8c1164aaf62"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "e03a20dfb4b70961b8b36cfbf8c052172781be3d"
+          "checksumValue": "66b634d4434e5a8e676977684e8658456d18deb0"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -1955,11 +1955,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "da40ab570ad2f2b2131997a34604bd58c9f62c30d79a506853ff1652d2e3e1be"
+          "checksumValue": "ef2a8fdc3bc77bf6720d2ff806c935ad381889ff9e334ce0aa0be6e9d079b0c1"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "c99b08d7714b84e57f1a04692ed452290d063e2c"
+          "checksumValue": "d015990df7071695bf07c2367f9531fe37fc8f24"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",
@@ -2791,11 +2791,11 @@
       "checksums": [
         {
           "algorithm": "SHA256",
-          "checksumValue": "48a6ba0fb3bf3acf5f6c433c2f8ed57e0bc6d032bb531666c18257152034a54e"
+          "checksumValue": "c16920f6704af714341e52f4415bc4ec66f1e181330773be404d0946efc8d500"
         },
         {
           "algorithm": "SHA1",
-          "checksumValue": "f45f11dbfe9cb03a1a08b929b802cf2c3cb87fcc"
+          "checksumValue": "6291ed16a2896e9a7be69ce43a7eee4784e526bd"
         }
       ],
       "licenseConcluded": "LicenseRef-RobonoSDK",

package/dist/account.d.ts

@@ -1,6 +1,9 @@
+import { type CallDeviceCheck } from '@robono/calling-react-native';
 import React from 'react';
 /** Profile and account actions belong to the customer's sign-in system. */
 export interface MessagingAccount {
+    deviceCheck?: CallDeviceCheck;
+    renderCallPreview?: (stream: MediaStream) => React.ReactNode;
     name: string;
     avatarUrl?: string;
     phone?: string;

package/dist/account.js

@@ -1,12 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CallDeviceCheckPanel, callDeviceCheckText } from '@robono/calling-react-native';
 import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { useEffect, useRef, useState } from 'react';
-import { Image, Platform, Pressable, ScrollView, View } from 'react-native';
+import { AppState, Image, Platform, Pressable, ScrollView, View } from 'react-native';
 import { MessagingPopup, messagingPopupColors as c } from './popup.js';
 import { MessageIcon } from './icons.js';
 export function MessagingAccountScreen({ account, companyName, onClose }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
+    const [checking, setChecking] = useState(false);
+    useEffect(() => { const sub = AppState.addEventListener('change', value => { if (value !== 'active')
+        void account?.deviceCheck?.close(); }); return () => { sub.remove(); void account?.deviceCheck?.close(); }; }, [account?.deviceCheck]);
     const [busy, setBusy] = useState(false), [error, setError] = useState(''), [visible, setVisible] = useState(true), pending = useRef(null);
     const dismissed = () => { const action = pending.current; pending.current = null; if (action)
         requestAnimationFrame(() => void run(action)); };
@@ -25,6 +29,12 @@ export function MessagingAccountScreen({ account, companyName, onClose }) {
     finally {
         setBusy(false);
     } };
-    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismissed, title: uiText("Account"), closeLabel: uiText("Close account"), closeDisabled: busy, background: c.background, contentWidth: 640, onClose: () => { if (!busy)
-            onClose(); }, children: _jsxs(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: [_jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 16, padding: 16, gap: 14 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 14 }, children: [account?.avatarUrl ? _jsx(Image, { source: { uri: account.avatarUrl }, style: { width: 56, height: 56, borderRadius: 28 } }) : _jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#252525', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "person-circle-outline", color: c.foreground, size: 36 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: account?.name ?? uiText("Your account") }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: companyName })] })] }), account?.phone && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.phone }), account?.email && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.email }), account?.onEditProfile && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Edit profile"), disabled: busy, onPress: () => begin(account.onEditProfile), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(MessageIcon, { name: "edit", color: c.foreground, size: 20 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Edit profile") })] })] }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Enable notifications"), disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Enable notifications") }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Sign out"), disabled: busy, onPress: () => begin(account.onSignOut), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Sign out") }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) });
+    return _jsx(MessagingPopup, { visible: visible, onDismiss: dismissed, title: uiText(checking ? "Check call devices" : "Account"), headerBack: checking, closeLabel: uiText("Close account"), closeDisabled: busy, background: c.background, contentWidth: 640, onClose: () => { if (!busy) {
+            if (checking) {
+                void account?.deviceCheck?.close();
+                setChecking(false);
+            }
+            else
+                onClose();
+        } }, children: _jsx(ScrollView, { contentContainerStyle: { gap: 16, paddingBottom: 12 }, children: checking && account?.deviceCheck ? _jsx(CallDeviceCheckPanel, { check: account.deviceCheck, renderVideo: account.renderCallPreview, labels: Object.fromEntries(Object.entries(callDeviceCheckText).map(([key, value]) => [key, uiText(value)])) }) : _jsxs(_Fragment, { children: [_jsxs(View, { style: { backgroundColor: '#111111', borderRadius: 16, padding: 16, gap: 14 }, children: [_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 14 }, children: [account?.avatarUrl ? _jsx(Image, { source: { uri: account.avatarUrl }, style: { width: 56, height: 56, borderRadius: 28 } }) : _jsx(View, { style: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#252525', alignItems: 'center', justifyContent: 'center' }, children: _jsx(MessageIcon, { name: "person-circle-outline", color: c.foreground, size: 36 }) }), _jsxs(View, { style: { flex: 1, gap: 4 }, children: [_jsx(Text, { style: { color: c.foreground, fontSize: 20, fontWeight: '600' }, children: account?.name ?? uiText("Your account") }), _jsx(Text, { style: { color: c.secondary, fontSize: 14 }, children: companyName })] })] }), account?.phone && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.phone }), account?.email && _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: account.email }), account?.onEditProfile && _jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Edit profile"), disabled: busy, onPress: () => begin(account.onEditProfile), style: { minHeight: 44, flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx(MessageIcon, { name: "edit", color: c.foreground, size: 20 }), _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Edit profile") })] })] }), account?.deviceCheck && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Check call devices"), disabled: busy, onPress: () => setChecking(true), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Check call devices") }) }), account?.onEnableNotifications && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Enable notifications"), disabled: busy, onPress: () => void run(account.onEnableNotifications), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Enable notifications") }) }), account?.onSignOut && _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: uiText("Sign out"), disabled: busy, onPress: () => begin(account.onSignOut), style: { backgroundColor: '#111111', borderRadius: 12, minHeight: 52, paddingHorizontal: 16, justifyContent: 'center' }, children: _jsx(Text, { style: { color: c.foreground, fontSize: 16 }, children: uiText("Sign out") }) }), !!error && _jsx(Text, { accessibilityRole: "alert", style: { color: c.foreground, fontSize: 15 }, children: error })] }) }) });
 }

package/dist/expo-connected-calling.d.ts

@@ -18,6 +18,14 @@ export declare function createExpoMessengerCalling(options: {
         name: string;
         avatarUrl?: string;
     }>): void;
+    deviceCheck: {
+        getSnapshot: () => import("@robono/calling-react-native").CallDeviceCheckState;
+        subscribe(fn: () => void): () => void;
+        start(kind?: "voice" | "video"): Promise<void>;
+        speaker(): Promise<void>;
+        close: () => Promise<void>;
+        dispose(): Promise<void>;
+    } | undefined;
     start: () => Promise<void>;
     getSnapshot: () => MessengerCallingState;
     subscribe(fn: () => void): () => void;

package/dist/expo-connected-calling.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { callDiagnosticsText } from '@robono/calling-react-native';
+import { callDiagnosticsText, callRecordingText } from '@robono/calling-react-native';
 import { Text } from './typography.js';
 import { callingText } from '@robono/calling-react-native/appearance';
 import { useRobonoLocale } from './localization.js';
@@ -7,7 +7,7 @@ import { useEffect, useSyncExternalStore } from 'react';
 import { Pressable, View } from 'react-native';
 import { setAudioModeAsync } from 'expo-audio';
 import { createMessengerCalling } from '@robono/calling-react-native/messenger';
-import { createNativeCallAdapters } from '@robono/calling-react-native/native';
+import { createNativeCallAdapters, createNativeCallDeviceCheck } from '@robono/calling-react-native/native';
 import { createNativeCallRuntime } from '@robono/calling-react-native/runtime';
 import { createNativeSystemCalling } from '@robono/calling-react-native/system-calling';
 import { NativeCallingOverlay, NativeGroupCallingOverlay } from '@robono/calling-react-native/native-video';
@@ -18,6 +18,7 @@ export function createExpoMessengerCalling(options) {
     let people = {};
     const system = createNativeSystemCalling({ start: () => calling.start(), onError: () => calling.reportError('The incoming call could not connect. Open the app and check microphone access and your connection.') });
     const calling = createMessengerCalling({
+        deviceCheck: active => createNativeCallDeviceCheck({ active, restoreAudio: () => setAudioModeAsync({ allowsRecording: false, playsInSilentMode: true, shouldPlayInBackground: false, shouldRouteThroughEarpiece: false, interruptionMode: 'mixWithOthers' }) }),
         request: createMessagingTransport({ ...options, url: url.href }),
         resolveContact: id => {
             const row = options.inbox.getSnapshot().conversations.find(c => c.id === id);
@@ -54,5 +55,5 @@ export function useExpoMessengerCalling(calling) {
 }
 export function ExpoMessengerCalls({ calling, state }) {
     const { text: uiText, locale: uiLocale, number: uiNumber, count: uiCount } = useRobonoLocale();
-    return _jsxs(_Fragment, { children: [state.error && _jsxs(View, { style: { backgroundColor: '#171717', paddingHorizontal: 16, paddingVertical: 8, flexDirection: 'row', gap: 12, alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: '#FAFAFA', flex: 1 }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void calling?.start().catch(() => { }), style: { padding: 8 }, children: _jsx(Text, { style: { color: '#FF8A2C' }, children: uiText("Retry calls") }) })] }), state.direct && _jsx(NativeCallingOverlay, { controller: state.direct, diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) }), state.group && _jsx(NativeGroupCallingOverlay, { controller: state.group, diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) })] });
+    return _jsxs(_Fragment, { children: [state.error && _jsxs(View, { style: { backgroundColor: '#171717', paddingHorizontal: 16, paddingVertical: 8, flexDirection: 'row', gap: 12, alignItems: 'center' }, children: [_jsx(Text, { accessibilityRole: "alert", style: { color: '#FAFAFA', flex: 1 }, children: state.error }), _jsx(Pressable, { accessibilityRole: "button", onPress: () => void calling?.start().catch(() => { }), style: { padding: 8 }, children: _jsx(Text, { style: { color: '#FF8A2C' }, children: uiText("Retry calls") }) })] }), state.direct && _jsx(NativeCallingOverlay, { controller: state.direct, recordingLabels: Object.fromEntries(Object.entries(callRecordingText).map(([key, value]) => [key, uiText(value)])), diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) }), state.group && _jsx(NativeGroupCallingOverlay, { controller: state.group, recordingLabels: Object.fromEntries(Object.entries(callRecordingText).map(([key, value]) => [key, uiText(value)])), diagnostics: { labels: Object.fromEntries(Object.entries(callDiagnosticsText).map(([key, value]) => [key, uiText(value)])) }, appearance: state.appearance, labels: Object.fromEntries(Object.entries({ ...callingText, ...state.appearance?.labels }).map(([key, value]) => [key, uiText(value)])) })] });
 }

package/dist/expo-messenger.d.ts

@@ -46,6 +46,14 @@ export declare function createExpoMessenger(options: {
             name: string;
             avatarUrl?: string;
         }>): void;
+        deviceCheck: {
+            getSnapshot: () => import("@robono/calling-react-native").CallDeviceCheckState;
+            subscribe(fn: () => void): () => void;
+            start(kind?: "voice" | "video"): Promise<void>;
+            speaker(): Promise<void>;
+            close: () => Promise<void>;
+            dispose(): Promise<void>;
+        } | undefined;
         start: () => Promise<void>;
         getSnapshot: () => import("@robono/calling-react-native/messenger").MessengerCallingState;
         subscribe(fn: () => void): () => void;
@@ -83,6 +91,14 @@ export declare function createHostedExpoMessenger(options: Omit<Parameters<typeo
             name: string;
             avatarUrl?: string;
         }>): void;
+        deviceCheck: {
+            getSnapshot: () => import("@robono/calling-react-native").CallDeviceCheckState;
+            subscribe(fn: () => void): () => void;
+            start(kind?: "voice" | "video"): Promise<void>;
+            speaker(): Promise<void>;
+            close: () => Promise<void>;
+            dispose(): Promise<void>;
+        } | undefined;
         start: () => Promise<void>;
         getSnapshot: () => import("@robono/calling-react-native/messenger").MessengerCallingState;
         subscribe(fn: () => void): () => void;

package/dist/expo-messenger.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderNativeCallVideo } from '@robono/calling-react-native/native-video';
 import { createInboxViewMemory } from './inbox-view.js';
 import { MessagingPublicRooms } from './public-rooms.js';
 import { RobonoLocaleProvider, useRobonoLocale } from './localization.js';
@@ -171,7 +172,8 @@ function ExpoMessengerContent({ inbox, contacts = {}, initialConversation, selec
     };
     useEffect(() => { void notifications?.start(async (id, message) => { await inbox.refresh(); const row = inbox.getSnapshot().conversations.find(c => c.id === id); if (row)
         open(row, message); }).catch(() => { }); }, [notifications, inbox]);
-    const account = notifications ? { name: props.account?.name ?? 'Your account', ...props.account, onEnableNotifications: () => notifications.enable() } : props.account;
+    const notificationAccount = notifications ? { name: props.account?.name ?? 'Your account', ...props.account, onEnableNotifications: () => notifications.enable() } : props.account;
+    const account = calling?.deviceCheck ? { name: 'Your account', ...notificationAccount, deviceCheck: calling.deviceCheck, renderCallPreview: (stream) => renderNativeCallVideo({ stream, local: true, style: { width: '100%', height: '100%' } }) } : notificationAccount;
     const contact = selected?.kind === 'group' ? { name: selected.name ?? 'Group' } : contacts[selected?.contactId ?? ''] ?? { name: selected?.contactId ?? 'Chat' };
     return _jsxs(View, { style: { flex: 1, minHeight: 0 }, children: [_jsx(MessengerMapsNotice, { error: mapConnection.error, retry: mapConnection.retry }), showMaps && maps ? _jsx(RobonoMaps, { interfaceLocale: mapsLocale, workspace: maps, contacts: contacts, onClose: () => setShowMaps(false) }) : _jsx(ExpoMessagingScreen, { ...props, account: account, contact: contact, participants: props.participants ?? contacts, extras: selected ? props.extras : undefined, callActions: selected ? { ...autoCalls, ...props.callActions, phoneNumber: contacts[selected.contactId ?? '']?.phoneNumber ?? props.callActions?.phoneNumber } : undefined, onBack: () => { props.client.stop(); setSelected(null); void inbox.refresh().catch(() => { }); }, renderConversation: screen => selected ? _jsx(MessagingCallingScreen, { ...screen, onCall: screen.callActions?.voice, onVideoCall: screen.callActions?.video, callLabel: "Internet call", unansweredCallId: callState.unanswered?.conversationId === selected.id ? callState.unanswered.id : undefined, onDismissCallMessage: calling?.dismissUnanswered }) : _jsxs(MessagingProvider, { ...screen, children: [_jsx(MessagingInbox, { viewMemory: inboxMemory, client: inbox, userId: props.userId, contacts: contacts, companyName: props.companyName, appearance: props.appearance, active: props.active !== false, headerActions: _jsx(MessagingAccountMenu, { onPublicRooms: inboxState.publicRoomsAvailable ? () => setPublicRooms(true) : undefined, onMaps: mapsAvailable ? () => setShowMaps(true) : undefined, onNewGroup: inboxState.groupCreationAvailable ? () => setNewGroup(true) : undefined }), onSelect: open, onDeleted: id => props.client.forgetConversation(id) }), publicRooms && _jsx(MessagingPublicRooms, { inbox: inbox, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, createRequestId: () => props.client.createForwardId(), onClose: () => setPublicRooms(false), onJoined: (id, name) => { setPublicRooms(false); open(inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }); } }), newGroup && _jsx(MessagingGroupEditor, { client: props.client, inbox: inbox, userId: props.userId, contacts: contacts, groups: inboxState.groups, accent: (props.appearance ?? inboxState.appearance ?? defaultMessagingSettings().appearance).colors.accent, onClose: () => setNewGroup(false), onSaved: (id, name) => { setNewGroup(false); const row = inbox.getSnapshot().conversations.find(c => c.id === id) ?? { id, kind: 'group', name, contactId: null, lastMessage: null, unreadCount: 0, canSend: true }; open(row); } })] }) }), _jsx(ExpoMessengerCalls, { calling: calling, state: callState })] });
 }

package/dist/popup.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import { Text } from './typography.js';
 import { useRobonoLocale } from './localization.js';
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, useCallback, useMemo } from 'react';
-import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, SafeAreaView, View, useWindowDimensions } from 'react-native';
+import { Keyboard, KeyboardAvoidingView, Modal, Platform, Pressable, SafeAreaView, StatusBar, View, useWindowDimensions } from 'react-native';
 import { MessageIcon } from './icons.js';
 /** Browser hosts can keep settings dialogs inside their embedded chat. */
 export const MessagingPopupSurface = createContext(null);
@@ -97,7 +98,7 @@ export function MessagingMenuSurface({ visible, onClose, onDismiss, children })
 }
 /** Content panels occupy the area below the persistent header; confirmations stay compact. */
 export function MessagingPopup({ children, onClose, background, form = false, visible = true, onDismiss, expanded = true, bottomPadding, title, foreground, closeLabel, closeDisabled = false, contentWidth, headerBack = false, withinChat = false, compact = false }) {
-    const ChatSurface = useContext(MessagingPopupSurface), bounds = useContext(PopupBounds), viewport = useWindowDimensions();
+    const ChatSurface = useContext(MessagingPopupSurface), bounds = useContext(PopupBounds), viewport = useWindowDimensions(), safeInsets = useContext(SafeAreaInsetsContext);
     const [rect, setRect] = useState(null);
     useLayoutEffect(() => {
         if (!visible || Platform.OS === 'web' || !bounds)
@@ -139,7 +140,7 @@ export function MessagingPopup({ children, onClose, background, form = false, vi
     } }; document.addEventListener('keydown', escape, true); return () => document.removeEventListener('keydown', escape, true); }, [visible]);
     const bounded = Platform.OS !== 'web' && !!bounds;
     const Frame = Platform.OS === 'ios' && !bounded ? SafeAreaView : View;
-    const content = _jsx(Frame, { style: [{ flex: 1, backgroundColor: messagingPopupBackdrop }, bounded ? { position: 'absolute', ...(rect ?? { left: 0, top: 0, width: 0, height: 0 }) } : undefined], children: _jsxs(KeyboardAvoidingView, { testID: "messaging-popup-backdrop", behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: compact ? 24 : 8 }, children: [_jsx(Pressable, { accessible: false, onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsxs(View, { testID: "messaging-popup-panel", accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', ...(compact ? { maxWidth: 360, maxHeight: '100%', flexShrink: 1 } : { flex: 1, minHeight: 0 }), backgroundColor: compact ? '#111111' : messagingPopupColors.background, borderRadius: compact ? 20 : 18, paddingHorizontal: compact ? 20 : 8, paddingTop: compact ? 8 : 0, paddingBottom: bottomPadding ?? (compact ? 20 : 4), overflow: 'hidden' }, children: [title && _jsx(MessagingPopupHeader, { title: title, foreground: messagingPopupColors.foreground, onClose: onClose, closeLabel: closeLabel, disabled: closeDisabled, back: headerBack }), contentWidth ? _jsx(View, { style: { ...(compact ? { flexShrink: 1 } : { flex: 1, minHeight: 0 }), width: '100%', maxWidth: contentWidth, alignSelf: 'center', paddingTop: 12 }, children: children }) : children] })] }) });
+    const content = _jsx(Frame, { style: [{ flex: 1, backgroundColor: messagingPopupBackdrop }, bounded ? { position: 'absolute', ...(rect ?? { left: 0, top: 0, width: 0, height: 0 }) } : Platform.OS === 'android' ? { paddingTop: safeInsets?.top ?? StatusBar.currentHeight ?? 0, paddingBottom: safeInsets?.bottom ?? 0 } : undefined], children: _jsxs(KeyboardAvoidingView, { testID: "messaging-popup-backdrop", behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: compact ? 24 : 8 }, children: [_jsx(Pressable, { accessible: false, onPress: onClose, style: { position: 'absolute', inset: 0 } }), _jsxs(View, { testID: "messaging-popup-panel", accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: { width: '100%', ...(compact ? { maxWidth: 360, maxHeight: '100%', flexShrink: 1 } : { flex: 1, minHeight: 0 }), backgroundColor: compact ? '#111111' : messagingPopupColors.background, borderRadius: compact ? 20 : 18, paddingHorizontal: compact ? 20 : 8, paddingTop: compact ? 8 : 0, paddingBottom: bottomPadding ?? (compact ? 20 : 4), overflow: 'hidden' }, children: [title && _jsx(MessagingPopupHeader, { title: title, foreground: messagingPopupColors.foreground, onClose: onClose, closeLabel: closeLabel, disabled: closeDisabled, back: headerBack }), contentWidth ? _jsx(View, { style: { ...(compact ? { flexShrink: 1 } : { flex: 1, minHeight: 0 }), width: '100%', maxWidth: contentWidth, alignSelf: 'center', paddingTop: 12 }, children: children }) : children] })] }) });
     if (Platform.OS === 'web' && ChatSurface)
         return _jsx(ChatSurface, { visible: visible, title: title, onDismiss: onDismiss, onClose: onClose, children: content });
     return _jsx(Modal, { visible: visible, statusBarTranslucent: true, navigationBarTranslucent: true, onDismiss: onDismiss, transparent: true, animationType: "fade", onRequestClose: onClose, children: content });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robono/messaging-react-native",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "type": "module",
   "sideEffects": false,
   "description": "Optional, composable direct and group messaging screens for Robono.",
@@ -55,7 +55,7 @@
     "prepack": "npm run build && node ../../scripts/generate-sdk-file-sbom.mjs"
   },
   "peerDependencies": {
-    "@robono/messaging": "^0.7.0",
+    "@robono/messaging": "^0.7.1",
     "react": ">=18.2 <20",
     "react-native": ">=0.76 <1",
     "expo-audio": ">=55 <57",
@@ -67,7 +67,7 @@
     "expo-crypto": ">=55 <57",
     "react-native-safe-area-context": ">=5 <6",
     "react-native-svg": ">=15 <16",
-    "@robono/calling-react-native": "^0.8.0",
+    "@robono/calling-react-native": "^0.9.0",
     "expo-clipboard": ">=8 <57",
     "expo-image-manipulator": ">=14 <57",
     "expo-video-thumbnails": ">=14 <57",
@@ -80,7 +80,7 @@
     "expo-constants": ">=55 <57",
     "@robono/location": "^0.4.0",
     "expo-haptics": ">=55 <57",
-    "@robono/calling": "^0.5.0"
+    "@robono/calling": "^0.6.0"
   },
   "license": "SEE LICENSE IN LICENSE",
   "peerDependenciesMeta": {
@@ -108,9 +108,6 @@
     "react-native-safe-area-context": {
       "optional": true
     },
-    "@robono/calling-react-native": {
-      "optional": true
-    },
     "expo-clipboard": {
       "optional": true
     },