React Native SDK reference

Every export of the React Native SDK, @graineai/inapp-react-native 0.44.1, and of its calls package, @graineai/inapp-react-native-calls 0.5.1 (which carries the call engine of Graine's iOS and Android SDKs 0.10.1), read from their source. The page is grouped by what you are building — installing, identity and memory, the chat, the voice bar, several agents, screen context and actions, calls, booking, the scheduled-calls list, design, going live, events, errors — and every component, hook, function, constant and type sits with the use it serves. Each entry opens with what it is for, then its signature, parameters or props, what it returns, the errors it can raise and an example; each type lists every field with what to expect. The same API across every platform, topic by topic, is the SDK reference; a step-by-step set-up is React Native.

Requirements, install, permissions and initialisation

Use this section to add the packages, declare what the operating systems ask for, and mount the agent once at the root of your app.

Install

npm install @graineai/inapp-react-native react-native-webview @react-native-async-storage/async-storage
npm install @graineai/inapp-react-native-calls      # calls that ring (optional)
npm install expo-font react-native-svg              # the design's typeface and icons (recommended)
cd ios && pod install

Permissions and capabilities

Use this list to declare what the operating systems ask for before the first conversation.

• The SDK package carries no manifest. Declare the microphone yourself: Android RECORD_AUDIO and MODIFY_AUDIO_SETTINGS; iOS NSMicrophoneUsageDescription (iOS ends an app that opens the microphone without it).
• The calls package's Android manifest merges everything a call needs — the microphone, notifications, the full-screen ring, the microphone foreground service, the call screen, the screen it asks for permissions from, its service and its receiver. On iOS, add the capabilities yourself — Push Notifications, and Background Modes → Audio and Voice over IP, plus the usage string above — or, with Expo, let the calls package's config plugin add them.
• At run time: call requestMicrophonePermission() (below) to choose when Android asks for the bar's voice; otherwise it asks when the first call starts, and iOS asks the first time the microphone is used. For calls, GraineCalls.requestCallPermissions() asks for the microphone and, on Android 13+, notifications at a moment you choose; the calls package also asks for the microphone before it places or answers a call without it. Without notifications a ring cannot show while your app is closed. GraineCalls.callSetupProblems() names whatever is still missing (Permissions and the setup check).
• iPhone ringer switch: the SDK leaves your app's audio session to you for the bar's voice — while a conversation is live, set your audio library's equivalents of playsInSilentModeIOS: true and allowsRecordingIOS: true, or the agent is silent when the ringer is off. Calls from the calls package set their own audio session.

JSON — app.json (Expo), with the calls package

{
  "expo": {
    "plugins": [
      ["@graineai/inapp-react-native-calls", { "microphonePermission": "Lets you talk to the assistant in the app and on calls." }]
    ]
  }
}

The plugin writes, at expo prebuild: NSMicrophoneUsageDescription (microphonePermission, else the one already in your config, else a plain default), UIBackgroundModes audio and voip beside any you have, and the Push Notifications entitlement (aps-environment development unless you set it; Xcode signs TestFlight and App Store builds with production). "webrtc": true also turns on WebRTC calls — ENV['GRAINE_WEBRTC'] = '1' in the Podfile and graineWebRtc=true in android/gradle.properties; left out, both are taken away again. A wrong option stops the prebuild with its name. Android needs nothing from it: the package's manifest merges every call entry.

JSON — app.json (Expo), the SDK package alone

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSMicrophoneUsageDescription": "Lets you talk to the assistant in the app and on calls.",
        "UIBackgroundModes": ["audio", "voip"]
      },
      "entitlements": { "aps-environment": "production" }
    },
    "android": {
      "permissions": ["android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS"]
    }
  }
}

aps-environment is the Push Notifications capability: development for development builds, production for TestFlight and App Store builds. With the calls package installed, its manifest adds the Android entries at build time anyway.

requestMicrophonePermission

Call it before the first voice conversation — on an onboarding screen, say — so the microphone prompt is not the first thing a customer sees after tapping the agent.

function requestMicrophonePermission(
  rationale: { title?: string; message?: string; buttonPositive?: string } = {}
): Promise<boolean>

Returns — Promise<boolean>: true when the microphone may be used (already allowed, or allowed now), false when the customer refused. On iOS it resolves true at once — iOS asks the first time the microphone is used, and a refusal then reaches you as the mic_denied event and the launcher's onMicDenied. Example value: true.

Errors — none: it never rejects. A device whose permission service throws resolves true, so a call is still attempted.

const allowed = await requestMicrophonePermission({ message: "Talk to Acme's assistant hands-free." });
if (!allowed) showMicrophoneHelp();

Initialise

Use this as the starting point: one provider at the root, the voice engine mounted early, your own launcher button, and the calls package handed what the app tells the agent.

React Native · TypeScript — App.tsx

import { useEffect, useState } from "react";
import { WebView } from "react-native-webview";
import AsyncStorage from "@react-native-async-storage/async-storage";
import * as Font from "expo-font";
import Svg, { Path } from "react-native-svg";
import { NavigationContainer, createNavigationContainerRef } from "@react-navigation/native";
import {
  GraineProvider, GraineVoiceLauncher, GraineVoiceBar, GraineLauncherButton, useGraineClient,
} from "@graineai/inapp-react-native";
import { GraineCalls } from "@graineai/inapp-react-native-calls";
 
const navigationRef = createNavigationContainerRef();
 
export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <GraineProvider
      baseUrl="https://www.graine.ai"
      publishableKey="pk_live_…"            // Agent → Embed & Widgets → Install
      storage={AsyncStorage}                // keeps this install's id between launches
      navigationRef={navigationRef}         // the same ref as your NavigationContainer: screens are reported for you
      loadFont={Font.loadAsync}
      svg={{ Svg, Path }}
    >
      <NavigationContainer ref={navigationRef}><RootNavigator /></NavigationContainer>
      <GraineVoiceLauncher webView={WebView} active={open} autoStart>
        {(api) => (open ? <GraineVoiceBar api={api} onClose={() => setOpen(false)} /> : null)}
      </GraineVoiceLauncher>
      {!open && <GraineLauncherButton onPress={() => setOpen(true)} style={{ position: "absolute", right: 16, bottom: 24 }} />}
      <CallsBridge />
    </GraineProvider>
  );
}
 
// Calls that ring: hand the call what the app tells the agent.
function CallsBridge() {
  const client = useGraineClient();
  useEffect(() => GraineCalls.attach(client), [client]);   // identity, variables, the screen and your actions reach the call
  return null;
}
 
