@contegris/rn-intellicon-chat-sdk-cli

Full-featured chat SDK for React Native CLI (bare workflow)
Complete media support without Expo dependencies. Perfect for React Native CLI projects.

Overview

The CLI adapter provides a production-ready chat interface with full media capabilities using React Native community modules. Designed specifically for bare React Native CLI projects (no Expo dependencies required).

When to Use This Package

✅ Use CLI adapter if:

• You're using React Native CLI (bare workflow)
• You need media attachments (images, videos, audio, documents)
• You don't want to install Expo dependencies
• You prefer community-maintained native modules

❌ Don't use CLI adapter if:

• You're using Expo managed workflow → Use @contegris/rn-intellicon-chat-sdk-expo
• You only need text messaging → Use @contegris/rn-intellicon-chat-sdk

Features

Media Support

• ✅ Audio recording with basic waveform UI
• ✅ Audio playback with seek controls and reliable completion detection via AVAudioPlayerDelegate
• ✅ Image attachments from camera or gallery (react-native-image-picker)
• ✅ Video attachments with thumbnail preview (react-native-video)
• ✅ Document picker for any file type (@react-native-documents/picker)
• ✅ File caching and downloads (react-native-fs)
• ✅ Upload progress indicators with cancel/retry
• ✅ Permission handling (react-native-permissions)

Native Module Reliability

• ✅ Automatic iOS native module linking — react-native.config.js properly configured with ios.podspecPath for seamless auto-linking
• ✅ Graceful fallback on missing native modules — user-friendly Alert instead of hard crash if a native module is unavailable

Note: Unlike the Expo adapter, the CLI adapter does NOT include an emoji keyboard. Use a third-party package if needed.

Core Features (Inherited from Core Package)

• ✅ Real-time text messaging via Socket.IO
• ✅ Automatic reconnection and background sync
• ✅ Offline message queueing
• ✅ Optimistic UI updates
• ✅ Paginated message history
• ✅ Full theme customization
• ✅ TypeScript support
• ✅ Connection status monitoring

Installation

Step 1: Install the package

# npm
npm install @contegris/rn-intellicon-chat-sdk-cli

# yarn
yarn add @contegris/rn-intellicon-chat-sdk-cli

# pnpm
pnpm add @contegris/rn-intellicon-chat-sdk-cli

Step 2: Install peer dependencies

Note: @contegris/rn-intellicon-chat-sdk (the core package) is automatically installed as a dependency — you do not need to add it manually.

# npm
npm install \
  @react-native-async-storage/async-storage \
  react-native-safe-area-context \
  react-native-svg \
  lucide-react-native \
  react-native-image-picker \
  react-native-video \
  @react-native-documents/picker \
  react-native-fs \
  react-native-permissions

# yarn
yarn add \
  @react-native-async-storage/async-storage \
  react-native-safe-area-context \
  react-native-svg \
  lucide-react-native \
  react-native-image-picker \
  react-native-video \
  @react-native-documents/picker \
  react-native-fs \
  react-native-permissions

# pnpm
pnpm add \
  @react-native-async-storage/async-storage \
  react-native-safe-area-context \
  react-native-svg \
  lucide-react-native \
  react-native-image-picker \
  react-native-video \
  @react-native-documents/picker \
  react-native-fs \
  react-native-permissions

Step 3: iOS - Install CocoaPods dependencies

cd ios && pod install && cd ..

Or use the shorthand:

npx pod-install ios

Step 4: iOS - Configure Info.plist

Add permission descriptions to ios/YourApp/Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access to record voice messages.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photo library access to send images in chat.</string>

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs photo library access to save images.</string>

<key>NSCameraUsageDescription</key>
<string>This app needs camera access to take photos for chat.</string>

Step 5: Android - Configure permissions

Verify android/app/src/main/AndroidManifest.xml contains:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

<!-- For Android 13+ (API 33+) -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

<!-- For Android 12 and below -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Step 6: Android - Configure SDK location

Create android/local.properties if it doesn't exist:

Windows:

sdk.dir=C:\\Users\\YourUsername\\AppData\\Local\\Android\\Sdk

