🚧

This is our new documentation for beta version of QuickBlox React Native SDK. Please contact our Customer Support Team to provide your feedback, suggestions, and requests to improve this page.

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. Our SDK provides you with many helpful methods to build a chat app with diverse features.

This Quick Start page will help newcomers and even our veteran users familiarize themselves with basic SDK functionalities and logic. It lets you go through the easy steps of implementing QuickBlox in your app.

Start with sample apps

If you are just starting your app and developing it from scratch, we recommend to use our sample apps. These code samples are ready-to-go apps with appropriate functionality and simple enough that even novice developers will be able to understand them.

You can clone the repository using the link below:

git clone https://github.com/QuickBlox/quickblox-react-native-samples.git

To run a code sample, follow the steps below:

1. Install Node.js and npm if you don’t have it.
2. Install CocoaPods (for iOS project only) if you don’t have it.
3. Setup the React Native environment if you don’t have it.
4. Clone repository with the sample.
5. Open a terminal and enter the command below in root of sample directory

npm install

extra step for iOS

cd ios
pod install

6. Create a new app in the Dashboard and get appId ,authKey, authSecret, accountKey. Put these values in file src/QBConfig.js.

export default {
  appId: xxxxxxx,
  authKey: 'xxxxxxxxxxxxxxx',
  authSecret: 'xxxxxxxxxxxxx',
  accountKey: 'xxxxxxxxxxxx',
  apiEndpoint: '',
  chatEndpoint: '',
}

7. Run the code sample.

react-native run-android

OR

react-native run-ios

Create a new app in the Dashboard

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. Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
2. Create the app clicking 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 .

Install QuickBlox SDK into your app

📘

Note

To manage project dependencies:

- Node.js and npm must be installed
- CocoaPods must be installed for iOS.

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):

npm install quickblox-react-native-sdk --save

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

pod install

🚧

Pay attention

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

Send your first message

Initialize QuickBlox SDK

Initialize the framework with your application credentials. Pass appId, authKey, authSecret, accountKey to the init() method using the code snippet below. As a result, your application details are stored in the server database and can be subsequently identified on the server.

🚧

Pay attention

You must initialize SDK before calling any methods through the SDK, except for the init() method. If you attempt to call a method without connecting, the error is returned.

const appSettings = {
  appId: '',
  authKey: '',
  authSecret: '',
  accountKey: '',
  apiEndpoint: '', // optional
  chatEndpoint: '' // optional
};

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

📘

Note

apiEndpoint and chatEndpoint are optional parameters that should set if you're on Enterprise Plan.

Authorize user

In order to use the abilities of QuickBlox SDK, you need to authorize your app on the server, log in to your account and create a session. To get it all done call login() method and pass login and password parameters to it using the code snippet below.

QB.auth
  .login({
    login: 'yourlogin',
    password: 'yourpassword'
  })
  .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

To connect to Chat server, use connect() method.

QB.chat
  .connect({
    userId: 12345,
    password: 'passw0rd!'
  })
  .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.

Let’s create 1-1 dialog. Call createDialog() method and pass QB.chat.DIALOG_TYPE.CHAT parameter as a dialog type to it. QB.chat.DIALOG_TYPE.CHAT parameter allows specifying that two occupants are going to participate in the dialog.

QB.chat
  .createDialog({
    type: QB.chat.DIALOG_TYPE.CHAT,
    occupantsIds: [12345]
  })
  .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 that something happened. 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.

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

When a dialog is created, a user can send a message. To create and send your first message, call sendMessage() method and specify the dialogId and body parameters to it. Pass saveToHistory parameter if you want this message to be saved in chat history that is stored forever.

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

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