// index.js — once, at launch, before a push can arrive:
// GraineCalls.configure({ publishableKey: "pk_live_…", displayName: "Acme" });

GraineVoiceLauncher owns the voice engine and the call; mounted early with active={false} it loads the engine before the tap, and active turning true with autoStart places the call. GraineVoiceBar draws the bar, the chat window (where the agent offers chat), the components the agent draws and the booked-calls card, in the design chosen in the dashboard. RootNavigator stands for your own navigator.

WebRTC calls

Add this when the calls package's calls should carry their audio over WebRTC instead of the WebSocket — both directions: the customer calling the agent (startCall), and the customer answering a call Graine rang (a booked call, or Ring now). It is one switch per app build: your code, the ring, the call screen and the outcomes stay the same.

Ruby — ios/Podfile, at the top

ENV["GRAINE_WEBRTC"] = "1"

Properties — android/gradle.properties

graineWebRtc=true

Then run pod install in ios/ and rebuild the app. It is native code: it reaches customers in a store build, never in an over-the-air update. On a build server (EAS Build, CI), GRAINE_WEBRTC=1 in the build's environment turns it on for both platforms. Expo: a development build — with prebuild writing ios/ and android/ afresh, set "webrtc": true in the calls package's config plugin (see Permissions and capabilities), or put GRAINE_WEBRTC=1 in the build profile's environment (env in eas.json), rather than editing the two files; Expo Go cannot load the calls package.

await GraineCalls.configure({ publishableKey: "pk_live_…", displayName: "Acme", callTransport: "auto" });
const { transport, transportFallbackReason } = GraineCalls.getSnapshot();   // read once the call is active

Install and the first answer

Use these to mount the agent, build its client, load its settings and know when it is ready to answer.

GraineProvider

Wrap the root of your app in it, once per agent: it builds the agent's client (or uses yours), loads the agent's settings from the dashboard, reports the screen the customer is on, connects the chat, and gives every hook and SDK view below it the agent.

function GraineProvider(props: GraineProviderProps): JSX.Element

Props — GraineProviderProps, which also takes every GraineInAppOptions field (baseUrl, publishableKey, variables, storage, chatSize…) when you do not pass client.

Returns — the provider element. It renders children (inside tap capture when fab or captureTaps asks for it), the floating button when fab is set, and the booking sheet an openBooking() asked for.

Errors — building the client throws Error("[Graine] publishableKey is required.") or Error("[Graine] baseUrl is required.") during render when one is missing and no client is passed. Nothing else throws: a key or an agent that cannot be loaded shows as error in useGraineAgent() and in the console ([Graine] …), never as a crash.

What to expect — On mount it loads the agent's settings once (sessionReady turns true), registers its client as the default for hooks outside it (the provider at the root only), answers highlight_element for you, and — with autoConnect on — opens the chat connection, unless a GraineVoiceLauncher is mounted and the customer is on the call (the launcher holds that conversation). On unmount it closes the connection. A provider inside another provider's tree is that part of the app's agent; see Several agents in one app.

<GraineProvider baseUrl="https://www.graine.ai" publishableKey="pk_live_…" storage={AsyncStorage} navigationRef={navigationRef}>
  <App />
</GraineProvider>

GraineProviderProps

Read it to configure the provider: which client, when to connect, how screens are tracked, where the launcher may show, and how the design is drawn.

interface GraineProviderProps extends Partial<GraineInAppOptions> { … }

What to expect — Every prop is read on mount; appVersion, friction and navigationRef are applied again when they change. With client passed, the GraineInAppOptions fields are ignored — the client already has its own.

GraineInAppClient

Use it when code outside React needs the agent — a login flow, an API layer, a screen controller — and pass the instance to GraineProvider as client so both share it.

class GraineInAppClient {
  constructor(opts: GraineInAppOptions)
}

Returns — a new client, already sharing this device with the app's other clients (who the customer is, the screen, one conversation at a time).

Errors — throws Error("[Graine] publishableKey is required.") or Error("[Graine] baseUrl is required.") when one is missing. Nothing is sent until you (or the provider) ask for something.

What to expect — Every method is safe to call at any time, including before the agent's settings have loaded; a request that needs them waits for them. Its members, by use:

• Install and the first answer: opts, config, session, connect, isConnected, transport, close.
• Identity and memory: identify, setMemory, memoryEnabled, getIdentity, getRawTraits, installId, getInstallId, identityChannel, memories, forgetMemory, newConversation.
• Chat: openChat, takeChatOpen, sendText, queuedTexts, say, chatFailed, retry, clearChat, surface, setSurface, inTextChat.
• The voice bar: setMuted, isMuted, isAgentSpeaking, connectionQuality, networkState, reportQuality, reportNetwork, sendAudio, endUtterance, setPlayoutClock, hasVoiceHost, setVoiceHost, setHostCallLive.
• Several agents: conversation, dispose, joinDevice, leaveDevice, yieldLine.
• Screen context and actions: setScreen, clearScreen, updateField, removeField, getScreen, buildContextFrame, track, getRecentEvents, reportEvent, noteInteraction, setVariables, getVariables, allVariables, registerAction, executeAction, checkActions, availableActions, getAvailableActions, registerHighlightable, getHighlightables, highlight, submitWidget, pendingWidget, clearPendingWidget, presentWidget, presentPendingWidget, configureFriction, friction.
• Calls: nativeCallLive, setNativeCallLive.
• Booking: bookingAvailable, bookingBlocker, openBooking, takeBooking, settleBooking.
• The scheduled-calls list: schedulingRules, scheduleCall, scheduledCalls, cancelScheduledCall.
• Going live: setAppVersion. Events: on, emit.

// agent.ts — one client for the whole app, for code outside React too
import AsyncStorage from "@react-native-async-storage/async-storage";
import { GraineInAppClient, GraineProvider } from "@graineai/inapp-react-native";
 
export const agent = new GraineInAppClient({ baseUrl: "https://www.graine.ai", publishableKey: "pk_live_…", storage: AsyncStorage });
 
// App.tsx — the provider uses the same client (import { agent } from "./agent")
export default function App() {
  return <GraineProvider client={agent}><RootNavigator /></GraineProvider>;
}

GraineInAppOptions

Read it to build a client (or a provider without client): where Graine is, which agent, and how conversations behave on this device.