macOS/Linux:

sdk.dir=/Users/YourUsername/Library/Android/sdk

Step 7: Request runtime permissions (Android)

The SDK does NOT automatically request permissions. You must handle this:

import { PermissionsAndroid, Platform } from 'react-native';

async function requestPermissions() {
  if (Platform.OS === 'android') {
    await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
      PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
    ]);
  }
}

// Call before rendering Chat
requestPermissions();

Or use react-native-permissions for unified iOS/Android handling:

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';

async function requestPermissions() {
  if (Platform.OS === 'ios') {
    await request(PERMISSIONS.IOS.CAMERA);
    await request(PERMISSIONS.IOS.MICROPHONE);
    await request(PERMISSIONS.IOS.PHOTO_LIBRARY);
  } else {
    await request(PERMISSIONS.ANDROID.CAMERA);
    await request(PERMISSIONS.ANDROID.RECORD_AUDIO);
    await request(PERMISSIONS.ANDROID.READ_MEDIA_IMAGES);
  }
}

Step 8: Rebuild your app

# iOS
npx react-native run-ios

# Android
npx react-native run-android

Quick Start

Minimal Example

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { Chat } from '@contegris/rn-intellicon-chat-sdk-cli';
import type { User, Config } from '@contegris/rn-intellicon-chat-sdk';

const user: User = {
  participantId: 'user_12345',
  name: 'Jane Doe',
};

const config: Config = {
  baseUrl: 'https://your-intellicon-server.com',
  appId: 'your_app_id',
};

export default function ChatScreen() {
  return (
      <Chat
        user={user}
        config={config}
        onFeedbackSubmit={() => {
          // Called when user submits the post-conversation rating
          // e.g. navigation.goBack()
        }}
      />
  );
}

Configuration

User Object

interface User {
  participantId: string;  // Unique user ID (required)
  name: string;           // Display name (required)
  fcmToken?: string;      // Optional FCM token for push notifications
}

Config Object

interface Config {
  baseUrl: string;        // Intellicon server URL (required)
  appId: string;          // App ID from Intellicon dashboard (required)
  title?: string;         // Chat header title (default: 'Chat')
  history?: {
    show: boolean;
    view?: 'inSingleView' | 'listView';
  };
}

Theming

Customize every aspect of the UI using the ChatTheme interface. All properties are optional and fall back to DEFAULT_CHAT_THEME.

Complete Theme Reference

import { Chat, type ChatTheme } from '@contegris/rn-intellicon-chat-sdk';

