React Native SDK Chatbot Builder

Mobile apps live and die by user engagement. Yet most apps force users to leave the app for support - redirecting to email, phone, or a web help center. Every redirect is a friction point that increases churn, lowers satisfaction, and breaks the user experience you worked so hard to build.

The Conferbot React Native SDK solves this by embedding a fully native chatbot experience directly inside your mobile app - no WebView. Version 2.0.0 matches the Conferbot web widget: the same flows, AI agent, live chat, launcher, home screen, help centre, languages and dashboard customisation, checked against the widget's own code. It ships with full TypeScript definitions, a floating launcher (ConferBotWidget), live agent handover, reactions, read receipts, an offline message queue and session persistence.

With the Conferbot SDK, you bring the same no-code chatbot flows you build for your website or WhatsApp directly into your React Native app - no separate bot development required. Design the chatbot once in Conferbot's visual builder, and the SDK renders it natively on both iOS and Android.

This guide covers installation, configuration, key features, customization options, how the pure-TypeScript SDK relates to the New Architecture (Fabric + JSI), Expo integration, React Navigation patterns, offline support, and best practices for embedding a chatbot in your React Native app in 2026.

New to chatbot building? Start with our complete guide to building a chatbot without coding. The same chatbot works on your website, WhatsApp, Messenger, and native Android/iOS apps. Browse our template library for pre-built in-app chatbot flows. For alternative frameworks, see our Flutter SDK guide.

Source code & documentation: conferbot-react-native on GitHub | Developer Portal Guide | React Native Docs

The Conferbot React Native SDK installs from npm and works in both bare React Native and Expo projects. The SDK itself is pure TypeScript with no native code, so there is no linking step and no pod install for the SDK package.

Step 1: Install the Package

Using npm:

npm install @conferbot/react-native

Or using Yarn:

yarn add @conferbot/react-native

Its runtime dependencies (axios, socket.io-client) are installed automatically. Version 2.0.1 is on its way to the npm registry; until it appears there, install it from the GitHub repository.

Step 2: Optional Packages

Each optional package switches on one feature. Without it, that feature is left out and the SDK still works:

• @react-native-async-storage/async-storage - keeps the conversation across app restarts (found automatically, nothing to pass), plus "Your requests", the "Welcome back" home card and the offline queue on the device
• react-native-svg - launcher icons, gradients, effects and the mascot, chat backgrounds, the signature pad and the pencil and mascot typing styles
• expo-av and expo-file-system - the owner's message and launcher sounds (and voice notes)
• expo-font - the owner's Google font and the widget theme's font
• @react-native-community/netinfo - the device's own network state in isOnline and useNetworkStatus()
• react-native-document-picker + react-native-image-picker, or expo-document-picker + expo-image-picker - attachments

The optional packages are native modules, so after installing any of them run cd ios && pod install && cd .. in bare projects.

Step 3: Initialize the Provider

Wrap your app root with ConferBotProvider. The bot ID is the operative credential; the apiKey accepts any placeholder (e.g. conf_test_key). The dashboard's Install on your site > Mobile apps > React Native snippet has your bot ID filled in:

<ConferBotProvider apiKey="conf_test_key" botId="YOUR_BOT_ID"><App /></ConferBotProvider>

No account yet? The public demo bot ID 691c970890527a0468f9b2c9 works without one. Publish your own bot in the dashboard first: an unpublished bot has no flow to run.

Step 4: Add the Chat UI

Floating launcher (recommended - like the web widget): put it last inside a full-screen view; it positions itself absolutely in the bottom corner and reads its look from your dashboard:

<ConferBotWidget />

Or open the full-screen chat from your own button with <ChatWidget visible={open} onClose={() => setOpen(false)} />. openChat() and closeChat() from useConferBot() open and close the launcher's chat from any screen.

Step 5: Configure Push Notifications (Optional)

Push is opt-in and the SDK has no Firebase dependency:

• Get an FCM token (for example with @react-native-firebase/messaging) or the APNs device token from your push library
• Pass it to the SDK: const { setPushToken } = useConferBot(); await setPushToken(token, 'fcm'); - it is registered with the current conversation, and again for each new one
• Forward notifications to handlePushNotification(data): it returns true for this bot's Conferbot messages and opens that conversation

Requirements: React 17+ and React Native 0.70+ (peer dependencies). The SDK adds no native code, so it raises neither OS minimum - for React Native 0.70 that is iOS 12.4 and Android 5.0 (API 21). For a full walkthrough, see the React Native SDK guide on the developer portal.

Version 2.0.0 (16 October 2026) brings the React Native SDK to parity with the Conferbot web widget. Everything below follows your dashboard settings, with no extra code:

