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.lovina.app',
        }}
        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.lovina.app',
      }}
    />
  );
}

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.lovina.app',
    user: {
      identifier: 'user-12345',
      name: 'Jane Doe',
      email: 'jane@example.com',
      avatarUrl: 'https://example.com/avatar.png',
      identifierHash: 'hmac-hash-for-verification',
      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} />}