const theme: ChatTheme = {
  // ─── Global Font ────────────────────────────────────────────────────────
  fontFamily: 'Inter',              // Default: 'Outfit' | null for system font
  
  // ─── Background ─────────────────────────────────────────────────────────
  backgroundColor: '#0F172A',       // Solid fallback color
  backgroundImage: 'https://...',   // Wallpaper URI (local or remote)
  backgroundGradientColors: ['#1E293B', '#0F172A'], // ≥2 stops (overrides image/bg)
  backgroundGradientDirection: 'diagonal', // 'horizontal' | 'vertical' | 'diagonal'
  backgroundOverlay: 'rgba(0,0,0,0.2)', // Semi-transparent tint layer
  
  // ─── Loading & Error States ─────────────────────────────────────────────
  loaderColor: '#60A5FA',
  loaderSize: 'large',              // 'small' | 'large'
  LoadingComponent: MyCustomLoader, // Replace entire loading screen
  ErrorComponent: MyErrorScreen,    // Replace entire error screen
  errorTextStyle: { color: '#EF4444', fontSize: 15 },
  errorContainerStyle: { backgroundColor: '#0F172A' },
  
  // ─── Layout ─────────────────────────────────────────────────────────────
  containerStyle: { flex: 1 },     // SafeAreaView style
  listContentStyle: { flexGrow: 1 }, // FlatList contentContainerStyle
  listPaddingVertical: 12,         // Message list vertical padding
  listPaddingHorizontal: 0,        // Message list horizontal padding
  
  // ─── Pagination (Load More) ─────────────────────────────────────────────
  loadMoreThreshold: 0.15,         // FlatList onEndReachedThreshold (0–1)
  loadMoreLoaderColor: '#60A5FA',
  showLoadMoreSpinner: true,
  
  // ─── AppBar ─────────────────────────────────────────────────────────────
  appBar: {
    enabled: true,                 // Show/hide AppBar
    bgColor: '#1E293B',
    gradientColors: ['#1E3A8A', '#3B82F6'], // Overrides bgColor
    gradientDirection: 'horizontal',
    titleStyle: { color: '#F1F5F9', fontSize: 18, fontWeight: '700' },
    iconColor: '#60A5FA',
    centerTitle: false,
  },
  
  // ─── Message Bubbles ────────────────────────────────────────────────────
  bubbleStyle: {
    agent: {
      bgColor: '#334155',
      textStyle: { color: '#F1F5F9', fontSize: 14 },
      audioMessage: {
        sliderColor: '#60A5FA',
        inactiveColor: '#475569',
        playPauseIconColor: '#60A5FA',
        downloadIconColor: '#60A5FA',
        durationStyle: { color: '#94A3B8', fontSize: 12 },
      },
      videoMessage: {
        playButtonColor: '#60A5FA',
      },
      documentMessage: {
        downloadIconColor: '#60A5FA',
        copyIconColor: '#94A3B8',
        attachmentIconColor: '#CBD5E1',
        textStyle: { color: '#F1F5F9', fontSize: 13, fontWeight: '600' },
      },
    },
    visitor: {
      bgColor: '#2563EB',
      textStyle: { color: '#FFFFFF', fontSize: 14 },
      audioMessage: {
        sliderColor: '#FFFFFF',
        inactiveColor: '#93C5FD',
        playPauseIconColor: '#FFFFFF',
        downloadIconColor: '#FFFFFF',
        durationStyle: { color: '#DBEAFE', fontSize: 12 },
      },
      videoMessage: {
        playButtonColor: '#FFFFFF',
      },
      documentMessage: {
        downloadIconColor: '#FFFFFF',
        copyIconColor: '#DBEAFE',
        attachmentIconColor: '#EFF6FF',
        textStyle: { color: '#FFFFFF', fontSize: 13, fontWeight: '600' },
      },
    },
  },
  
  // ─── Date Separator ─────────────────────────────────────────────────────
  dateSeparator: {
    containerStyle: {
      alignSelf: 'center',
      paddingHorizontal: 12,
      paddingVertical: 4,
      borderRadius: 12,
      backgroundColor: 'rgba(30,41,59,0.85)',
    },
    textStyle: { color: '#94A3B8', fontSize: 12, fontWeight: '500' },
  },
  
  // ─── Message Input Bar ──────────────────────────────────────────────────
  messageInput: {
    bgColor: '#1E293B',
    inputContainerStyle: { borderRadius: 20 },
    hintStyle: { color: '#64748B', fontSize: 14, fontStyle: 'italic' },
    messageTextStyle: { color: '#F8FAFC', fontSize: 14 },
    emojiIconColor: '#64748B',
    attachmentIconColor: '#64748B',
    attachmentModalBgColor: '#334155',
    micInactiveIconColor: '#64748B',
    micActiveIconColor: '#EF4444',
    micSendBgColor: '#2563EB',
    sendIconColor: '#FFFFFF',
    sendVoiceMessageIconColor: '#60A5FA',
    deleteVoiceMessageIconColor: '#EF4444',
  },
  
  // ─── Feedback / Rating Widget ───────────────────────────────────────────
  feedback: {
    containerStyle: { backgroundColor: '#334155' },
    activeColor: '#60A5FA',
    inactiveColor: '#475569',
    textActiveColor: '#FFFFFF',
    textInactiveColor: '#94A3B8',
  },
};

<Chat user={user} config={config} theme={theme} />

Quick Start Examples

Minimal Theme (Dark Mode)

const theme: ChatTheme = {
  fontFamily: 'Inter',
  backgroundColor: '#0F172A',
  appBar: { bgColor: '#1E293B', iconColor: '#60A5FA' },
};

Light Mode

