Chative.IO Widget SDK for React Native

Introduction

Chative 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.

Installation

To install the Chative Widget SDK for React Native, run the following command:

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.

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

...

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
  },
}

<ChativeWidget
  ref={widgetRef}
  user={user} // require v0.5 or higher
  channelId="your-channel-id"
  headerComponent={<YourCustomHeader />}
  containerStyle={{ backgroundColor: 'lightgray' }}
/>

Props

Prop	Type	Required	Description
channelId	string	Yes	The ID of the chat channel
user (v0.5 or higher)	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

Methods

The following methods are available via the ref:

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

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}
        user={user} // require v0.5 or higher
        channelId="your-channel-id"
        onClosed={() => console.log('Widget closed')}
        onLoaded={() => console.log('Widget loaded')}
        onNewMessage={(message) => console.log('New message:', message)}
      />
    </View>
  );
}

If you have any concerns, please feel free to contact us through live chat. For more details on how we have helped our customers grow their business, you can view our blogs or join our Discord community to learn and share new things 😊