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: 'acme@example.com', // 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

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

License

MIT License

Support

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