const theme: ChatTheme = {
  backgroundColor: '#FFFFFF',
  appBar: {
    bgColor: '#F8FAFC',
    titleStyle: { color: '#0F172A' },
    iconColor: '#2563EB',
  },
  bubbleStyle: {
    agent: { bgColor: '#F1F5F9', textStyle: { color: '#0F172A' } },
    visitor: { bgColor: '#2563EB', textStyle: { color: '#FFFFFF' } },
  },
  messageInput: { bgColor: '#F8FAFC', sendIconColor: '#2563EB' },
};

Gradient Background

const theme: ChatTheme = {
  backgroundGradientColors: ['#1E3A8A', '#3B0764', '#BE123C'],
  backgroundGradientDirection: 'diagonal',
  backgroundOverlay: 'rgba(0,0,0,0.3)',
};

For the default theme definition, see theme.types.ts.

Media Features

Audio Recording

Tap and hold the microphone button to record. Release to send.

Features:

• Basic waveform visualization
• Recording duration counter
• Cancel or send controls

Permissions required:

• iOS: NSMicrophoneUsageDescription in Info.plist
• Android: RECORD_AUDIO permission (must request at runtime)

Image/Video Attachments

Tap the attachment button to choose:

• 📷 Camera — Take a photo or video
• 🖼️ Gallery — Choose existing media

Features:

• Image preview in message bubble
• Video thumbnail (tap to open in external player)
• Upload progress indicators

Permissions required:

• iOS: NSCameraUsageDescription, NSPhotoLibraryUsageDescription
• Android: CAMERA, READ_MEDIA_IMAGES, READ_MEDIA_VIDEO

Note: Unlike the Expo adapter, videos open in the device's default player (not in-app playback).

Document Attachments

Choose any file type from device storage.

Features:

• File name and icon display
• Download/open controls
• Progress indicators

File size limits:

• Images: 10 MB
• Videos: 50 MB
• Audio: 20 MB
• Documents: 25 MB

Troubleshooting

Installation Issues

❌ Error: "Unable to resolve module react-native-image-picker"

Cause: Missing peer dependency.

Fix:

npm install react-native-image-picker react-native-video @react-native-documents/picker react-native-fs react-native-permissions

❌ Error: "Invariant Violation: Native module cannot be null"

Cause: Native modules not linked.

Fix:

cd ios && pod install && cd ..
npx react-native run-ios

❌ iOS build fails with "Undefined symbol: _RNCAsyncStorage"

Cause: CocoaPods not installed or outdated.

Fix:

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..
npx react-native run-ios

❌ Android build fails with "SDK location not found"

Cause: Missing android/local.properties.

Fix: Create android/local.properties:

sdk.dir=C:\\Users\\YourUsername\\AppData\\Local\\Android\\Sdk

❌ Android build fails with "Duplicate class androidx.lifecycle.ViewModelLazy"

Cause: Dependency version conflict.

Fix: Clear Gradle cache:

cd android
./gradlew clean
cd ..
npx react-native run-android

❌ Error: "com.android.builder.testing.api.DeviceException: No connected devices!"

Cause: No emulator or physical device connected.

Fix:

# Start an emulator
emulator -avd Pixel_5_API_33 -netdelay none -netspeed full

# Or list connected devices
adb devices

Runtime Issues

❌ Audio recording not working on iOS

Cause: Missing microphone permission in Info.plist.

Fix: Add to ios/YourApp/Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access to record voice messages.</string>

Then rebuild:

npx react-native run-ios

❌ Camera not opening on Android

Cause: Permission not requested at runtime.

Fix:

import { PermissionsAndroid, Platform } from 'react-native';

useEffect(() => {
  if (Platform.OS === 'android') {
    PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA);
  }
}, []);

❌ Image picker crashes on Android 13

Cause: Using legacy READ_EXTERNAL_STORAGE permission on Android 13+.

Fix: Add granular media permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

Then rebuild:

npx react-native run-android

❌ Video playback shows black screen

Expected behavior: The CLI adapter shows video thumbnails only. Tapping opens the video in the device's default player (not in-app).

