CometChat React Native UI Kit

To integrate the UI Kit into your project, follow these steps:

1. Register: Create an account at the CometChat Dashboard.
2. Create an App: Log in to the dashboard and create a new application.
3. Retrieve Credentials: Obtain your App ID and Auth Key from the dashboard. These are required for initialization.
4. Learn Fundamentals: Review CometChat's Key Concepts to understand the underlying architecture.
5. Integrate: Follow the official Integration Steps to add the UI Kit to your iOS or Android application.

The Sample App is a reference implementation demonstrating how to integrate the CometChat React Native UI Kit for real-time messaging and voice/video calling.

Prerequisites

• CometChat Account: You need an App ID, Region, and Auth Key from the CometChat Dashboard.
• Node.js: Version 18 or higher.
• React Native: Version 0.77 or later.

iOS Requirements

• Xcode and CocoaPods installed.
• iOS device or emulator running iOS 12.0 or above.
• Configured provisioning profile in Xcode for physical devices.

Android Requirements

• Android Studio installed.
• Android device or emulator running Android 5.0 or above.

Before running the sample app, ensure your environment meets the following requirements:

CometChat Requirements:

• A CometChat account with an App ID, Region, and Auth Key.

Development Environment:

• Node.js: version 18 or higher.
• React Native: version 0.77 or later.

iOS Requirements:

• Xcode and CocoaPods installed.
• An iOS device or emulator running iOS 12.0 or above.
• A configured provisioning profile in Xcode for physical device testing.

Android Requirements:

• Android Studio installed.
• An Android device or emulator running Android 5.0 or above.

This sample application demonstrates how to integrate the CometChat React Native UI Kit into an Expo project to implement real-time messaging and voice/video calling.

Important Compatibility Note: The React Native UI Kit is not compatible with Expo Go because it requires custom native modules. You must use Development Builds (custom dev clients) to run the UI Kit within an Expo environment.

# 1. Clone the repository
git clone https://github.com/cometchat/cometchat-uikit-react-native.git

# 2. Navigate to the Expo sample app directory
cd examples/SampleAppExpo

# 3. Install dependencies
npm install

# 4. Generate native Android and iOS project folders (required for custom dev client)
npx expo prebuild

# 5. Run the app
npx expo run:android
npx expo run:ios

Before integrating the UI Kit, ensure your development environment meets the following requirements:

General

• Node.js: version 18 or higher
• React Native: version 0.77 or later

iOS Development

• Xcode
• CocoaPods
• iOS device or emulator running iOS 12.0 or above

Android Development

• Android Studio
• Android device or emulator running Android 5.0 or above

To connect the sample app to your CometChat instance, you must provide your application credentials in the AppConstants.tsx file.

1. Locate the file at examples/SampleAppExpo/src/utils/AppConstants.tsx.
2. Update the AppConstants object with your appId, authKey, and region obtained from the CometChat Dashboard.

export const AppConstants = {
    appId: 'YOUR_APP_ID',
    authKey: 'YOUR_AUTH_KEY',
    region: 'REGION',
    //other properties
}

To enable push notifications in the sample app, follow these platform-specific steps:

Android (FCM)

1. Create a project in the Firebase Console.
2. Add your Android app to the Firebase project.
3. Download the google-services.json file.
4. Place google-services.json in the SampleAppWithPushNotification/android/app directory.

iOS (APNs)

1. Follow the APNs integration guide to add credentials.

Finalizing Provider IDs

After completing the platform setup, you must update the fcmProviderId and apnProviderId in the AppConstants object within your project code to link the CometChat notification service with your providers.

export const AppConstants = {
   fcmProviderId: '',
   apnProviderId: '',
}

Follow these steps to clone, configure, and run the Sample App locally.

1. Clone the repository:

   git clone https://github.com/cometchat/cometchat-uikit-react-native.git

2. Navigate to the app directory:

   cd examples/SampleApp

3. Install dependencies:

   npm install

4. Configure CometChat credentials (See 'Configure CometChat credentials' for details).
5. Install iOS pods (iOS only):

   cd ios
   pod install

6. Run the application:

   npm start
   # In separate terminals:
   npm run android
   npm run ios

git clone https://github.com/cometchat/cometchat-uikit-react-native.git
cd examples/SampleApp
npm install
# For iOS
cd ios && pod install
# Run
cd ..
npm start
npm run android
npm run ios

If you discover a security vulnerability in CometChat Pro, please follow the Responsible Disclosure Policy. To ensure the safety of the community, keep potential vulnerabilities confidential until they are confirmed and fixed.

To report a security-related issue, contact the CometChat Pro security team directly via email.

security@cometchat.com