🚧

This is our 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.

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.

For more samples, head to our 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. 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 13.0
• Android (minimum version 5.0, API 21)
• React Native (minimum version 0.60)

Install QuickBlox SDK into your app

📘

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

🚧

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.

🚧

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 occurred, look at the exception message for more details
  });

📘

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 the 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

Having authorized a user, it is time to connect to the Chat server to start using Chat module functionality. Call the connect() method and pass userId and password to it.

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 */ })