React Native

Install

npm install @graineai/inapp-react-native react-native-webview

react-native-webview autolinks. There is no native code to write — no MainApplication.kt edit, no AppDelegate.swift edit, no pod install beyond the usual, no ProGuard rule. The app does declare the microphone, because this package carries no manifest of its own: RECORD_AUDIO and MODIFY_AUDIO_SETTINGS in AndroidManifest.xml, and NSMicrophoneUsageDescription in Info.plist — with Expo, android.permissions and ios.infoPlist in app.json (Voice → Microphone permission). Expo SDK 50+ works in a development build; Expo Go cannot load react-native-webview, so voice will not run there.

React Native 0.71+, React 18+.

Configuration options

GraineProvider props

GraineVoiceLauncher props

The voice API (children)

Captions and hanging up →

GraineVoiceBar props

The call's bar, drawn by the SDK in the brand's design — the dashboard Garage's in-app preview, for real. Mount it in GraineVoiceLauncher's render prop. There is nothing about its look to pass: the design, typeface, colours, heading, logo and loader all come from the dashboard. 0.38.0

GraineBarAction

A button for the bar's accessory, drawn in the brand's design — the accent, the corners, the typeface and the icon style the dashboard chose — so your app decides nothing about how it looks, as with the bar itself. 0.40.2

<GraineVoiceBar
  api={api}
  onClose={onClose}
  accessory={<GraineBarAction label="Call Asha" icon="call" onPress={callTheAgent} />}
/>

It rises above the keyboard on its own, draws any component the agent sends above the caption, and switches between the call and the chat when the dashboard allows both.

GraineLauncherButton props

The design's launcher on its own — its shape, glyph or logo, shadow or hard offset — for an app that opens GraineVoiceBar itself rather than handing the flow to fab. 0.38.0

GraineAgentBar props

The bar for a chat-first integration on the provider's own socket (for a call, use GraineVoiceBar in GraineVoiceLauncher). Everything here is optional; the dashboard's design is the source and a prop is an override.

The bar rises above the keyboard on its own, from wherever the customer left it.

Hooks

A component the agent draws is useGraineWidget()'s; client.submitWidget(widgetId, data, summary) answers one from your own UI, and client.presentWidget(frame) / client.presentPendingWidget(hint) draw one (or its loader) yourself — a preview, a test. 0.43.0 — Components

Calls like WhatsApp

A call that rings the customer's phone — CallKit and VoIP pushes on iOS, a ringing call notification and call screen on Android — and goes on with the screen off runs on the native call engine, in its own package:

npm install @graineai/inapp-react-native-calls
cd ios && pod install

await GraineCalls.configure({ publishableKey: "pk_live_…", displayName: "Acme Assistant" });
await GraineCalls.startCall({ reason: "card_blocked" });   // the customer calls the agent

It carries native code, so it needs a new store build; this SDK stays over-the-air. The pushes, the iOS capabilities, attach(client) and your server's side are in In-app calling → React Native.

Calls over WebRTC (optional)

Calls — the customer calling the agent, and a call Graine rang — carry their audio over a WebSocket unless you build with WebRTC. Turn it on per platform, then rebuild the app (it is native code):

# ios/Podfile, at the top — then pod install
ENV["GRAINE_WEBRTC"] = "1"

# android/gradle.properties
graineWebRtc=true

On a build server (EAS, CI), GRAINE_WEBRTC=1 in the build's environment turns it on for both. Nothing else changes — your code, the ring, the call screen and the outcomes stay the same. Calls package 0.4.0.

