> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quickblox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Learn how to install QuickBlox SDK and send your first message.

QuickBlox SDK helps you implement real-time chat, video chat, and push notifications to your app. You can fully concentrate on your mobile app development.

## Start with sample apps

Choose the code sample below to jump-start the development. We use GitHub repositories to make it easy to explore, copy, and modify our code samples. The guide on how to launch and configure the sample app is on GitHub.

<CardGroup>
  <Card title="React Native Chat Sample App" icon="react">
    <a className="inline-link" href="https://github.com/QuickBlox/quickblox-react-native-samples/tree/master/chat-sample">
      <Icon icon="github" /> View on GitHub
    </a>

    <br />

    <a className="inline-link" href="/sdks/react-native-chat">
      <Icon icon="book" />  Documentation
    </a>
  </Card>

  <Card title="React Native Video Calling Sample App" icon="react">
    <a className="inline-link" href="https://github.com/QuickBlox/quickblox-react-native-samples/tree/master/webrtc-sample">
      <Icon icon="github" /> View on GitHub
    </a>

    <br />

    <a className="inline-link" href="/sdks/react-native-video-calling">
      <Icon icon="book" /> Documentation
    </a>
  </Card>
</CardGroup>

For more samples, head to our [Code Samples](/code-samples/code-samples) page. These sample apps are available on GitHub so feel free to browse them there.

## Get application credentials

QuickBlox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below:

1. Register a new account following [this link](https://admin.quickblox.com/signup). Type in your email and password to sign in. You can also sign in with your Google or GitHub accounts.
2. Create the app by clicking the **New app** button.
3. Configure the app. Type in the information about your organization into corresponding fields and click **Add** button.
4. Go to **Dashboard => *YOUR\_APP* => Overview**  section and copy your **Application ID**, **Authorization Key**, **Authorization Secret**, and **Account Key** .

## Requirements

The minimum requirements for QuickBlox React Native SDK are:

* iOS 12.0
* Android (minimum version 5.0, API 21)
* React Native (minimum version 0.60)

## Install QuickBlox SDK into your app

<Note>
  To manage project dependencies:

  * [Node.js](https://nodejs.org/en/) and [npm](https://docs.npmjs.com/getting-started) must be installed
  * [CocoaPods](https://cocoapods.org) must be installed for iOS.
</Note>

To connect QuickBlox to your app just add it into your project's dependencies by running following code sample in terminal (in your react-native app):

```Bash Bash theme={null}
npm install quickblox-react-native-sdk
```

iOS and Android have different dependencies systems. For that reason, you need to install dependencies in your iOS project.
Navigate to **ios/** folder in the root directory of the project and enter the following code snippet.

```Bash Bash theme={null}
pod install
```

<Warning>
  Make sure that iOS version in your project’s **Podfile** is **not lower than** 12.0 when installing SDK. Otherwise, CocoaPods will fail to find a compatible version of **QuickBlox React Native SDK**.
</Warning>

#### ⚠️ Android – Breaking Change (from v0.12.0 and above)

Starting from **v0.12.0**, the SDK **no longer manages permissions** required for calling functionality on Android.

If your app uses calling features, you must **manually declare** the necessary permissions in your app’s `AndroidManifest.xml` file.

<Note>
  Kindly ensure you're modifying the main `AndroidManifest.xml` file located at the application level — not a test or variant manifest.
</Note>

```xml XML theme={null}
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <!-- Permissions required for QuickBlox calling functionality -->
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_CAMERA" />
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
    <!-- other manifest entries -->
</manifest>
```

## Send your first message

### Initialize QuickBlox SDK

Initialize the SDK with your application credentials. Set the `appId`, `authKey`, `authSecret`, `accountKey` properties of the `appSettings` object. Call the `init()` method and pass the `appSettings` as an argument to it.

```JavaScript JavaScript theme={null}
const appSettings = {
  appId: '76730',
  authKey: 'XydaWcf8OO9xhGT',
  authSecret: 'iiohfdija792hjt',
  accountKey: '7yvNe17TnjNUqDoPwfqp',
};

QB.settings
  .init(appSettings)
  .then(function () {
    // SDK initialized successfully
  })
  .catch(function (e) {
    // Some error occurred, look at the exception message for more details
  });
```

<Warning>
  You must initialize SDK before calling any methods through the SDK, except for the `init()` method. If you attempt to call a method without initializing SDK previously, the error will be returned.
</Warning>

<Warning>
  **Security**

  It's not recommended to keep your **authKey** and **authSecret** inside an application in production mode, instead of this, the best approach will be to store them on your backend and initialize QuickBlox SDK with applicationId and acountKey only. More details you can find in [Initialize QuickBlox SDK without Authorization Key and Secret](/sdks/react-native-setup#initialize-quickblox-sdk-without-authorization-key-and-secret) section.
</Warning>

### Authorize user

Now, it is time to log in with the user. To get it done, set the `login` and `password` properties of the `loginParams` object. Call the `login()` method and pass the `loginParams` as an argument to it using the code snippet below.

```JavaScript JavaScript theme={null}
const loginParams = {
  login: 'yourlogin',
  password: 'yourpassword'
};

QB.auth
  .login(loginParams)
  .then(function (info) {
    // signed in successfully, handle info as necessary
    // info.user - user information
    // info.session - current session
  })
  .catch(function (e) {
    // handle error
  });
```

### Connect to chat

Having authorized a user, you can proceed with connecting to the chat server to start using Chat module functionality. Set the `userId` and `password` properties of the `connectParams` object. Call the `connect()` method and pass the `connectParams` as an argument to it.

```JavaScript JavaScript theme={null}
const connectParams = {
  userId: 12345,
  password: 'passw0rd!'
};

QB.chat
  .connect(connectParams)
  .then(function () {
    // connected successfully
  })
  .catch(function (e) {
    // some error occurred
  });
```

### Create dialog

QuickBlox provides three types of dialogs: **1-1 dialog**, **group dialog**, and **public dialog**. Learn more about dialogs [here](/sdks/react-native-chat-dialogs#create-dialog).

Let’s create a simple **1-1 dialog**. Set the `type` and `occupantsIds` properties of the `createDialogParams` object. Call the `createDialog()` method and pass the `createDialogParams` as an argument to it.

```JavaScript JavaScript theme={null}
const createDialogParams = {
  type: QB.chat.DIALOG_TYPE.CHAT,
  occupantsIds: [12345]
};

QB.chat
  .createDialog(createDialogParams)
  .then(function (dialog) {
    // handle as necessary, i.e.
    // subscribe to chat events, typing events, etc.
  })
  .catch(function (e) {
    // handle error
  });
```

### Subscribe to receive messages

QuickBlox SDK emits events to notify about chat events. Thus, when a message has been received, a user receives the event from SDK about a new incoming message. To process events, you need to provide an event handler that SDK will call. See the code snippet below.

```JavaScript JavaScript theme={null}
import { NativeEventEmitter } from 'react-native'

const eventHandler = (event) => {
  const { type, payload } = event
  // type - type of the event (string)
  // payload - new message (object)
}

const emitter = new NativeEventEmitter(QB.chat)
emitter.addListener(
  QB.chat.EVENT_TYPE.MESSAGE.RECEIVED_NEW_MESSAGE,
  eventHandler
)
```

### Send message

To send a message, set the `dialogId` and `body` properties of the `message` object. Call the `sendMessage()` method and pass the `message` as an argument.

```JavaScript JavaScript theme={null}
const message = {
  dialogId: 'dsfsd934329hjhkda98793j2',
  body: 'Hey there!',
  saveToHistory: true
};

QB.chat
  .sendMessage(message)
  .then(function () { /* send successfully */ })
  .catch(function (e) { /* handle error */ })
```

<Note>
  Set the `saveToHistory` parameter if you want this message to be saved in chat history.
</Note>