React Native Configuration

LovinaChatConfig

The LovinaChatConfig interface defines all configuration options for the chat widget.

const config: LovinaChatConfig = {
  websiteToken: 'your-website-token',
  baseUrl: 'https://chat.lovina.app',
  locale: 'en',
  colorScheme: 'auto',
  user: undefined,
  customColor: undefined,
};

Fields

Parameter	Type	Default	Required	Description
websiteToken	string	--	Yes	Your Lovina website channel token. Obtained from the Lovina dashboard.
baseUrl	string	--	Yes	Base URL of your Lovina instance (e.g., https://chat.lovina.app).
locale	string	"id"	No	Widget locale code. Supported values include "id", "en", "ar".
colorScheme	'light' | 'dark' | 'auto'	"auto"	No	Color scheme for the widget. "auto" follows the system theme.
user	LovinaChatUser	undefined	No	Pre-identified user to associate with the conversation. See below.
customColor	string	undefined	No	Hex color string for header and bubble theming (e.g., "#6366F1").

LovinaChatUser

The LovinaChatUser interface represents a pre-identified user.

Parameter	Type	Required	Description
identifier	string	Yes	Unique user ID in your system.
name	string	No	Display name.
email	string	No	Email address.
avatarUrl	string	No	URL to the user's avatar image.
identifierHash	string	No	HMAC hash for identity verification. Generate server-side.
phoneNumber	string	No	Phone number (E.164 format recommended).
customAttributes	Record<string, unknown>	No	Arbitrary key-value metadata attached to the contact.

ChatEvent

The ChatEvent type is a discriminated union. Use the type field to determine the event kind.

type ChatEvent =
  | { type: 'loaded'; authToken?: string }
  | { type: 'messageReceived'; message: Record<string, unknown> }
  | { type: 'unreadCountChanged'; count: number }
  | { type: 'closed'; reason?: string }
  | { type: 'error'; code: string; message: string };

LovinaChatWidgetRef

Imperative methods exposed via React.forwardRef:

interface LovinaChatWidgetRef {
  setUser: (identifier: string, user: Partial<Omit<LovinaChatUser, 'identifier'>>) => void;
  setLocale: (locale: string) => void;
  setColorScheme: (mode: 'light' | 'dark' | 'auto') => void;
  toggle: (show: boolean) => void;
  reset: () => void;
  reload: () => void;
}

Example: Full Configuration

import { LovinaChatWidget } from '@lovina/react-native-chat-sdk';

<LovinaChatWidget
  config={{
    websiteToken: 'ws-tok-abc123',
    baseUrl: 'https://chat.lovina.app',
    locale: 'en',
    colorScheme: 'dark',
    customColor: '#6366F1',
    user: {
      identifier: 'user-12345',
      name: 'Jane Doe',
      email: 'jane@example.com',
      avatarUrl: 'https://example.com/avatar.png',
      identifierHash: 'hmac-sha256-hash',
      phoneNumber: '+6281234567890',
      customAttributes: {
        plan: 'premium',
        signup_date: '2025-01-15',
      },
    },
  }}
  onEvent={(event) => console.log(event)}
/>