• What the customer notices: a call that holds up better on mobile data — a jitter buffer, loss concealment, the phone's own echo canceller. Over WebRTC the agent's voice arrives at telephone bandwidth today.
• When WebRTC cannot carry a call, it continues on the WebSocket inside the same ring and call screen: no second ring, no error. useGraineCall() says which one carried it — transport ("webrtc" or "websocket") and transportFallbackReason.
• Choose with GraineCalls.configure({ callTransport }): "auto" (the default — WebRTC in a build that has it), "websocket" or "webrtc". The agent's In-app call audio setting (Calls & scheduling) — WebRTC (recommended) or Standard — can move every install's calls to the WebSocket from their next start, without a release.
• Size: about 12 MB installed on an iPhone, about 7.4 MB on a 64-bit Android phone — a prebuilt WebRTC library whose symbols are renamed, so it never clashes with another copy of WebRTC in your app (a video-calling SDK, say). CocoaPods installs one version of it: a library that pins it at another version cannot be installed beside it.
• Android adds ACCESS_NETWORK_STATE to your manifest (a normal permission: nothing is asked); the R8 rules ship with the package. Licences: WebRTC is BSD 3-Clause with Google's patent grant — list it in your app's open-source licences.

More: Calls over WebRTC.

Without React Navigation

Omit navigationRef and call useGraineScreen yourself on each screen — it carries screen as well as the fields, so nothing is lost except the automatic part. Everything else is unchanged.

Your design, in your app

The design chosen in the dashboard (Agent → Embed & Widgets → Appearance) is drawn by the SDK itself — the voice bar, the caption, the chat, the launcher and every component — exactly as the dashboard's preview shows it. Change the design or the typeface there and every phone follows the next time your app starts; nothing in your app names a colour or a font.

Mount the SDK's bar inside the voice launcher, and hand the provider the two platform abilities it cannot import itself — registering a font, and drawing a vector — once:

import * as Font from "expo-font";
import Svg, { Path } from "react-native-svg";
import { GraineProvider, GraineVoiceLauncher, GraineVoiceBar } from "@graineai/inapp-react-native";
 
<GraineProvider client={client} loadFont={Font.loadAsync} svg={{ Svg, Path }}>
  <GraineVoiceLauncher webView={WebView} active={open} autoStart>
    {(api) => (open ? <GraineVoiceBar api={api} onClose={() => setOpen(false)} /> : null)}
  </GraineVoiceLauncher>
</GraineProvider>

• Typefaces. With loadFont, the SDK fetches the faces the design draws with — only those, from Graine — and redraws when they arrive. Until then, and if one never arrives, it draws the system font. A family you already bundle can be named in fonts ({ Manrope: "Manrope-Regular" }); yours wins.
• Icons. With svg, the microphone, hang-up, send and chat icons are drawn in the design's icon style. Without it, plain glyphs.
• Your own UI. useGraineTheme() returns the resolved tokens — colours, type, corners, spacing, shadows — for anything you draw beside the agent.

How long connecting takes

Four things happen between the tap and the agent's first word. On a current app, three of them are done before the tap.

The engine connects on the first network route that works, within 1.5 s — it never waits for a VPN or an idle mobile interface to be tried, which on its own can take forty seconds.

If "Connecting…" lasts more than about two seconds on a current app, the engine is being loaded at the tap. Mount it earlier.

Troubleshooting

Best practices

• One provider, at the root. Not per screen.
• Call identify() as soon as you have a signed-in user, and again on account switch — with the field the agent's Who is the user? setting names (user_id by default), so the agent remembers them across chats, Talk and calls: Memory.
• Send the user's details under the prompt's own names with setVariables, and clear them with setVariables(null) on sign-out — Send your user's details to the agent.
• Give every reported field a status. It is the difference between useful proactive help and a generic nudge.
• Return a message from every action saying what actually happened — the agent repeats it, so a vague result becomes a vague promise.
• Hide the launcher on sensitive flows (auth, payment entry) with includeScreens or groups.
• Plan visibility early. Retrofitting group rules is harder than wiring them during integration — see Launcher visibility.
• Match route names exactly. They are case-sensitive.

Why there is no native setup

The SDK needs no edit to MainApplication.kt or AppDelegate.swift and has no native module of its own: beyond react-native-webview and the microphone's two declarations, nothing native changes. The audio runs in the same hosted engine as the web widget, which already does capture, playback, buffering, decoding and echo suppression — so an improvement to the audio reaches your app without an app-store release, and updating the SDK is an npm install.

The trade, stated plainly: a WebRTC call uses the phone's own echo canceller; on the fallback path a level-based guard stands in for it, and gives up when the speaker is very loud. Earphones or a lower volume settle it.

Next steps