Chative.IO Widget for React Native

Chative.IO Widget is a React Native component that provides an easy-to-use chat widget for your mobile applications. It allows you to integrate a customizable chat interface with minimal setup.

Features

• Customizable chat interface
• Easy to show/hide programmatically
• Supports custom header components
• Supports filling user information into live chat. (v0.5 or higher)
• Adjustable insets for different device sizes
• TypeScript support

Screenshot

Installation

npm install @chative.io/react-native-widget
# or
yarn add @chative.io/react-native-widget

This library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs.

Usage

Here's a basic example of how to use the ChativeWidget in your React Native application:

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ChativeWidget from '@chative.io/react-native-widget';

export default function App() {
  const widgetRef = useRef(null);

  const handleOpenChat = () => {
    widgetRef.current?.show();
  };

  const handleCloseChat = () => {
    // widgetRef.current?.hide();
  };

  const user = {
    user_id: 'UNIQUE_USER_ID',
     user: {
        email: '[email protected]', // Your user's email address
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Replace key and value with your custom field
    },
  }

  return (
    <View style={{ flex: 1 }}>
      <Button title="Open Chat" onPress={handleOpenChat} />
      <ChativeWidget
        ref={widgetRef}
        channelId="your-channel-id"
        user={user} // v0.5 or higher
        onClosed={() => console.log('Widget closed')}
        onLoaded={() => console.log('Widget loaded')}
        onNewMessage={(message) => console.log('New message:', message)}
        onError={(message) => console.log('Error', message)}
      />
    </View>
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | channelId | string | Yes | The ID of the chat channel | | user | ChativeWidgetUser | No | Information about the user, used for booting into live chat. | headerComponent | ReactElement | No | Custom header component | | containerStyle | ViewStyle | No | Custom style for the container | | insetTop | number | No | Top inset (default: 50 for iOS, 20 for Android) | | insetBottom | number | No | Bottom inset (default: 50 for iOS, 20 for Android) | | onClosed | () => void | No | Callback when the widget is closed | | onLoaded | () => void | No | Callback when the widget is loaded | | onNewMessage | () => void | No | Callback when a new message is received | | onError | (error:string) => void | No | Callback function triggered when an error occurs. |

Methods

The following methods are available via the ref:

• show(): Display the chat widget
• hide(): Hide the chat widget
• reload(): Reload the widget

Customization

You can customize the appearance of the widget by providing a custom header component and container style:

<ChativeWidget
  ref={widgetRef}
  channelId="your-channel-id"
  headerComponent={<YourCustomHeader />}
  containerStyle={{ backgroundColor: 'lightgray' }}
/>

TypeScript Support

This module includes TypeScript declarations. You can import types like this:

import ChativeWidget, { ChativeWidgetRef, ChativeWidgetUser } from '@chative.io/react-native-widget';

ChativeWidgetUser Interface

| Field | Type | Required | Description | |---------------|----------|----------|-------------| | user_id | string | Yes | A unique identifier for the user. This is used to track the user's session in the chat. | | user.email | string | No | The user's email address. Optional, but recommended for better user identification. | | user.first_name | string | No | The user's first name. Optional, useful for personalized interactions. | | user.last_name | string | No | The user's last name. Optional, useful for personalized interactions. | | user.phone | string | No | The user's phone number. Optional, can be used for follow-up contact. | | user.[key: string]: any | any | No | Any additional information about the user, represented as key-value pairs. This can be used for custom data. |

License

MIT License

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.