Skip to content

React Native SDK

Official React Native SDK with built-in React hooks for easy integration.

Requirements

React Native 0.70+
React 18+

Installation

npm install @uchara/react-native-sdk
# or
yarn add @uchara/react-native-sdk

Using the `useVisitorSDK` Hook

The fastest way to add chat to your app:

import React, { useState } from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';
import { useVisitorSDK } from '@uchara/react-native-sdk';

export default function ChatScreen() {
  const {
    isInitialized,
    activeConversation,
    messages,
    sendMessage,
    startConversation,
  } = useVisitorSDK({
    apiURL: 'https://api.uchara.com',
    widgetToken: 'wgt_your_token',
    autoInit: true,
  });

  const [input, setInput] = useState('');

  const handleSend = async () => {
    if (!input.trim()) return;
    try {
      if (!activeConversation) {
        await startConversation(input);
      } else {
        await sendMessage(input);
      }
      setInput('');
    } catch (e) {
      console.error('Failed to send:', e);
    }
  };

  if (!isInitialized) return <Text>Loading…</Text>;

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={messages}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={{ padding: 10 }}>
            <Text style={{ fontWeight: 'bold' }}>{item.sender_type}</Text>
            <Text>{item.content}</Text>
          </View>
        )}
      />
      <View style={{ flexDirection: 'row', padding: 10 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, padding: 10 }}
          value={input}
          onChangeText={setInput}
          placeholder="Type a message…"
        />
        <Button title="Send" onPress={handleSend} />
      </View>
    </View>
  );
}

Using the SDK Directly

If you need lower-level control:

import { VisitorSDK } from '@uchara/react-native-sdk';

const sdk = new VisitorSDK({
  apiURL: 'https://api.uchara.com',
  widgetToken: 'wgt_your_token',
});

await sdk.init();
const conv = await sdk.startConversation({ message: 'Hello!' });
await sdk.sendMessage(conv.id, { content: 'How can I help?' });

sdk.on('message.new', (event) => {
  console.log('New message:', event.payload);
});

Resources