React Native Usage

The Lovina Chat SDK provides a LovinaChatWidget component that renders a WebView-based chat widget with native event bridging.

Basic Usage

import React from "react";
import { View } from "react-native";
import { LovinaChatWidget } from "@lovina/react-native-chat-sdk";

function ChatScreen() {
	return (
		<View style={{ flex: 1 }}>
			<LovinaChatWidget
				config={{
					websiteToken: "your-website-token",
					baseUrl: "https://chat.ailovina.com",
				}}
				onEvent={(event) => {
					console.log("Chat event:", event);
				}}
			/>
		</View>
	);
}

Props

Prop	Type	Required	Description
config	LovinaChatConfig	Yes	Widget configuration object. See Configuration.
onEvent	(event: ChatEvent) => void	No	Callback for chat events emitted by the widget.
style	StyleProp<ViewStyle>	No	Additional styles applied to the container View.

Handling Events

The onEvent callback receives typed ChatEvent objects:

<LovinaChatWidget
	config={config}
	onEvent={(event) => {
		switch (event.type) {
			case "loaded":
				console.log("Widget ready, token:", event.authToken);
				break;
			case "messageReceived":
				console.log("New message:", event.message);
				break;
			case "unreadCountChanged":
				setBadgeCount(event.count);
				break;
			case "closed":
				navigation.goBack();
				break;
			case "error":
				console.error(`Error [${event.code}]: ${event.message}`);
				break;
		}
	}}
/>

Ref Methods

Use a ref to access imperative methods on the widget:

import React, { useRef } from "react";
import { LovinaChatWidget } from "@lovina/react-native-chat-sdk";
import type { LovinaChatWidgetRef } from "@lovina/react-native-chat-sdk";

function ChatScreen() {
	const chatRef = useRef<LovinaChatWidgetRef>(null);

	const identifyUser = () => {
		chatRef.current?.setUser("user-123", {
			name: "Jane Doe",
			email: "jane@example.com",
		});
	};

	return (
		<LovinaChatWidget
			ref={chatRef}
			config={{
				websiteToken: "your-token",
				baseUrl: "https://chat.ailovina.com",
			}}
		/>
	);
}

Available Ref Methods

Method	Signature	Description
setUser	(identifier: string, user: Partial<LovinaChatUser>) => void	Set or update the identified user at runtime.
setLocale	(locale: string) => void	Change the widget locale dynamically.
setColorScheme	(mode: 'light' | 'dark' | 'auto') => void	Change the color scheme at runtime.
toggle	(show: boolean) => void	Toggle the widget open or closed.
reset	() => void	Clear the session (cookies) and reload the widget.
reload	() => void	Reload the widget WebView.

User Identification

Pass user information in the config to associate messages with a known contact:

<LovinaChatWidget
	config={{
		websiteToken: "your-token",
		baseUrl: "https://chat.ailovina.com",
		user: {
			identifier: "user-12345",
			name: "Jane Doe",
			email: "jane@example.com",
			avatarUrl: "https://example.com/avatar.png",
			phoneNumber: "+6281234567890",
			customAttributes: {
				plan: "premium",
				signup_date: "2025-01-15",
			},
		},
	}}
/>

Common Patterns

Navigation: Push chat screen, go back on close

// ChatScreen.tsx
import { useNavigation } from "@react-navigation/native";

function ChatScreen() {
	const navigation = useNavigation();

	return (
		<LovinaChatWidget
			config={config}
			onEvent={(event) => {
				if (event.type === "closed") {
					navigation.goBack();
				}
			}}
		/>
	);
}

// HomeScreen.tsx
<Button title="Chat" onPress={() => navigation.navigate("Chat")} />;

Modal: Present and dismiss on close

function App() {
	const [showChat, setShowChat] = useState(false);

	return (
		<>
			<Button title="Chat" onPress={() => setShowChat(true)} />
			<Modal visible={showChat} animationType="slide">
				<LovinaChatWidget
					config={config}
					onEvent={(event) => {
						if (event.type === "closed") setShowChat(false);
					}}
				/>
			</Modal>
		</>
	);
}

Unread badge

const [unread, setUnread] = useState(0);

<LovinaChatWidget
	config={config}
	onEvent={(event) => {
		if (event.type === "unreadCountChanged") {
			setUnread(event.count);
		}
	}}
/>;

{
	unread > 0 && <Badge count={unread} />;
}