• Every flow step - all 82 step types of the flow builder, checked against 156 shared test cases produced by running the web widget's own code. Rich steps such as consent, OTP, address, signature, ranking, matrix, payment, slider, date and time, carousel, product cards and picture choices have native cards.
• AI agents - streamed replies, starter and follow-up questions, cited sources, "Helpful?" under each answer, and a notice when a reply takes longer than 45 seconds.
• Live chat handover - "Connecting you with the team", the queue position and estimated wait, a max-wait countdown, leave a message, the post-chat rating, "Start a new chat" and "Email me this chat". A live chat is picked back up after an app restart, and after a network blip the chat rejoins its room.
• While you wait - help articles and seven small games while the visitor waits for a person.
• Home screen, help centre and "Your requests" - <HomeScreen /> / useHome() and <RequestsPortal /> / useRequests(), with help articles opening inside the app.
• Launcher as on the web - 56 icons, shapes and motion, the greeting card in 11 styles, and 27 mascot characters.
• Your look - 27 widget themes with dark mode, plus your colours, fonts and sounds, and human touches such as confetti and rating sparks.
• Languages - the SDK's own words in English, Dutch, French, German or Spanish, chosen from your dashboard setting or the phone's languages.
• End of the conversation - the owner's post-chat redirect (a 10-second countdown with Cancel) and the post-chat rating offered when a flow ends.
• Offline and push - messages sent while offline wait and go on reconnect; push uses setPushToken(token, 'fcm' | 'apns'), which replaces the deprecated registerPushToken.

Upgrading from 1.1.0? The changelog in the GitHub repository lists the breaking changes and the migration steps.

2.0.1 (17 October 2026) fixes a crash at ConferBotProvider in release builds when an optional package (such as NetInfo, expo-av or AsyncStorage) is not installed, and a bug where the conversation stopped after a choice step, so a handover that followed never started. It also fixes the colour of the picked answer on a choice step and the home screen's brand band. Use 2.0.1 or later.

The Conferbot React Native SDK is built for production mobile apps, with features that match the expectations of modern app users.

Floating Chat Bubble (FAB)

The flagship integration pattern: ConferBotWidget renders the same bottom-corner chat bubble as the Conferbot web widget, with zero styling code. Tapping it opens the full chat modal. The launcher reads your dashboard settings automatically - colour or gradient (drawn with react-native-svg when installed), icon, size, side, offsets, shape, style, greeting card and motion. Every setting can also be overridden locally through widgetConfig, and local props win over server values for the bubble.

Native UI Components

The SDK renders native React Native components - not a WebView wrapper. This means native scrolling and gesture handling, platform keyboard behaviour, and straightforward integration with your app's navigation system (React Navigation, Expo Router).

Node Flow Engine

ChatWidget is the drop-in full-screen chat modal with the complete node flow engine: it runs all 82 step types of the Conferbot flow builder - questions, choices, conditions, loops and sub-flows, AI route and extract, knowledge-base answers, OTP, consent, payment and more - with answered choices kept in the transcript, as in the web widget.

Server-Driven Theming

Everything you configure in the dashboard is fetched at connect time and applied to the built-in chat UI without any code: the widget theme (27 themes; light, dark or follow the phone), colours, bubble and avatar shapes, typing styles, chat backgrounds, fonts, sounds, the bot name and avatar - plus all the launcher settings above.

Live Agent Handover, Reactions, and Read Receipts

Conversations transition seamlessly between bot and human agents with agent typing indicators (currentAgent, agentTyping, isLiveChatMode). Users can react to messages with the built-in emoji set, synced in real time over the socket (addReaction, removeReaction, useReactions()), and sent/delivered/read receipts update live (getMessageStatus, markVisibleMessagesAsRead, tunable via readReceiptConfig).

Offline Message Queuing and Session Persistence

A message sent while offline waits and is sent on reconnect (enableOfflineMode, on by default); with AsyncStorage installed the queue is kept on the device. Sessions survive app restarts (enablePersistence, persistenceConfig with maxMessages, keyPrefix, and sessionExpiryMs), so returning visitors resume where they left off.

Hooks and Context API

Access chatbot state and actions through React hooks:

• useConferBot() - The main headless API: state (record, isConnected, isOpen, unreadCount, currentAgent, currentUIState, isOnline, pendingMessageCount, ...) plus actions (sendMessage, submitNodeResponse, openChat/closeChat, setPushToken, handlePushNotification, leaveQueue, on/off, reactions, read receipts, queue retries)
• useTheme() / useNetworkStatus() / useOfflineQueue() / useReactions() / useReadReceipts() - Focused hooks for theming, connectivity, queue control, and message metadata
• useHome() / useRequests() - the home screen and "Your requests" state for your own UI
• useAnalytics() - trackEvent, trackUserAction, trackNodeVisit and more, when wrapped in ConferBotWithAnalyticsProvider

These hooks use React's Context API internally and must be used within the ConferBotProvider tree. They let you build notification badges on tab bars, inline chat previews, or completely custom chat interfaces.

Full TypeScript Support

The entire SDK is written in TypeScript with comprehensive type definitions for every export - component props, hook return values, socket event names (SocketEvents enum), message types (RecordItem), configuration (ConferBotConfig), and theme tokens (ConferBotTheme, ConferBotThemeOverride). You get full IntelliSense autocomplete, compile-time error checking, and self-documenting APIs with no separate @types package.