If you need in-app video playback: Use the Expo adapter instead:

npm uninstall @contegris/rn-intellicon-chat-sdk-cli
npm install @contegris/rn-intellicon-chat-sdk-expo

❌ Upload fails with "Network request failed"

Possible causes:

1. File too large (exceeds limits)
2. Network connectivity issue
3. Server-side upload disabled
4. iOS App Transport Security blocking HTTP

Debug steps:

1. Enable logging: <Chat showLogToggle={true} />
2. Check file size
3. Verify network connectivity
4. For iOS HTTP (not HTTPS) servers, add to Info.plist:

   <key>NSAppTransportSecurity</key>
   <dict>
     <key>NSAllowsArbitraryLoads</key>
     <true/>
   </dict>

❌ Document picker shows "No app can perform this action"

Cause: No app installed to handle the file type.

Expected behavior: This is normal on emulators or devices without file manager apps.

Fix: Test on a real device with file manager installed.

❌ Audio recording permission denied on iOS even after granting

Cause: iOS caches permission state. Need to reset.

Fix:

1. Delete app from device/simulator
2. Rebuild: npx react-native run-ios
3. Grant permission when prompted

Build Issues

❌ iOS build fails with "Command PhaseScriptExecution failed with a nonzero exit code"

Cause: CocoaPods or build script issue.

Fix:

cd ios
rm -rf Pods Podfile.lock build
pod install
cd ..
npx react-native run-ios

❌ Android build fails with "Execution failed for task ':app:mergeDebugResources'"

Cause: Resource conflict or Gradle cache corruption.

Fix:

cd android
./gradlew clean
rm -rf .gradle app/build
cd ..
npx react-native run-android

❌ Metro bundler error: "Unable to resolve module @babel/runtime/helpers/interopRequireDefault"

Cause: Node modules cache corruption.

Fix:

rm -rf node_modules package-lock.json
npm install
npm start -- --reset-cache

❌ iOS build fails with "library not found for -lDoubleConversion"

Cause: Xcode build cache issue.

Fix:

1. Open ios/YourApp.xcworkspace in Xcode
2. Product → Clean Build Folder (Shift+Cmd+K)
3. Close Xcode
4. npx react-native run-ios

Common Mistakes

1. Not Requesting Permissions on Android

Wrong:

// Assume permissions are granted ❌
<Chat user={user} config={config} />

Correct:

import { PermissionsAndroid } from 'react-native';

useEffect(() => {
  PermissionsAndroid.requestMultiple([
    PermissionsAndroid.PERMISSIONS.CAMERA,
    PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
  ]);
}, []);

<Chat user={user} config={config} />

2. Forgetting to Run pod install After Installing (iOS)

Wrong:

npm install @contegris/rn-intellicon-chat-sdk-cli
npx react-native run-ios  # ❌ Pods not updated

Correct:

npm install @contegris/rn-intellicon-chat-sdk-cli
cd ios && pod install && cd ..
npx react-native run-ios

3. Missing iOS Permissions in Info.plist

Wrong:

<!-- No permission descriptions ❌ -->

Correct:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs microphone access to record voice messages.</string>
<key>NSCameraUsageDescription</key>
<string>This app needs camera access to take photos for chat.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photo library access to send images in chat.</string>

4. Using Legacy Android Permissions on Android 13+

Wrong (Android 13+):

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Correct (Android 13+):

<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />

5. Not Wrapping in SafeAreaView

Wrong:

<View style={{ flex: 1 }}>
  <Chat user={user} config={config} />
</View>

Correct:

import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
  <Chat user={user} config={config} />
</SafeAreaView>

Dependencies

Bundled (installed automatically)

| Package | Version | Why | |---------|---------|-----| | @contegris/rn-intellicon-chat-sdk | ^1.0.9 | Core SDK (chat engine, types, theme) |

Peer Dependencies (you must install)