interface GraineInAppOptions { baseUrl: string; publishableKey: string; … }

What to expect — Read once, when the client is built; to change one, build a new client. Nothing here is sent to Graine except the key, the variables and the time zone, as each row says.

GraineStorage

Implement it only when you do not pass AsyncStorage: the client keeps this install's id and each customer's memory choice through it.

interface GraineStorage {
  getItem(key: string): string | null | undefined | Promise<string | null | undefined>;
  setItem(key: string, value: string): unknown;
  removeItem?(key: string): unknown;
}

What to expect — Synchronous or asynchronous both work. The client writes two keys, graine.installId and graine.prefs; the memory choices are stored under a one-way hash, never the customer's identifier. A storage that throws is treated as empty: the install id is then not kept.

GraineInAppClient.opts

Read it to see the options a client was built with — its key, its address, its time zone.

readonly opts: GraineInAppOptions

Returns — the options as given, with stallAfterMs filled (45000) when you left it out. Example value: { baseUrl: "https://www.graine.ai", publishableKey: "pk_live_…", stallAfterMs: 45000 }.

Errors — none.

const key = client.opts.publishableKey;

GraineInAppClient.session

Call it to load (or reload) the agent's settings from the dashboard — its look, its declared actions, its memory and booking rules; the provider does it once on mount.

async session(): Promise<SessionConfig>

Parameters — none.

Returns — Promise<SessionConfig>: the settings, also kept as config and announced as the session event. Every call asks Graine again. Example value: { agentId: "a_1f2e…", appearance: { accent: "#3740B8" }, calls: { hosted: true, scheduling: { usersCanBook: true } } }.

Errors — rejects with a GraineError:

• origin_refused (403): "This agent does not accept connections from a mobile app yet. Add "app://" to its Allowed domains in the dashboard, under Embed & Widgets. (server said: …)" — add app:// to the agent's Allowed domains.
• invalid_key (401): "Publishable key was rejected. Check it against Embed & Widgets in the dashboard."
• any other refusal: Graine's code (rate_limited, unavailable, …) with Graine's message.

With no network at all, the platform's own fetch error (a TypeError such as "Network request failed") passes through unchanged.

try {
  const settings = await client.session();
  console.log(settings.calls?.scheduling?.usersCanBook);
} catch (e) {
  if (e instanceof GraineError && e.code === "origin_refused") showSetupHelp(e.message);
}

SessionConfig

Read it to see the agent's settings as the dashboard sets them; most apps never need to — the SDK's views and hooks read it for you.

What to expect — Loaded by session(); null on the client until then. A setting an older server does not send means its default: the user_id trait, two devices per customer, booking off. Unknown fields are kept but not read.

GraineInAppClient.config

Read it to see the agent's settings once they have loaded, without asking Graine again.

config: SessionConfig | null

Returns — the SessionConfig the last session() loaded, or null before one has. Example value: null at launch, then { agentId: "a_1f2e…", … }.

Errors — none.

const settings = client.config ?? (await client.session());

GraineInAppClient.connect

Call it to open this client's conversation connection — a typed chat, or a spoken one with voice: true — when autoConnect is off or after you closed it.

async connect(options: { automatic?: boolean } = {}): Promise<void>