AsyncStorage and Persistence

The SDK persists sessions, the identified user, and the offline queue through AsyncStorage, which it finds automatically when @react-native-async-storage/async-storage is installed. You can also pass any storage implementing its AsyncStorageInterface as config.asyncStorage, or opt out with enablePersistence: false. Keys are namespaced with a configurable keyPrefix (via persistenceConfig) to avoid conflicts with your app's storage, and maxMessages caps how much history is kept. Without storage, the conversation is not kept across restarts and everything else keeps working.

Performance Optimization

The SDK is optimized for React Native's rendering performance: the MessageList is a virtualized list with inline node rendering and an onEndReached hook for history loading, and message components avoid unnecessary re-renders. Because the package is pure TypeScript, it adds no native module compilation overhead - in Expo or bare projects alike.

React Native's New Architecture replaces the async bridge with JSI (JavaScript Interface), introduces the Fabric renderer, and provides TurboModules for lazy-loaded native modules. The Conferbot SDK's position is simple: it is pure TypeScript with no native code of its own, so it has no TurboModule or Fabric component of its own to migrate.

Why Pure JS Simplifies the Migration

Most New Architecture work comes from third-party native modules that need TurboModule/Fabric migrations, codegen configs, or interop layers. The Conferbot SDK itself has none of that:

• No custom native modules - Nothing to migrate, no codegen and no interop flags for the SDK package
• Standard views only - The chat UI is built from core React Native components
• Optional native packages are your choice - The native code involved comes only from the optional packages you install (AsyncStorage, react-native-svg, Expo modules, pickers), so check those against your architecture as you would for any other module

Fabric Renderer

Because the chat UI is composed of standard React Native views and a list of messages, there is no SDK-specific renderer code; it renders through whichever renderer your app uses.

Hermes and JS Engine Compatibility

The SDK is plain TypeScript compiled to standard JavaScript, and its runtime dependencies - axios and socket.io-client - are plain JavaScript too, so there is no engine-specific code in the package.

No Configuration, Either Way

Whether your project has newArchEnabled on or off, the same npm install @conferbot/react-native package needs no flags, no codegen entries and no architecture detection logic:

• Old architecture - Ordinary JavaScript over the classic bridge
• New Architecture - No SDK changes; only your optional native packages need to support it
• Expo - The SDK is plain TypeScript and works in Expo and bare React Native apps

Enabling the New Architecture

To enable the New Architecture in your project (independent of the SDK):

• React Native CLI - Set newArchEnabled=true in android/gradle.properties and RCT_NEW_ARCH_ENABLED=1 in your Podfile
• Expo - Set "newArchEnabled": true in your app.json; recent Expo SDKs enable it by default

The SDK's peer dependencies are React Native 0.70+ and React 17+ - you are never forced to upgrade for the chatbot's sake. See React Native's New Architecture guide for detailed migration steps.

Expo is a widely used React Native development platform. The Conferbot SDK works in Expo and bare React Native apps: the SDK package itself ships no native code, and its optional features use Expo modules (expo-av, expo-file-system, expo-font) where they need native code.

Expo Managed Workflow (Zero Ejection)

The SDK works in Expo managed workflow without ejection, because it ships no native code of its own. In Expo managed mode:

1. Install: npx expo install @conferbot/react-native (or npm install @conferbot/react-native)
2. Import: import { ConferBotProvider, ConferBotWidget } from '@conferbot/react-native'
3. Wrap your app: <ConferBotProvider apiKey="conf_test_key" botId="YOUR_BOT_ID">...</ConferBotProvider>
4. Add the floating bubble: <ConferBotWidget />

The SDK operates entirely through JavaScript/TypeScript and React Native's built-in APIs.

Unlocking Persistence, Icons, Sounds and Fonts

The optional packages are Expo-friendly installs:

• npx expo install @react-native-async-storage/async-storage react-native-svg - conversation kept across restarts (found automatically), plus the launcher icons, gradients and mascot
• npx expo install expo-av expo-file-system expo-font - the owner's sounds and fonts

Push Notifications with Expo

The SDK takes a native FCM or APNs token (not an Expo push token). Get it from your push library, then hand it to the SDK: const { setPushToken } = useConferBot(); await setPushToken(token, 'fcm');. It is registered with the current conversation through Conferbot's mobile API. Forward received notifications to handlePushNotification(data), which opens the right conversation; displaying notifications stays in your app.

EAS Build Integration

The SDK works seamlessly with Expo Application Services (EAS) Build. Your eas.json needs no special configuration for Conferbot - the package is plain JavaScript bundled by Metro, and the optional packages resolve like any other modules during the build.

Expo Router Integration

For apps using Expo Router (the file-based routing system for React Native), the SDK integrates naturally:

