> ## 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.

<Note>
  Introducing CometChat UIKit

  V4 UI kits offer modular design, extended functionality & customization for a tailored chat experience. Check out our new UIKits [here](/ui-kit/react-native/overview).
</Note>

The CometChat React Native UI Kit cuts development efforts significantly when integrating text, voice and video messaging into your React Native chat application.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5ad52614-1631680113-24cd0e202c4dc7dc1295083649ede826.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=545edaff3d55174533a0a8df31f514ee" width="1033" height="541" data-path="images/5ad52614-1631680113-24cd0e202c4dc7dc1295083649ede826.png" />
</Frame>

The React Native UI Kit’s customizable React Native chat 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/v3)

    [View on Github](https://github.com/cometchat/cometchat-uikit-react-native/tree/v3)
  </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/v3)

    [View on Github](https://github.com/cometchat/cometchat-uikit-react-native/tree/v3)
  </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 the React Native Chat UI Kit

<Warning>
  Important

  Please follow the steps provided in the [Key Concepts](/ui-kit/react-native/v3/key-concepts) to create V3 apps before you proceed.
</Warning>

### 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@3.0.2 --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 React Native 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>

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

* 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 the React Native chat UI components 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 -b v3
    ```
  </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 React Native Chat 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/fxK75AS6FzDL1Oqo/images/b7f73594-1631680116-89a9cc71e66f5ab0f8dfe6ca7159a638.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=d0ed346353ff80068671a3b9de06b08a" width="1659" height="1784" data-path="images/b7f73594-1631680116-89a9cc71e66f5ab0f8dfe6ca7159a638.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>

## Check out our React Native sample app

Visit our [React Native repo](https://github.com/cometchat-pro/react-native-chat-app/tree/v3) to run a sample app featuring these React Native chat components.