Chative Widget for React Native

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.

Features

• Customizable chat interface
• Easy to show/hide programmatically
• Supports custom header components
• 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();
  };

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

Props

Prop	Type	Required	Description
channelId	string	Yes	The ID of the chat channel
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

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 } from '@chative.io/react-native-widget';

License

MIT License

Support

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