@botaplace/react-native-chat

Embeddable AI chat widget for React Native apps. Drop it into any Expo or bare React Native project.

Install

npm install @botaplace/react-native-chat

No native linking required. Works with Expo out of the box.

Quick Start

import { BotaChat } from '@botaplace/react-native-chat';

export default function App() {
  return (
    <BotaChat
      agentId="your-agent-id"
      apiBase="https://your-backend.com"
    />
  );
}

That's it! A floating action button (FAB) appears in the bottom-right. Tapping it opens a full-screen chat.

Customization

Theme

<BotaChat
  agentId="your-agent-id"
  apiBase="https://your-backend.com"
  theme={{
    primaryColor: '#E91E63',
    headerBackground: '#1a1a2e',
    userBubbleColor: '#1a1a2e',
    agentBubbleColor: '#f0f0ff',
    borderRadius: 24,
    fontFamily: 'Inter',
  }}
/>

Strings

<BotaChat
  agentId="your-agent-id"
  apiBase="https://your-backend.com"
  strings={{
    headerTitle: 'Support',
    headerSubtitle: 'We typically reply in minutes',
    inputPlaceholder: 'Ask anything...',
    welcomeMessage: 'Hey there! What can we help with?',
  }}
/>

Display Modes

// FAB mode (default) — floating button that opens modal
<BotaChat mode="fab" ... />

// Fullscreen modal — control visibility yourself
<BotaChat mode="fullscreen" visible={showChat} onClose={() => setShowChat(false)} ... />

// Inline — renders directly in your layout
<BotaChat mode="inline" visible={true} ... />

Agent Avatar

<BotaChat
  agentAvatar="https://example.com/avatar.png"
  ...
/>

Headless Mode (Build Your Own UI)

Use just the chat engine without any pre-built UI:

import { useBotaChat } from '@botaplace/react-native-chat';

function MyCustomChat() {
  const { messages, streaming, connected, typing, send } = useBotaChat({
    agentId: 'your-agent-id',
    apiBase: 'https://your-backend.com',
  });

  return (
    <View>
      {messages.map(msg => (
        <Text key={msg.id}>
          {msg.role}: {msg.content}
        </Text>
      ))}
      {streaming && <Text>AI: {streaming}</Text>}
      <TextInput onSubmitEditing={(e) => send(e.nativeEvent.text)} />
    </View>
  );
}

Individual Components

Mix and match components for custom layouts:

import {
  ChatScreen,
  Header,
  InputBar,
  MessageBubble,
  BotaFAB,
  useBotaChat,
  mergeTheme,
  mergeStrings,
} from '@botaplace/react-native-chat';

Theme Reference

| Property | Default | Description | |---|---|---| | primaryColor | #7C3AED | Send button, accents | | backgroundColor | #FFFFFF | Chat background | | headerBackground | #141724 | Header bar color | | headerTextColor | #FFFFFF | Header text | | userBubbleColor | #141724 | User message bubble | | userBubbleTextColor | #FFFFFF | User message text | | agentBubbleColor | #F4F4F5 | Agent message bubble | | agentBubbleTextColor | #3F3F46 | Agent message text | | inputBackground | #FFFFFF | Input field bg | | inputBorderColor | #E4E4E7 | Input border | | fabColor | #141724 | FAB button color | | fabIconColor | #FFFFFF | FAB icon color | | fontFamily | System | Custom font family | | borderRadius | 20 | Global border radius |

Props

| Prop | Type | Default | Description | |---|---|---|---| | agentId | string | required | Your agent ID | | apiBase | string | required | Backend API URL | | teamId | string | — | Team routing ID | | secret | string | — | Private agent secret | | theme | Partial<BotaTheme> | — | Theme overrides | | strings | Partial<BotaStrings> | — | String overrides | | agentAvatar | string | — | Avatar image URL | | mode | 'fab' \| 'fullscreen' \| 'inline' | 'fab' | Display mode | | visible | boolean | — | Control visibility | | onMessage | (msg) => void | — | Message callback | | onError | (err) => void | — | Error callback | | onOpen | () => void | — | Chat opened | | onClose | () => void | — | Chat closed |

License

MIT