| Package | Min Version | Why | |---------|-------------|-----| | react | >=18 | React runtime | | react-native | >=0.74 | React Native runtime | | @react-native-async-storage/async-storage | >=1.23.1 | Persistent storage | | react-native-safe-area-context | >=4.0.0 | Safe area insets | | react-native-svg | >=15.0.0 | SVG support for icons | | lucide-react-native | >=0.395.0 | Icons | | react-native-image-picker | >=8.0.0 | Camera/gallery access | | react-native-video | >=6.0.0 | Video thumbnails | | @react-native-documents/picker | >=12.0.0 | Document picker | | react-native-fs | >=2.20.0 | File caching | | react-native-permissions | >=5.0.0 | Permission handling |

API Reference

Chat Component Props

interface ChatProps {
  user: User;
  config: Config;
  customData?: Record<string, unknown>;
  theme?: ChatTheme;
  downloadFile?: (params: { url: string; stopLoading: () => void; type: 'image' | 'video' | 'document'; fileName?: string }) => void;
  onFeedbackSubmit?: () => void;
  onPerformanceReport?: (report: PerformanceReport) => void;
  showLogToggle?: boolean;
  keyboardVerticalOffset?: number;
  goBack?: () => void;
}

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | user | User | ✅ Yes | N/A | User identification object | | config | Config | ✅ Yes | N/A | Server configuration | | customData | Record<string, unknown> | ❌ No | undefined | Arbitrary metadata sent to server | | theme | ChatTheme | ❌ No | DEFAULT_CHAT_THEME | Visual customization (50+ tokens) | | downloadFile | (params: { url: string; stopLoading: () => void; type: 'image' \| 'video' \| 'document'; fileName?: string }) => void | ❌ No | undefined | Custom handler for media downloads (image, video, document) | | onFeedbackSubmit | () => void | ❌ No | undefined | Called after the user submits feedback/rating. Use to navigate away or close the chat screen. | | onPerformanceReport | (report: PerformanceReport) => void | ❌ No | undefined | Callback for APM integration | | showLogToggle | boolean | ❌ No | false | Show debug toggle button (dev only) | | keyboardVerticalOffset | number | ❌ No | 0 | Keyboard vertical offset for KeyboardAvoidingView on iOS | | goBack | () => void | ❌ No | undefined | When provided, renders a back arrow in the AppBar. Use to navigate back (e.g., navigation.goBack()). |

useChat Hook

const {
  messages,
  isLoading,
  sendMessage,
  sendMediaMessage,  // CLI-specific: supports images, videos, audio, documents
  cancelUpload,
  retryUpload,
  // ... more
} = useChat(user, config, customData);

Migration Guide

From Expo Adapter to CLI Adapter

If you're migrating from Expo to React Native CLI:

Step 1: Uninstall Expo packages:

npm uninstall @contegris/rn-intellicon-chat-sdk-expo expo-audio expo-document-picker expo-file-system expo-image-picker expo-video

Step 2: Install CLI package and its peer dependencies (@contegris/rn-intellicon-chat-sdk is included automatically):

npm install @contegris/rn-intellicon-chat-sdk-cli react-native-image-picker react-native-video @react-native-documents/picker react-native-fs react-native-permissions

Step 3: Update imports:

// Before
import { Chat } from '@contegris/rn-intellicon-chat-sdk-expo';

// After
import { Chat } from '@contegris/rn-intellicon-chat-sdk-cli';

Step 4: iOS: Install CocoaPods:

cd ios && pod install && cd ..

Step 5: Rebuild:

npx react-native run-ios
npx react-native run-android

Platform Support

| Platform | Min Version | Status | |----------|-------------|--------| | iOS | 13.0+ | ✅ Fully supported | | Android | 8.0+ (API 26) | ✅ Fully supported | | React Native | 0.74+ | ✅ Fully supported | | New Architecture | N/A | ✅ Compatible |

Examples

See IMPLEMENTATION_GUIDE.md for complete examples.

Links

• Main Documentation: Monorepo README
• Implementation Guide: IMPLEMENTATION_GUIDE.md
• Core Package: @contegris/rn-intellicon-chat-sdk
• GitHub: https://github.com/contegris/rn-intellicon-chat-sdk
• npm: https://www.npmjs.com/package/@contegris/rn-intellicon-chat-sdk-cli

License

MIT © Contegris