m # @helioai/rn

HelioAI React Native SDK — conversational commerce widget with Add to Cart bridge.

Installation

npm install @helioai/rn react-native-webview

# iOS
cd ios && pod install

Quick Start

import { HelioChat } from '@helioai/rn';

export default function ChatScreen() {
  return (
    <HelioChat
      config={{
        appId: '69a92ad76dcbf2da868e0f9b',
        phone: '+1234567890',
        theme: 'auto',
      }}
      onAddToCart={(item) => {
        console.log('Added to cart:', item);
      }}
      onRedirect={({ url, target }) => {
        if (target === 'internal') {
          navigation.navigate('Product', { url });
          return true;
        }
        return false;
      }}
    />
  );
}

Hooks

import { useHelioCart, useHelio } from '@helioai/rn';

// Listen for Add to Cart events anywhere
useHelioCart((item) => {
  dispatch({ type: 'ADD_ITEM', payload: item });
});

// Send commands to the widget
const { send } = useHelio();
send('CHAT_OPEN', {});

API

<HelioChat />

| Prop | Type | Description | |------|------|-------------| | config | HelioConfig | Required. App ID, customer phone, and optional theme. | | style | object | Optional. Custom styles for the WebView container. | | onAddToCart | (payload) => void | Called when user adds item to cart via chat. | | onRedirect | (payload) => boolean | Called on link clicks. Return true to handle internally. |

HelioConfig

| Field | Type | Description | |-------|------|-------------| | appId | string | Your HelioAI app ID | | phone | string | Customer phone number | | theme | 'light' \| 'dark' \| 'auto' | Optional widget theme |

License

MIT