• Supported Domix AI version: 1.0.0+

Installation

Install the library using either yarn or npm like so:

yarn add domix-ai-react-native-widget

OR

npm install --save domix-ai-react-native-widget

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

For local package development, the /Example app is linked to the package source with file:.. and uses Example/metro.config.js. Start Expo with a clean cache after package changes:

cd Example
npm install
npm start -c

iOS Installation

If you're using React Native versions > 60.0, it's relatively straightforward.

cd ios && pod install

How to use

1. Create a website channel in Domix AI server.
2. Replace websiteToken.

import React, { useState } from 'react';

import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native';

import DomixAIWidget from 'domix-ai-react-native-widget';

const App = () => {
  const [showWidget, toggleWidget] = useState(false);
  const user = {
    identifier: '[email protected]',
    name: 'John Samuel',
    avatar_url: '',
    email: '[email protected]',
    identifier_hash: '',
  };
  const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' };
  const conversationCustomAttributes = { orderId: 1234, status: 'pending' };
  const websiteToken = 'WEBSITE_TOKEN';
  const baseUrl = 'https://chat.domix.ai';
  const locale = 'en';
  const colorScheme = 'dark';

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}>
          <Text style={styles.buttonText}>Open widget</Text>
        </TouchableOpacity>
      </View>
      {showWidget && (
        <DomixAIWidget
          websiteToken={websiteToken}
          locale={locale}
          baseUrl={baseUrl}
          closeModal={() => toggleWidget(false)}
          isModalVisible={showWidget}
          user={user}
          customAttributes={customAttributes}
          conversationCustomAttributes={conversationCustomAttributes}
          colorScheme={colorScheme}
          appName="My App Name"
          appVersion="1.0.0"
          onEvent={(eventName, data) => {
            console.log(eventName, data);
          }}
        />
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  button: {
    height: 48,
    marginTop: 32,
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: '#1F93FF',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#fff',
    justifyContent: 'center',
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    paddingLeft: 10,
    fontWeight: '600',
    fontSize: 16,
    paddingRight: 10,
  },
});

export default App;

You're done!

The whole example is in the /Example folder.

Props

Key Features

• Rich Media Support: Inline playback for Audio and Video files directly within the chat bubble.
• Attachments & File Sharing: Users can upload images, videos, and documents directly from their device (Gallery, Camera, or File System).
• Emoji Picker: Integrated emoji selector for more expressive conversations.
• Message Replies: Tap a message to reveal the reply button and keep the conversation context.
• End Conversation: Allows users to resolve conversations programmatically from the widget header (gated by server configuration).
• Presence Management: Real-time "Online" status updates and presence heartbeats to keep the dashboard synced with the user's activity.
• Dynamic Configuration: Automatically enables or disables features (attachments, emojis, etc.) based on your Domix AI inbox settings.
• White Labeling: Dynamically uses branding from your Domix AI configuration (Inbox Avatar, Logo, Website Name, and Brand Color).
• Navigation Control: Programmatically control whether users see the welcome screen or jump straight to messages.

Methods

You can use a reference to the DomixAIWidget component to call methods like sendMessage, setUser, and reset.

const widgetRef = useRef(null);

// To send a message
widgetRef.current.sendMessage('Hello from React Native!');

// To set user information
widgetRef.current.setUser('user-identifier-key', {
  email: '[email protected]',
  name: 'John Samuel',
  avatar_url: '',
  phone_number: '+1234567890',
});

// Or pass a full user object that already includes identifier
widgetRef.current.setUser({
  identifier: 'user-identifier-key',
  email: '[email protected]',
  name: 'John Samuel',
});

// To set custom attributes
widgetRef.current.setCustomAttributes({ accountId: 1, status: 'active' });

// To set conversation custom attributes
widgetRef.current.setConversationCustomAttributes({ orderId: 1234 });

// To close the widget modal
widgetRef.current.closeModal();

// To reset the session
widgetRef.current.reset();

// Usage in component
<DomixAIWidget
  ref={widgetRef}
  {...props}
/>

Reset behavior

• reset() clears the current conversation session and forces the embedded widget to reload.
• If you want the next open to be anonymous, render the widget with user={null} after reset.
• If you want the next open to use another contact, update the user prop or call setUser(...) before reopening.

Feedback & Contributing

Feel free to send us feedback.

Domix AI © 2026, Domix AI - Released under the MIT License.