SDK reference

Package: @chatropic/react-native. Install with npm install @chatropic/react-native. Peer dependencies are react >= 18 and react-native >= 0.73.

Components

Component	Renders
`ChatWidgetLauncher`	Floating chat button that opens the chat panel over your app
`ChatWidgetScreen`	Full-screen chat view for a dedicated support screen

Both components accept the same props, except onBack, which only applies to ChatWidgetScreen.

Props

Prop	Type	Description
`publishableKey`	`string` (required)	Key from Deploy > Mobile app > Embed, prefix `cpk_live_`
`profile`	`"mobile" \| "chat" \| "saas"`	Deploy profile to load; defaults to `"mobile"`
`sessionId`	`string`	Pin a specific conversation session; prefer `storage` for persistence
`endUserId`	`string`	Stable signed-in user id; becomes `{{end_user_id}}` in action templates
`identityToken`	`string`	Backend-signed HS256 JWT whose `sub` matches `endUserId`
`userName`	`string`	Display name for Inbox and escalation alerts
`userEmail`	`string`	Email for Inbox and escalation alerts
`theme`	`"light" \| "dark"`	Override the profile’s appearance
`storage`	`ChatStorage`	Local persistence adapter from `createChatStorage`
`onNavigate`	`(path: string) => void`	Called when the user taps a navigation card
`onBack`	`() => void`	Back button handler, `ChatWidgetScreen` only
`onUserMessage`	`(message) => void`	Fires when the user sends a message
`onAgentDone`	`(reply) => void`	Fires when the agent completes a turn

Helpers

`createChatStorage()`

Returns a storage adapter backed by @react-native-async-storage/async-storage that persists the session id and message history, so conversations resume across app launches.

import { createChatStorage } from "@chatropic/react-native";

const chatStorage = createChatStorage();

<ChatWidgetScreen publishableKey="cpk_live_..." storage={chatStorage} />

Payload shapes

Delivered to onNavigate as the path string. The full payload the agent produces:

{
  "component": "NavigationCard",
  "props": {
    "label": "Billing",
    "path": "/account/billing",
    "requiresAuth": true
  }
}

Paths are always relative and always come from your workspace’s navigation route registry.

Key formats

Prefix	Credential	Where it lives
`cpk_live_`	Publishable key	Ships in app code; scoped to widget runtime calls
`ca_live_`	Workspace API key	Server-side only; never embed in an app

Quickstart

Copy-paste setup tutorial.

React Native SDK guide

Task-oriented integration walkthrough.

Quick Start

Integration

Navigation Routes

Reference

Components

Props

Helpers

`createChatStorage()`

Payload shapes

Navigation card

Key formats

Quickstart

React Native SDK guide

​Components

​Props

​Helpers

​createChatStorage()

​Payload shapes

​Navigation card

​Key formats

Quickstart

React Native SDK guide

Components

Props

Helpers

`createChatStorage()`

Payload shapes

Navigation card

Key formats