> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Overview of Overview in CometChat.

The CometChat React Native UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/42a10791-1623200263-ba45185b405d979bf1127ff15d3990e1.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=e629196d603a169ef7aab70f26aea05b" width="1033" height="541" data-path="images/42a10791-1623200263-ba45185b405d979bf1127ff15d3990e1.png" />
</Frame>

The UI Kit’s customizable UI components simplify the process of integrating text chat and voice/video calling features to your website or mobile application in a few minutes.

<CardGroup>
  <Card title="I want to checkout React Native Chat UI Kit.">
    Follow the steps mentioned in the `README.md` file.

    Kindly, click on below button to download our React Native Chat UI Kit..

    [React Native Chat UI Kit](https://github.com/cometchat/cometchat-uikit-react-native/tree/v2-legacy)

    [View on Github](https://github.com/cometchat/cometchat-uikit-react-native/tree/v2-legacy)
  </Card>

  <Card title="I want to explore the sample app">
    Kindly, click on below button to download our React Native Chat Sample App.

    [React Native Sample App](https://github.com/cometchat/cometchat-uikit-react-native/tree/v2-legacy)

    [View on Github](https://github.com/cometchat/cometchat-uikit-react-native/tree/v2-legacy)
  </Card>
</CardGroup>

## Prerequisites

Before you begin, ensure you have met the following requirements:

1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
2. [Node](https://nodejs.org/en/)
3. [npm](https://www.npmjs.com/get-npm)
4. [React-Native](https://reactnative.dev/docs/environment-setup)

## Installing React Native UI Kit

### Setup

1. Register on CometChat

   * To install React Native UI Kit, you need to first register on the CometChat Dashboard. Click [here](https://app.cometchat.com/) to Sign Up.

2. Get your application keys

   * Create a new app.
   * Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.

3. Add the CometChat dependency

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install @cometchat-pro/react-native-chat@2.4.0 --save
    ```
  </Tab>
</Tabs>

Other required dependencies These packages help make the ui-kit smooth and functioning

```js theme={null}
react-native-sound
react-native-vector-icons 
react-native-elements 
react-native-fast-image
react-native-image-picker
react-native-document-picker
react-native-gesture-handler
react-native-reanimated
reanimated-bottom-sheet
react-native-video
react-native-video-controls
@react-navigation_bottom-tabs
@react-navigation_native
@react-navigation_stack
@react-native-picker_picker
react-native-async-storage_async-storage
@cometchat-pro_react-native-calls
rn-fetch-blob
react-native-autolink
react-native-screens
emoji-mart-native
react-native-keep-awake
react-native-safe-area-context
react-native-webview
react-native-swipe-list-view
```

### Configure CometChat inside your app

* Initialize CometChat 🌟

The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the created() method of the Application class.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import {CometChat} from '@cometchat-pro/react-native-chat';

    const appID = 'APP_ID';
    const region = 'REGION';
    const appSetting = new CometChat.AppSettingsBuilder()
      .subscribePresenceForAllUsers()
      .setRegion(region)
      .build();
    CometChat.init(appID, appSetting).then(
      () => {
        console.log('Initialization completed successfully');
        // You can now call login function.
      },
      (error) => {
        console.log('Initialization failed with error:', error);
        // Check the reason for error and take appropriate action.
      },
    );
    ```
  </Tab>
</Tabs>

<Note>
  Replace APP\_ID and REGION with your CometChat App ID and Region in the above code
</Note>

* Login your user 👤

This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import {CometChat} from '@cometchat-pro/react-native-chat';

    const authKey = 'AUTH_KEY';
    const uid = 'cometchat-uid-1';

    CometChat.login(uid, authKey).then(
      (user) => {
        console.log('Login Successful:', { user });
      },
      (error) => {
        console.log('Login failed with exception:', { error });
      },
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Replace AUTH\_KEY with your CometChat Auth Key in the above code.
</Warning>

<Note>
  We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.

  We have used uid cometchat-uid-1 as an example here. You can create a User from CometChat Dashboard as well.
</Note>

### Add UI Kit to your project

* Clone this repository.

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    https://github.com/cometchat-pro/cometchat-pro-react-native-ui-kit.git
    ```
  </Tab>
</Tabs>

* Copy the `cometchat-pro-react-native-ui-kit` folder to your source folder.
* Copy all the peer dependencies from package.json into your project's package.json and install them using npm install

### Launch CometChat

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In CometChatUI all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/eaf801a0-1623200266-09df02b8e15e35ecb0cd143040d7cb90.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=cb851f34dea61c1e623aedbd5e91bdfa" width="1659" height="1784" data-path="images/eaf801a0-1623200266-09df02b8e15e35ecb0cd143040d7cb90.png" />
</Frame>

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import React from 'react';
    import {View} from 'react-native';
    import {CometChatUI} from '../cometchat-pro-react-native-ui-kit';

    export default function CometChatUIView() {
      return (
        <View style={{flex: 1}}>
          <CometChatUI />
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

## Checkout our sample app

Visit our [React Native App repo](https://github.com/cometchat-pro/react-native-chat-app) to run the React Native sample app.