@solveoai/react-native

React Native chat UI SDK for SolveoAI — AI chat, live agent escalation, attachments, voice notes, lead forms, bookings, and rich e-commerce message cards.

Works with Expo (managed + dev builds) and React Native CLI (bare).

Depends on @solveoai/chat-client.

Install

Expo

pnpm add @solveoai/chat-client @solveoai/react-native \
  @react-native-async-storage/async-storage \
  expo-image-picker expo-document-picker expo-av \
  expo-notifications socket.io-client \
  react-native-markdown-display

Add plugins to app.json:

{
  "expo": {
    "plugins": [
      "expo-notifications",
      "expo-image-picker",
      "expo-document-picker",
      "expo-av"
    ]
  }
}

React Native CLI (bare)

pnpm add @solveoai/chat-client @solveoai/react-native \
  @react-native-async-storage/async-storage \
  react-native-image-picker react-native-document-picker \
  react-native-audio-recorder-player \
  @react-native-firebase/app @react-native-firebase/messaging \
  socket.io-client react-native-markdown-display

Then run pod install in ios/.

Most peers are optional — install only what you use (attachments, voice notes, push).

Quick start

import React from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { SolveoClient } from "@solveoai/chat-client";
import { SolveoProvider, SolveoChatScreen } from "@solveoai/react-native";

const client = new SolveoClient({
  widgetId: "YOUR_WIDGET_ID", // from the SolveoAI dashboard → Deploy / Widgets
  persistence: {
    adapter: AsyncStorage,
    keyPrefix: "myapp_",
  },
});

export default function App() {
  return (
    <SolveoProvider client={client} theme={{ mode: "auto" }}>
      <SolveoChatScreen
        showHeader
        showHistory
        enableAttachments
        enableVoiceNotes
      />
    </SolveoProvider>
  );
}

Floating overlay (FAB)

import { SolveoProvider, SolveoOverlay } from "@solveoai/react-native";

export default function App() {
  return (
    <SolveoProvider client={client}>
      {/* Your existing app */}
      <SolveoOverlay position="bottom-right" buttonIcon="💬" />
    </SolveoProvider>
  );
}

enableVoiceNotes is for in-chat audio messages, not telephony / phone calling.

Hooks

All hooks require <SolveoProvider>:

| Hook | Purpose | | --- | --- | | useChat() | messages, typing, sendMessage, feedback | | useConversation() | conversation id, history, start/load | | useAttachments() | image/document pickers + upload | | useVoiceRecorder() | record / stop voice notes | | useConnection() | connection status | | useTheme() | resolved theme colors | | useLeadForm() | lead form config + submit | | useBooking() | availability + bookings | | usePushNotifications() | Expo / Firebase device registration |

Push (Expo)

import { useEffect } from "react";
import { usePushNotifications } from "@solveoai/react-native";

function PushRegistrar() {
  const { isSupported, registerExpo } = usePushNotifications();

  useEffect(() => {
    if (!isSupported) return;
    void registerExpo();
  }, [isSupported, registerExpo]);

  return null;
}

Use a dev build / physical device for push — Expo Go and simulators are limited.

Exports

• Screens: SolveoChatScreen, SolveoOverlay
• Provider: SolveoProvider, useSolveoContext
• Components: ChatHeader, MessageList, MessageBubble, InputBar, cards, …
• Theme: resolveTheme, LIGHT_COLORS, DARK_COLORS

Links

• npm: https://www.npmjs.com/package/@solveoai/react-native
• Headless client: https://www.npmjs.com/package/@solveoai/chat-client
• Product docs: https://solveoai.io/docs/react-native-sdk
• Changelog: see the SDK workspace CHANGELOG.md
• License: MIT