• Add ConferBotProvider in your root _layout.tsx to make the chatbot available across all routes
• Use ConferBotWidget in your top-level layout for a persistent floating chat bubble
• Or create a /chat route that renders ChatWidget (with visible and onClose wired to navigation) for a dedicated chat screen
• Forward push notification taps to handlePushNotification, which opens the conversation; session persistence resumes it

For a comparison of Expo vs bare workflow capabilities, see the section below on Expo vs Bare Workflow. For teams evaluating the Flutter SDK as an alternative, the Expo-compatible React Native SDK offers the advantage of staying within the JavaScript/TypeScript ecosystem.

Most production React Native apps use React Navigation for routing. Because the SDK's chat surfaces are ordinary components (ConferBotWidget overlays itself; ChatWidget is a controllable modal), they slot into stack, tab, and drawer navigators without special adapters.

Stack Navigator Integration

Add a chat route that renders the SDK's modal:

• Create a screen component that returns <ChatWidget visible onClose={() => navigation.goBack()} /> and register it: <Stack.Screen name="Chat" component={ChatRoute} />
• Navigate to chat programmatically: navigation.navigate('Chat')
• ChatWidget accepts title, placeholder, enableAttachments, enableVoiceMessage, showTimestamps, and closeOnBackdrop props to fit the screen's context

Tab Navigator with Badge

Display an unread message badge on the chat tab using the useConferBot() hook:

• Use const { unreadCount } = useConferBot() in your tab bar component
• Set the tab badge: options={{ tabBarBadge: unreadCount > 0 ? unreadCount : undefined }}
• The badge updates in real time as messages arrive; openChat() resets the unread count when the user enters the chat

Drawer Navigator

For apps using a drawer navigator, the chat route works as a drawer item with the same badge and navigation patterns. The floating ConferBotWidget can also be placed outside the drawer content for persistent access across all screens - it positions itself absolutely, like the web widget.

Deep Linking from Push Notifications

When a user taps a push notification, the app should open directly to the chat. Your app owns notification display; the SDK opens the right conversation:

1. Forward the tap - In your push library's tap handler, call handlePushNotification(data) from useConferBot(); it returns true for this bot's messages and opens the chat, or that conversation in "Your requests"
2. Or route it yourself - Add a chat route (e.g. yourapp://chat) to your linking config and navigate to it
3. Resume automatically - With persistence enabled, the SDK restores the session and history, so the conversation continues exactly where it left off

Expo Router Deep Linking

For apps using Expo Router instead of React Navigation: create an app/chat.tsx route that renders ChatWidget, configure your linking scheme in app.json ("scheme": "yourapp"), and navigate to the route from notification taps via expo-linking.

Navigation State Persistence

If your app saves and restores navigation state across app restarts (using onStateChange and initialState), the chat route persists correctly. The SDK manages its own conversation state independently through StorageService and AsyncStorage - React Navigation handles routing, and the SDK handles session restore (isRestoring, hasPersistedSession) and message loading.

For navigation patterns specific to iOS (UINavigationController) or Android (Jetpack Navigation), see the respective SDK guides. For omnichannel chat that spans your app and website, conversations persist across navigation contexts through Conferbot's omnichannel platform.

Mobile users frequently experience network interruptions - subway tunnels, airplane mode, poor coverage areas, Wi-Fi-to-cellular transitions. The Conferbot React Native SDK queues messages sent while offline and sends them on reconnect, as the web widget does (enableOfflineMode, on by default).

Persistent Message Queue

When the connection drops, outbound messages wait in a queue, kept on the device when AsyncStorage is installed (or any storage implementing the SDK's AsyncStorageInterface), and are sent when the socket reconnects. The queue is configurable through offlineQueueConfig: maxQueueSize, maxRetries, retry backoff, persistQueue, and autoProcess. Because the queue persists, a message sent offline survives a force-close and is delivered when the app reopens with connectivity.

Queue State in Your UI

Queue state is surfaced directly on the context:

• isOnline (the socket, and the device network when @react-native-community/netinfo is installed), pendingMessageCount, failedMessageCount - reactive state for banners and badges
• retryFailedMessage(id), retryAllFailedMessages(), clearFailedMessages() - user-facing retry controls
• OfflineBanner - a ready-made "you are offline" banner component
• MessageStatusIndicator - per-message queued/failed/sent tick marks

Lower-Level Hooks and Services

For finer control there are useNetworkStatus() (returns isConnected, isInternetReachable, type, and a refresh() method) and useOfflineQueue() (returns queue, queueSize, pendingCount, failedCount, queueMessage, retryAllFailed, processQueue, and more), plus the standalone OfflineQueueService class if you want to drive the retry queue outside React.

Custom Storage Adapters

The SDK talks to storage through its AsyncStorageInterface, so faster stores like react-native-mmkv can be used by passing a thin adapter that implements the same get/set/remove contract as config.asyncStorage. Keys are namespaced via the configurable keyPrefix in persistenceConfig, so the SDK's data never collides with your app's own storage.

Reconnection Behavior

The socket layer reconnects automatically (tunable via reconnectionAttempts, default 5, and reconnectionDelay, default 1000 ms doubling up to 5 s, in ConferBotConfig). On reconnect the visitor rejoins the chat's room so agent messages keep arriving, a waiting visitor's queue position is refreshed, and queued messages are sent; with persistence enabled, isRestoring and hasPersistedSession let your UI show the right loading state while a previous session is restored.

For apps serving users in areas with unreliable connectivity (emerging markets, rural areas, commuter transit), offline-first chatbot support is not optional - it is the difference between a usable and unusable experience. The Conferbot SDK handles this transparently, matching the offline resilience of the native Android and native iOS SDKs.

Your chatbot should look and feel like a native part of your app. The SDK layers dashboard-driven styling, local widget config, and a full theme token system.

Server Customizations Apply Automatically

Everything you configure in the Conferbot dashboard is fetched at connect time and applied to the built-in chat UI without any code: the widget theme (27 themes with dark mode), colours, bubble and avatar shapes, typing styles, chat backgrounds, the owner's font and sounds, the bot name and avatar, the greeting card, the mascot and all launcher settings (colour or gradient, icon, size, position, offsets, shape, motion, CTA text). The SDK's own words follow the owner's widget language (English, Dutch, French, German or Spanish); force one with config.widgetLanguage.

Precedence - How Merging Works

• Floating bubble (ConferBotWidget) - local widgetConfig props win over server dashboard values, which win over SDK defaults
• Drop-in ChatWidget - the widget seeds its internal ThemeProvider with the server theme merged over the default theme, so dashboard colors win over a local ThemeProvider for the built-in modal
• Components you compose yourself (MessageList, ChatHeader, ...) - styled by the nearest ThemeProvider you provide, fully under your control
• The customization prop on the provider is accepted for forward compatibility but the built-in UI does not apply it - use dashboard customizations or ThemeProvider instead

Local Themes with ThemeProvider

The SDK ships defaultTheme (light) and darkTheme. ThemeProvider deep-merges a partial ConferBotThemeOverride over the default theme, so overriding just colors.primary, colors.userBubble, and borderRadius.bubble is fine. Read the active tokens in your own components with useTheme(); the full token set covers colors, typography, spacing, borderRadius, shadows, animations, and layout. Toggle themes programmatically for apps with manual dark mode controls.

Event Hooks

Listen to chatbot events for custom business logic by subscribing to socket events - on() returns an unsubscribe function:

• SocketEvents.BOT_RESPONSE - A bot node arrived; use for analytics or custom notifications
• SocketEvents.AGENT_ACCEPTED / AGENT_LEFT / AGENT_TYPING_STATUS - Live agent lifecycle; use for UI changes or availability display
• SocketEvents.AGENT_MESSAGE - A human agent replied
• SocketEvents.CHAT_ENDED / CONNECTION_ERROR - Conversation and connection lifecycle

Custom Components

Compose the exported building blocks in your own layout while the SDK keeps the conversation logic: ChatHeader, MessageList (with activeNodeUI and onNodeSubmit for inline flow nodes), MessageBubble, ChatInput, ConnectionStatus, TypingIndicator, Avatar, EmptyState, OfflineBanner, ReactionPicker, MessageReactions, LinkPreview, EmojiPicker, and NodeRenderer.

A chatbot embedded in your mobile app serves fundamentally different purposes than a website widget. Here are the most impactful use cases.

In-App Customer Support

The primary use case. Instead of directing users to an email form or phone number, provide instant support within the app. The bot resolves common issues (account questions, billing, feature guidance) and escalates complex problems to live agents - all without the user leaving your app.

User Onboarding

Guide new users through your app's features with a conversational onboarding flow. Instead of static tooltip tours that users dismiss, a chatbot asks what the user wants to accomplish and walks them through relevant features step-by-step.

In-App Purchases and Upsells

For e-commerce and subscription apps, the chatbot can recommend products based on browsing history, explain pricing plans, offer personalized discounts, and guide users through the purchase process.

Feedback and Surveys

Replace intrusive survey popups with conversational feedback collection. After a purchase, delivery, or support interaction, the chatbot asks for feedback through a natural conversation flow.

Appointment and Booking

Healthcare, fitness, salon, and service apps can let users book appointments through a conversational interface. The calendar step shows available slots and greys out booked ones.

Adding a chatbot to your React Native app with Conferbot takes minutes. Here is your integration path.

Quick Start

1. Build your chatbot in the Conferbot visual builder and publish it - the same bot works on your website, mobile app, and messaging channels
2. Install the SDK - npm install @conferbot/react-native (plus optional AsyncStorage and react-native-svg)
3. Add ConferBotProvider - <ConferBotProvider apiKey="conf_test_key" botId="YOUR_BOT_ID">. The bot ID is the operative credential; any placeholder apiKey works
4. Drop in ConferBotWidget - the floating launcher with web widget parity (or ChatWidget for a direct modal)
5. Customize in the dashboard - server-driven theming styles the bubble and chat automatically; use widgetConfig and ThemeProvider for local overrides
6. Test on both iOS and Android simulators and devices, including airplane-mode queueing

No account yet? The public demo bot ID 691c970890527a0468f9b2c9 works without a Conferbot account - drop it in as botId to try the SDK immediately. For the complete integration walkthrough, follow the React Native SDK deep guide on the developer portal.

Omnichannel Advantage

The same chatbot you deploy in your React Native app works across your website, WhatsApp, Messenger, and other channels through Conferbot's omnichannel platform. Build the flow once and every channel runs it, and all conversations land in the same team inbox.

npm Package Details

The Conferbot React Native SDK is the package @conferbot/react-native, version 2.0.1. Install it with npm install @conferbot/react-native or yarn add @conferbot/react-native; until 2.0.1 appears on the npm registry, install it from the GitHub repository. Full TypeScript definitions are included (no separate @types package), and the package follows semantic versioning, with a changelog and migration notes for each release. It has zero native code of its own - it is pure TypeScript, with axios and socket.io-client as runtime dependencies and optional packages (AsyncStorage, react-native-svg, Expo modules, netinfo, pickers) that switch on persistence, launcher graphics, sounds, fonts and attachments. Peer dependencies are React Native 0.70+ and React 17+, and it works in Expo and bare React Native apps. The SDK is licensed under Apache 2.0.

Comparison: React Native Chat SDK Options

Choosing the right chat approach for your React Native app comes down to architecture and how much you want to build yourself. Here is how the main approaches compare:

Conferbot works in Expo and bare apps, ships a full TypeScript hooks API, and runs the same bot on every channel. Unlike UI-only libraries that require you to build the entire backend, Conferbot's AI chatbot builder provides the conversation logic, AI knowledge base, live chat handoff, and analytics - all accessible through the SDK with zero backend development. See pricing and platform comparisons for complete details.

SDK vs WebView

Why use the native SDK instead of embedding a WebView chat widget?

• Native feel - React Native views and the platform keyboard, not a web page
• Push Notifications - Native SDK integrates with FCM/APNs; WebViews cannot
• Offline Support - SDK queues messages offline; WebViews fail silently
• Platform Feel - Native gestures, animations, and behaviors; WebViews feel foreign
• Your dashboard settings - The SDK applies the same theme, launcher and language settings as the web widget

Why Conferbot React Native SDK

• Native components - React Native views, not a WebView
• Web widget parity - all 82 flow step types, AI agent, live chat, home screen, help centre and "Your requests"
• Floating chat bubble - ConferBotWidget with web widget parity, styled from your dashboard with zero code
• Full TypeScript - Complete type definitions for every export, no separate @types package
• React hooks - useConferBot, useHome, useRequests, useOfflineQueue, useReactions, useReadReceipts, useAnalytics for custom integrations
• Expo compatible - Works in Expo and bare apps (no native code of its own)
• No native modules to migrate - Pure TypeScript, so there is nothing Fabric- or TurboModules-specific in the package
• Five languages - The SDK's words in English, Dutch, French, German or Spanish
• Push notifications - Opt-in, with your FCM or APNs token and no Firebase dependency in the SDK
• Offline support - Messages sent while offline go on reconnect, plus session persistence with AsyncStorage
• Reactions and read receipts - Emoji reactions and sent/delivered/read ticks synced in real time
• AI-powered - AI knowledge base and OpenAI for intelligent in-app support
• Omnichannel - Same bot on website, WhatsApp, Messenger, and more
• Analytics - Track in-app engagement with built-in analytics

The Conferbot React Native SDK is included on every plan, including Free. View pricing for details, or start building your chatbot today with the visual builder and add mobile integration when you are ready. See how Conferbot compares to other chatbot platforms for mobile SDK capabilities.

The Conferbot React Native SDK is written entirely in TypeScript and provides comprehensive type definitions that make integration safer, faster, and self-documenting. Here is how to leverage TypeScript for the best development experience.

Core Type Definitions

The SDK exports all public types from the main package. Key types include ConferBotConfig (provider configuration, including persistenceConfig, readReceiptConfig, and offlineQueueConfig), ConferBotUser (visitor identity), RecordItem (individual messages and flow nodes in the transcript), Agent, MessageStatus, Reaction, WidgetConfig (FAB overrides), the SocketEvents enum, and the theme types ConferBotTheme / ConferBotThemeOverride. No separate @types package is needed.

useConferBot Hook API

The primary hook returns a strongly typed context object:

• isOpen: boolean and openChat() / closeChat() - Chat visibility and unread reset
• unreadCount: number - For badge rendering on tabs and buttons
• isConnected / isOnline / chatSessionId - Connection and session state
• record: RecordItem[] - The live transcript for custom UIs
• sendMessage: (text, attachments?) => Promise<void> - Send a visitor message
• submitNodeResponse: (response, portName?) => void - Answer the active interactive flow node (currentUIState)
• setPushToken: (token, type?: 'fcm' | 'apns') => Promise<void> and handlePushNotification(data) - Push registration and taps (registerPushToken still works but is deprecated)
• on / off - Typed socket event subscription; on returns an unsubscribe function
• currentAgent / agentTyping / isLiveChatMode and leaveQueue() - Live handover state and control
• customizations / widgetTheme / widgetLanguage - The owner's settings as applied

The hook uses React Context internally and must be used within the ConferBotProvider tree.

Custom Theme Types

ThemeProvider accepts a ConferBotThemeOverride - a deep-partial of the full theme - and merges it over defaultTheme, so partial overrides type-check cleanly:

• colors.primary / colors.userBubble / colors.botBubble - Core bubble and accent colors
• colors also covers header, background, text, and status colors
• typography / spacing / borderRadius / shadows / animations / layout - The full token groups

Read the active theme anywhere with useTheme(): ConferBotTheme. TypeScript flags invalid property names at compile time, preventing runtime styling bugs.

Event Type Safety

Socket subscriptions are typed against the SocketEvents enum (kebab-case string values such as 'bot-response'), and since 2.0.0 SocketEvents is exported as a value, so a typo in an event name is a compile-time error rather than a silent no-op. Key server events: BOT_RESPONSE, AGENT_MESSAGE, AGENT_ACCEPTED, AGENT_LEFT, AGENT_TYPING_STATUS, CHAT_ENDED, and CONNECTION_ERROR.

Typed Custom Components

Every exported component ships its own props type (MessageBubbleProps, ConnectionStatusProps, OfflineBannerProps, ...), and composition-oriented components take typed data: MessageList accepts messages: RecordItem[] plus activeNodeUI / onNodeSubmit for inline flow nodes, and ChatInput takes onSend: (text: string) => void | Promise<void>. Building a custom chat surface means composing typed pieces, not casting.

For TypeScript configuration best practices, see our chatbot building guide. The SDK's type definitions serve as self-documenting API reference - explore them directly in your IDE, or see the full reference in the developer portal guide.

React Native performance requires careful attention to rendering, memory, and bundle size. The Conferbot SDK is optimized for all three, and here is how to maintain peak performance in your integration.

Virtualized Message List

The chat message list (MessageList) is a virtualized list optimized for chat-style rendering, with inline flow-node rendering (activeNodeUI / onNodeSubmit) and an onEndReached callback for loading older history on scroll. Message components avoid unnecessary re-renders, keeping scrolling smooth even in long conversations.

Media and Link Previews

Media within messages loads lazily, and URL previews are fetched through the LinkPreviewService with caching, so repeated links in a conversation do not refetch metadata. File attachments (camera, gallery, and document picker) are handled through the FilePicker helpers with size formatting utilities.

Bundle Size

The SDK is pure TypeScript compiled to standard JavaScript - its runtime dependencies are axios and socket.io-client, and it contains no native modules of its own, so there is zero native compilation overhead in Expo or bare projects. The optional peer dependencies (AsyncStorage, react-native-svg) are the only native code involved, and only if you install them. To verify the SDK's size impact, run npx react-native-bundle-visualizer before and after adding the package.

Hermes Engine Compatibility

Hermes is the default JavaScript engine for React Native 0.70+ projects. The package is plain compiled TypeScript with no engine-specific code, so it runs as ordinary JavaScript alongside the rest of your app.

Persistence and Analytics Overhead

Persistence writes go through your provided AsyncStorage instance with a capped history (persistenceConfig.maxMessages), read receipts batch their updates (batchDebounceMs), and analytics events upload in batches through the AnalyticsService rather than per event - keeping storage churn, network chatter, and battery impact low.

What the SDK Adds to Your App

For performance monitoring in production, wrap your app with ConferBotWithAnalyticsProvider and use the useAnalytics() hook to track real-world chat interaction performance across your user base.

A support chat that does not know who is asking makes the user retype their email and order number. Pass your signed-in user as user and the conversation, the contact record and any answer variables are filed under them; {{first_name}} and {{company}} in the bot's messages fill in from the user's name and metadata.

import React from 'react';
import { ConferBotProvider, ConferBotWidget, type ConferBotUser } from '@conferbot/react-native';

type Session = { id: string; name: string; email: string; conferbotHash: string } | null;

export function Root({ session }: { session: Session }) {
  const user: ConferBotUser | undefined = session
    ? {
        id: session.id,
        name: session.name,
        email: session.email,
        hash: session.conferbotHash, // made on your server, see below
        metadata: { plan: 'pro' },
      }
    : undefined;

  return (
    <ConferBotProvider apiKey="conf_test_key" botId="YOUR_BOT_ID" user={user}>
      <ConferBotWidget />
    </ConferBotProvider>
  );
}

id is required; name, email, phone, hash and metadata are optional.

Identity verification

Without verification, any app (or anyone with a proxy) could claim any user id or email. Turn it on under Workspace settings, Team & security, Security, Identity verification, keep the secret on your server, and sign each user there with an HMAC-SHA256 of their id, hex-encoded:

// server.js - never ship the secret inside the app
const crypto = require('crypto');

function conferbotHash(userId) {
  return crypto
    .createHmac('sha256', process.env.CONFERBOT_IDENTITY_SECRET)
    .update(String(userId))
    .digest('hex');
}

// e.g. return it with your own /me endpoint after login:
// res.json({ id, name, email, conferbotHash: conferbotHash(id) });

A matching hash files the chat as verified and links the user's contacts; a missing or wrong hash makes the visitor unverified, or anonymous when Require verification is on. Verified users also see their own conversations from any device under "Your requests". The secret belongs in the same place as any other server credential; the general rules in chatbot security risks and prevention apply, and if you collect personal data in the chat, so does chatbot GDPR compliance.

Signing out on a shared device

Dropping user from the provider stops pushes for the old conversation. To also forget the conversation stored on the device, so the next person on that phone starts fresh, call clearPersistedData() and then resetConversation() from useConferBot() before you clear your own session.

When the web version of the same bot works and the app does not, compare against why a chat widget does not show on a website: the causes that are not platform-specific (an unpublished bot, a wrong id, a network block) are the same ones.

Building a chat screen in React Native is a weekend; building a support assistant people trust is not. The honest comparison is about what sits behind the screen.

The do-it-yourself route, briefly

If you go your own way, react-native-gifted-chat is the long-standing open-source chat UI. Its current releases expect react-native-reanimated, react-native-gesture-handler, react-native-safe-area-context and react-native-keyboard-controller as peer dependencies, and Expo projects install all of them with npx expo install. The core is small:

import React, { useCallback, useState } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';

export function DiyChat() {
  const [messages, setMessages] = useState([]);

  const onSend = useCallback(async (outgoing = []) => {
    setMessages((prev) => GiftedChat.append(prev, outgoing));
    // Call YOUR backend, which holds the model key and the prompt.
    const res = await fetch('https://api.example.com/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: outgoing[0].text }),
    });
    const { reply } = await res.json();
    setMessages((prev) =>
      GiftedChat.append(prev, [{ _id: Date.now(), text: reply, createdAt: new Date(), user: { _id: 'bot', name: 'Assistant' } }]),
    );
  }, []);

  return <GiftedChat messages={messages} onSend={onSend} user={{ _id: 'me' }} />;
}

The two rules that matter: never put a model API key in the app (anything in the bundle can be extracted), and treat everything the user types as untrusted input to the model. Prompt injection and chatbot security covers the second; choosing an LLM for your chatbot and RAG vs fine-tuning cover the decisions behind the endpoint. For the same build-versus-buy question on the web, see the React chatbot component guide, and what a chatbot really costs to implement puts numbers on the engineering side.

React Native projects exist on a spectrum from fully managed Expo to completely bare React Native CLI. Because the Conferbot SDK ships no native code of its own, it behaves the same everywhere - the only workflow differences come from the optional native peer dependencies and your push provider.

Expo Managed Workflow

The SDK works in Expo managed workflow without ejection. In Expo managed mode, the SDK operates through JavaScript and React Native's built-in APIs: full chat UI, flow engine, server-driven theming, hooks API, reactions, and read receipts. Install AsyncStorage with npx expo install @react-native-async-storage/async-storage to keep conversations across restarts, and npx expo install expo-av expo-file-system expo-font for the owner's sounds and fonts.

Expo Development Build

For teams using Expo with a development build (custom native code via expo-dev-client), nothing changes for the SDK itself - it is still plain JavaScript. What a dev build gives you is richer push handling through your own notification libraries (custom sounds, categories, background handlers); you still just pass the resulting FCM or APNs token to setPushToken(token, type).

Bare React Native Workflow

For bare React Native projects, the SDK installs with npm like any JS package - there is no SDK pod to link. After installing the optional native packages (AsyncStorage, react-native-svg), run cd ios && pod install; Android auto-linking handles the Android side. Push notifications typically use @react-native-firebase/messaging (an FCM token on both platforms) or the APNs device token, handed to the SDK. Expo modules (expo-av, expo-file-system, expo-font) in a bare app need the Expo modules runtime: run npx install-expo-modules@latest once.

Feature Comparison by Workflow

Ejecting Considerations

If you are currently on Expo managed workflow and considering ejecting for chatbot functionality, you do not need to. The Conferbot SDK provides a complete chat experience in managed mode. The only reason to consider a development build (not full ejection) is richer native push handling - custom notification sounds, categories, or background handlers - and even then, Expo's development builds provide these capabilities without the maintenance burden of a fully ejected project.

Migration Between Workflows

The SDK's API is identical across all workflows. If you start with Expo managed and later move to a development build or bare workflow, your integration code stays the same - no changes to imports, components, hooks, or event handlers. You can prototype in Expo, develop with a dev client, and ship a bare project without touching your chatbot integration code.

For the full installation guide across all workflows, see the React Native SDK repository on GitHub and the developer portal guide. For push notification setup specifics, review our mobile engagement guide.