Returns — Promise<void>, resolved once the connection is open (or at once when it is already open, opening, or waiting for another agent's call). The connection is announced as the open event; the agent's welcome follows.

Errors — rejects when the agent's settings cannot load (a GraineError as session() raises), with Error("Socket did not open in time") after 15 seconds, or with the connection's own error. A first connection that fails is not retried — fix what it says; the chat then says it gave up (chatFailed, the chat_failed event), and retry() tries again. A chat that had opened and then dropped comes back by itself (the reconnecting event).

What to expect — One conversation at a time on the device: connecting ends a chat another agent's client holds, and (unless automatic) its call. Variables and the identity are fixed when the connection opens.

await client.connect();
client.sendText("Where is my order?");

GraineInAppClient.isConnected

Read it to know whether this client holds an open conversation connection right now.

get isConnected(): boolean

Returns — true while this client's own connection is open. A call the voice launcher holds is not this client's connection: during it, this is usually false. Example value: true.

Errors — none.

if (!client.isConnected) await client.connect();

GraineInAppClient.transport

Read it to see how the current conversation connected, when you are diagnosing a connection.

transport: "gateway" | "direct" | null

Returns — "gateway": the usual connection, opened with a single-use ticket Graine issued for it — your variables travel in the ticket (see TICKET_VARIABLE_LIMITS); "direct": no ticket could be had (a deployment that issues none), so the client connected directly and the variables travel in the connection's address (see contextToken); null before the first connection. Example value: "gateway".

Errors — none.

client.on("open", ({ transport }) => console.log("connected over", transport));

GraineInAppClient.close

Call it to hang up this client's conversation and stop it reconnecting — when the customer leaves the agent, or your app is done with it.

close(): void

Parameters — none.

Returns — nothing. The agent is told the customer hung up (so the conversation is recorded as ended, not dropped), then the connection closes a moment later; the close event follows with byClient: true.

Errors — none: closing a connection that is already gone does nothing.

client.close();

useGraineAgent

Call it in any component under the provider to draw the conversation: its state, the transcript, the controls, the design, and whether booking is available.

function useGraineAgent(): GraineContextValue

Parameters — none.

Returns — the provider's GraineContextValue, re-rendering as it changes.

Errors — throws Error("[Graine] useGraine* must be used inside <GraineProvider>.") outside a provider.

const { messages, send, typing, connected, failed, retry, bookingAvailable, openBooking } = useGraineAgent();

GraineContextValue

Read it from useGraineAgent() to draw your own conversation UI; the type is not exported by name — write ReturnType<typeof useGraineAgent>.

What to expect — Updated as the conversation moves; every field is state, so draw from it. For things you do once when they happen (log, analytics), subscribe with useGraineEvents.

useGraineClient

Call it in a component to get the agent's client — the provider's, or the default one registered with setDefaultClient when no provider is above.

function useGraineClient(): GraineInAppClient

Parameters — none.

Returns — the GraineInAppClient for this render.

Errors — throws Error("[Graine] No client. Either render inside <GraineProvider>, or call setDefaultClient(client) once at startup.") when there is neither.

const client = useGraineClient();
useEffect(() => client.registerAction("open_cart", () => { openCart(); return { status: "ok" }; }), [client]);

setDefaultClient

Call it once at startup when some of your screens sit outside the provider (a provider that wraps only your bar), so the SDK's hooks on those screens still reach the agent.

function setDefaultClient(client: GraineInAppClient | null): void

Returns — nothing.

Errors — none.

What to expect — A provider at the root registers its own client this way on mount, and hands the default back when it unmounts; a provider around one screen does not.

setDefaultClient(agent);

useGraineReady

Call it to show a splash, or a set-up error, until the agent's settings have loaded.

function useGraineReady(): { ready: boolean; error: string | null }

Parameters — none.

Returns — ready: true once the agent's settings have loaded; error: why the automatic connection failed (a rejected key, an app not allowed), else null. Example value: { ready: true, error: null }.

Errors — throws outside a provider, as useGraineAgent does.

const { ready, error } = useGraineReady();
if (error) return <SetupError message={error} />;
if (!ready) return <Splash />;

useGraineInit

Call it as useGraineReady, when you prefer the isInitialized name.

function useGraineInit(): { isInitialized: boolean; error: string | null }

Parameters — none.

Returns — isInitialized: true once the agent's settings have loaded; error: as useGraineReady. Example value: { isInitialized: false, error: null }.

Errors — throws outside a provider, as useGraineAgent does.

const { isInitialized } = useGraineInit();

Identity, memory and conversations that continue

Use these to tell the agent who the customer is, let them choose whether they are remembered, show and forget what is remembered, and start a fresh conversation.

GraineInAppClient.identify

Call it after sign-in and on every account switch — and with null on sign-out — so the agent greets the customer by name, remembers them, and rings their devices for calls they book.

identify(user: Record<string, unknown> | null, options: { memory?: boolean } = {}): void

Returns — nothing, at once; the sign-out of a previous customer goes on in the background.

Errors — none: it never throws. A sign-out that cannot reach Graine is logged, and the device is released anyway after 30 days without use.

What to expect —

• Values are turned into strings (an object becomes its JSON); null and undefined traits are skipped.
• The identifying value counts as nobody when it is empty or a placeholder — guest, anonymous, unknown, null, none, 0, -, n/a, test, or a masked token such as [EMAIL]. An email trait is compared lowercased and must look like an address; a phone trait keeps its last 10 digits (8 to 15 digits in all); any other trait is exact, at most 256 characters.
• The identity applies from the next conversation: a conversation's customer is fixed when it starts. Prompt variables reach a live call at once.
• Signing in someone else signs the previous customer out first and clears the chat on screen. identify(null) releases this device from the customer — it stops ringing for them and stops counting as one of their devices — and clears the chat.
• Every app on React Native shares one device across its agents: one identify() reaches every agent's client.

const identify = useGraineIdentify();
useEffect(() => {
  identify(user ? { user_id: user.id, name: user.firstName, plan: user.plan } : null, { memory: user?.allowsMemory ?? true });
}, [user]);
// outside React: client.identify({ user_id: "u_8812", name: "Asha" }); client.identify(null);

useGraineIdentify

Call it in a component to get identify bound to the agent's client — sign-in and sign-out effects are the usual place.

function useGraineIdentify(): (user: Record<string, unknown> | null, options?: { memory?: boolean }) => void

Parameters — none.

Returns — a function with the same parameters and behaviour as GraineInAppClient.identify.

Errors — throws, like useGraineClient, when there is neither a provider above nor a default client.

const identify = useGraineIdentify();
const signOut = () => { identify(null); auth.signOut(); };

GraineInAppClient.setMemory

Call it from a privacy setting — "Let the assistant remember our conversations" — to change the current customer's memory choice without identifying them again.

setMemory(enabled: boolean): void

Returns — nothing. The choice is kept for this customer on this install (under a one-way hash, never their identifier) and announced as the identity event.

Errors — none.

What to expect — Applies to every agent on the device, from the next conversation. Call it while a customer is identified: with nobody identified, the choice lasts only until the next identify().

client.setMemory(false);

GraineInAppClient.memoryEnabled

Read it to draw the current customer's memory switch in its true state.

get memoryEnabled(): boolean

Returns — true unless setMemory(false) or identify(…, { memory: false }) said otherwise for this customer on this install. Example value: true.

Errors — none.

<Switch value={client.memoryEnabled} onValueChange={(on) => client.setMemory(on)} />

GraineInAppClient.getIdentity

Read it to see the traits the agent will receive as prompt variables — masked, and without the identifying trait.

getIdentity(): Record<string, string>

Parameters — none.

Returns — a copy of the masked traits from the last identify(), minus the trait that identifies the customer. Example value: { name: "Asha", plan: "Plus" }.

Errors — none.

console.log(client.getIdentity());

GraineInAppClient.getRawTraits

Read it only when you hand the customer to an engine that masks traits itself — the calls package's attach() does this for you.

getRawTraits(): Record<string, unknown>

Parameters — none.

Returns — a copy of the traits exactly as identify() was given them, unmasked. This client never sends them anywhere. Example value: { user_id: "u_8812", name: "Asha", plan: "Plus" }.

Errors — none.

const traits = client.getRawTraits();

GraineInAppClient.installId

Read it to see this install's id — the id that makes this phone one of the customer's devices — once it has been read.

get installId(): string | null

Returns — a lowercase UUID made on first launch and kept, or null until it has been read (any request reads it; so does getInstallId()), and null for good when it cannot be kept — pass storage. Example value: "9b2e7c4a-1f3d-4e8a-b6c5-0d7f2a9e4b13".

Errors — none.

const id = client.installId ?? (await client.getInstallId());

GraineInAppClient.getInstallId

Call it to read this install's id, making it on first launch when it has to.

async getInstallId(): Promise<string | null>

Parameters — none.

Returns — Promise<string | null>: the calls package's id when it is linked (so a call and a chat are one device), else the id kept in storage (made and kept on first launch), else null. With neither, the console warns once that the device has no install id — "so the agent cannot remember this customer or call them back" — and names the fixes: storage={AsyncStorage} on the provider or the client, or the calls package. Example value: "9b2e7c4a-1f3d-4e8a-b6c5-0d7f2a9e4b13".

Errors — none: a storage that fails resolves null.

const id = await client.getInstallId();

GraineInAppClient.identityChannel

Call it when you carry the conversation yourself and must tell Graine who it is with: the customer's identifying value, this install, the memory choice and the time zone.

async identityChannel(): Promise<IdentityChannel>

Parameters — none.

Returns — Promise<IdentityChannel>, its fields in IdentityChannel. It changes with identify(), setMemory() and the agent's settings, and each change is announced as the identity event. Example value: { value: "u_8812", installId: "9b2e7c4a-…", memory: true, timezone: "Asia/Kolkata" }.

Errors — none.

const who = await client.identityChannel();

IdentityChannel

Read it to see who a conversation is with, as the SDK hands it to whatever carries the conversation.

What to expect — value is null until the agent's settings have loaded (the identifying trait is never guessed) and whenever nobody is identified.

DEFAULT_IDENTITY_FIELD

Read it to know which trait identifies the customer when the agent's Who is the user? setting names none.

const DEFAULT_IDENTITY_FIELD = "user_id";

What to expect — Always "user_id". Pass the customer's id under this name in identify() unless the agent names another trait (email, phone, …).

GraineInAppClient.memories

Call it on a "What the assistant remembers" screen to show the customer what the agent keeps about them.

async memories(): Promise<GraineMemory[]>

Parameters — none.

Returns — Promise<GraineMemory[]>: newest first, at most 100, already redacted. See GraineMemory. Example value: [{ id: "m_41", text: "Prefers a call after 6 pm", createdAt: new Date("2026-10-02T09:14:00Z"), updatedAt: new Date("2026-10-12T17:40:00Z") }].

Errors — rejects with a GraineError:

• identity_required — "Nobody is identified. Call identify() with the customer's id first."
• invalid_request — the device has no install id (the message names storage and the calls package).
• device_limit — this install is not one of the customer's devices.
• rate_limited, unavailable, invalid_key, origin_refused — from Graine; network — "Could not reach Graine. Check the connection and try again."

try {
  setItems(await client.memories());
} catch (e) {
  if (e instanceof GraineError && e.code === "identity_required") promptSignIn();
}

useGraineMemories

Call it in a component that lists what the agent remembers about the customer — it loads, reloads and reports errors as state.

function useGraineMemories(): { memories: GraineMemory[]; loading: boolean; error: GraineError | null; refresh: () => Promise<void> }

Parameters — none.

Returns — memories: the list, newest first (empty on error); loading: a read is in progress; error: the last read's GraineError — identity_required before sign-in, device_limit on a device that is not one of theirs — else null; refresh(): read again (it never rejects; failures land in error). It reads on mount, when the customer changes, and after forgetMemory(). Example value: { memories: [], loading: false, error: null, refresh: [Function] }.

Errors — throws, like useGraineClient, when there is neither a provider above nor a default client.

const { memories, loading, error, refresh } = useGraineMemories();
if (loading) return <Spinner />;
return <FlatList data={memories} keyExtractor={(m) => m.id} renderItem={({ item }) => <Text>{item.text}</Text>} />;

GraineMemory

Read it to show one thing the agent remembers about the customer.

What to expect — From memories(): newest first, at most 100, already redacted, only for the identified customer on one of their devices. The dates are moments in time — show them in the device's time zone; null when Graine did not send one.

GraineInAppClient.forgetMemory

Call it from a "Forget everything" control to delete what this agent remembers about the current customer.

async forgetMemory(): Promise<number>

Parameters — none.

Returns — Promise<number>: how many memories were deleted. The chat on screen clears too (the conversation it held is part of what was forgotten), messages still waiting are dropped, and memories_changed is announced so lists reload. Example value: 12.

Errors — rejects with a GraineError, as memories does: identity_required, invalid_request (no install id), device_limit, rate_limited, network, unavailable, invalid_key, origin_refused. On a failure nothing is forgotten and the chat stays.

const deleted = await client.forgetMemory();
showToast(`Forgot ${deleted} things`);

GraineInAppClient.newConversation

Call it from a "New conversation" control to start a fresh thread, as a support chat offers one; the chat window's header does this for you.

async newConversation(): Promise<void>

Parameters — none.

Returns — Promise<void>, once the fresh conversation has started. The chat hangs up; Graine lets go of the conversation it kept for this agent and customer, so the next chat starts afresh; the chat on screen clears; and — when the customer was in the chat — a new chat opens with the welcome. What the agent remembers (memories) is untouched. With nobody identified there was nothing kept, so only the screen clears.

Errors — rejects with a GraineError when Graine refused (device_limit, invalid_request for a missing install id, network, rate_limited, unavailable); the chat is then reconnected as it was. A call in progress is not a chat and is left alone.

await client.newConversation();

RestoredTurn

Read it to understand the earlier messages a continuing conversation opens with; the SDK's chat folds them in for you.

What to expect — For an identified customer, on an agent with memory on, on one of their devices, the chat opens with the earlier conversation — up to 50 messages from the last 7 days, oldest first — before any new message, and with no welcome. They arrive as history, become ChatTurns with restored: true, and are never live.

Chat

Use these to open the typed conversation, send what the customer types, move between the call and the chat, and draw a chat window of your own from the same rules the SDK's windows use.

GraineInAppClient.openChat

Call it from your own "Message us" button to move the customer to the chat and open it — at a size of your choosing for this open.

openChat(options?: { size?: ChatSize }): void

Returns — nothing. A GraineProvider's bar moves to the chat (where the agent offers one), draws it at that size and turns open on; a provider mounted later still answers it. Announced as the open_chat event ({ size }).

Errors — none.

client.openChat({ size: "full" });

GraineInAppClient.takeChatOpen

The provider calls it to answer an openChat() exactly once; your app does not need it.

takeChatOpen(): { size: ChatSize | null } | null

Parameters — none.

Returns — the open still waiting to be answered — { size }, size null when the open named none — and clears it; null when there is none. Example value: { size: "large" }.

Errors — none.

const pending = client.takeChatOpen();

GraineChatScreen

Use it when the chat should be a screen of your own app — a Help route — rather than a window over it: the header with a back chevron, the conversation, the components the agent draws, the booked calls and the composer, in the agent's design.

function GraineChatScreen(props: GraineChatScreenProps): JSX.Element

Props — GraineChatScreenProps.

Returns — the chat, filling its parent.

Errors — throws outside a GraineProvider, as useGraineAgent does.

What to expect — While it is on screen the customer is in the chat (where the agent offers one) and the bar's own chat steps aside; when it goes, what was open before comes back. Since 0.42.0 it shows the customer's booked calls — an Upcoming calls card with up to three calls, each with Cancel — and Book a call where booking is available, which opens the booking sheet over it (see Booking with the SDK's sheet). The header offers New conversation while an earlier conversation is on screen.

function HelpScreen({ navigation }: { navigation: { goBack(): void } }) {
  const insets = useSafeAreaInsets();
  return <GraineChatScreen onClose={navigation.goBack} safeArea={insets} />;
}
// <Stack.Screen name="Help" component={HelpScreen} />

GraineChatScreenProps

Read it to wire GraineChatScreen into your navigation.

GraineInAppClient.sendText

Call it with what the customer typed in a chat you draw yourself: it is sent now when there is a connection, and kept in order until there is one when there is not.

sendText(text: string): { id: string; queued: boolean }

Returns — id: this message's id ("t1", "t2", …), to match it to its text_sent event; queued: false when it went now — on this client's connection, or to the call the voice launcher holds (the agent takes a typed turn on a call) — and true when it is waiting for a connection. Example value: { id: "t3", queued: true }.

Errors — none: a message is never dropped in silence. At most 20 wait; beyond that the oldest is dropped.

const { id, queued } = client.sendText("Where is my order?");
if (queued) markWaiting(id);
client.on("text_sent", (e) => markSent(e.id));

GraineInAppClient.queuedTexts

Read it to show the messages still waiting for a connection.

get queuedTexts(): Array<{ id: string; text: string }>

Returns — a copy of the waiting messages, oldest first; empty when everything has gone. Example value: [{ id: "t3", text: "Where is my order?" }].

Errors — none.

const waiting = client.queuedTexts.length;

GraineInAppClient.say

Use it only to send text on this client's own open connection right now — for what the customer typed, use sendText, which never loses a message.

say(text: string): boolean

Returns — true when it went on this client's connection; false when there is none open — nothing is kept. Replies arrive as chunk events. Example value: false.

Errors — none.

if (!client.say("Yes, please")) client.sendText("Yes, please");

GraineInAppClient.chatFailed

Read it to know the chat gave up — so you can say so and offer to try again; useGraineAgent().failed is the same, as state.

get chatFailed(): boolean

Returns — true while the chat is still wanted (connect() and no close() since) yet is not connected, not connecting and not waiting to reconnect: its first connect failed — a setting to fix, never retried by itself — or Graine ended or refused the conversation. false again the moment someone asks again (retry(), connect(), or the customer's next message through useGraineAgent().send), when the chat opens, and when it is closed. Announced as chat_failed, with true and then false. Example value: false.

Errors — none.

What to expect — A dropped network is never chatFailed: the chat keeps coming back by itself (reconnecting) for as long as the customer is in it. A message typed meanwhile waits, pending, and goes the moment the chat connects. A spoken connection (voice: true) never reports it.

client.on("chat_failed", (gaveUp) => { if (gaveUp) showRetry(() => client.retry()); });

GraineInAppClient.retry

Call it from a "Try again" button once the chat gave up (chatFailed) — or to cut a reconnect's wait short.

retry(): Promise<void>

Parameters — none.

Returns — Promise<void>, as connect returns it: resolved once the chat is open. The wait between tries starts over from the first of reconnectDelaysMs, and what the customer typed meanwhile goes the moment the chat connects. A person asked, so — as connect() does — it ends another agent's conversation on this device. useGraineAgent().retry() does the same and turns connecting on meanwhile.

Errors — rejects as connect() does. A chat that never opened is then chatFailed again; one that had opened keeps trying by itself.

await client.retry();

GraineInAppClient.clearChat

Call it from a "Clear" control to empty the chat on screen — a new topic, a tidy screen — without ending the conversation.

clearChat(): void

Parameters — none.

Returns — nothing. Announced as chat_cleared with reason: "app", which empties useGraineAgent().messages and the SDK's chat windows (foldChat folds it as cleared). useGraineAgent().clearChat() is the same.

Errors — none.

What to expect — Only the screen: the conversation goes on (connected stays connected), a message still waiting for the connection is still sent, and nothing Graine keeps is touched — the conversation that continues comes back with the next history, and the agent's memories stay. newConversation starts over; forgetMemory forgets.

const { clearChat } = useGraineAgent();
<Button title="Clear" onPress={clearChat} />

GraineInAppClient.inTextChat

Read it to know whether the conversation right now is a typed chat — to word a component's prompt as "tap" rather than "say".

get inTextChat(): boolean

Returns — true when the customer is on the chat surface, or this client's own connection is open as a typed chat. Example value: true.

Errors — none.

const hint = client.inTextChat ? "Tap one" : "Tap one, or just say it";

useGraineSurface

Call it to draw a call/chat switch, or to know which of the two the customer is in — from a component that is not the transcript.

function useGraineSurface(): { surface: AgentSurface; surfaces: AgentSurface[]; canSwitch: boolean; setSurface: (surface: AgentSurface) => void }

Parameters — none.

Returns — surface: the conversation the customer is in ("voice" or "chat"); surfaces: what the dashboard allows, in the order to offer them; canSwitch: whether to draw a switch at all; setSurface: move the customer — it ends the conversation they leave, and refuses (and logs) a surface the dashboard did not allow. Example value: { surface: "chat", surfaces: ["voice", "chat"], canSwitch: true, setSurface: [Function] }.

Errors — throws outside a GraineProvider.

const { surface, canSwitch, setSurface } = useGraineSurface();
{canSwitch && <Button title={surface === "voice" ? "Type instead" : "Talk instead"} onPress={() => setSurface(surface === "voice" ? "chat" : "voice")} />}

GraineInAppClient.surface

Read it outside React to know whether the customer is in the call or the chat — an analytics wrapper, a screen controller.

get surface(): AgentSurface

Returns — "voice" or "chat". The provider keeps it in step with the dashboard's policy and the customer's choice; a client with no provider stays "voice". Example value: "voice".

Errors — none.

analytics.log("agent_opened", { surface: client.surface });

GraineInAppClient.setSurface

The provider calls it to record which conversation the customer is in; to move the customer, use setSurface from useGraineSurface, which also ends the conversation they leave.

setSurface(next: AgentSurface): void

Returns — nothing. A change is announced as the surface event ({ surface }).

Errors — none.

client.setSurface("chat");

AgentSurface

Read it to tell the two conversations apart: the call or the chat — one at a time, never both.

type AgentSurface = "voice" | "chat";

SurfacePolicy

Read it to see which conversations the dashboard allows and which one opens first (Embed & Widgets → What visitors get).

resolveSurface

Use it to read the dashboard's call/chat policy yourself — the provider already does.

function resolveSurface(appearance?: Record<string, any> | null, prefer?: AgentSurface | null): SurfacePolicy

Returns — a SurfacePolicy. An absent or unreadable setting allows both, voice first. Example value: { allowed: ["voice", "chat"], start: "chat", canSwitch: true }.

Errors — none.

const { appearance } = useGraineAgent();
const policy = resolveSurface(appearance, "chat");

Turn

Read it to draw one message of the provider's transcript (useGraineAgent().messages).

What to expect — One per message, oldest first. The agent's turn grows in place while it streams (live), then stops. A message typed with no connection is pending until it goes. Earlier messages of a conversation that continues arrive once, restored, before anything new. Consecutive voice turns are drawn as one "Voice call" row. The list empties on sign-out, when another customer signs in, after forgetMemory() and on newConversation(); at most 200 are kept.

ChatTurn

Read it to draw one message when you assemble the chat yourself with foldChat; it is the same shape as Turn.

What to expect — As for Turn: one per message, oldest first, the agent's growing in place while live; at most CHAT_HISTORY_CAP (200) are kept.

ChatState

Read it to draw a chat you assemble yourself: the turns, and whether to show "typing".

ChatEvent

Read it to feed foldChat: each event is one thing that happened to the chat, branched on type.

type ChatEvent =
  | { type: "agent_text"; text: string; at?: number }
  | { type: "agent_turn_start" } | { type: "agent_turn_end" }
  | { type: "customer"; text: string; id?: string; queued?: boolean; at?: number }
  | { type: "customer_sent"; id: string }
  | { type: "widget" } | { type: "closed" } | { type: "typing_timeout" } | { type: "opened" }
  | { type: "history"; turns: RestoredTurn[] } | { type: "cleared" };

foldChat

Use it to assemble a chat of your own from the client's events, exactly as the SDK's chat does.

function foldChat(state: ChatState, e: ChatEvent): ChatState

Returns — the next ChatState; the same object when nothing changed, so a React state update can be skipped. A new agent turn is proactive when no message of the customer's was waiting for a reply.

Errors — none.

const [chat, setChat] = useState(EMPTY_CHAT);
useEffect(() => {
  const names = ["chunk", "turn_start", "turn_end", "text_sent", "widget", "widget_pending", "close", "open", "history", "chat_cleared"];
  const offs = names.map((n) => client.on(n, (p) => { const e = chatEventFromClient(n, p); if (e) setChat((s) => foldChat(s, e)); }));
  return () => offs.forEach((off) => off());
}, [client]);

chatEventFromClient

Use it to turn a client event (chunk, turn_end, text_sent…) into the ChatEvent that foldChat takes.

function chatEventFromClient(event: string, payload?: unknown): ChatEvent | null

Returns — chunk → agent_text; turn_start → agent_turn_start; turn_end → agent_turn_end; text_sent → customer_sent; widget and widget_pending → widget; close → closed; open → opened; history → history; chat_cleared → cleared; anything else, or a payload that cannot be read, → null. The customer's own messages are yours to fold ({ type: "customer", … }) when you call sendText. Example value: { type: "agent_text", text: "Sure — " }.

Errors — none.

const e = chatEventFromClient("chunk", "Sure — ");

EMPTY_CHAT

Use it as the starting state of a chat you assemble with foldChat.

const EMPTY_CHAT: ChatState = { turns: [], typing: false, awaitingReply: false };

What to expect — A fixed value; foldChat returns it again on cleared.

CHAT_TYPING_TIMEOUT_MS

Use it to time out your typing indicator as the SDK does: after this long with nothing arriving, fold a typing_timeout.

const CHAT_TYPING_TIMEOUT_MS = 12_000;

What to expect — 12 seconds.

CHAT_HISTORY_CAP

Read it to know how many messages a chat keeps: older ones are dropped beyond it.

const CHAT_HISTORY_CAP = 200;

What to expect — 200 turns.

ChatRow

Read it to draw a chat window's rows in order: a bubble per message, one row per voice call, and day separators.

type ChatRow<T> =
  | { kind: "day"; key: string; day: string; label: string }
  | { kind: "voice"; key: string; at: number; first: number; last: number; label: string }
  | { kind: "turn"; key: string; index: number; item: T };

What to expect — A day separator comes before the first row when it is not from today, and wherever the device's day changes. A conversation that is all today has no separators. A voice call is one row however many turns it had — the window shows that a call happened, never its transcript.

Every row's key is stable — use it as the list key.

ChatRowOptions

Read it to fix the clock, the time zone or the wording chatRows uses — tests and previews, mostly.

chatRows

Use it to lay out a chat window of your own from any list of items — with the day separators and the voice-call rows the SDK's windows draw.

function chatRows<T>(items: readonly T[], read: (item: T) => { at?: number | null; voice?: boolean }, options: ChatRowOptions = {}): ChatRow<T>[]

Returns — the rows to draw, in order; see ChatRow. Example value: [{ kind: "day", key: "day-2026-10-14", day: "yesterday", label: "Yesterday" }, { kind: "turn", key: "turn-0", index: 0, item: … }].

Errors — none.

const { messages } = useGraineAgent();
const rows = chatRows(messages, (m) => ({ at: m.at, voice: m.channel === "voice" }));

chatTurnRows

Use it to lay out the SDK's own turns (ChatTurn[]) without writing read yourself.

function chatTurnRows(turns: readonly ChatTurn[], options: ChatRowOptions = {}): ChatRow<ChatTurn>[]

Returns — the rows, as chatRows returns them.

Errors — none.

const [chat] = useState(EMPTY_CHAT);   // the chat you fold with foldChat
const rows = chatTurnRows(chat.turns);

chatClock

Use it to print a message's time the way the SDK's chat does.

function chatClock(at: number, utcOffsetMinutes?: number): string

Returns — the time in the device's own words and 12- or 24-hour setting. Example value: "6:05 PM".

Errors — none.

chatClock(Date.now());

chatDate

Use it to print a day that is neither today nor yesterday, the way the SDK's chat does.

function chatDate(at: number, sameYear: boolean, utcOffsetMinutes?: number): string

Returns — the weekday, day and month in the device's own words — "Tue 14 Oct" on an English (UK) phone, "Tue, Oct 14" on an English (US) one — with the year when sameYear is false. Example value: "Tue 14 Oct".

Errors — none.

const at = Date.now() - 3 * 86_400_000;   // three days ago
chatDate(at, new Date(at).getFullYear() === new Date().getFullYear());

voiceCallLabel

Use it to word the row that stands for an earlier call in a chat window.

function voiceCallLabel(at: number, clock: (at: number) => string = chatClock): string

Returns — "Voice call · " and the time. Example value: "Voice call · 6:05 PM".

Errors — none.

voiceCallLabel(new Date(2026, 9, 14, 18, 5).getTime()); // "Voice call · 6:05 PM"

chatIsNew

Use it to decide whether to show the brand's conversation starters: only on a new chat.

function chatIsNew(turns: readonly { role?: string; restored?: boolean }[]): boolean

Returns — true while the customer has said nothing and no earlier conversation is on screen. Example value: true.

Errors — none.

const { messages } = useGraineAgent();
const showStarters = chatIsNew(messages);

chatPieces

Use it to decide what a chat window of your own draws: which turns, the starters, the "New conversation" control, the booked-calls card and — since 0.42.0 — "Book a call".

function chatPieces<T>(turns: readonly T[], chat: ChatPieceTokens | null | undefined, upcomingCount = 0, bookingAvailable = false): ChatPieces<T>

Returns — a ChatPieces. Example value: { turns: [ … ], starters: false, newConversation: true, upcoming: true, upcomingTitle: "Upcoming call", book: true }.

Errors — none.

const { messages } = useGraineAgent();
const theme = useGraineTheme();
const { calls } = useGraineScheduling();
const pieces = chatPieces(messages, theme.chat, upcomingCalls(calls).length, client.bookingAvailable);

ChatPieces

Read it to draw exactly the pieces the brand's design keeps.

What to expect — With earlier messages hidden by the design, the window opens like a new chat: the restored turns are not drawn (the agent still has them), the starters may show, and "New conversation" does not.

ChatPieceTokens

Read it to see the design settings chatPieces reads: a value that is not a boolean (or, for the title, not a string) counts as the default.

DEFAULT_UPCOMING_TITLE

Use it to title a booked-calls card where the brand wrote no title.

const DEFAULT_UPCOMING_TITLE: Readonly<{ one: string; many: string }> = { one: "Upcoming call", many: "Upcoming calls" };

What to expect — one for a single booked call, many for more.

ChatSize

Read it to choose how big the chat window opens.

type ChatSize = "compact" | "large" | "full";

What to expect — Which size wins: the size passed to openChat(), then the app's chatSize, then the agent's Window size in the dashboard, else compact. An open's size lasts until the chat closes. How each size is drawn on a phone and on a tablet is chatPresentation.

CHAT_SIZES

Use it to list the sizes in a settings screen of your own.

const CHAT_SIZES: ReadonlyArray<ChatSize> = ["compact", "large", "full"];

What to expect — A fixed list, smallest first.

chatSizeOf

Use it to settle which size a chat opens at, as the SDK does: the first real size among the candidates.

function chatSizeOf(...candidates: unknown[]): ChatSize

Returns — the first candidate that is a size this release knows, else "compact". Example value: "large".

Errors — none.

chatSizeOf(undefined, "large", "full"); // "large"

The voice bar

Use these to put the agent's voice in your app: the engine that holds the call, the bar and buttons drawn in the agent's design, loaders and captions, the connection's quality, and — for an app with its own audio — the lower-level voice pieces.

GraineVoiceLauncher

Mount it once, near the root and inside the provider, to own the voice call: it loads Graine's voice engine in a hidden WebView, places and ends the call, and hands your UI the call's state through its render prop.

function GraineVoiceLauncher(props: GraineVoiceLauncherProps): JSX.Element

Props — GraineVoiceLauncherProps.

Returns — the hidden engine and whatever children(api) renders; api is a GraineVoiceApi.

Errors — throws outside a GraineProvider. Nothing else throws: a call that cannot be set up reaches onError and api.error; a refused microphone reaches onMicDenied and api.micDenied.

What to expect — Mounted with active={false} it loads the engine idle — nothing is registered or started — so the customer's tap later is one quick step. A page that fails to load is retried on the timing.retryDelaysMs ladder; after the last try api.connectivity.state is "failed" and onError says "The assistant could not load. Check your connection and try again." The call ends two seconds after the app leaves the foreground (unless the provider's endOnBackground is off). While a call from the calls package rings or is live, a start is refused with "A call is already in progress." One conversation at a time: starting the call closes an open chat.

<GraineVoiceLauncher webView={WebView} active={open} autoStart onEnded={() => setOpen(false)}>
  {(api) => (open ? <GraineVoiceBar api={api} onClose={() => setOpen(false)} /> : null)}
</GraineVoiceLauncher>

GraineVoiceLauncherProps

Read it to wire the launcher: the WebView, when the engine is active, how audio travels, and the callbacks your UI needs.

GraineVoiceApi

Read it in GraineVoiceLauncher's render prop to draw a call UI: where the call is, the controls, the captions and the connection.

What to expect — Re-rendered as the call changes. captions is cleared when a call starts and when the launcher becomes inactive.

CAPTION_HISTORY

Read it to know how many lines api.captions keeps.

const CAPTION_HISTORY = 12;

What to expect — 12 lines, oldest dropped first. A caption box usually shows the last two or three.

Caption

Read it to draw one caption line.

GraineVoiceBar

Use it as the call's UI: the bar, the chat window (where the agent offers chat), the components the agent draws and the booked-calls card, drawn in the design chosen in the dashboard.

function GraineVoiceBar(props: GraineVoiceBarProps): JSX.Element

Props — GraineVoiceBarProps.

Returns — the bar, positioned over your app at the bottom.

Errors — throws outside a GraineProvider.

What to expect — It follows the conversation by itself: the call's controls, captions, the switch to the chat, a chat window at the size the design (or openChat) asks for, the components the agent draws (unless your app mounts its own GraineWidget), and — since 0.42.0 — the customer's booked calls with Cancel and Book a call where booking is available. It rises above the keyboard and the customer can drag it.

{(api) => <GraineVoiceBar api={api} onClose={() => setOpen(false)} bottomInset={tabBarHeight + 12} safeArea={insets} />}

GraineVoiceBarProps

Read it to place the bar and connect it to the call.

GraineBarAction

Use it for a button that rides on the bar (its accessory) and must look like part of it — in the design's accent, corners, type, shadow and icons.

function GraineBarAction(props: GraineBarActionProps): JSX.Element

Props — GraineBarActionProps.

Returns — the button.

Errors — none.